Android之RadioGroup+ViewPager制作的底部导航栏

在日常开发中我们常常会用到类似微信或者QQ的底部导航。实现这样的效果有多种，今天就为大家介绍一种实现简单，可控性好的底部导航的实现方法。

首先创建activity_main.xml布局文件，里面主要由ViewPager和RadioGroup构成。ViewPager用来存放Fragment，RadioGroup布局底部导航。

[html]  view plain  copy

 print ?

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.     <android.support.v4.view.ViewPager  
8.         android:id="@+id/packpage_vPager"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="0dp"  
11.         android:layout_gravity="center"  
12.         android:layout_weight="1.0" />  
13.   
14.     <View  
15.         android:layout_width="match_parent"  
16.         android:layout_height="1dp"  
17.         android:background="@color/orange_line" />  
18.   
19.     <RadioGroup  
20.         android:id="@+id/main_navi_radiogroup"  
21.         style="@style/main_navi_radiogroup">  
22.   
23.         <RadioButton  
24.             android:id="@+id/main_navi_msg_records"  
25.             style="@style/main_navi_radiobutton"  
26.             android:drawableTop="@drawable/menu_item_msg_records"  
27.             android:text="@string/message"/>  
28.   
29.         <RadioButton  
30.             android:id="@+id/main_navi_contact"  
31.             style="@style/main_navi_radiobutton"  
32.             android:drawableTop="@drawable/menu_item_contacts"  
33.             android:text="@string/call" />  
34.   
35.     </RadioGroup>  
36.   
37. </LinearLayout>  

接着再创建两个fragment布局文件

fragment_message.xml

[html]  view plain  copy

 print ?

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.     <TextView   
8.        android:layout_width="match_parent"  
9.        android:layout_height="match_parent"  
10.        android:layout_gravity="center"  
11.        android:gravity="center"  
12.        android:textSize="20sp"  
13.        android:text="@string/message"/>  
14.   
15. </LinearLayout>  

fragment_call.xml

[html]  view plain  copy

 print ?

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.     <TextView  
8.         android:layout_width="match_parent"  
9.         android:layout_height="match_parent"  
10.         android:layout_gravity="center"  
11.         android:gravity="center"  
12.         android:text="@string/call"  
13.         android:textSize="20sp" />  
14.   
15. </LinearLayout>  

两个fragment布局文件创建完成后，再创建两个Fragment类，MessageFragment和CallFragment，均继承android.support.v4.app.Fragment;

MessageFragment.java

[java]  view plain  copy

 print ?

1. package com.syz.bottommenu;  
2.   
3. import android.os.Bundle;  
4. import android.support.annotation.Nullable;  
5. import android.support.v4.app.Fragment;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8. import android.view.ViewGroup;  
9.   
10. /** 
11.  * @author syz 
12.  * @date 2016-4-14 
13.  */  
14. public class MessageFragment extends Fragment {  
15.   
16.     private View mView;  
17.     @Override  
18.     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
19.         if(mView == null){  
20.             mView = inflater.inflate(R.layout.fragment_message, container, false);  
21.         }  
22.         return mView;  
23.     }  
24.       
25.     @Override  
26.     public void onDestroyView() {  
27.         super.onDestroyView();  
28.         ((ViewGroup) mView.getParent()).removeView(mView);  
29.     }  
30. }  

CallFragment.java

[java]  view plain  copy

 print ?

1. package com.syz.bottommenu;  
2.   
3. import android.os.Bundle;  
4. import android.support.annotation.Nullable;  
5. import android.support.v4.app.Fragment;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8. import android.view.ViewGroup;  
9.   
10. /** 
11.  * @author syz 
12.  * @date 2016-4-14 
13.  */  
14. public class CallFragment extends Fragment {  
15.   
16.     private View mView;  
17.   
18.     @Override  
19.     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
20.         if (mView == null) {  
21.             mView = inflater.inflate(R.layout.fragment_call, container, false);  
22.         }  
23.         return mView;  
24.     }  
25.   
26.     @Override  
27.     public void onDestroyView() {  
28.         super.onDestroyView();  
29.         ((ViewGroup) mView.getParent()).removeView(mView);  
30.     }  
31. }  

最后我们在MainActivity中开始布局渲染。

MainActivity.java

[java]  view plain  copy

 print ?

1. package com.syz.bottommenu;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import android.os.Bundle;  
7. import android.support.v4.app.Fragment;  
8. import android.support.v4.app.FragmentActivity;  
9. import android.support.v4.app.FragmentPagerAdapter;  
10. import android.support.v4.view.ViewPager;  
11. import android.support.v4.view.ViewPager.OnPageChangeListener;  
12. import android.view.View;  
13. import android.view.View.OnClickListener;  
14. import android.view.ViewGroup;  
15. import android.widget.RadioGroup;  
16.   
17. public class MainActivity extends FragmentActivity implements OnPageChangeListener, OnClickListener {  
18.   
19.     private ViewPager pager;  
20.     private List<Fragment> fragments;  
21.     private RadioGroup radioGroup;  
22.   
23.     @Override  
24.     protected void onCreate(Bundle savedInstanceState) {  
25.         super.onCreate(savedInstanceState);  
26.         setContentView(R.layout.activity_main);  
27.         initView();  
28.     }  
29.   
30.     private void initView() {  
31.         pager = (ViewPager) findViewById(R.id.packpage_vPager);  
32.         radioGroup = (RadioGroup) findViewById(R.id.main_navi_radiogroup);  
33.         findViewById(R.id.main_navi_msg_records).setOnClickListener(this);  
34.         findViewById(R.id.main_navi_contact).setOnClickListener(this);  
35.         fragments = new ArrayList<Fragment>();  
36.         fragments.add(new MessageFragment());  
37.         fragments.add(new CallFragment());  
38.   
39.         pager.setAdapter(new FragmentPagerAdapter(this.getSupportFragmentManager()) {  
40.   
41.             @Override  
42.             public int getCount() {  
43.                 return fragments.size();  
44.             }  
45.   
46.             @Override  
47.             public Fragment getItem(int arg0) {  
48.                 return fragments.get(arg0);  
49.             }  
50.         });  
51.         // 添加页面切换事件的监听器  
52.         pager.setOnPageChangeListener(this);  
53.         radioGroup.check(R.id.main_navi_msg_records);  
54.     }  
55.   
56.     @Override  
57.     public void finish() {  
58.         ViewGroup view = (ViewGroup) getWindow().getDecorView();  
59.         view.removeAllViews();  
60.         super.finish();  
61.     }  
62.   
63.     /** 
64.      * 这个方法在手指操作屏幕的时候发生变化。有三个值：0（END）,1(PRESS) , 2(UP) 。 
65.      * 当用手指滑动翻页时，手指按下去的时候会触发这个方法，state值为1，手指抬起时，  
66.      * 如果发生了滑动（即使很小），这个值会变为2，然后最后变为0 
67.      * 。总共执行这个方法三次。一种特殊情况是手指按下去以后一点滑动也没有发生， 
68.      * 这个时候只会调用这个方法两次，state值分别是1,0 。 
69.      * 当setCurrentItem翻页时，会执行这个方法两次，state值分别为2 , 0 。 
70.      */  
71.     @Override  
72.     public void onPageScrollStateChanged(int state) {  
73.   
74.     }  
75.   
76.     /** 
77.      * 这个方法会在屏幕滚动过程中不断被调用。 有三个参数，第一个position，这个参数要特别注意一下。 
78.      * 当用手指滑动时，如果手指按在页面上不动，position和当前页面index是一致的； 
79.      * 如果手指向左拖动（相应页面向右翻动），这时候position大部分时间和当前页面是一致的， 
80.      * 只有翻页成功的情况下最后一次调用才会变为目标页面；如果手指向右拖动（相应页面向左翻动）， 
81.      * 这时候position大部分时间和目标页面是一致的，只有翻页不成功的情况下最后一次调用才会变为原页面。 
82.      * 当直接设置setCurrentItem翻页时，如果是相邻的情况（比如现在是第二个页面，跳到第一或者第三个页面）， 
83.      * 如果页面向右翻动，大部分时间是和当前页面是一致的，只有最后才变成目标页面； 
84.      * 如果向左翻动，position和目标页面是一致的。这和用手指拖动页面翻动是基本一致的。如果不是相邻的情况， 
85.      * 比如我从第一个页面跳到第三个页面，position先是0，然后逐步变成1，然后逐步变成2； 
86.      * 我从第三个页面跳到第一个页面，position先是1，然后逐步变成0，并没有出现为2的情况。 
87.      * positionOffset是当前页面滑动比例，如果页面向右翻动，这个值不断变大，最后在趋近1的情况后突变为0 
88.      * 。如果页面向左翻动，这个值不断变小， 
89.      * 最后变为0。positionOffsetPixels是当前页面滑动像素，变化情况和positionOffset一致 
90.      */  
91.     @Override  
92.     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
93.   
94.     }  
95.   
96.     /** 
97.      * 这个方法有一个参数position，代表哪个页面被选中。当用手指滑动翻页的时候，如果翻动成功了（滑动的距离够长）， 
98.      * 手指抬起来就会立即执行这个方法，position就是当前滑动到的页面。如果直接setCurrentItem翻页， 
99.      * 那position就和setCurrentItem的参数一致，这种情况在onPageScrolled执行方法前就会立即执行。 
100.      */  
101.     @Override  
102.     public void onPageSelected(int position) {  
103.         switch (position) {  
104.         case 0:  
105.             radioGroup.check(R.id.main_navi_msg_records);  
106.             break;  
107.         case 1:  
108.             radioGroup.check(R.id.main_navi_contact);  
109.             break;  
110.   
111.         default:  
112.             break;  
113.         }  
114.   
115.     }  
116.   
117.     @Override  
118.     public void onClick(View v) {  
119.         switch (v.getId()) {  
120.         case R.id.main_navi_contact:  
121.             pager.setCurrentItem(1,true);  
122.             break;  
123.         case R.id.main_navi_msg_records:  
124.             pager.setCurrentItem(0,true);  
125.             break;  
126.   
127.         default:  
128.             break;  
129.         }  
130.     }  
131.   
132. }  

从上面的代码中可以看出，这种实现方式非常的简洁，可控性也非常好。之前看过的别人的实现方式都比较繁琐。所以推荐大家使用这种方式。当然，每个人都有不同看法，不同的实现方式，适合自己的才是最好的。

效果图：

       

最后附上源码下载地址：http://download.csdn.net/detail/loveyaozu/9490650

原文地址：http://blog.csdn.net/loveyaozu/article/details/51149467