ViewPager+RadioGroup实现微信UI界面

本次的练习是使用ViewPager+RadioGroup实现类似微信的效果，可以左右滑动切换到不同的页面，也可以单击底部的tab来切换到不同的页面。先看一下效果图：

由于底部四个不同的按钮没有找到和微信完全对应的，所以重复使用了其中的两个按钮（这并不影响功能）。四个不同的页面是我的手机微信截图的。

总体的思路如下：

1.定义主页面的布局文件，上中下结构，上面就是一个不变的标题栏，中间滑动变化的就是ViewPager，下面是RadioGroup里面包含的四个按钮。

2.定义一个BasePager类，作为四个子页面的基类。这样做的好处是在MainActivity中可以把四个具体的子类加入到一个以BasePager作为对象的集合中，作为ViewPager的页数进行切换。

3.让具体的四个页面的子类继承BasePager类，他们的界面由自己定义，然后返回给BasePager。

4.给RadioGroup设置选中监听事件，根据选中的按钮来切换到对应的pager。给ViewPager设定切换页面的监听，根据切换到的页面来设定选中的按钮。

以后是按照这上面的步骤来具体的看看是怎么实现的。

首先看一下MainActivity的布局文件：

<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" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/top_bg" >
    </RelativeLayout>

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

    <RadioGroup
        android:id="@+id/rg_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/rb_weixin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=""
            android:button="@null"
            android:drawablePadding="dp"
            android:drawableTop="@drawable/weixin_radio_selector"
            android:gravity="center"
            android:padding="dp"
            android:text="微信"
            android:textColor="@drawable/text_radio_selector" />

        <RadioButton
            android:id="@+id/rb_list"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=""
            android:button="@null"
            android:drawablePadding="dp"
            android:drawableTop="@drawable/list_radio_selector"
            android:gravity="center"
            android:padding="dp"
            android:text="通讯录"
            android:textColor="@drawable/text_radio_selector" />

        <RadioButton
            android:id="@+id/rb_disc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=""
            android:button="@null"
            android:drawablePadding="dp"
            android:drawableTop="@drawable/disc_radio_selector"
            android:gravity="center"
            android:padding="dp"
            android:text="发现"
            android:textColor="@drawable/text_radio_selector" />


        <RadioButton
            android:id="@+id/rb_me"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=""
            android:button="@null"
            android:drawablePadding="dp"
            android:drawableTop="@drawable/my_radio_selector"
            android:gravity="center"
            android:padding="dp"
            android:text="我"
            android:textColor="@drawable/text_radio_selector" />
    </RadioGroup>

</LinearLayout>
           

就是上面总体思路的第一步，相信都能看得懂这些属性，里面有几个selector选择器，其中按钮的xml如下：

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/tab_weixin_press" android:state_checked="true"/>
    <item android:drawable="@drawable/tab_weixin"/>

</selector>
           

四个是一样的，只是图片更换一下就ok。

文字颜色选择器xml文件如下：

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:color="#0f0"/>
    <item android:color="#8000"/>

</selector>
           

就是选中和没选中的颜色不同。

接下来看一下BasePager类，因为BasePager是四个子页面的基类，具体的布局界面有四个子类来完成，所以它没有自己的布局文件。

public abstract class BasePager {

    public Activity mActivity;

    public View mRootView;// 布局对象

    // public FrameLayout flContent;// 内容布局对象

    public BasePager(Activity activity) {
        mActivity = activity;

        mRootView = initViews();
    }

    /**
     * 初始化布局
     */
    public abstract View initViews();

    /**
     * 初始化数据
     */
    public void initData() {
    }

}
           

代码很简单，是一个抽象的类，它的界面mRootView由具体的子类完成以后返回。

然后就是实现BasePager的具体子类了，由于四个页面几乎是一致的，所以列举出一个页面的代码：

public class WeixinPager extends BasePager {

    private View WeixinView;

    public WeixinPager(Activity activity) {
        super(activity);
    }

    //实现抽象方法，返回View
    @Override
    public View initViews() {
        WeixinView = View.inflate(mActivity, R.layout.activity_weixin, null);
        return WeixinView;
    }

    @Override
    public void initData() {

    }
}

就是实现了一个initView()方法，它的布局就是一个ImageView，然后设置微信四个页面的背景图片，这里就不贴出来了。


接下来在MainActivity中创建一个集合来存放这四个子类
           

// 初始化4个子页面

mPagerList = new ArrayList();

mPagerList.add(new WeixinPager(this));
    mPagerList.add(new ListPager(this));
    mPagerList.add(new DiscPager(this));
    mPagerList.add(new MyPager(this));
           

然后给RadioGroup设定一个默认 选中页，并且当RadioGroup选中不同的按钮时，切换到不同的页面：

rgGroup.check(R.id.rb_weixin);// 默认勾选首页
rgGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                case R.id.rb_weixin:
                    vpContent.setCurrentItem(, false);
                    break;
                case R.id.rb_list:
                    vpContent.setCurrentItem(, false);
                    break;
                case R.id.rb_disc:
                    vpContent.setCurrentItem(, false);
                    break;
                case R.id.rb_me:
                    vpContent.setCurrentItem(, false);
                    break;

                default:
                    break;
                }
            }
        });
           

最后给ViewPager设定页面改变的监听事件：

vpContent.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                switch (arg0) {
                case :
                    rgGroup.check(R.id.rb_weixin);
                    break;
                case :
                    rgGroup.check(R.id.rb_list);
                    break;
                case :
                    rgGroup.check(R.id.rb_disc);
                    break;
                case :
                    rgGroup.check(R.id.rb_me);
                    break;

                default:
                    break;
                }
            }
           

这样就实现了ViewPager滑动到不同的页面时底部的tab按钮也会相应的改变。

好了，按照以上四个步骤就实现了这个仿微信的UI界面。

源码下载