使用ViewPager来实现Tab的效果

程序运行之后将要实现的效果如下图所示：

下边就详细的说明一下实现代码：

1、布局实现

　　1）上边的布局很简单，命名为top.xml，代码如下：

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="fill_parent"
 3     android:layout_height="45dp"
 4     android:background="#000000"
 5     android:gravity="center"
 6     android:orientation="vertical" >
 7 
 8     <TextView
 9         android:layout_width="wrap_content"
10         android:layout_height="45dp"
11         android:layout_gravity="center"
12         android:text="微信"
13         android:textColor="#FFFFFF"
14         android:textSize="30sp"
15         android:textStyle="bold" />
16 
17 </LinearLayout>

　　2）下边的布局，分别由4个垂直分布的LinearLayout构成，每个LinearLayout由ImageButton和TextView构成，,命名为bottom.xml，代码如下：(中间的代码有省略)

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="fill_parent"
 3     android:layout_height="wrap_content"
 4     android:background="#FFFFFF"
 5     android:gravity="center"
 6     android:orientation="horizontal" >
 7 
 8     <LinearLayout
 9         android:id="@+id/tab_weixin"
10         android:layout_width="0dp"
11         android:layout_height="wrap_content"
12         android:layout_weight="1"
13         android:gravity="center"
14         android:orientation="vertical" >
15 
16         <ImageButton
17             android:id="@+id/weixin_img"
18             android:layout_width="wrap_content"
19             android:layout_height="wrap_content"
20             android:clickable="false"
21             android:src="@drawable/yesb" />
22 
23         <TextView
24             android:layout_width="wrap_content"
25             android:layout_height="wrap_content"
26             android:text="微信"
27             android:textColor="#000000" />
28     </LinearLayout>
29                     .
30                     .
31                     .
32     <LinearLayout
33         android:id="@+id/tab_setting"
34         android:layout_width="0dp"
35         android:layout_height="wrap_content"
36         android:layout_weight="1"
37         android:gravity="center"
38         android:orientation="vertical" >
39 
40         <ImageButton
41             android:id="@+id/setting_img"
42             android:layout_width="wrap_content"
43             android:layout_height="wrap_content"
44             android:clickable="false"
45             android:src="@drawable/jibla" />
46 
47         <TextView
48             android:layout_width="wrap_content"
49             android:layout_height="wrap_content"
50             android:text="设置"
51             android:textColor="#000000" />
52     </LinearLayout>
53 
54 </LinearLayout>

View Code

　　3）实现整体布局：

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

View Code

2、使用Viewpager来实现Tab类似的效果：

  1 @Override
  2     protected void onCreate(Bundle savedInstanceState) {
  3         super.onCreate(savedInstanceState);
  4         requestWindowFeature(Window.FEATURE_NO_TITLE);// 必须在setContentView之前
  5         setContentView(R.layout.activity_main);
  6         initView();
  7         ininEvents();
  8     }
  9 
 10     private void ininEvents() {
 11         // TODO Auto-generated method stub
 12         tab_weixin.setOnClickListener(this);
 13         tab_friend.setOnClickListener(this);
 14         tab_contact.setOnClickListener(this);
 15         tab_setting.setOnClickListener(this);
 16         // 给viewpager添加监听，使得华东viewpager的同时，下边的随之改变按钮的按下状态
 17         viewpager.setOnPageChangeListener(new OnPageChangeListener() {
 18 
 19             @Override
 20             public void onPageSelected(int arg0) {
 21                 // TODO Auto-generated method stub
 22                 int currentItem = viewpager.getCurrentItem();
 23                 resetImg();
 24                 switch (currentItem) {
 25                 case 0:
 26                     weixin.setImageResource(R.drawable.yesr);
 27                     break;
 28                 case 1:
 29                     friend.setImageResource(R.drawable.jib);
 30                     break;
 31 
 32                 case 2:
 33                     contact.setImageResource(R.drawable.yesr);
 34                     break;
 35 
 36                 case 3:
 37                     setting.setImageResource(R.drawable.jib);
 38                     break;
 39 
 40                 default:
 41                     break;
 42                 }
 43             }
 44 
 45             @Override
 46             public void onPageScrolled(int arg0, float arg1, int arg2) {
 47                 // TODO Auto-generated method stub
 48 
 49             }
 50 
 51             @Override
 52             public void onPageScrollStateChanged(int arg0) {
 53                 // TODO Auto-generated method stub
 54 
 55             }
 56         });
 57     }
 58 
 59     private void initView() {
 60         // TODO Auto-generated method stub
 61         viewpager = (ViewPager) findViewById(R.id.viewpager);
 62         weixin = (ImageButton) findViewById(R.id.weixin_img);
 63         friend = (ImageButton) findViewById(R.id.friend_img);
 64         contact = (ImageButton) findViewById(R.id.contact_img);
 65         setting = (ImageButton) findViewById(R.id.setting_img);
 66 
 67         tab_weixin = (LinearLayout) findViewById(R.id.tab_weixin);
 68         tab_friend = (LinearLayout) findViewById(R.id.tab_friend);
 69         tab_contact = (LinearLayout) findViewById(R.id.tab_contact);
 70         tab_setting = (LinearLayout) findViewById(R.id.tab_setting);
 71 
 72         // 将布局转化为View
 73         LayoutInflater inflater = LayoutInflater.from(this);
 74         View view1 = inflater.inflate(R.layout.tab_01, null);
 75         View view2 = inflater.inflate(R.layout.tab_02, null);
 76         View view3 = inflater.inflate(R.layout.tab_03, null);
 77         View view4 = inflater.inflate(R.layout.tab_04, null);
 78         mViews.add(view1);
 79         mViews.add(view2);
 80         mViews.add(view3);
 81         mViews.add(view4);
 82 
 83         // 实例化PagerAdapter
 84         adapter = new PagerAdapter() {
 85 
 86             // 使用PagerAdapter一般还栩需要实现下面两个方法
 87             @Override
 88             public void destroyItem(ViewGroup container, int position,
 89                     Object object) {
 90                 // TODO Auto-generated method stub
 91                 container.removeView(mViews.get(position));
 92             }
 93 
 94             // 初始化Item
 95             @Override
 96             public Object instantiateItem(ViewGroup container, int position) {
 97                 // TODO Auto-generated method stub
 98                 View view = mViews.get(position);
 99                 container.addView(view);
100                 return view;
101             }
102 
103             // 使用PagerAdapter必须实现的两个方法
104             @Override
105             public int getCount() {
106                 // TODO Auto-generated method stub
107                 return mViews.size();
108             }
109 
110             @Override
111             public boolean isViewFromObject(View arg0, Object arg1) {
112                 // TODO Auto-generated method stub
113                 return arg0 == arg1;
114             }
115 
116         };
117         viewpager.setAdapter(adapter);
118     }
119 
120     @Override
121     public void onClick(View arg0) {
122         // TODO Auto-generated method stub
123         resetImg();
124         switch (arg0.getId()) {
125         case R.id.tab_weixin:
126             weixin.setImageResource(R.drawable.yesr);
127             viewpager.setCurrentItem(0);
128             break;
129         case R.id.tab_friend:
130             friend.setImageResource(R.drawable.jib);
131             viewpager.setCurrentItem(1);
132             break;
133         case R.id.tab_contact:
134             contact.setImageResource(R.drawable.yesr);
135             viewpager.setCurrentItem(2);
136             break;
137         case R.id.tab_setting:
138             setting.setImageResource(R.drawable.jib);
139             viewpager.setCurrentItem(3);
140             break;
141 
142         default:
143             break;
144         }
145     }
146 
147     /**
148      * 将所有的图片切换为暗色
149      */
150     private void resetImg() {
151         // TODO Auto-generated method stub
152         weixin.setImageResource(R.drawable.yesb);
153         friend.setImageResource(R.drawable.jibla);
154         contact.setImageResource(R.drawable.yesb);
155         setting.setImageResource(R.drawable.jibla);
156 
157     }
158 }

View Code

不积跬步，无以至千里，不积小流，无以成江海