欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android开发之微信底部菜单栏实现的几种方法汇总

程序员文章站 2024-03-05 20:02:55
 实现方式 实现的方式有很多种 这里总结最常见的几种方式,以后再添加其他的。 viewpager + radiogroup viewpager + frag...

 实现方式

实现的方式有很多种 这里总结最常见的几种方式,以后再添加其他的。

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+"=");
}
}

效果如下:

Android开发之微信底部菜单栏实现的几种方法汇总

viewpager +tablayout

tablayout 输入 design的扩展包 使用之前必须得先导入扩展包

tablayout 可以自动去关联 viewpager 只需为tablayout 指定关联的viewpager就可以了

这样是方便了很多,但是也有缺点,在自动关联之后 tablayout会自动去读取 viewpager的title,想使用自定的view当做tab就不可能了

导入 design 扩展包 并排在v7上面

Android开发之微信底部菜单栏实现的几种方法汇总

布局 这里使用了两个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;
}
}

效果图

Android开发之微信底部菜单栏实现的几种方法汇总 

这里贴一下 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开发之微信底部菜单栏实现的几种方法汇总,希望对大家有所帮助!