安卓开发_慕课网_ViewPager与FragmentPagerAdapter实现Tab实现Tab(App主界面)

学习内容来自“慕课网”

ViewPager与FragmentPagerAdapter实现Tab 将这两种实现Tab的方法结合起来。效果就是可以拖动内容区域来改变相应的功能图标亮暗

思路：

Fragment作为内容区域

点击功能按钮，想将所有的图标变为暗色图标，再调用相应的Fragment，并使对应的图标变亮

效果图：

布局文件部分

activity_main.xml

 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:layout_width="fill_parent"

11         android:layout_height="0dp"

12         android:layout_weight="1"

13         android:id="@+id/id_viewpager">

14         

15     </android.support.v4.view.ViewPager>

16     

17     <include layout="@layout/bottom"/>

18 </LinearLayout>

19     

activity_main

以下布局文件部分是固定的，和前两种方法用到的是一样的，做过前两种方法的可以直接复制代码

头部部分：

 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:background="@drawable/title_bar"

 5     android:layout_height="45dp"

 6     android:gravity="center"

 7     android:orientation="vertical" >

 8     <TextView 

 9         android:layout_height="wrap_content"

10         android:layout_width="wrap_content"

11         android:layout_gravity="center"

12         android:text="微信"

13         android:textColor="#ffffff"

14         android:textSize="20sp"

15         android:textStyle="bold"

16         

17         />

18 

19 </LinearLayout>

top.xml

底部部分

  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="@drawable/bottom_bar"

  6     android:orientation="horizontal" >

  7     

  8     <LinearLayout 

  9        android:id="@+id/id_tab_weixin"

 10        android:layout_width="0dp"

 11        android:gravity="center"

 12        android:layout_height="fill_parent"

 13        android:layout_weight="1"

 14        android:orientation="vertical"

 15        >

 16         <ImageButton 

 17            android:id="@+id/id_tab_weixin_image"

 18            android:layout_width="wrap_content"

 19            android:layout_height="wrap_content"

 20            android:src="@drawable/tab_weixin_pressed"

 21            android:clickable="false"

 22            android:background="#00000000"

 23            />

 24         <TextView 

 25             android:layout_width="wrap_content"

 26             android:layout_height="wrap_content"

 27             android:text="微信"

 28             android:textColor="#ffffff"

 29             />

 30     </LinearLayout>

 31     

 32     <LinearLayout 

 33        android:id="@+id/id_tab_add"

 34        android:layout_width="0dp"

 35        android:gravity="center"

 36        android:layout_height="fill_parent"

 37        android:layout_weight="1"

 38        android:orientation="vertical"

 39        >

 40         <ImageButton 

 41            android:id="@+id/id_tab_add_image"

 42            android:layout_width="wrap_content"

 43            android:layout_height="wrap_content"

 44            android:clickable="false"

 45            android:src="@drawable/tab_address_normal"

 46            android:background="#00000000"

 47            />

 48         <TextView 

 49             android:layout_width="wrap_content"

 50             android:layout_height="wrap_content"

 51             android:text="通信录"

 52             android:textColor="#ffffff"

 53             />

 54     </LinearLayout>

 55     

 56    <LinearLayout 

 57        android:id="@+id/id_tab_frd"

 58        android:layout_width="0dp"

 59        android:gravity="center"

 60        android:layout_height="fill_parent"

 61        android:layout_weight="1"

 62        android:orientation="vertical"

 63        >

 64         <ImageButton 

 65            android:id="@+id/id_tab_frd_image"

 66            android:layout_width="wrap_content"

 67            android:clickable="false"

 68            android:layout_height="wrap_content"

 69            android:src="@drawable/tab_find_frd_normal"

 70            android:background="#00000000"

 71            />

 72         <TextView 

 73             android:layout_width="wrap_content"

 74             android:layout_height="wrap_content"

 75             android:text="朋友"

 76             android:textColor="#ffffff"

 77             />

 78     </LinearLayout>

 79     

 80     <LinearLayout 

 81        android:id="@+id/id_tab_set"

 82        android:layout_width="0dp"

 83        android:gravity="center"

 84        android:layout_height="fill_parent"

 85        android:layout_weight="1"

 86        android:orientation="vertical"

 87        >

 88         <ImageButton 

 89            android:id="@+id/id_tab_set_image"

 90            android:layout_width="wrap_content"

 91            android:clickable="false"

 92            android:layout_height="wrap_content"

 93            android:src="@drawable/tab_settings_normal"

 94            android:background="#00000000"

 95            />

 96         <TextView 

 97             android:layout_width="wrap_content"

 98             android:layout_height="wrap_content"

 99             android:text="设置"

100             android:textColor="#ffffff"

101             />

102     </LinearLayout>

103 </LinearLayout>

bottom.xml

四个对应fragment部分的布局文件（相似的，只是用来标识效果的文字不同而已）

 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:id="@+id/textView1"

 9         android:layout_width="wrap_content"

10         android:layout_height="wrap_content"

11         android:layout_gravity="center_horizontal"

12         android:text="微信"       //四个 tab_01,tab_01,tab_03,tab_04只是这里显示的文字不同而已

13         android:textAppearance="?android:attr/textAppearanceMedium" />

14 

15 </LinearLayout>

tab_01

 

.java文件部分：

主activity

MainActivity.java

  1 package com.example.tab_three;

  2 

  3 

  4 

  5 import java.util.ArrayList;

  6 import java.util.List;

  7 

  8 import android.os.Bundle;

  9 import android.app.Activity;

 10 import android.support.v4.app.Fragment;

 11 import android.support.v4.app.FragmentActivity;

 12 import android.support.v4.app.FragmentPagerAdapter;

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

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

 15 import android.view.Menu;

 16 import android.view.View;

 17 import android.view.View.OnClickListener;

 18 import android.view.Window;

 19 import android.widget.ImageButton;

 20 import android.widget.LinearLayout;

 21 

 22 public class MainActivity extends FragmentActivity implements OnClickListener{

 23     private ViewPager mViewPager;

 24     private FragmentPagerAdapter mAdapter; //ViewPager适配器

 25     private List<Fragment> mFragments;

 26     

 27     private LinearLayout mTabWeixin;

 28     private LinearLayout mTabFrd;

 29     private LinearLayout mTabAdd;

 30     private LinearLayout mTabSet;

 31     

 32     private ImageButton mImageWeixin;

 33     private ImageButton mImageFrd;

 34     private ImageButton mImageAdd;

 35     private ImageButton mImageSet;

 36     

 37 

 38     @Override

 39     protected void onCreate(Bundle savedInstanceState) {

 40         super.onCreate(savedInstanceState);

 41         requestWindowFeature(Window.FEATURE_NO_TITLE);

 42         setContentView(R.layout.activity_main);

 43         

 44         initView();

 45         initEvent();

 46         setSelect(0);

 47         

 48     }

 49 

 50 

 51     private void initEvent() {

 52         // TODO Auto-generated method stub

 53         mTabWeixin.setOnClickListener(this);

 54         mTabAdd.setOnClickListener(this);

 55         mTabFrd.setOnClickListener(this);

 56         mTabSet.setOnClickListener(this);

 57     }

 58 

 59 

 60     private void initView() {

 61         // TODO Auto-generated method stub

 62         //初始化

 63         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

 64         

 65         mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);

 66         mTabAdd = (LinearLayout) findViewById(R.id.id_tab_add);

 67         mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);

 68         mTabSet = (LinearLayout) findViewById(R.id.id_tab_set);

 69         

 70         mImageWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_image);

 71         mImageAdd = (ImageButton) findViewById(R.id.id_tab_add_image);

 72         mImageFrd = (ImageButton) findViewById(R.id.id_tab_frd_image);

 73         mImageSet = (ImageButton) findViewById(R.id.id_tab_set_image);

 74         

 75         //数据的初始化

 76         mFragments = new ArrayList<Fragment>();

 77         Fragment mTab_01 = new WeixinFragment();

 78         Fragment mTab_02 = new AddFragment();

 79         Fragment mTab_03 = new FrdFragment();

 80         Fragment mTab_04 = new SetFragment();

 81         

 82         mFragments.add(mTab_01);

 83         mFragments.add(mTab_02);

 84         mFragments.add(mTab_03);

 85         mFragments.add(mTab_04);

 86         

 87         mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())

 88         {

 89             

 90             @Override

 91             public int getCount() {

 92                 // TODO Auto-generated method stub

 93                 //返回数据源的个数

 94                 return mFragments.size();

 95                 

 96             }

 97             

 98             @Override

 99             public Fragment getItem(int arg0) {

100                 // TODO Auto-generated method stub

101                 return mFragments.get(arg0);

102             }

103         };

104         

105         mViewPager.setAdapter(mAdapter);

106         //监听内容区域的滑动效果

107         mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

108             

109             @Override

110             public void onPageSelected(int arg0) {

111                 // TODO Auto-generated method stub

112                 int currentItem  = mViewPager.getCurrentItem();

113                 resetImage();

114         switch (currentItem) {

115         case 0:

116             mImageWeixin.setImageResource(R.drawable.tab_weixin_pressed);

117             break;

118         case 1:

119             mImageAdd.setImageResource(R.drawable.tab_address_pressed);

120             break;

121         case 2:

122             mImageFrd.setImageResource(R.drawable.tab_find_frd_pressed);

123             break;

124     

125         case 3:

126             mImageSet.setImageResource(R.drawable.tab_settings_pressed);

127             break;

128         default:

129             break;

130         }

131                 

132             }

133             

134             @Override

135             public void onPageScrolled(int arg0, float arg1, int arg2) {

136                 // TODO Auto-generated method stub

137                 

138             }

139             

140             @Override

141             public void onPageScrollStateChanged(int arg0) {

142                 // TODO Auto-generated method stub

143                 

144             }

145         });

146         }

147 

148 

149     @Override

150     public void onClick(View v) {

151         // TODO Auto-generated method stub

152         //先切换图片至暗色

153                 resetImage();

154                 switch (v.getId()) {

155                 case R.id.id_tab_weixin:

156                     setSelect(0);

157                     break;

158                 case R.id.id_tab_add:

159                     setSelect(1);

160                     break;

161                 case R.id.id_tab_frd:

162                     setSelect(2);

163                     break;

164                 case R.id.id_tab_set:

165                     setSelect(3);

166                     break;

167 

168                 default:

169                     break;

170                 }

171     }

172     private void setSelect(int i) {

173         // TODO Auto-generated method stub

174         //设置将点击的那个功能图标为亮色

175         //切换内容区域

176         resetImage();

177         switch (i) {

178         case 0:

179             mImageWeixin.setImageResource(R.drawable.tab_weixin_pressed);

180             break;

181         case 1:

182             mImageAdd.setImageResource(R.drawable.tab_address_pressed);

183             break;

184         case 2:

185             mImageFrd.setImageResource(R.drawable.tab_find_frd_pressed);

186             break;

187     

188         case 3:

189             mImageSet.setImageResource(R.drawable.tab_settings_pressed);

190             break;

191         default:

192             break;

193         }

194         mViewPager.setCurrentItem(i);

195         

196     }

197 

198 

199         //将所有功能图标的界面设为暗色

200         private void resetImage() {

201             // TODO Auto-generated method stub

202             mImageWeixin.setImageResource(R.drawable.tab_weixin_normal);

203             mImageAdd.setImageResource(R.drawable.tab_address_normal);

204             mImageFrd.setImageResource(R.drawable.tab_find_frd_normal);

205             mImageSet.setImageResource(R.drawable.tab_settings_normal);

206             

207         }

208 

209     

210 }

MainActivity

四个相似的.java文件

WeixinFragment.java

 1 package com.example.tab_three;

 2 

 3 import android.os.Bundle;

 4 import android.support.v4.app.Fragment;

 5 import android.view.LayoutInflater;

 6 import android.view.View;

 7 import android.view.ViewGroup;

 8 

 9 public class WeixinFragment extends Fragment{

10     

11     @Override

12     public View onCreateView(LayoutInflater inflater, ViewGroup container,

13             Bundle savedInstanceState) {

14         // TODO Auto-generated method stub

15     

16         

17         return inflater.inflate(R.layout.tab_1, container,false);

18     }

19 }

WeixinFragment.java

SetFragment.java

 1 package com.example.tab_three;

 2 

 3 import android.os.Bundle;

 4 import android.support.v4.app.Fragment;

 5 import android.view.LayoutInflater;

 6 import android.view.View;

 7 import android.view.ViewGroup;

 8 

 9 public class SetFragment extends Fragment{

10     

11     @Override

12     public View onCreateView(LayoutInflater inflater, ViewGroup container,

13             Bundle savedInstanceState) {

14         // TODO Auto-generated method stub

15     

16         

17         return inflater.inflate(R.layout.tab_4, container,false);

18     }

19 }

SetFragment.java

FrdFragment.java

 1 package com.example.tab_three;

 2 

 3 import android.os.Bundle;

 4 import android.support.v4.app.Fragment;

 5 import android.view.LayoutInflater;

 6 import android.view.View;

 7 import android.view.ViewGroup;

 8 

 9 public class FrdFragment extends Fragment{

10     @Override

11     public View onCreateView(LayoutInflater inflater, ViewGroup container,

12             Bundle savedInstanceState) {

13         // TODO Auto-generated method stub

14         return inflater.inflate(R.layout.tab_3, container,false);

15     }

16 

17 }

FrdFragment.xml

AddFragment.java

 1 package com.example.tab_three;

 2 

 3 import android.os.Bundle;

 4 import android.support.v4.app.Fragment;

 5 import android.view.LayoutInflater;

 6 import android.view.View;

 7 import android.view.ViewGroup;

 8 

 9 public class AddFragment extends Fragment{

10     

11     @Override

12     public View onCreateView(LayoutInflater inflater, ViewGroup container,

13             Bundle savedInstanceState) {

14         // TODO Auto-generated method stub

15     

16         

17         return inflater.inflate(R.layout.tab_2, container,false);

18     }

19 }

AddFragment.xml