ViewPager+RadioGroup+Fragment仿微信实现底部导航功能

                  今天做一个简单的仿微信底部导航功能，先简单说明一下组件，主体是一个FrameLayout,在这个帧布局上添加两个控件，ViewPager 和RadioGroup, 然后在ViePager中添加Fragment，实现导航功能.

           

         先上布局代码：

             

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:id="@+id/ll_contnet"    android:orientation="vertical" >        <android.support.v4.view.ViewPager        android:id="@+id/vp"        android:layout_width="match_parent"        android:layout_weight="1"        android:layout_height="0dp">    </android.support.v4.view.ViewPager>                <RadioGroup        android:id="@+id/radio_group"        android:layout_width="match_parent"        android:layout_height="60dp"        android:orientation="horizontal"         >        <RadioButton            android:id="@+id/rb1"            style="@style/TabButtonStyle"            android:checked="true"            android:drawableTop="@drawable/ic_launcher"            android:text="首页" />        <RadioButton            android:id="@+id/rb2"            style="@style/TabButtonStyle"            android:checked="true"            android:drawableTop="@drawable/ic_launcher"            android:text="首页" />        <RadioButton            android:id="@+id/rb3"            style="@style/TabButtonStyle"            android:checked="true"            android:drawableTop="@drawable/ic_launcher"            android:text="首页" />        <RadioButton            android:id="@+id/rb4"            style="@style/TabButtonStyle"            android:checked="true"            android:drawableTop="@drawable/ic_launcher"            android:text="首页" />        <RadioButton            android:id="@+id/rb5"            style="@style/TabButtonStyle"            android:checked="true"            android:drawableTop="@drawable/ic_launcher"            android:text="首页" />    </RadioGroup></LinearLayout>

 上边是一个线性布局，把这个线性布局作为View添加到FrameLayout中

   下边是具体实现逻辑：

   

public class MainActivity extends FragmentActivity {private static final String TAG_CONTENT_FRAGMENT = "fl_content";private FrameLayout fl_content;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();setcontentFragment();}private void initView() {fl_content = (FrameLayout) findViewById(R.id.fl_content);}private void setcontentFragment() {//1.获取fragment管理者对象FragmentManager supportFragmentManager = getSupportFragmentManager();//2.开启一个事务,替换布局内部的内容,然后提交supportFragmentManager.beginTransaction().replace(R.id.fl_content, new ContentFragment(), TAG_CONTENT_FRAGMENT).commit();}}

   首先MainAvtivity继承的是V4包提供的FragmentActivity 用来解决android3.0没有Fragment的API ，

其次获取Fragment管理者，开启事务，替换布局内容，最后提交。

下边来看填充替换的内容：

    

   首先我们来写一个基类BaseFragment继承Fragment:

  

    

public abstract class BaseFragment extends Fragment {protected Activity activity;private View rootview;@Overridepublic void onCreate(Bundle savedInstanceState) {activity = getActivity();super.onCreate(savedInstanceState);}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {rootview = initView();//如果要让子类的页面效果展示,必须在此处返回view对象return rootview;}@Overridepublic void onActivityCreated(Bundle savedInstanceState) {initData();super.onActivityCreated(savedInstanceState);}//初始化view的方法,因为fragment父类对子类的布局效果未知,所以此方法无法实现,于是抽象public abstract View initView();//给view填充数据方法,因为子类的fragment有什么控件未知,子类的fragment有什么数据也位置,所以此方法无法实现(定义抽象,空实现)public void initData() {//此方法专门留给子类重新}}

  首先BaseFragment 继承V4包下的Fragment，重写了onCreate(),onCreateView(),onActivityCreated()三个方法，

 oncreat()方法在Fragment中和Activity中的oncreta()一样，

 oncreatview()在这个view创建之时调用，返回值是一个view，我们可以在这个方法内返回一个view对象，//initView() onActivitycreat()是在view添加到activity上时调用，我们可以在这个方法内做一些填充数据的操作              //initData

   然后定义两个抽象方法，initView(),initData(),让其子类来实现这两个方法，

       initView返回View填充到Fragment上

       initData 设置数据

 

     

    下边是填充FrameLayout的Fragment:

 

public class ContentFragment extends BaseFragment {private View view;private RadioGroup radio_group;private ViewPager vp;private ArrayList<BasePager> list;@Overridepublic View initView() {view = View.inflate(activity, R.layout.frame_content, null);radio_group = (RadioGroup) view.findViewById(R.id.radio_group);vp = (ViewPager) view.findViewById(R.id.vp);return view;}@SuppressWarnings("deprecation")@Overridepublic void initData() {list = new ArrayList<BasePager>();list.add(new FirstFragment(activity));list.add(new SecondFragment(activity));list.add(new ThirdFragment(activity));list.add(new fourthlyFragment(activity));list.add(new fifithFragment(activity));       radio_group.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {switch (checkedId) {case R.id.rb1:vp.setCurrentItem(0);break;case R.id.rb2:vp.setCurrentItem(1);break;case R.id.rb3:vp.setCurrentItem(2);break;case R.id.rb4:vp.setCurrentItem(3);break;case R.id.rb5: vp.setCurrentItem(4);break;}}});vp.setAdapter(new PagerAdapter() {@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic int getCount() {return list.size();}@Overridepublic Object instantiateItem(ViewGroup container, int position) {/* * 郜哥，这个地方下边写的假数据，只是作为一个demo *  * 这个地方可以通过存储fragment的集合，取出fragment，返回fragment中的view对象， * 但是呢，想点击一个radio_button,返回一个相对应的view，就得写一个list集合中五个fragment的父类 * 在父类中也定义一个initview()方法，返回每个继承这个父类的fragment的view对象，然后在这里如下写： *  * container.addView(list.get(position).rootView); * rootview就是父类中的在initview()中返回的view *  *  * 上边的list集合里面的数据都没用到 */container.addView(list.get(position).rootview);return list.get(position).rootview;}@Overridepublic void destroyItem(ViewGroup container, int position,Object object) {container.removeView((View) object);}});vp.setCurrentItem(0);radio_group.check(R.id.rb1);vp.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int position) {// 当当前的viewpager状态改变的时候的时候，radiogroup也切换int currentItem = vp.getCurrentItem();System.out.println("currentItem==="+currentItem);switch (currentItem) {case 0:                   radio_group.check(R.id.rb1);break;case 1: radio_group.check(R.id.rb2);break;case 2: radio_group.check(R.id.rb3);break;case 3: radio_group.check(R.id.rb4);break;case 4: radio_group.check(R.id.rb5);break;}}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});}}

     

   首先我们继承先前写好的BaseFragment，实现initView().initData()

   initView里找到我们写的布局,并返回view；

   initData()下设置viewpager适配器，radiogroup的点击监听，viewpager的页面改变监听

   

   这里面有两个地方需要注意：

       1， 点击radiobutton 切换viewpager的页面，同时改变选中的radiobutton的文本颜色

                               调用viewpager的setCurrentItem(int);可以设置viewpager当前的页面

        2，另一个是 ，滑动viewpager时，radiobutton的切换

                 在viewpager的滑动监听中 调用getCurrentItem()获取当前页面，

                用switch语句，移动到哪个页面，就调用radiogroup的check(int)，设置radiobutton的选择状态，同时选中的                 radiobutton的文本会变色

  

     

     代码实现很简单，其他类就不贴出来了。有什么其他不懂的地方可以看Demo.

    Demo