【Android Developers Training】 69. 视图切换

系统 2519 0

注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好。

原文链接: http://developer.android.com/training/animation/crossfade.html


淡入淡出动画(也称作溶解效果):淡出一个组件并将另一个UI组件淡入的效果。淡入淡出效果一般来说都非常的短小,但是能提供一种屏幕切换的流畅转换。如果你不使用淡入淡出效果,屏幕切换回显得很突兀。

这里是一个淡入淡出的例子,它从一个进程指示器过度到文本内容。

淡入淡出动画

如果你希望略过这部分内容直接看代码样例,可以直接 下载 样例代码,然后选择淡入淡出动画的例子。下面的文件是实现代码:

  • src/CrossfadeActivity.java
  • layout/activity_crossfade.xml
  • menu/activity_crossfade.xml

一). 创建视图

创建两个你希望实现淡入淡出的视图。下面的例子创建了一个进度指示器和一个可滑动的文本框:

      
        <
      
      
        FrameLayout 
      
      
        xmlns:android
      
      
        ="http://schemas.android.com/apk/res/android"
      
      
        

    android:layout_width
      
      
        ="match_parent"
      
      
        

    android:layout_height
      
      
        ="match_parent"
      
      
        >
      
      
        <
      
      
        ScrollView 
      
      
        xmlns:android
      
      
        ="http://schemas.android.com/apk/res/android"
      
      
        

        android:id
      
      
        ="@+id/content"
      
      
        

        android:layout_width
      
      
        ="match_parent"
      
      
        

        android:layout_height
      
      
        ="match_parent"
      
      
        >
      
      
        <
      
      
        TextView 
      
      
        style
      
      
        ="?android:textAppearanceMedium"
      
      
        

            android:lineSpacingMultiplier
      
      
        ="1.2"
      
      
        

            android:layout_width
      
      
        ="match_parent"
      
      
        

            android:layout_height
      
      
        ="wrap_content"
      
      
        

            android:text
      
      
        ="@string/lorem_ipsum"
      
      
        

            android:padding
      
      
        ="16dp"
      
      
        />
      
      
        </
      
      
        ScrollView
      
      
        >
      
      
        <
      
      
        ProgressBar 
      
      
        android:id
      
      
        ="@+id/loading_spinner"
      
      
        

        style
      
      
        ="?android:progressBarStyleLarge"
      
      
        

        android:layout_width
      
      
        ="wrap_content"
      
      
        

        android:layout_height
      
      
        ="wrap_content"
      
      
        

        android:layout_gravity
      
      
        ="center"
      
      
        />
      
      
        </
      
      
        FrameLayout
      
      
        >
      
    

二). 设置动画

要设置动画的话:

创建你希望实现淡入淡出的视图的成员变量。当在执行动画期间改变视图时,你需要这些引用。

对于淡入的视图,将它的可视性( visibility )设置为 GONE 。这回阻止这个视图占据布局空间,然后再计算布局时将它省略,加速处理的速度。

缓存 config_shortAnimTime 这一系统属性到一个成员变量中。这个属性定义了一个标准的动画持续的一个较短的时间。这个持续的时间对于细微的动画效果或者那些频繁出现的动画是比较合适的。你也可以使用 config_longAnimTime config_mediumAnimTime

这里的一个例子使用了上述的布局文件作为activity的布局:

      
        public
      
      
        class
      
       CrossfadeActivity 
      
        extends
      
      
         Activity {



    
      
      
        private
      
      
         View mContentView;

    
      
      
        private
      
      
         View mLoadingView;

    
      
      
        private
      
      
        int
      
      
         mShortAnimationDuration;



    ...



    @Override

    
      
      
        protected
      
      
        void
      
      
         onCreate(Bundle savedInstanceState) {

        
      
      
        super
      
      
        .onCreate(savedInstanceState);

        setContentView(R.layout.activity_crossfade);



        mContentView 
      
      =
      
         findViewById(R.id.content);

        mLoadingView 
      
      =
      
         findViewById(R.id.loading_spinner);



        
      
      
        //
      
      
         Initially hide the content view.
      
      
                mContentView.setVisibility(View.GONE);



        
      
      
        //
      
      
         Retrieve and cache the system's default "short" animation time.
      
      

        mShortAnimationDuration =
      
         getResources().getInteger(

                android.R.integer.config_shortAnimTime);

    }
      
    

三). 淡入淡出视图

现在视图已经配置好了,根据下面的步骤实现淡入淡出:

  • 对于淡入的视图,将alpha值设置为0,将可视性设置为 VISIBLE (记住在之前它被预设为 GONE ),这样就使得这个视图边的可见但是是完全透明的。
  • 对于淡入的视图,将它的alpha动态地从0变化到1。同时,对于淡出的视图, 将它的alpha动态地从1变化到0。
  • 在一个 Animator.AnimatorListener 中使用 onAnimationEnd() ,将淡出的视图的可视性设置为 GONE 。虽然它的alpha的值已经变成0了,但是将视图的可视性设置为 GONE 可以阻止它占据布局空间,并将它略出布局的计算过程,以此来提高程序的执行性能。

下面的代码是一个例子:

      
        private
      
      
         View mContentView;


      
      
        private
      
      
         View mLoadingView;


      
      
        private
      
      
        int
      
      
         mShortAnimationDuration;



...




      
      
        private
      
      
        void
      
      
         crossfade() {



    
      
      
        //
      
      
         Set the content view to 0% opacity but visible, so that it is visible

    
      
      
        //
      
      
         (but fully transparent) during the animation.
      
      
            mContentView.setAlpha(0f);

    mContentView.setVisibility(View.VISIBLE);



    
      
      
        //
      
      
         Animate the content view to 100% opacity, and clear any animation

    
      
      
        //
      
      
         listener set on the view.
      
      
            mContentView.animate()

            .alpha(1f)

            .setDuration(mShortAnimationDuration)

            .setListener(
      
      
        null
      
      
        );



    
      
      
        //
      
      
         Animate the loading view to 0% opacity. After the animation ends,

    
      
      
        //
      
      
         set its visibility to GONE as an optimization step (it won't

    
      
      
        //
      
      
         participate in layout passes, etc.)
      
      
            mLoadingView.animate()

            .alpha(0f)

            .setDuration(mShortAnimationDuration)

            .setListener(
      
      
        new
      
      
         AnimatorListenerAdapter() {

                @Override

                
      
      
        public
      
      
        void
      
      
         onAnimationEnd(Animator animation) {

                    mLoadingView.setVisibility(View.GONE);

                }

            });

}
      
    

【Android Developers Training】 69. 视图切换的淡入淡出效果


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论