RxJava实践之打造酷炫启动页

移动开发 移动应用
WelcomeActivity继承Activity不要继承AppCompatActivity,因为AppCompatActivity会默认去加载主题,造成卡顿。

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

[[170939]]

一、新建启动页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.     } 

二、定义引导页布局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.     } 

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

好了,就酱。

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

  1. #RxJava Android启动页 
责任编辑:武晓燕 来源: Android猿博客
相关推荐

2009-08-08 08:53:49

Windows 7Direct 11图形图象

2020-01-18 15:02:48

技术研发指标

2023-01-31 10:23:00

CSS倒影效果

2015-11-23 17:19:12

中国外包网

2015-10-20 15:58:28

弹力菜单android源码

2017-08-18 10:31:12

PC技术分体式

2020-01-03 10:50:16

Python编程语言Mac电脑

2023-04-26 15:27:11

JavaScript技巧元素

2022-02-11 16:01:14

C语言技巧命令

2017-05-02 09:55:02

2009-06-04 15:48:11

SUSE Linux解密

2014-09-01 15:49:18

智能穿戴智能设备可穿戴设备

2017-07-20 13:11:26

互联网

2011-09-15 13:25:18

IOS应用

2012-04-20 12:42:21

2019-08-01 09:17:06

工具插件开发

2013-05-02 09:40:20

2019-07-12 09:18:22

IntelliJ ID插件插件库

2020-04-10 21:33:10

物联网大数据物联网工厂

2017-06-16 09:39:32

优酷实践阿里云
点赞
收藏

51CTO技术栈公众号