本次的练习是使用ViewPager+RadioGroup实现类似微信的效果,可以左右滑动切换到不同的页面,也可以单击底部的tab来切换到不同的页面。先看一下效果图:
由于底部四个不同的按钮没有找到和微信完全对应的,所以重复使用了其中的两个按钮(这并不影响功能)。四个不同的页面是我的手机微信截图的。
总体的思路如下:
1.定义主页面的布局文件,上中下结构,上面就是一个不变的标题栏,中间滑动变化的就是ViewPager,下面是RadioGroup里面包含的四个按钮。
2.定义一个BasePager类,作为四个子页面的基类。这样做的好处是在MainActivity中可以把四个具体的子类加入到一个以BasePager作为对象的集合中,作为ViewPager的页数进行切换。
3.让具体的四个页面的子类继承BasePager类,他们的界面由自己定义,然后返回给BasePager。
4.给RadioGroup设置选中监听事件,根据选中的按钮来切换到对应的pager。给ViewPager设定切换页面的监听,根据切换到的页面来设定选中的按钮。
以后是按照这上面的步骤来具体的看看是怎么实现的。
首先看一下MainActivity的布局文件:
就是上面总体思路的第一步,相信都能看得懂这些属性,里面有几个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按钮也会相应的改变。
好了,按照以上四个步骤就实现了这个仿微信的UI界面。