使用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

 

 

 

 

 

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