ViewPager+RadioGroup实现微信UI界面
2016-07-07 11:13
405 查看
本次的练习是使用ViewPager+RadioGroup实现类似微信的效果,可以左右滑动切换到不同的页面,也可以单击底部的tab来切换到不同的页面。先看一下效果图:
![](http://img.blog.csdn.net/20160707090632377)
由于底部四个不同的按钮没有找到和微信完全对应的,所以重复使用了其中的两个按钮(这并不影响功能)。四个不同的页面是我的手机微信截图的。
总体的思路如下:
1.定义主页面的布局文件,上中下结构,上面就是一个不变的标题栏,中间滑动变化的就是ViewPager,下面是RadioGroup里面包含的四个按钮。
2.定义一个BasePager类,作为四个子页面的基类。这样做的好处是在MainActivity中可以把四个具体的子类加入到一个以BasePager作为对象的集合中,作为ViewPager的页数进行切换。
3.让具体的四个页面的子类继承BasePager类,他们的界面由自己定义,然后返回给BasePager。
4.给RadioGroup设置选中监听事件,根据选中的按钮来切换到对应的pager。给ViewPager设定切换页面的监听,根据切换到的页面来设定选中的按钮。
以后是按照这上面的步骤来具体的看看是怎么实现的。
首先看一下MainActivity的布局文件:
就是上面总体思路的第一步,相信都能看得懂这些属性,里面有几个selector选择器,其中按钮的xml如下:
四个是一样的,只是图片更换一下就ok。
文字颜色选择器xml文件如下:
就是选中和没选中的颜色不同。
接下来看一下BasePager类,因为BasePager是四个子页面的基类,具体的布局界面有四个子类来完成,所以它没有自己的布局文件。
代码很简单,是一个抽象的类,它的界面mRootView由具体的子类完成以后返回。
然后就是实现BasePager的具体子类了,由于四个页面几乎是一致的,所以列举出一个页面的代码:
// 初始化4个子页面
mPagerList = new ArrayList();
然后给RadioGroup设定一个默认 选中页,并且当RadioGroup选中不同的按钮时,切换到不同的页面:
最后给ViewPager设定页面改变的监听事件:
这样就实现了ViewPager滑动到不同的页面时底部的tab按钮也会相应的改变。
好了,按照以上四个步骤就实现了这个仿微信的UI界面。
源码下载
由于底部四个不同的按钮没有找到和微信完全对应的,所以重复使用了其中的两个按钮(这并不影响功能)。四个不同的页面是我的手机微信截图的。
总体的思路如下:
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="1" /> <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="1" android:button="@null" android:drawablePadding="3dp" android:drawableTop="@drawable/weixin_radio_selector" android:gravity="center" android:padding="5dp" 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="1" android:button="@null" android:drawablePadding="3dp" android:drawableTop="@drawable/list_radio_selector" android:gravity="center" android:padding="5dp" 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="1" android:button="@null" android:drawablePadding="3dp" android:drawableTop="@drawable/disc_radio_selector" android:gravity="center" android:padding="5dp" 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="1" android:button="@null" android:drawablePadding="3dp" android:drawableTop="@drawable/my_radio_selector" android:gravity="center" android:padding="5dp" 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(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界面。
源码下载
相关文章推荐
- 社交巨头三国杀:微信、WhatsApp、Line到底有啥区别?
- GUI - Web前端开发框架
- 微信悄悄升级群聊功能:个人微信营销号的福音
- 评价ui设计作品好坏的八个标准(界面/交互设计研究)
- 突击部队拼多多
- 我是运营,我没有假期
- 如何做到日消息量100万的微信公众号?
- 论微信取消推送功能的可能性(原创)
- 微信的成功,靠的是QQ导流吗?
- 「Linux 中国」2018 微信文章排行榜
- 马化腾亲自“站台” 企业微信和个人微信互通能带来什么?
- 一个微信群的兴亡
- 微信服务号推送模板消息接口
- Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
- C#微信公众号与订阅号接口开发示例代码
- 为Yahoo! UI Extensions Grid增加内置的可编辑器