本文将带你了解微信开发ViewPager+RadioGroup实现微信UI界面，希望本文对大家学微信有所帮助。

      本次的练习是使用ViewPager+RadioGroup实现类似微信的效果，可以左右滑动切换到不同的页面，也可以单击底部的tab来切换到不同的页面。先看一下效果图：
   
   
    由于底部四个不同的按钮没有找到和微信完全对应的，所以重复使用了其中的两个按钮（这并不影响功能）。四个不同的页面是我的手机微信截图的。
   
    总体的思路如下：
   
    1.定义主页面的布局文件，上中下结构，上面就是一个不变的标题栏，中间滑动变化的就是ViewPager，下面是RadioGroup里面包含的四个按钮。<   喎?""https://www.2cto.com/kf/ware/vc/""   target=""_blank""   class=""keylink"">vcD4NCjxwPjIutqjS5dK7uPZCYXNlUGFnZXLA4KOs1/fOqsvEuPbX09Kzw+a1xLv5wOCho9Xi0fnX9rXEusO0psrH1NpNYWluQWN0aXZpdHnW0L/J0tSw0cvEuPa+38zltcTX08DgvNPI67W90ru49tLUQmFzZVBhZ2Vy1/fOqrbUz/O1xLyvus/W0KOs1/fOqlZpZXdQYWdlcrXE0rPK/b340NDH0Lu7oaM8L3A+DQo8cD4zLsjDvt/M5bXEy8S49tKzw+a1xNfTwOC8zLPQQmFzZVBhZ2VywOCjrMv7w8e1xL3nw+bTydfUvLq2qNLlo6zIu7rzt7W72Lj4QmFzZVBhZ2VyoaM8L3A+DQo8cD40Lrj4UmFkaW9Hcm91cMno1sPRodbQvODM/crCvP6jrLj5vt3RodbQtcSwtMWlwLTH0Lu7tb221NOmtcRwYWdlcqGjuPhWaWV3UGFnZXLJ6Laox9C7u9Kzw+a1xLzgzP2jrLj5vt3H0Lu7tb21xNKzw+bAtMnotqjRodbQtcSwtMWloaM8L3A+DQo8cD7S1LrzysewtNXV1eLJz8PmtcSyvdbowLS+38zltcS/tL+0ysfU9cO0yrXP1rXEoaM8L3A+DQo8cD7K18/Iv7TSu8/CTWFpbkFjdGl2aXR5tcSyvL7WzsS8/qO6PC9wPg0KPHByZSBjbGFzcz0=""brush:java;"">
   
    就是上面总体思路的第一步，相信都能看得懂这些属性，里面有几个selector选择器，其中按钮的xml如下：
   
           
    四个是一样的，只是图片更换一下就ok。
   
    文字颜色选择器xml文件如下：
   
           
    就是选中和没选中的颜色不同。
   
    接下来看一下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(0, false);                    break;                case R.id.rb_list:                      vpContent.setCurrentItem(1, false);                    break;                case R.id.rb_disc:                      vpContent.setCurrentItem(2, false);                    break;                case R.id.rb_me:                      vpContent.setCurrentItem(3, false);                    break;                default:                    break;                }            }        });
    最后给ViewPager设定页面改变的监听事件：
   
    vpContent.setOnPageChangeListener(new OnPageChangeListener() {            @Override            public void onPageSelected(int   arg0) {                switch (arg0)   {                case 0:                      rgGroup.check(R.id.rb_weixin);                    break;                case 1:                      rgGroup.check(R.id.rb_list);                    break;                case 2:                      rgGroup.check(R.id.rb_disc);                    break;                case 3:                      rgGroup.check(R.id.rb_me);                    break;                default:                    break;                }            }
    这样就实现了ViewPager滑动到不同的页面时底部的tab按钮也会相应的改变。
   
 

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！