仿微信首次启动滑动界面效果

用过微信的都知道，第一次启动时会出现一系列操作说明或功能说明的画面，滑到底然后就进入正式界面，今天我也参考网络资源模仿着做了一个。

首先看下工程结构图：

首先看布局文件main.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/mainRLayout"  
4.     android:layout_width="fill_parent"  
5.     android:layout_height="fill_parent"  
6.     android:background="#000000" >  
7.   
8.     <!-- 自定义滑动控件 -->  
9.     <com.ericssonlabs.ScrollLayout  
10.         xmlns:android="http://schemas.android.com/apk/res/android"  
11.         android:id="@+id/ScrollLayout"  
12.         android:layout_width="fill_parent"  
13.         android:layout_height="fill_parent"  
14.         android:visibility="visible" >  
15.     <!-- 每一页的布局均以一个RelativeLayout来控制，后面类似，这里一共四个 -->  
16.         <RelativeLayout  
17.             android:layout_width="fill_parent"  
18.             android:layout_height="fill_parent"  
19.             android:background="@drawable/w01" >  
20.   
21.             <TextView  
22.                 android:layout_width="wrap_content"  
23.                 android:layout_height="wrap_content"  
24.                 android:layout_alignParentBottom="true"  
25.                 android:layout_centerHorizontal="true"  
26.                 android:layout_marginBottom="90dp"  
27.                 android:text="微信，不只是个聊天工具"  
28.                 android:textColor="#FFFFFF"  
29.                 android:textSize="18sp" />  
30.         </RelativeLayout>  
31.   
32.         <RelativeLayout  
33.             android:layout_width="fill_parent"  
34.             android:layout_height="fill_parent"  
35.             android:background="@drawable/w02" >  
36.   
37.             <TextView  
38.                 android:id="@+id/t1"  
39.                 android:layout_width="wrap_content"  
40.                 android:layout_height="wrap_content"  
41.                 android:layout_alignParentTop="true"  
42.                 android:layout_centerHorizontal="true"  
43.                 android:layout_marginTop="96dp"  
44.                 android:gravity="center_horizontal"  
45.                 android:text="第一次，你可以使用透明背景的动画表情，来表达你此刻的心情"  
46.                 android:textColor="#FFFFFF"  
47.                 android:textSize="18sp" />  
48.         </RelativeLayout>  
49.   
50.         <RelativeLayout  
51.             android:layout_width="fill_parent"  
52.             android:layout_height="fill_parent"  
53.             android:background="@drawable/w03" />  
54.   
55.         <RelativeLayout  
56.             android:layout_width="fill_parent"  
57.             android:layout_height="fill_parent"  
58.             android:background="@drawable/w01" >  
59.         <!-- 点击该按钮后就进入OtherActivit了 -->  
60.             <Button  
61.                 android:id="@+id/startBtn"  
62.                 android:layout_width="wrap_content"  
63.                 android:layout_height="wrap_content"  
64.                 android:layout_alignParentBottom="true"  
65.                 android:layout_centerHorizontal="true"  
66.                 android:layout_gravity="center_vertical"  
67.                 android:layout_marginBottom="90dp"  
68.                 android:layout_marginLeft="8dp"  
69.                 android:layout_marginRight="8dp"  
70.                 android:background="@drawable/button_bg"  
71.                 android:text="开始我的微信生活"  
72.                 android:textColor="#FFFFFF"  
73.                 android:textSize="18sp" />  
74.         </RelativeLayout>  
75.     </com.ericssonlabs.ScrollLayout>  
76.       
77.     <!-- 这个布局是下面显示的小圆点的布局，其中ImageView的数量要与上面RelativeLayout的数量对应 -->  
78.     <LinearLayout  
79.         android:id="@+id/llayout"  
80.         android:layout_width="wrap_content"  
81.         android:layout_height="wrap_content"  
82.         android:layout_alignParentBottom="true"  
83.         android:layout_centerHorizontal="true"  
84.         android:layout_marginBottom="25dp"  
85.         android:orientation="horizontal"  
86.         android:visibility="visible" >  
87.   
88.         <ImageView  
89.             android:layout_width="wrap_content"  
90.             android:layout_height="wrap_content"  
91.             android:layout_gravity="center_vertical"  
92.             android:clickable="true"  
93.             android:padding="5dp"  
94.             android:src="@drawable/page_indicator_bg" />  
95.   
96.         <ImageView  
97.             android:layout_width="wrap_content"  
98.             android:layout_height="wrap_content"  
99.             android:layout_gravity="center_vertical"  
100.             android:clickable="true"  
101.             android:padding="5dp"  
102.             android:src="@drawable/page_indicator_bg" />  
103.   
104.         <ImageView  
105.             android:layout_width="wrap_content"  
106.             android:layout_height="wrap_content"  
107.             android:layout_gravity="center_vertical"  
108.             android:clickable="true"  
109.             android:padding="5dp"  
110.             android:src="@drawable/page_indicator_bg" />  
111.   
112.         <ImageView  
113.             android:layout_width="wrap_content"  
114.             android:layout_height="wrap_content"  
115.             android:layout_gravity="center_vertical"  
116.             android:clickable="true"  
117.             android:padding="5dp"  
118.             android:src="@drawable/page_indicator_bg" />  
119.     </LinearLayout>  
120.   
121.     <!-- 这个布局是最后点击按钮后启动新界面的一个动画效果 -->  
122.     <LinearLayout  
123.         android:id="@+id/animLayout"  
124.         android:layout_width="fill_parent"  
125.         android:layout_height="fill_parent"  
126.         android:visibility="gone" >  
127.   
128.         <LinearLayout  
129.             android:id="@+id/leftLayout"  
130.             android:layout_width="wrap_content"  
131.             android:layout_height="fill_parent" >  
132.   
133.             <ImageView  
134.                 android:layout_width="wrap_content"  
135.                 android:layout_height="wrap_content"  
136.                 android:src="@drawable/whatsnew_left" />  
137.   
138.             <ImageView  
139.                 android:layout_width="wrap_content"  
140.                 android:layout_height="wrap_content"  
141.                 android:src="@drawable/whatsnew_left_m" />  
142.         </LinearLayout>  
143.   
144.         <LinearLayout  
145.             android:id="@+id/rightLayout"  
146.             android:layout_width="fill_parent"  
147.             android:layout_height="fill_parent" >  
148.   
149.             <ImageView  
150.                 android:layout_width="wrap_content"  
151.                 android:layout_height="wrap_content"  
152.                 android:src="@drawable/whatsnew_right_m" />  
153.   
154.             <ImageView  
155.                 android:layout_width="wrap_content"  
156.                 android:layout_height="wrap_content"  
157.                 android:src="@drawable/whatsnew_right" />  
158.         </LinearLayout>  
159.     </LinearLayout>  
160.   
161. </RelativeLayout>  

接下来是自定义控件ScrollLayout.java，这个是继承了ViewGroup的一个自定义控件，主要实现了左右滑动以及展示内容的功能，源码如下：

[java]  view plain copy

1. public class ScrollLayoutActivity extends Activity implements OnViewChangeListener{  
2.      
3.     private ScrollLayout mScrollLayout;  
4.     private ImageView[] imgs;  
5.     private int count;  
6.     private int currentItem;  
7.     private Button startBtn;  
8.     private RelativeLayout mainRLayout;  
9.     private LinearLayout pointLLayout;  
10.     private LinearLayout leftLayout;  
11.     private LinearLayout rightLayout;  
12.     private LinearLayout animLayout;  
13.   
14.     @Override  
15.     public void onCreate(Bundle savedInstanceState) {  
16.         super.onCreate(savedInstanceState);  
17.         setContentView(R.layout.main);  
18.         initView();  
19.     }  
20.   
21.     private void initView() {  
22.         mScrollLayout = (ScrollLayout) findViewById(R.id.ScrollLayout);  
23.         pointLLayout = (LinearLayout) findViewById(R.id.llayout);  
24.         mainRLayout = (RelativeLayout) findViewById(R.id.mainRLayout);  
25.         startBtn = (Button) findViewById(R.id.startBtn);  
26.         startBtn.setOnClickListener(onClick);  
27.         animLayout = (LinearLayout) findViewById(R.id.animLayout);  
28.         leftLayout = (LinearLayout) findViewById(R.id.leftLayout);  
29.         rightLayout = (LinearLayout) findViewById(R.id.rightLayout);  
30.         count = mScrollLayout.getChildCount();  
31.         imgs = new ImageView[count];  
32.         for (int i = 0; i < count; i++) {  
33.             imgs[i] = (ImageView) pointLLayout.getChildAt(i);  
34.             imgs[i].setEnabled(true);  
35.             imgs[i].setTag(i);  
36.         }  
37.         currentItem = 0;  
38.         imgs[currentItem].setEnabled(false);  
39.         mScrollLayout.SetOnViewChangeListener(this);  
40.     }  
41.   
42.     private View.OnClickListener onClick = new View.OnClickListener() {  
43.         @Override  
44.         public void onClick(View v) {  
45.             switch (v.getId()) {  
46.             case R.id.startBtn:  
47.                 mScrollLayout.setVisibility(View.GONE);  
48.                 pointLLayout.setVisibility(View.GONE);  
49.                 animLayout.setVisibility(View.VISIBLE);  
50.                 mainRLayout.setBackgroundResource(R.drawable.whatsnew_bg);  
51.                 Animation leftOutAnimation = AnimationUtils.loadAnimation(  
52.                         getApplicationContext(), R.anim.translate_left);  
53.                 Animation rightOutAnimation = AnimationUtils.loadAnimation(  
54.                         getApplicationContext(), R.anim.translate_right);  
55.                 leftLayout.setAnimation(leftOutAnimation);  
56.                 rightLayout.setAnimation(rightOutAnimation);  
57.                 leftOutAnimation.setAnimationListener(new AnimationListener() {  
58.                     @Override  
59.                     public void onAnimationStart(Animation animation) {  
60.                         mainRLayout.setBackgroundColor(Color.BLACK);  
61.                     }  
62.   
63.                     @Override  
64.                     public void onAnimationRepeat(Animation animation) {  
65.                     }  
66.   
67.                     @Override  
68.                     public void onAnimationEnd(Animation animation) {  
69.                         leftLayout.setVisibility(View.GONE);  
70.                         rightLayout.setVisibility(View.GONE);  
71.                         Intent intent = new Intent(  
72.                                 ScrollLayoutActivity.this,  
73.                                 OtherActivity.class);  
74.                         ScrollLayoutActivity.this.startActivity(intent);  
75.                         ScrollLayoutActivity.this.finish();  
76.                         //结束老Activity启动新Activity之前的一个过度动画  
77.                         overridePendingTransition(R.anim.zoom_out_enter,R.anim.zoom_out_exit);  
78.                     }  
79.                 });  
80.                 break;  
81.             }  
82.         }  
83.     };  
84.   
85.     @Override  
86.     public void OnViewChange(int position) {  
87.         setcurrentPoint(position);  
88.     }  
89.   
90.     private void setcurrentPoint(int position) {  
91.         if (position < 0 || position > count - 1 || currentItem == position) {  
92.             return;  
93.         }  
94.         imgs[currentItem].setEnabled(true);  
95.         imgs[position].setEnabled(false);  
96.         currentItem = position;  
97.     }  
98. }  

然后是定义的一个回调接口，这个接口的主要作用在代码中有注释，源码如下：

[java]  view plain copy

1. package com.ericssonlabs;  
2.   
3. public interface OnViewChangeListener {  
4.     //控制底部小圆点的回调方法  
5.     public void OnViewChange(int view);  
6. }  

最后是如何使用该自定义控件，在Activity中调用并使用，代码如下：

[java]  view plain copy

1. public class ScrollLayoutActivity extends Activity implements OnViewChangeListener{  
2.      
3.     private ScrollLayout mScrollLayout;  
4.     private ImageView[] imgs;  
5.     private int count;  
6.     private int currentItem;  
7.     private Button startBtn;  
8.     private RelativeLayout mainRLayout;  
9.     private LinearLayout pointLLayout;  
10.     private LinearLayout leftLayout;  
11.     private LinearLayout rightLayout;  
12.     private LinearLayout animLayout;  
13.   
14.     @Override  
15.     public void onCreate(Bundle savedInstanceState) {  
16.         super.onCreate(savedInstanceState);  
17.         setContentView(R.layout.main);  
18.         initView();  
19.     }  
20.   
21.     private void initView() {  
22.         mScrollLayout = (ScrollLayout) findViewById(R.id.ScrollLayout);  
23.         pointLLayout = (LinearLayout) findViewById(R.id.llayout);  
24.         mainRLayout = (RelativeLayout) findViewById(R.id.mainRLayout);  
25.         startBtn = (Button) findViewById(R.id.startBtn);  
26.         startBtn.setOnClickListener(onClick);  
27.         animLayout = (LinearLayout) findViewById(R.id.animLayout);  
28.         leftLayout = (LinearLayout) findViewById(R.id.leftLayout);  
29.         rightLayout = (LinearLayout) findViewById(R.id.rightLayout);  
30.         count = mScrollLayout.getChildCount();  
31.         imgs = new ImageView[count];  
32.         for (int i = 0; i < count; i++) {  
33.             imgs[i] = (ImageView) pointLLayout.getChildAt(i);  
34.             imgs[i].setEnabled(true);  
35.             imgs[i].setTag(i);  
36.         }  
37.         currentItem = 0;  
38.         imgs[currentItem].setEnabled(false);  
39.         mScrollLayout.SetOnViewChangeListener(this);  
40.     }  
41.   
42.     private View.OnClickListener onClick = new View.OnClickListener() {  
43.         @Override  
44.         public void onClick(View v) {  
45.             switch (v.getId()) {  
46.             case R.id.startBtn:  
47.                 mScrollLayout.setVisibility(View.GONE);  
48.                 pointLLayout.setVisibility(View.GONE);  
49.                 animLayout.setVisibility(View.VISIBLE);  
50.                 mainRLayout.setBackgroundResource(R.drawable.whatsnew_bg);  
51.                 Animation leftOutAnimation = AnimationUtils.loadAnimation(  
52.                         getApplicationContext(), R.anim.translate_left);  
53.                 Animation rightOutAnimation = AnimationUtils.loadAnimation(  
54.                         getApplicationContext(), R.anim.translate_right);  
55.                 leftLayout.setAnimation(leftOutAnimation);  
56.                 rightLayout.setAnimation(rightOutAnimation);  
57.                 leftOutAnimation.setAnimationListener(new AnimationListener() {  
58.                     @Override  
59.                     public void onAnimationStart(Animation animation) {  
60.                         mainRLayout.setBackgroundColor(Color.BLACK);  
61.                     }  
62.   
63.                     @Override  
64.                     public void onAnimationRepeat(Animation animation) {  
65.                     }  
66.   
67.                     @Override  
68.                     public void onAnimationEnd(Animation animation) {  
69.                         leftLayout.setVisibility(View.GONE);  
70.                         rightLayout.setVisibility(View.GONE);  
71.                         Intent intent = new Intent(  
72.                                 ScrollLayoutActivity.this,  
73.                                 OtherActivity.class);  
74.                         ScrollLayoutActivity.this.startActivity(intent);  
75.                         ScrollLayoutActivity.this.finish();  
76.                         //结束老Activity启动新Activity之前的一个过度动画  
77.                         overridePendingTransition(R.anim.zoom_out_enter,R.anim.zoom_out_exit);  
78.                     }  
79.                 });  
80.                 break;  
81.             }  
82.         }  
83.     };  
84.   
85.     @Override  
86.     public void OnViewChange(int position) {  
87.         setcurrentPoint(position);  
88.     }  
89.   
90.     private void setcurrentPoint(int position) {  
91.         if (position < 0 || position > count - 1 || currentItem == position) {  
92.             return;  
93.         }  
94.         imgs[currentItem].setEnabled(true);  
95.         imgs[position].setEnabled(false);  
96.         currentItem = position;  
97.     }  
98. }  

关于动画这一块我还不是很熟，这里是直接copy的网上的效果，后续会专门做一个专题来研究动画，毕竟，有动画的世界才是多彩的，嘿嘿

一切就绪后，运行看看效果：

                             

                             

工程下载：代码下载