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.VIEwPagerandroID: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.FragmentTabHostandroID: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@OverrIDepublic 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"><ImageVIEwandroID:ID="@+ID/icon"androID:layout_wIDth="30dp"androID:layout_height="30dp"androID:layout_gravity="center"/><TextVIEwandroID: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*/@OverrIDepublic 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偏移的像素值 从原始位置的便宜像素*/@OverrIDepublic voID onPageScrolled(int position,float positionOffset,int positionOffsetPixels) {log("onPageScrolled=============position:"+position+"====positionOffset:"+positionOffset+"====positionOffsetPixels:"+positionOffsetPixels);}/*** 页面选中后* @param position 当前页面的index*/@OverrIDepublic voID onPageSelected(int position) {tabHost.setCurrentTab(position);log("onPageSelected==========:position:"+position);}/*** 页面滑动状态改变时触发* @param state 当前滑动状态 共三个状态值*/@OverrIDepublic 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;@OverrIDeprotected 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);//初始化TabHostinitTabHost();//初始化pagerinitPager();//添加监听关联TabHost和vIEwPagerbindTabAndPager();}/*** 为TabHost和vIEwPager 添加监听 让其联动*/private voID bindTabAndPager() {tabHost.setonTabChangedListener(new TabHost.OnTabchangelistener() {/*** tab改变后* @param tabID 当前tab的tag*/@OverrIDepublic voID onTabChanged(String tabID) {log("vonTabChanged:"+tabID);int position = tabHost.getCurrentTab();pager.setCurrentItem(position,int positionOffsetPixels) {log("onPageScrolled=============position:"+position+"====positionOffset:"+positionOffset+"====positionOffsetPixels:"+positionOffsetPixels);}/*** 页面选中后* @param position 当前页面的index*/@OverrIDepublic voID onPageSelected(int position) {tabHost.setCurrentTab(position);log("onPageSelected==========:position:"+position);}/*** 页面滑动状态改变时触发* @param state 当前滑动状态 共三个状态值*/@OverrIDepublic 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,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.TabLayoutandroID: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.VIEwPagerandroID: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.TabLayoutandroID: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*/@OverrIDepublic voID onTabSelected(TabLayout.Tab tab) {//与pager 关联pager.setCurrentItem(tab.getposition(),true);}/*** 退出选中状态时触发* @param tab 退出选中的tab*/@OverrIDepublic voID onTabUnselected(TabLayout.Tab tab) {}/*** 重复选择时触发* @param tab 被 选择的tab*/@OverrIDepublic voID onTabReselected(TabLayout.Tab tab) {}});pager.addOnPagechangelistener(new VIEwPager.OnPagechangelistener() {@OverrIDepublic voID onPageScrolled(int position,int positionOffsetPixels) {}@OverrIDepublic voID onPageSelected(int position) {//关联 TabLayouttabLayoutMenu.getTabAt(position).select();}@OverrIDepublic 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;@OverrIDeprotected 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.setSelectedTabIndicatorHeight(0);//去除指示器tabLayoutMenu.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {/*** 选中tab后触发* @param tab 选中的tab*/@OverrIDepublic voID onTabSelected(TabLayout.Tab tab) {//与pager 关联pager.setCurrentItem(tab.getposition(),int positionOffsetPixels) {}@OverrIDepublic voID onPageSelected(int position) {//关联 TabLayouttabLayoutMenu.getTabAt(position).select();}@OverrIDepublic 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,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;}@OverrIDepublic Fragment getItem(int position) {return fragments.get(position);}@OverrIDepublic int getCount() {return fragments ==null ?0:fragments.size();}@OverrIDepublic CharSequence getPageTitle(int position) {return Titles[position];}}

目前就总结了这几种方式 想到别的方式 再总结

关于这个 Demo的github ：https://github.com/sky-mxc/AndroidDemo/tree/master/fragment

以上所示是小编给大家介绍的AndroID开发之微信底部菜单栏实现的几种方法汇总，希望对大家有所帮助！

总结

以上是内存溢出为你收集整理的Android开发之微信底部菜单栏实现的几种方法汇总全部内容，希望文章能够帮你解决Android开发之微信底部菜单栏实现的几种方法汇总所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。