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

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

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

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical" >

     <android.support.v4.view.ViewPager
         android:id="@+id/packpage_vPager"
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:layout_gravity="center"
         android:layout_weight="1.0" />

     <View
         android:layout_width="match_parent"
         android:layout_height="1dp"
         android:background="@color/orange_line" />

     <RadioGroup
         android:id="@+id/main_navi_radiogroup"
         style="@style/main_navi_radiogroup">

         <RadioButton
             android:id="@+id/main_navi_msg_records"
             style="@style/main_navi_radiobutton"
             android:drawableTop="@drawable/menu_item_msg_records"
             android:text="@string/message"/>

         <RadioButton
             android:id="@+id/main_navi_contact"
             style="@style/main_navi_radiobutton"
             android:drawableTop="@drawable/menu_item_contacts"
             android:text="@string/call" />

     </RadioGroup>

 </LinearLayout>

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

fragment_message.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical" >

     <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:textSize="20sp"
        android:text="@string/message"/>

 </LinearLayout>

fragment_call.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical" >

     <TextView
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_gravity="center"
         android:gravity="center"
         android:text="@string/call"
         android:textSize="20sp" />

 </LinearLayout>

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

MessageFragment.java

 package com.syz.bottommenu;

 import android.os.Bundle;
 import android.support.annotation.Nullable;
 import android.support.v4.app.Fragment;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;

 /**
  * @author syz
  * @date 2016-4-14
  */
 public class MessageFragment extends Fragment {

     private View mView;
     @Override
     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
         if(mView == null){
             mView = inflater.inflate(R.layout.fragment_message, container, false);
         }
         return mView;
     }

     @Override
     public void onDestroyView() {
         super.onDestroyView();
         ((ViewGroup) mView.getParent()).removeView(mView);
     }
 }

CallFragment.java

 package com.syz.bottommenu;

 import android.os.Bundle;
 import android.support.annotation.Nullable;
 import android.support.v4.app.Fragment;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;

 /**
  * @author syz
  * @date 2016-4-14
  */
 public class CallFragment extends Fragment {

     private View mView;

     @Override
     public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
         if (mView == null) {
             mView = inflater.inflate(R.layout.fragment_call, container, false);
         }
         return mView;
     }

     @Override
     public void onDestroyView() {
         super.onDestroyView();
         ((ViewGroup) mView.getParent()).removeView(mView);
     }
 }

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

MainActivity.java

 package com.syz.bottommenu;

 import java.util.ArrayList;
 import java.util.List;

 import android.os.Bundle;
 import android.support.v4.app.Fragment;
 import android.support.v4.app.FragmentActivity;
 import android.support.v4.app.FragmentPagerAdapter;
 import android.support.v4.view.ViewPager;
 import android.support.v4.view.ViewPager.OnPageChangeListener;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.view.ViewGroup;
 import android.widget.RadioGroup;

 public class MainActivity extends FragmentActivity implements OnPageChangeListener, OnClickListener {

     private ViewPager pager;
     private List<Fragment> fragments;
     private RadioGroup radioGroup;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         initView();
     }

     private void initView() {
         pager = (ViewPager) findViewById(R.id.packpage_vPager);
         radioGroup = (RadioGroup) findViewById(R.id.main_navi_radiogroup);
         findViewById(R.id.main_navi_msg_records).setOnClickListener(this);
         findViewById(R.id.main_navi_contact).setOnClickListener(this);
         fragments = new ArrayList<Fragment>();
         fragments.add(new MessageFragment());
         fragments.add(new CallFragment());

         pager.setAdapter(new FragmentPagerAdapter(this.getSupportFragmentManager()) {

             @Override
             public int getCount() {
                 return fragments.size();
             }

             @Override
             public Fragment getItem(int arg0) {
                 return fragments.get(arg0);
             }
         });
         // 添加页面切换事件的监听器
         pager.setOnPageChangeListener(this);
         radioGroup.check(R.id.main_navi_msg_records);
     }

     @Override
     public void finish() {
         ViewGroup view = (ViewGroup) getWindow().getDecorView();
         view.removeAllViews();
         super.finish();
     }

     /**
      * 这个方法在手指操作屏幕的时候发生变化。有三个值：0（END）,1(PRESS) , 2(UP) 。
      * 当用手指滑动翻页时，手指按下去的时候会触发这个方法，state值为1，手指抬起时，
      * 如果发生了滑动（即使很小），这个值会变为2，然后最后变为0
      * 。总共执行这个方法三次。一种特殊情况是手指按下去以后一点滑动也没有发生，
      * 这个时候只会调用这个方法两次，state值分别是1,0 。
      * 当setCurrentItem翻页时，会执行这个方法两次，state值分别为2 , 0 。
      */
     @Override
     public void onPageScrollStateChanged(int state) {

     }

     /**
      * 这个方法会在屏幕滚动过程中不断被调用。 有三个参数，第一个position，这个参数要特别注意一下。
      * 当用手指滑动时，如果手指按在页面上不动，position和当前页面index是一致的；
      * 如果手指向左拖动（相应页面向右翻动），这时候position大部分时间和当前页面是一致的，
      * 只有翻页成功的情况下最后一次调用才会变为目标页面；如果手指向右拖动（相应页面向左翻动），
      * 这时候position大部分时间和目标页面是一致的，只有翻页不成功的情况下最后一次调用才会变为原页面。
      * 当直接设置setCurrentItem翻页时，如果是相邻的情况（比如现在是第二个页面，跳到第一或者第三个页面），
      * 如果页面向右翻动，大部分时间是和当前页面是一致的，只有最后才变成目标页面；
      * 如果向左翻动，position和目标页面是一致的。这和用手指拖动页面翻动是基本一致的。如果不是相邻的情况，
      * 比如我从第一个页面跳到第三个页面，position先是0，然后逐步变成1，然后逐步变成2；
      * 我从第三个页面跳到第一个页面，position先是1，然后逐步变成0，并没有出现为2的情况。
      * positionOffset是当前页面滑动比例，如果页面向右翻动，这个值不断变大，最后在趋近1的情况后突变为0
      * 。如果页面向左翻动，这个值不断变小，
      * 最后变为0。positionOffsetPixels是当前页面滑动像素，变化情况和positionOffset一致
      */
     @Override
     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

     }

     /**
      * 这个方法有一个参数position，代表哪个页面被选中。当用手指滑动翻页的时候，如果翻动成功了（滑动的距离够长），
      * 手指抬起来就会立即执行这个方法，position就是当前滑动到的页面。如果直接setCurrentItem翻页，
      * 那position就和setCurrentItem的参数一致，这种情况在onPageScrolled执行方法前就会立即执行。
      */
     @Override
     public void onPageSelected(int position) {
         switch (position) {
         case 0:
             radioGroup.check(R.id.main_navi_msg_records);
             break;
         case 1:
             radioGroup.check(R.id.main_navi_contact);
             break;

         default:
             break;
         }

     }

     @Override
     public void onClick(View v) {
         switch (v.getId()) {
         case R.id.main_navi_contact:
             pager.setCurrentItem(1,true);
             break;
         case R.id.main_navi_msg_records:
             pager.setCurrentItem(0,true);
             break;

         default:
             break;
         }
     }

 }

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

效果图：

       

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

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