安卓开发_慕课网_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

 

posted @ 2015-03-13 14:43  听着music睡  阅读(861)  评论(4)  编辑  收藏  举报