安卓仿微信左右滑动点击切换页面和图标

目标效果：

使用鼠标滑动屏幕或者点击下边的小图标，可以更改页面和图标，因为没有那么多素材所以只用了两张图片区分。

1.layout文件夹下新建top.xml页面，作为顶部标题。

top.xml页面：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="45dp"  
5.     android:gravity="center"  
6.     android:background="#000000"  
7.     android:orientation="vertical" >  
8.   
9.     <TextView  
10.         android:layout_width="wrap_content"  
11.         android:layout_height="wrap_content"  
12.         android:text="微信"  
13.         android:textColor="#ffffff"  
14.         android:textSize="20sp"  
15.         android:layout_gravity="center"  
16.         android:textStyle="bold" />  
17.   
18. </LinearLayout>  

2.新建bottom.xml页面，作为底部导航。

bottom.xml页面：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="55dp"  
5.     android:background="#000000"  
6.     android:orientation="horizontal" >  
7.   
8.     <!-- ImageButton没加android:clickable="false"时，点击下方的ImageBuutton不会改变页面，点击TextView才会改变页面，这是因为每个tab是一个LinearLayout，每个LinearLayout都有一个ImageButton，当点击ImageButton位置时，点击事件首先会到LinearLayout上，LinearLayout会去判断，发现内部有一个ImageButton可以解决点击事件，所以就把点击事件交给ImageButton，而ImageButton又没有写点击事件，所以点击事件就失效了。-->  
9.   
10.     <LinearLayout  
11.         android:id="@+id/tab_weixin"  
12.         android:layout_width="0dp"  
13.         android:layout_height="fill_parent"  
14.         android:layout_weight="1"  
15.         android:gravity="center"  
16.         android:orientation="vertical" >  
17.   
18.         <ImageButton  
19.             android:id="@+id/tab_weixin_img"  
20.             android:layout_width="wrap_content"  
21.             android:layout_height="wrap_content"  
22.             android:background="#000000"  
23.             android:clickable="false"  
24.             android:src="@drawable/search" />  
25.   
26.         <TextView  
27.             android:layout_width="wrap_content"  
28.             android:layout_height="wrap_content"  
29.             android:text="微信"  
30.             android:textColor="#ffffff" />  
31.     </LinearLayout>  
32.   
33.     <LinearLayout  
34.         android:id="@+id/tab_friend"  
35.         android:layout_width="0dp"  
36.         android:layout_height="fill_parent"  
37.         android:layout_weight="1"  
38.         android:gravity="center"  
39.         android:orientation="vertical" >  
40.   
41.         <ImageButton  
42.             android:id="@+id/tab_friend_img"  
43.             android:layout_width="wrap_content"  
44.             android:layout_height="wrap_content"  
45.             android:background="#000000"  
46.             android:clickable="false"  
47.             android:src="@drawable/study" />  
48.   
49.         <TextView  
50.             android:layout_width="wrap_content"  
51.             android:layout_height="wrap_content"  
52.             android:text="朋友"  
53.             android:textColor="#ffffff" />  
54.     </LinearLayout>  
55.   
56.     <LinearLayout  
57.         android:id="@+id/tab_tongxunlu"  
58.         android:layout_width="0dp"  
59.         android:layout_height="fill_parent"  
60.         android:layout_weight="1"  
61.         android:gravity="center"  
62.         android:orientation="vertical" >  
63.   
64.         <ImageButton  
65.             android:id="@+id/tab_tongxunlu_img"  
66.             android:layout_width="wrap_content"  
67.             android:layout_height="wrap_content"  
68.             android:background="#000000"  
69.             android:clickable="false"  
70.             android:src="@drawable/study" />  
71.   
72.         <TextView  
73.             android:layout_width="wrap_content"  
74.             android:layout_height="wrap_content"  
75.             android:text="通讯录"  
76.             android:textColor="#ffffff" />  
77.     </LinearLayout>  
78.   
79.     <LinearLayout  
80.         android:id="@+id/tab_set"  
81.         android:layout_width="0dp"  
82.         android:layout_height="fill_parent"  
83.         android:layout_weight="1"  
84.         android:gravity="center"  
85.         android:orientation="vertical" >  
86.   
87.         <ImageButton  
88.             android:id="@+id/tab_set_img"  
89.             android:layout_width="wrap_content"  
90.             android:layout_height="wrap_content"  
91.             android:background="#000000"  
92.             android:clickable="false"  
93.             android:src="@drawable/study" />  
94.   
95.         <TextView  
96.             android:layout_width="wrap_content"  
97.             android:layout_height="wrap_content"  
98.             android:text="设置"  
99.             android:textColor="#ffffff" />  
100.     </LinearLayout>  
101.   
102. </LinearLayout>  

这里注意ImageButton的clickable属性，如果不设置false，那么鼠标点击不起作用，只有点击下边的TextView才会跳转页面。

3.新建tab01.xml页面，复制三个，只更改显示文本，作为切换页面。

tab01.xml页面：

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical" >  
6.       
7.     <TextView   
8.         android:layout_width="fill_parent"  
9.         android:layout_height="fill_parent"  
10.         android:text="Weixin Tab"  
11.         android:textSize="30sp"  
12.         android:textStyle="bold"  
13.         android:gravity="center"/>  
14. </LinearLayout>  

4.activity_main.xml页面导入顶部和底部xml文件，并放置ViewPager。

activity_main.xml页面：

[html] view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical">  
6.   
7.     <include layout="@layout/top"/>  
8.       
9.     <android.support.v4.view.ViewPager  
10.         android:id="@+id/id_viewpager"  
11.         android:layout_weight="1"  
12.         android:layout_width="fill_parent"  
13.         android:layout_height="0dp">  
14.           
15.     </android.support.v4.view.ViewPager>  
16.     <include layout="@layout/bottom"/>  
17. </LinearLayout>  

5.因为ViewPager是在jar包里，添加该控件需要写出路径，当记不住的时候，按下Ctrl+Shift+t，弹出框里输入“ViewPager”并选择，显示的页面中就包含该控件的路径。

6.新建pageAdapter.java，继承PageAdapter，实现四个方法。

pageAdapter.java页面：

[java] view plain copy

1. package com.example.adapter;  
2.   
3. import java.util.List;  
4.   
5. import android.support.v4.view.PagerAdapter;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8.   
9. public class pageAdapter extends PagerAdapter {  
10.     private List<View> mViews;  
11.   
12.     public pageAdapter(List<View> mViews) {  
13.         this.mViews = mViews;  
14.     }  
15.   
16.     /** 
17.      * 重写四个方法 boolean isViewFromObject(View arg0, Object arg1) int getCount() 
18.      * void destroyItem(ViewGroup container, int position,Object object) Object 
19.      * instantiateItem(ViewGroup container, int position) 
20.      */  
21.   
22.     // 从当前container中删除指定位置的view  
23.     @Override  
24.     public void destroyItem(ViewGroup container, int position, Object object) {  
25.         container.removeView(mViews.get(position));  
26.     }  
27.   
28.     // 初始化view  
29.     @Override  
30.     public Object instantiateItem(ViewGroup container, int position) {  
31.         View view = mViews.get(position);  
32.         container.addView(view);  
33.         return view;  
34.     }  
35.   
36.     @Override  
37.     public boolean isViewFromObject(View arg0, Object arg1) {  
38.         return arg0 == arg1;  
39.     }  
40.   
41.     // 返回要滑动的view个数  
42.     @Override  
43.     public int getCount() {  
44.         return mViews.size();  
45.     }  
46.   
47. }  

7.MainActivity.java页面编写点击和滑动事件。

MainActivity.java页面：

[java] view plain copy

1. package com.example.studytab;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import com.example.adapter.pageAdapter;  
7.   
8. import android.os.Bundle;  
9. import android.app.Activity;  
10. import android.support.v4.view.PagerAdapter;  
11. import android.support.v4.view.ViewPager;  
12. import android.support.v4.view.ViewPager.OnPageChangeListener;  
13. import android.view.LayoutInflater;  
14. import android.view.Menu;  
15. import android.view.View;  
16. import android.view.View.OnClickListener;  
17. import android.view.ViewGroup;  
18. import android.view.Window;  
19. import android.widget.ImageButton;  
20. import android.widget.LinearLayout;  
21.   
22. public class MainActivity extends Activity implements OnClickListener {  
23.   
24.     private ViewPager mViewPager;  
25.     private List<View> mViews = new ArrayList<View>();  
26.     private pageAdapter mAdapter = new pageAdapter(mViews);  
27.   
28.     // Tab  
29.     private LinearLayout mTabWeixin, mTabFriend, mTabTongxunlu, mTabSet;  
30.     private ImageButton mWeixinImg, mFriendImg, mTongxunluImg, mSetImg;  
31.   
32.     @Override  
33.     protected void onCreate(Bundle savedInstanceState) {  
34.         super.onCreate(savedInstanceState);  
35.         requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题  
36.         setContentView(R.layout.activity_main);  
37.   
38.         initView();  
39.   
40.         initEvents();  
41.     }  
42.   
43.     //View的滑动事件  
44.     private void initEvents() {  
45.         mTabWeixin.setOnClickListener(this);  
46.         mTabFriend.setOnClickListener(this);  
47.         mTabTongxunlu.setOnClickListener(this);  
48.         mTabSet.setOnClickListener(this);  
49.   
50.         //滑动切换页面  
51.         mViewPager.setOnPageChangeListener(new OnPageChangeListener() {  
52.   
53.             @Override  
54.             public void onPageSelected(int arg0) {  
55.                 resetImg();    //将图片全部默认为不选中  
56.                 int currentItem = mViewPager.getCurrentItem();  
57.                 switch (currentItem) {  
58.                 case 0:  
59.                     mWeixinImg.setImageResource(R.drawable.search);  
60.                     break;  
61.                 case 1:  
62.                     mFriendImg.setImageResource(R.drawable.search);  
63.                     break;  
64.                 case 2:  
65.                     mTongxunluImg.setImageResource(R.drawable.search);  
66.                     break;  
67.                 case 3:  
68.                     mSetImg.setImageResource(R.drawable.search);  
69.                     break;  
70.   
71.                 default:  
72.                     break;  
73.                 }  
74.             }  
75.   
76.             @Override  
77.             public void onPageScrolled(int arg0, float arg1, int arg2) {  
78.   
79.             }  
80.   
81.             @Override  
82.             public void onPageScrollStateChanged(int arg0) {  
83.   
84.             }  
85.         });  
86.     }  
87.   
88.     //实例化控件  
89.     private void initView() {  
90.         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  
91.         // Tab  
92.         mTabWeixin = (LinearLayout) findViewById(R.id.tab_weixin);  
93.         mTabFriend = (LinearLayout) findViewById(R.id.tab_friend);  
94.         mTabTongxunlu = (LinearLayout) findViewById(R.id.tab_tongxunlu);  
95.         mTabSet = (LinearLayout) findViewById(R.id.tab_set);  
96.         // img  
97.         mWeixinImg = (ImageButton) findViewById(R.id.tab_weixin_img);  
98.         mFriendImg = (ImageButton) findViewById(R.id.tab_friend_img);  
99.         mTongxunluImg = (ImageButton) findViewById(R.id.tab_tongxunlu_img);  
100.         mSetImg = (ImageButton) findViewById(R.id.tab_set_img);  
101.   
102.         LayoutInflater mInflater = LayoutInflater.from(this);  
103.         View tab01 = mInflater.inflate(R.layout.tab01, null);  
104.         View tab02 = mInflater.inflate(R.layout.tab02, null);  
105.         View tab03 = mInflater.inflate(R.layout.tab03, null);  
106.         View tab04 = mInflater.inflate(R.layout.tab04, null);  
107.   
108.         mViews.add(tab01);  
109.         mViews.add(tab02);  
110.         mViews.add(tab03);  
111.         mViews.add(tab04);  
112.   
113.         mViewPager.setAdapter(mAdapter);  
114.     }  
115.   
116.     //ImageButton的点击事件  
117.     @Override  
118.     public void onClick(View view) {  
119.         resetImg();  
120.         switch (view.getId()) {  
121.         case R.id.tab_weixin:  
122.             mViewPager.setCurrentItem(0);// 跳到第一个页面  
123.             mWeixinImg.setImageResource(R.drawable.search); // 图片变为选中  
124.             break;  
125.         case R.id.tab_friend:  
126.             mViewPager.setCurrentItem(1);  
127.             mFriendImg.setImageResource(R.drawable.search);  
128.             break;  
129.         case R.id.tab_tongxunlu:  
130.             mViewPager.setCurrentItem(2);  
131.             mTongxunluImg.setImageResource(R.drawable.search);  
132.             break;  
133.         case R.id.tab_set:  
134.             mViewPager.setCurrentItem(3);  
135.             mSetImg.setImageResource(R.drawable.search);  
136.             break;  
137.   
138.         default:  
139.             break;  
140.         }  
141.     }  
142.   
143.     // 将所有的图片切换为未选中  
144.     private void resetImg() {  
145.         mWeixinImg.setImageResource(R.drawable.study);  
146.         mFriendImg.setImageResource(R.drawable.study);  
147.         mTongxunluImg.setImageResource(R.drawable.study);  
148.         mSetImg.setImageResource(R.drawable.study);  
149.     }  
150.   
151. }  

8.运行就可以显示目标效果了。