Android开发之微信底部菜单栏实现的几种方法汇总
实现方式
实现的方式有很多种 这里总结最常见的几种方式,以后再添加其他的。
viewpager + radiogroup
viewpager + fragmenttabhost
viewpager +tablayout
viewpager+radiogroup
感觉这是最简单的一个了,我也就不贴代码 说说我理解的思路吧
通过给pager 和radiogroup 添加监听,监听两个控件的变化 实现联动
当viewpager的显示pager改变就会触发监听 ,在监听中选中对应的radiobutton即可
当radiogroup发生 选中改变时也会触发监听 ,在选中改变后 设置显示对应的pager即可
fragmenttabhost +viewpager
这个方式 跟上面那个方式差不多 都是通过 监听 实现联动
如果只使用fragmenttabhost 只能实现 点击tab切换 页面的效果 不能实现左右滑动 而 结合viewpager 刚好实现这一效果
先来看看fragmenttabhost经常用的方法
- setup() 在使用addtab之前调用 设置必要的数据 如 fragmentmanager,fragment的容器id - addtab() 添加标签 - newtabspec() 新建 tab - setcurrenttab() 设置当前显示的标签 - setonchangetablisttener 设置tab选中改变监听 - tabhost.gettabwidget().setdividerdrawable(null); //去除间隔线 - tab的常用方法: - setindicator() 可以设置view 和 字符串 main布局 <?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:id="@+id/activity_tab_pager" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.skymxc.demo.fragment.tabpageractivity"> <android.support.v4.view.viewpager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"></android.support.v4.view.viewpager> <android.support.v4.app.fragmenttabhost android:id="@+id/tab_host" android:layout_width="match_parent" android:layout_height="wrap_content"></android.support.v4.app.fragmenttabhost> </linearlayout>
framgent 简单起见 就不写布局文件了 其他的fragment 跟这个类似
public class discoverfragment extends fragment { @nullable @override public view oncreateview(layoutinflater inflater, @nullable viewgroup container, @nullable bundle savedinstancestate) { textview textview = new textview(getactivity()); textview.settext("发现"); textview.setgravity(gravity.center); return textview; } }
tab 的布局 图片在上 文本在下 比较简单
<?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"> <imageview android:id="@+id/icon" android:layout_width="30dp" android:layout_height="30dp" android:layout_gravity="center"/> <textview android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textcolor="@color/selector_font" android:text="发现" android:layout_gravity="center"/> </linearlayout>
selector 基本类似 这里贴一个
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@mipmap/cb_icon_discover_selected"/> <item android:drawable="@mipmap/cb_icon_discover_normal"/> </selector>
java 代码
初始化 tabhost
private void inittabhost() { tabhost.setup(this,getsupportfragmentmanager(), r.id.pager); tabhost.gettabwidget().setdividerdrawable(null); tabhost.addtab(tabhost.newtabspec("discover").setindicator(createview(r.drawable.selector_bg,"发现")), discoverfragment.class,null); tabhost.addtab(tabhost.newtabspec("attach").setindicator(createview(r.drawable.selector_bg_attach,"关注")), attachfragment.class,null); tabhost.addtab(tabhost.newtabspec("message").setindicator(createview(r.drawable.selector_bg_message,"消息")), msgfragment.class,null); tabhost.addtab(tabhost.newtabspec("info").setindicator(createview(r.drawable.selector_bg_info,"我的")), contactfragment.class,null); }
初始化 pager 并绑定适配器
/** * 初始化 pager 绑定适配器 */ private void initpager() { fragments = new arraylist<>(); fragments.add(new discoverfragment()); fragments.add(new attachfragment()); fragments.add(new msgfragment()); fragments.add(new contactfragment()); fragmentadapter adapter = new fragmentadapter(getsupportfragmentmanager(),fragments); pager.setadapter(adapter); }
分别给 tabhost 和pager 添加监听 实现联动
/** * 为tabhost和viewpager 添加监听 让其联动 */ private void bindtabandpager() { tabhost.setontabchangedlistener(new tabhost.ontabchangelistener() { /** * tab改变后 * @param tabid 当前tab的tag */ @override public void ontabchanged(string tabid) { log("vontabchanged:"+tabid); int position = tabhost.getcurrenttab(); pager.setcurrentitem(position,true); } }); pager.addonpagechangelistener(new viewpager.onpagechangelistener() { /** * 页面滑动 触发 * @param position 当前显得第一个页面的索引,当滑动出现时屏幕就会显示两个pager, 向右滑 position为当前-1(左边的pager就显示出来了),向左滑position为当前(右面就显出来了), * @param positionoffset 0-1之间 position的偏移量 从原始位置的偏移量 * @param positionoffsetpixels 从position偏移的像素值 从原始位置的便宜像素 */ @override public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) { log("onpagescrolled=============position:"+position+"====positionoffset:"+positionoffset+"====positionoffsetpixels:"+positionoffsetpixels); } /** * 页面选中后 * @param position 当前页面的index */ @override public void onpageselected(int position) { tabhost.setcurrenttab(position); log("onpageselected==========:position:"+position); } /** * 页面滑动状态改变时触发 * @param state 当前滑动状态 共三个状态值 */ @override public void onpagescrollstatechanged(int state) { string statestr=""; switch (state){ case viewpager.scroll_state_dragging: statestr="正在拖动"; break; case viewpager.scroll_state_settling: statestr="正在去往最终位置 即将到达最终位置"; break; case viewpager.scroll_state_idle: statestr="滑动停止,当前页面充满屏幕"; break; } log("onpagescrollstatechanged========statecode:"+state+"====state:"+statestr); } }); }
完整代码
public class tabpageractivity extends appcompatactivity { private static final string tag ="tabpageractivity"; private fragmenttabhost tabhost; private viewpager pager; private list<fragment> fragments; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_tab_pager); tabhost = (fragmenttabhost) findviewbyid(r.id.tab_host); pager = (viewpager) findviewbyid(r.id.pager); //初始化tabhost inittabhost(); //初始化pager initpager(); //添加监听关联tabhost和viewpager bindtabandpager(); } /** * 为tabhost和viewpager 添加监听 让其联动 */ private void bindtabandpager() { tabhost.setontabchangedlistener(new tabhost.ontabchangelistener() { /** * tab改变后 * @param tabid 当前tab的tag */ @override public void ontabchanged(string tabid) { log("vontabchanged:"+tabid); int position = tabhost.getcurrenttab(); pager.setcurrentitem(position,true); } }); pager.addonpagechangelistener(new viewpager.onpagechangelistener() { /** * 页面滑动 触发 * @param position 当前显得第一个页面的索引,当滑动出现时屏幕就会显示两个pager, 向右滑 position为当前-1(左边的pager就显示出来了),向左滑position为当前(右面就显出来了), * @param positionoffset 0-1之间 position的偏移量 从原始位置的偏移量 * @param positionoffsetpixels 从position偏移的像素值 从原始位置的便宜像素 */ @override public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) { log("onpagescrolled=============position:"+position+"====positionoffset:"+positionoffset+"====positionoffsetpixels:"+positionoffsetpixels); } /** * 页面选中后 * @param position 当前页面的index */ @override public void onpageselected(int position) { tabhost.setcurrenttab(position); log("onpageselected==========:position:"+position); } /** * 页面滑动状态改变时触发 * @param state 当前滑动状态 共三个状态值 */ @override public void onpagescrollstatechanged(int state) { string statestr=""; switch (state){ case viewpager.scroll_state_dragging: statestr="正在拖动"; break; case viewpager.scroll_state_settling: statestr="正在去往最终位置 即将到达最终位置"; break; case viewpager.scroll_state_idle: statestr="滑动停止,当前页面充满屏幕"; break; } log("onpagescrollstatechanged========statecode:"+state+"====state:"+statestr); } }); } /** * 初始化 pager 绑定适配器 */ private void initpager() { fragments = new arraylist<>(); fragments.add(new discoverfragment()); fragments.add(new attachfragment()); fragments.add(new msgfragment()); fragments.add(new contactfragment()); fragmentadapter adapter = new fragmentadapter(getsupportfragmentmanager(),fragments); pager.setadapter(adapter); } /** * 初始化 tabhost */ private void inittabhost() { tabhost.setup(this,getsupportfragmentmanager(), r.id.pager); tabhost.gettabwidget().setdividerdrawable(null); tabhost.addtab(tabhost.newtabspec("discover").setindicator(createview(r.drawable.selector_bg,"发现")), discoverfragment.class,null); tabhost.addtab(tabhost.newtabspec("attach").setindicator(createview(r.drawable.selector_bg_attach,"关注")), attachfragment.class,null); tabhost.addtab(tabhost.newtabspec("message").setindicator(createview(r.drawable.selector_bg_message,"消息")), msgfragment.class,null); tabhost.addtab(tabhost.newtabspec("info").setindicator(createview(r.drawable.selector_bg_info,"我的")), contactfragment.class,null); } /** * 返回view * @param icon * @param tab * @return */ private view createview(int icon,string tab){ view view = getlayoutinflater().inflate(r.layout.fragment_tab_discover,null); imageview imageview = (imageview) view.findviewbyid(r.id.icon); textview title = (textview) view.findviewbyid(r.id.title); imageview.setimageresource(icon); title.settext(tab); return view; } private void log(string log){ log.e(tag,"="+log+"="); } }
效果如下:
viewpager +tablayout
tablayout 输入 design的扩展包 使用之前必须得先导入扩展包
tablayout 可以自动去关联 viewpager 只需为tablayout 指定关联的viewpager就可以了
这样是方便了很多,但是也有缺点,在自动关联之后 tablayout会自动去读取 viewpager的title,想使用自定的view当做tab就不可能了
导入 design 扩展包 并排在v7上面
布局 这里使用了两个tablayout 分别实现 自动关联 和 手动关联
<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_tab_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.skymxc.demo.fragment.tablayoutactivity"> <!-- 使用自动关联--> <android.support.design.widget.tablayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabmode="fixed" app:tabselectedtextcolor="#f0f" app:tabindicatorcolor="#f0f"></android.support.design.widget.tablayout> <android.support.v4.view.viewpager android:id="@+id/container" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"></android.support.v4.view.viewpager> <!--通过监听去关联--> <android.support.design.widget.tablayout android:id="@+id/tab_layout_menu" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabmode="fixed" app:tabselectedtextcolor="#ff0" app:tabindicatorcolor="#ff0"></android.support.design.widget.tablayout> </linearlayout>
初始化 自动关联的tab 并和viewpager绑定
private void inittablayoutandpager() { //关联 viewpager 使用关联后 tab就会自动去获取pager的title,使用addtab就会无效 tablayout.setupwithviewpager(pager); fragments = new arraylist<>(); fragments.add(new discoverfragment()); fragments.add(new attachfragment()); fragments.add(new msgfragment()); fragments.add(new contactfragment()); adapter = new fragmentadapter(getsupportfragmentmanager(),fragments); pager.setadapter(adapter); }
tab的布局和上面是一样的。
为tablayout 添加view 自动关联添加也没用
tablayoutmenu.addtab(tablayoutmenu.newtab().setcustomview(createview(r.drawable.selector_bg,"发现"))); tablayoutmenu.addtab(tablayoutmenu.newtab().setcustomview(createview(r.drawable.selector_bg_attach,"关注"))); tablayoutmenu.addtab(tablayoutmenu.newtab().setcustomview(createview(r.drawable.selector_bg_message,"消息"))); tablayoutmenu.addtab(tablayoutmenu.newtab().setcustomview(createview(r.drawable.selector_bg_info,"我的"))); tablayoutmenu.setselectedtabindicatorheight(0);//去除指示器
设置 viewpager的监听和 tablayout的监听 实现联动
tablayoutmenu.addontabselectedlistener(new tablayout.ontabselectedlistener() { /** * 选中tab后触发 * @param tab 选中的tab */ @override public void ontabselected(tablayout.tab tab) { //与pager 关联 pager.setcurrentitem(tab.getposition(),true); } /** * 退出选中状态时触发 * @param tab 退出选中的tab */ @override public void ontabunselected(tablayout.tab tab) { } /** * 重复选择时触发 * @param tab 被 选择的tab */ @override public void ontabreselected(tablayout.tab tab) { } }); pager.addonpagechangelistener(new viewpager.onpagechangelistener() { @override public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) { } @override public void onpageselected(int position) { //关联 tablayout tablayoutmenu.gettabat(position).select(); } @override public void onpagescrollstatechanged(int state) { } });
完整代码
package com.skymxc.demo.fragment; import android.support.design.widget.tablayout; import android.support.v4.app.fragment; import android.support.v4.view.viewpager; import android.support.v7.app.appcompatactivity; import android.os.bundle; import android.view.view; import android.widget.imageview; import android.widget.textview; import com.skymxc.demo.fragment.adapter.fragmentadapter; import com.skymxc.demo.fragment.fragment.attachfragment; import com.skymxc.demo.fragment.fragment.contactfragment; import com.skymxc.demo.fragment.fragment.discoverfragment; import com.skymxc.demo.fragment.fragment.msgfragment; import java.util.arraylist; import java.util.list; public class tablayoutactivity extends appcompatactivity { private tablayout tablayout; private viewpager pager; private tablayout tablayoutmenu; private fragmentadapter adapter ; private list<fragment> fragments; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_tab_layout); tablayout = (tablayout) findviewbyid(r.id.tab_layout); pager = (viewpager) findviewbyid(r.id.container); tablayoutmenu = (tablayout) findviewbyid(r.id.tab_layout_menu); inittablayoutandpager(); //想使用自己的布局就得 通过 监听进行关联 bindpagerandtab(); } private void bindpagerandtab() { tablayoutmenu.addtab(tablayoutmenu.newtab().setcustomview(createview(r.drawable.selector_bg,"发现"))); tablayoutmenu.addtab(tablayoutmenu.newtab().setcustomview(createview(r.drawable.selector_bg_attach,"关注"))); tablayoutmenu.addtab(tablayoutmenu.newtab().setcustomview(createview(r.drawable.selector_bg_message,"消息"))); tablayoutmenu.addtab(tablayoutmenu.newtab().setcustomview(createview(r.drawable.selector_bg_info,"我的"))); tablayoutmenu.setselectedtabindicatorheight(0);//去除指示器 tablayoutmenu.addontabselectedlistener(new tablayout.ontabselectedlistener() { /** * 选中tab后触发 * @param tab 选中的tab */ @override public void ontabselected(tablayout.tab tab) { //与pager 关联 pager.setcurrentitem(tab.getposition(),true); } /** * 退出选中状态时触发 * @param tab 退出选中的tab */ @override public void ontabunselected(tablayout.tab tab) { } /** * 重复选择时触发 * @param tab 被 选择的tab */ @override public void ontabreselected(tablayout.tab tab) { } }); pager.addonpagechangelistener(new viewpager.onpagechangelistener() { @override public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) { } @override public void onpageselected(int position) { //关联 tablayout tablayoutmenu.gettabat(position).select(); } @override public void onpagescrollstatechanged(int state) { } }); } private void inittablayoutandpager() { //关联 viewpager 使用关联后 tab就会自动去获取pager的title,使用addtab就会无效 tablayout.setupwithviewpager(pager); fragments = new arraylist<>(); fragments.add(new discoverfragment()); fragments.add(new attachfragment()); fragments.add(new msgfragment()); fragments.add(new contactfragment()); adapter = new fragmentadapter(getsupportfragmentmanager(),fragments); pager.setadapter(adapter); } private view createview(int icon, string tab){ view view = getlayoutinflater().inflate(r.layout.fragment_tab_discover,null); imageview imageview = (imageview) view.findviewbyid(r.id.icon); textview title = (textview) view.findviewbyid(r.id.title); imageview.setimageresource(icon); title.settext(tab); return view; } }
效果图
这里贴一下 viewpager的适配器
public class fragmentadapter extends fragmentpageradapter { list<fragment> fragments ; private string[] titles = new string[]{"发现","关注","消息","我的"}; public fragmentadapter(fragmentmanager fm,list<fragment> fragments) { super(fm); this.fragments =fragments; } @override public fragment getitem(int position) { return fragments.get(position); } @override public int getcount() { return fragments ==null ?0:fragments.size(); } @override public charsequence getpagetitle(int position) { return titles[position]; } }
目前就总结了这几种方式 想到别的方式 再总结
关于这个 demo的github :https://github.com/sky-mxc/androiddemo/tree/master/fragment
以上所示是小编给大家介绍的android开发之微信底部菜单栏实现的几种方法汇总,希望对大家有所帮助!