RxJava实践之打造酷炫启动页

之前注意到coding APP启动页很是酷炫，今天我们使用RxJava和属性动画模仿实现其效果。

一、新建启动页WelcomeActivity

注意，我们这里让WelcomeActivity继承Activity不要继承AppCompatActivity，因为AppCompatActivity会默认去加载主题，造成卡顿

1.  public class WelcomeActivity extends Activity { 
2.  
3.     @Override 
4.     protected void onCreate(Bundle savedInstanceState) { 
5.         super.onCreate(savedInstanceState); 
6.         setContentView(R.layout.activity_welcome); 
7.     } 
8. } 

二、定义引导页布局activity_welcome.xml

不多说直接上代码：

1. <?xml version="1.0" encoding="utf-8"?> 
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
3.     android:layout_width="match_parent" 
4.     android:layout_height="match_parent"> 
5.  
6.     <ImageView 
7.         android:id="@+id/iv_entry" 
8.         android:layout_width="match_parent" 
9.         android:layout_height="match_parent" 
10.         android:scaleType="fitXY" 
11.         android:src="@drawable/welcomimg1"/> 
12.  
13.     <View 
14.         android:layout_width="match_parent" 
15.         android:layout_height="match_parent" 
16.         android:background="@drawable/welcomimg_bg"/> 
17.  
18.  
19.     <TextView 
20.         android:layout_width="match_parent" 
21.         android:layout_height="wrap_content" 
22.         android:layout_alignParentBottom="true" 
23.         android:layout_marginBottom="100dp" 
24.         android:gravity="center" 
25.         android:text="xialong" 
26.         android:textColor="@android:color/white" 
27.         android:textSize="23sp"/> 
28.  
29.     <ImageView 
30.         android:layout_width="wrap_content" 
31.         android:layout_height="wrap_content" 
32.         android:src="@mipmap/google_logo" 
33.         android:layout_alignParentBottom="true" 
34.         android:layout_marginBottom="60dp" 
35.         android:layout_centerInParent="true" 
36.         android:tint="@android:color/white" /> 
37. </RelativeLayout> 

这里我们用了相对布局，在ImageView上覆盖一个View，该View用渐变色背景welcomimg_bg.xml以暗化图片，welcomimg_bg.xml代码如下：

1. <?xml version="1.0" encoding="utf-8"?> 
2. <shape xmlns:android="http://schemas.android.com/apk/res/android"> 
3.  
4.     <gradient 
5.         android:angle="90" 
6.         android:startColor="@color/black" 
7.         android:endColor="@android:color/transparent" 
8.         /> 
9.  
10. </shape> 

其中startColor表示起始颜色，endColor表示结束颜色，angle=90 表示颜色从下往上渐变。

三、随机选取图片并使用RxJava启动动画

最后我们的WelcomeActivity.java长这样：

1. public class WelcomeActivity extends Activity { 
2.  
3.     @Bind(R.id.iv_entry) 
4.     ImageView mIVEntry; 
5.  
6.     private static final int ANIM_TIME = 2000; 
7.  
8.     private static final float SCALE_END = 1.15F; 
9.  
10.     private static final int[] Imgs={ 
11.             R.drawable.welcomimg1,R.drawable.welcomimg2, 
12.             R.drawable.welcomimg3,R.drawable.welcomimg4, 
13.             R.drawable.welcomimg5, R.drawable.welcomimg6, 
14.             R.drawable.welcomimg7,R.drawable.welcomimg8, 
15.             R.drawable.welcomimg9,R.drawable.welcomimg10, 
16.             R.drawable.welcomimg11,R.drawable.welcomimg12,}; 
17.  
18.     @Override 
19.     protected void onCreate(Bundle savedInstanceState) { 
20.         super.onCreate(savedInstanceState); 
21.         setContentView(R.layout.activity_welcome); 
22.         ButterKnife.bind(this); 
23.  
24.         Random random = new Random(SystemClock.elapsedRealtime());//SystemClock.elapsedRealtime() 从开机到现在的毫秒数（手机睡眠(sleep)的时间也包括在内） 
25.         mIVEntry.setImageResource(Imgs[random.nextInt(Imgs.length)]); 
26.  
27.         Observable.timer(1000, TimeUnit.MILLISECONDS) 
28.                 .observeOn(AndroidSchedulers.mainThread()) 
29.                 .subscribe(new Action1<Long>() 
30.                 { 
31.  
32.                     @Override 
33.                     public void call(Long aLong) 
34.                     { 
35.                         startAnim(); 
36.                     } 
37.                 }); 
38.     } 
39.  
40.  
41.     private void startAnim() { 
42.  
43.         ObjectAnimator animatorX = ObjectAnimator.ofFloat(mIVEntry, "scaleX", 1f, SCALE_END); 
44.         ObjectAnimator animatorY = ObjectAnimator.ofFloat(mIVEntry, "scaleY", 1f, SCALE_END); 
45.  
46.         AnimatorSet set = new AnimatorSet(); 
47.         set.setDuration(ANIM_TIME).play(animatorX).with(animatorY); 
48.         set.start(); 
49.  
50.         set.addListener(new AnimatorListenerAdapter() 
51.         { 
52.  
53.             @Override 
54.             public void onAnimationEnd(Animator animation) 
55.             { 
56.  
57.                 startActivity(new Intent(WelcomeActivity.this, MainActivity.class)); 
58.                 WelcomeActivity.this.finish(); 
59.             } 
60.         }); 
61.     } 
62. } 

这里的RxJava使用了timer操作符，它的意思是延迟执行某个操作，第一个参数表示延迟时间，第二个参数是时间单位。

好了，就酱。

需要完整代码可以戳这里代码传送门

1. #RxJava Android启动页 

作者：xialong

来源：51CTO