ViewPager+RadioGroup实现仿微信主界面

话不多说,先上图，如图 效果，可以点击底部按钮选择页面，也可以滑动页面进行选择。

那么我们下面就来实现一下吧。

• 首先创建工程WXTest,主界面布局使用ViewPager+RadioGroup来实现,界面代码如下。

<?xml version="1.0" encoding="utf-8"?>
<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/view_pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            >
        </android.support.v4.view.ViewPager>
        <TextView
            android:id="@+id/division_line"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#333333"
            android:layout_above="@+id/rg_contain"
            />
        <RadioGroup
            android:id="@+id/rg_contain"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_alignParentBottom="true"
            android:gravity="center"
            android:background="#ffffff"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/rb_wx"
                style="@style/BottomTabStyle"
                android:checked="true"
                android:text="微信"
                android:drawableTop="@drawable/tab_radiobutton_wx_selector"
                android:textColor="@color/txt_tab_selector"
                />

            <RadioButton
                android:id="@+id/rb_book"
                style="@style/BottomTabStyle"
                android:checked="true"
                android:text="通讯录"
                android:drawableTop="@drawable/tab_radiobutton_book_selector"
                android:textColor="@color/txt_tab_selector"
                />

            <RadioButton
                android:id="@+id/rb_discover"
                style="@style/BottomTabStyle"
                android:checked="true"
                android:text="发现"
                android:drawableTop="@drawable/tab_radiobutton_discover_selector"
                android:textColor="@color/txt_tab_selector"
                />

            <RadioButton
                android:drawableTop="@drawable/tab_radiobutton_me_selector"
                android:id="@+id/rb_me"
                style="@style/BottomTabStyle"
                android:checked="true"
                android:text="我"
                android:textColor="@color/txt_tab_selector"
                />
        </RadioGroup>
</LinearLayout>

在MainActivity中进行初始化数据

 mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mRGContain = (RadioGroup) findViewById(R.id.rg_contain);
        mRBWX = (RadioButton) findViewById(R.id.rb_wx);
        mRBBook = (RadioButton) findViewById(R.id.rb_book);
        mRBDiscover = (RadioButton) findViewById(R.id.rb_discover);
        mRBMe = (RadioButton) findViewById(R.id.rb_me);

        //给图标设置大小
        Drawable drawableRbWX = mRBWX.getCompoundDrawables()[1];
        drawableRbWX.setBounds(0,0, dp2px(24),dp2px(24));
        mRBWX.setCompoundDrawables(null,drawableRbWX,null,null);

        Drawable drawableRbBook = mRBBook.getCompoundDrawables()[1];
        drawableRbBook.setBounds(0,0, dp2px(24), dp2px(24));
        mRBBook.setCompoundDrawables(null,drawableRbBook,null,null);

        Drawable drawableRbDiscover = mRBDiscover.getCompoundDrawables()[1];
        drawableRbDiscover.setBounds(0,0, dp2px(24), dp2px(24));
        mRBDiscover.setCompoundDrawables(null,drawableRbDiscover,null,null);

        Drawable drawableRbMe = mRBMe.getCompoundDrawables()[1];
        drawableRbMe.setBounds(0,0, dp2px(24), dp2px(24));
        mRBMe.setCompoundDrawables(null,drawableRbMe,null,null);


  /**
     * dp 转 px
     * @param dp
     * @return
     */
    public  int dp2px(int dp) {
        // 1、获取屏幕密度
        float density = getApplicationContext().getResources().getDisplayMetrics().density;
        // 2、进行乘法操作
        return (int) (dp * density + 0.5);
    }

给ViewPager设置数据我们使用FragmentPagerAdapter ,所以MainActivity需要继承FragmentActivity。Fragment选择V4包，可以兼容低版本。
新建BaseFragment继承Fragment,让子类实现initView()方法。

public abstract class BaseFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return initView(inflater,container,savedInstanceState);
    }

    public abstract View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState);
}

微信界面

public class WXFragment extends BaseFragment {
    @Override
    public View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.wx_fragment, container,false);
        return view;
    }
}

wx_fragment.xml代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="微信"
        android:textSize="15dp"
        />

</LinearLayout>

其余三个界面类似

/**
 * 通讯录界面
 */
public class BookFragment extends BaseFragment {
    @Override
    public View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.book_fragment, container,false);
        return view;
    }
}

/**
 * 发现界面
 */
public class DiscoverFragment extends BaseFragment {
    @Override
    public View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.discover_fragment, container,false);
        return view;
    }
}


/**
 * 我界面
 */
public class MeFragment extends BaseFragment {
    @Override
    public View initView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.me_fragment, container,false);
        return view;
    }
}

然后使用MainFragmentFactory来存储页面Fragment

package com.example.wxtest.fragment;
import java.util.HashMap;
public class MainFragmentFactory {

    private static HashMap<Integer, BaseFragment> mSavedFragment = new HashMap<Integer, BaseFragment>();

    //根据position得到对应的fragment
    public static BaseFragment getFragment(int position) {
        BaseFragment fragment = mSavedFragment.get(position);
        if(fragment == null) {
            switch (position) {
                case 0:
                    fragment =  new WXFragment();
                    break;
                case 1:
                    fragment = new BookFragment();
                    break;
                case 2:
                    fragment = new DiscoverFragment();
                    break;
                case 3:
                    fragment = new MeFragment();
                    break;
            }
            //创建之后保存
            mSavedFragment.put(position, fragment);
        }


        return fragment;
    }
    public static void deleteFragment(){
        for (int i = 0 ; i < 4 ; i++){
            mSavedFragment.remove(i);
        }

    }

}

适配器

 /**
     * 适配器
     */
    class MainFragmentAdapter extends FragmentPagerAdapter {

        public MainFragmentAdapter(FragmentManager fm) {
            super(fm);
        }

        //根据position的值 返回对应的fragment对象
        @Override
        public Fragment getItem(int position) {
            Fragment fragment = MainFragmentFactory.getFragment(position);
            return fragment;
        }

        //返回ViewPager要显示的item数量
        @Override
        public int getCount() {
            return 4;
        }

    }

ViewPager设置数据

     //给ViewPager设置数据
        mViewPager.setAdapter(new MainFragmentAdapter(getSupportFragmentManager()));

ViewPager页面选中监听

//界面改变监听
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            //当前选中页面
            @Override
            public void onPageSelected(int position) {
                switch (position){
                    case 0:
                        mRGContain.check(R.id.rb_wx);
                        break;
                    case 1:
                        mRGContain.check(R.id.rb_book);
                        break;
                    case 2:
                        mRGContain.check(R.id.rb_discover);
                        break;
                    case 3:
                        mRGContain.check(R.id.rb_me);
                        break;
                    default:
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

RadioGroup选中监听

 //RadioGroup选中监听
        mRGContain.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId){
                    case R.id.rb_wx: //微信
                        mViewPager.setCurrentItem(0,false);
                        break;
                    case R.id.rb_book: //通讯录
                        mViewPager.setCurrentItem(1,false);
                        break;
                    case R.id.rb_discover: //发现
                        mViewPager.setCurrentItem(2,false);
                        break;
                    case R.id.rb_me: //我
                        mViewPager.setCurrentItem(3,false);
                        break;
                    default:
                        break;
                }
            }
        });


        //选中微信界面
        mRGContain.check(R.id.rb_wx);

然后运行程序，就可以实现图中的效果了！

源码链接