【Android UI设计与开发】第03期：引导界面（三）仿微信引导界面以及动画效果

2022-11-30 16:53:40

基于前两篇比较简单的实例做铺垫之后，这一篇我们来实现一个稍微复杂一点的引导界面的效果，当然也只是稍微复杂了一点，对于会的人来说当然还是so easy！正所谓会者不难，难者不会，大概说的就是这个意思了吧。好的，话不多说，回归正题。

这篇要实现的是一个仿微信的动画效果，虽然这种效果的实现在网上到处都有，但是我还是想站在中低端开发者的角度去告诉大家是如何实现的，当然实现的方式有很多，我也只是列出了我认为实现起来比较方便的一种方法，希望大家能够受用。

一、实现的效果图

有图才有真相，上图先：

【Android UI设计与开发】第03期：引导界面（三）仿微信引导界面以及动画效果

【Android UI设计与开发】第03期：引导界面（三）仿微信引导界面以及动画效果

点击按钮后出现动画效果，然后进入到另一个界面：

【Android UI设计与开发】第03期：引导界面（三）仿微信引导界面以及动画效果

二 、程序的目录结构

【Android UI设计与开发】第03期：引导界面（三）仿微信引导界面以及动画效果

三、具体的编码实现

1、 在主布局界面中加入ViewPager组件，以及底部的小点，activity_main.xml:

双击代码全选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

> 
       
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"

/> 
       
    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24.0dip"
        android:orientation="horizontal"

> 
       
        <ImageView
            android:id="@+id/page0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="5dip"
            android:src="@drawable/page_indicator_focused"

/> 
       
        <ImageView
            android:id="@+id/page1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="5dip"
            android:src="@drawable/page_indicator_unfocused"

/> 
       
        <ImageView
            android:id="@+id/page2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="5dip"
            android:src="@drawable/page_indicator_unfocused"

/> 
       
        <ImageView
            android:id="@+id/page3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="5dip"
            android:src="@drawable/page_indicator_unfocused"

/> 
       
        <ImageView
            android:id="@+id/page4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="5dip"
            android:src="@drawable/page_indicator_unfocused"

/> 
       
        <ImageView
            android:id="@+id/page5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="5dip"
            android:src="@drawable/page_indicator_unfocused"

/> 
    </LinearLayout> 
</RelativeLayout>

2、接着在guide_view01.xml等几个布局页面中添加引导界面要显示的图片和控件，因为这几个布局界面都大同小异，所以在这里我就不一一贴出来了吧，有需要的同学可以直接下载源码，guide_view01.xml：

双击代码全选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml

version="1.0"

encoding="UTF-8"?> 
<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/w01"
    android:orientation="vertical"

> 
       
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="35dp"
        android:gravity="center"
        android:text="@string/guide_text01"
        android:textColor="@color/TextColor"
        android:textSize="22sp"

/> 
</RelativeLayout>

3、然后是要实现动画效果的布局界面，guide_door.xml：

双击代码全选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml

version="1.0"

encoding="UTF-8"?> 
<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"

> 
       
    <ImageView
        android:id="@+id/imageLeft"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="true"
        android:scaleType="fitXY"
        android:src="@drawable/w_left"

/> 
       
    <ImageView
        android:id="@+id/imageRight"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:scaleType="fitXY"
        android:src="@drawable/w_right"
        android:visibility="visible"

/> 
       
    <TextView
        android:id="@+id/anim_text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="35dp"
        android:gravity="center"
        android:text="
n n微信，是一个生活方式n n "
        android:textColor="#fff"
        android:textSize="22sp"

/> 
</RelativeLayout>

4、最后是完成动画效果之后进入的布局界面，activity_other.xml：

双击代码全选
1
2
3
4
5
6
7
8
9
10
11
12
<?xml

version="1.0"

encoding="utf-8"?> 
<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"

> 
       
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="亲，可以开始你的微信生活了!"

/> 
</LinearLayout>

5、在这里还要创建一个xml文件来实现自定义按钮的效果，关于自定义按钮的效果实现我会在后面的文章中专题详细介绍，这里就不在赘述，start_weixin_btn.xml：

双击代码全选
1
2
3
4
5
6
7
<?xml

version="1.0"

encoding="utf-8"?> 
<selector

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

android:state_enabled="true"

android:state_pressed="true"
        android:drawable="@drawable/whatsnew_btn_pressed"

/> <!--按下时的效果-->      
               
    <item

android:state_enabled="true"

android:drawable="@drawable/whatsnew_btn_nor"

/>  <!--正常状态的效果-->
</selector>

6、布局界面已经讲解完毕，接下来让我们进行详细的代码讲解，ViewPager适配器代码，ViewPagerAdapter.java：

双击代码全选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
package

com.yangyu.myguideview02; 
       
import

java.util.ArrayList; 
       
import

android.support.v4.view.PagerAdapter; 
import

android.support.v4.view.ViewPager; 
import

android.view.View; 
       
/**
 *
@author yangyu
 *  
功能描述：ViewPager适配器，用来绑定数据和view
 */
public

class
ViewPagerAdapter extends

PagerAdapter { 
           
    //界面列表 
    private

ArrayList<View> views; 
           
    public

ViewPagerAdapter (ArrayList<View> views){ 
        this.views
= views; 
    } 
              
    /**
     *
获得当前界面数
     */
    @Override
    public

int
getCount() { 
         if

(views != null)
{ 
             return

views.size(); 
         }       
         return

0; 
    } 
       
    /**
     *
初始化position位置的界面
     */
    @Override
    public

Object instantiateItem(View view, int

position) { 
              
        ((ViewPager)
view).addView(views.get(position), 0); 
              
        return

views.get(position); 
    } 
           
    /**
     *
判断是否由对象生成界面
     */
    @Override
    public

boolean
isViewFromObject(View view, Object arg1) { 
        return

(view == arg1); 
    } 
       
    /**
     *
销毁position位置的界面
     */
    @Override
    public

void
destroyItem(View view, int

position, Object arg2) { 
        ((ViewPager)
view).removeView(views.get(position));        
    } 
}

7、主程序入口activity类，MainActivity.java：

双击代码全选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
package

com.yangyu.myguideview02; 
       
import

java.util.ArrayList; 
       
import

android.app.Activity; 
import

android.content.Intent; 
import

android.os.Bundle; 
import

android.support.v4.view.ViewPager; 
import

android.support.v4.view.ViewPager.OnPageChangeListener; 
import

android.view.LayoutInflater; 
import

android.view.View; 
import

android.view.View.OnClickListener; 
import

android.widget.Button; 
import

android.widget.ImageView; 
       
/**
 *
@author yangyu
 *  
功能描述：主程序入口activity
 */
public

class
MainActivity extends

Activity { 
    //
定义ViewPager对象 
    private

ViewPager viewPager; 
       
    //
定义ViewPager适配器 
    private

ViewPagerAdapter vpAdapter; 
       
    //
定义一个ArrayList来存放View 
    private

ArrayList<View> views; 
       
    //定义各个界面View对象 
    private

View view1,view2,view3,view4,view5,view6; 
           
    //
定义底部小点图片 
    private

ImageView pointImage0, pointImage1, pointImage2, pointImage3,pointImage4, pointImage5; 
       
    //定义开始按钮对象 
    private

Button startBt; 
           
    //
当前的位置索引值 
    private

int
currIndex = 0; 
       
    @Override
    protected

void
onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_main); 
       
        initView(); 
       
        initData(); 
    } 
       
    /**
     *
初始化组件
     */
    private

void
initView() { 
        //实例化各个界面的布局对象  
        LayoutInflater
mLi = LayoutInflater.from(this); 
        view1
= mLi.inflate(R.layout.guide_view01, null); 
        view2
= mLi.inflate(R.layout.guide_view02, null); 
        view3
= mLi.inflate(R.layout.guide_view03, null); 
        view4
= mLi.inflate(R.layout.guide_view04, null); 
        view5
= mLi.inflate(R.layout.guide_view05, null); 
        view6
= mLi.inflate(R.layout.guide_view06, null); 
                       
        //
实例化ViewPager 
        viewPager
= (ViewPager) findViewById(R.id.viewpager); 
       
        //
实例化ArrayList对象 
        views
= new

ArrayList<View>(); 
       
        //
实例化ViewPager适配器 
        vpAdapter
= new

ViewPagerAdapter(views); 
       
        //
实例化底部小点图片对象 
        pointImage0
= (ImageView) findViewById(R.id.page0); 
        pointImage1
= (ImageView) findViewById(R.id.page1); 
        pointImage2
= (ImageView) findViewById(R.id.page2); 
        pointImage3
= (ImageView) findViewById(R.id.page3); 
        pointImage4
= (ImageView) findViewById(R.id.page4); 
        pointImage5
= (ImageView) findViewById(R.id.page5); 
               
        //实例化开始按钮 
        startBt
= (Button) view6.findViewById(R.id.startBtn); 
    } 
       
    /**
     *
初始化数据
     */
    private

void
initData() { 
        //
设置监听 
        viewPager.setOnPageChangeListener(new

MyOnPageChangeListener()); 
        //
设置适配器数据 
        viewPager.setAdapter(vpAdapter); 
       
        //将要分页显示的View装入数组中       
        views.add(view1); 
        views.add(view2); 
        views.add(view3); 
        views.add(view4); 
        views.add(view5); 
        views.add(view6); 
               
                               
        //
给开始按钮设置监听 
        startBt.setOnClickListener(new

OnClickListener() { 
            @Override
            public

void
onClick(View v) { 
                 startbutton(); 
            } 
        }); 
    } 
       
    public

class
MyOnPageChangeListener implements

OnPageChangeListener { 
        @Override
        public

void
onPageSelected(int

position) { 
            switch

(position) { 
            case

0: 
                pointImage0.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); 
                pointImage1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
                break; 
            case

1: 
                pointImage1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); 
                pointImage0.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
                pointImage2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
                break; 
            case

2: 
                pointImage2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); 
                pointImage1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
                pointImage3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
                break; 
            case

3: 
                pointImage3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); 
                pointImage4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
                pointImage2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
                break; 
            case

4: 
                pointImage4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); 
                pointImage3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
                pointImage5.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
                break; 
            case

5: 
                pointImage5.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); 
                pointImage4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
                break; 
            } 
            currIndex
= position; 
            //
animation.setFillAfter(true);// True:图片停在动画结束位置 
            //
animation.setDuration(300); 
            //
mPageImg.startAnimation(animation); 
        } 
       
        @Override
        public

void
onPageScrollStateChanged(int

arg0) { 
       
        } 
       
        @Override
        public

void
onPageScrolled(int

arg0, float

arg1, int

arg2) { 
       
        } 
    } 
           
    /**
     *
相应按钮点击事件
     */
    private

void
startbutton() {   
        Intent
intent = new

Intent(); 
        intent.setClass(MainActivity.this,GuideViewDoor.class); 
        startActivity(intent); 
        this.finish(); 
      } 
           
}

PS：在这段代码中，有个地方需要注意，尽管我们写代码的时候一直很小心，但还是避免不了会犯一些低级的错误，以至于调试耽误了时间

双击代码全选
1
2
//实例化开始按钮 
startBt
= (Button) view6.findViewById(R.id.startBtn);

这是最后一个布局界面中的一个开始按钮，由于在findvViewById()方法前面忘记使用了view6来调用该方法，以至于模拟器报出空指针异常。

8、实现动画效果的入口activity类,在这个类中主要实现了点击开始按钮后实现一个动画效果来达到进入另一个界面的目的，该类中的主要使用了动画类。我会在后面的章节中以专题的形式来介绍动画这一块的类容，所以这里也不再赘述，GuideViewDoor.java：

双击代码全选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
package

com.yangyu.myguideview02; 
       
import

android.app.Activity; 
import

android.content.Intent; 
import

android.os.Bundle; 
import

android.os.Handler; 
import

android.view.animation.AlphaAnimation; 
import

android.view.animation.Animation; 
import

android.view.animation.AnimationSet; 
import

android.view.animation.ScaleAnimation; 
import

android.view.animation.TranslateAnimation; 
import

android.widget.ImageView; 
import

android.widget.TextView; 
       
/**
 *
@author yangyu
 *  
功能描述：实现动画效果的入口activity
 */
public

class
GuideViewDoor extends

Activity { 
           
    //定义左右两张图片对象 
    private

ImageView mLeft,mRight; 
       
    //定义一个文本对象 
    private

TextView mText; 
       
    @Override
    public

void
onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.guide_door); 
               
        //实例化对象 
        mLeft
= (ImageView)findViewById(R.id.imageLeft); 
        mRight
= (ImageView)findViewById(R.id.imageRight); 
        mText
= (TextView)findViewById(R.id.anim_text); 
               
        //实例化动画对象 
        AnimationSet
anim = new

AnimationSet(true); 
        //实例化位移动画对象 
        TranslateAnimation
mytranslateanim = new

TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,-1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f); 
        //设置动画持续时间 
        mytranslateanim.setDuration(2000); 
        //设置启动时间 
        anim.setStartOffset(800); 
        //将位移动画添加进动画效果中 
        anim.addAnimation(mytranslateanim); 
        //动画结束后，保留在终止位 
        anim.setFillAfter(true); 
        //左边图启动该动画效果 
        mLeft.startAnimation(anim); 
               
        AnimationSet
anim1 = new

AnimationSet(true); 
        TranslateAnimation
mytranslateanim1 = new

TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,+1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f); 
        mytranslateanim1.setDuration(1500); 
        anim1.addAnimation(mytranslateanim1); 
        anim1.setStartOffset(800); 
        anim1.setFillAfter(true); 
        mRight.startAnimation(anim1); 
               
        AnimationSet
anim2 = new

AnimationSet(true); 
        ScaleAnimation
myscaleanim = new

ScaleAnimation(1f,3f,1f,3f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f); 
        myscaleanim.setDuration(1000); 
        AlphaAnimation
myalphaanim = new

AlphaAnimation(1,0.0001f); 
        myalphaanim.setDuration(1500); 
        anim2.addAnimation(myscaleanim); 
        anim2.addAnimation(myalphaanim); 
        anim2.setFillAfter(true); 
        mText.startAnimation(anim2); 
               
        new

Handler().postDelayed(new

Runnable(){ 
            @Override
            public

void
run(){ 
                Intent
intent = new

Intent (GuideViewDoor.this,OtherActivity.class);             
                startActivity(intent);           
                GuideViewDoor.this.finish(); 
            } 
        },
2300); 
    } 
}

9、最后是另一个activity类，我为了只是达到进入到另一个界面的这种效果，所以代码比较简单，就是调用了一个layout布局页面，OtherActivity.java：

双击代码全选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package

com.yangyu.myguideview02; 
       
import

android.app.Activity; 
import

android.os.Bundle; 
       
/**
 *
@author yangyu
 * 
功能描述：另一个activity
 */
public

class
OtherActivity extends

Activity { 
       
    @Override
    protected

void
onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.activity_other); 
    } 
}

10、最后大家别忘了在AndroidManifest.xml清单文件中为程序添加GuideViewDoor、OtherActivity这两个activity，否则会报出异常。

源码下载地址

来源： csdn   作者：yangyu20121224   

上一篇：vue cli3.3 以上版本配置vue.config.js 及反向代理操作解决跨域操作


下一篇：vue反向代理（解决跨域）