学习内容来自“慕课网”
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
以下布局文件部分是固定的，和前两种方法用到的是一样的，做过前两种方法的可以直接复制代码
头部部分：
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>
底部部分
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>
四个对应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>
.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 }
四个相似的.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 }
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 }
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 }
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 }
