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

最新推荐文章于 2023-06-19 09:15:00 发布

持续低熵

最新推荐文章于 2023-06-19 09:15:00 发布

阅读量295

点赞数

文章标签： java底部菜单

本文链接：https://blog.csdn.net/weixin_32379547/article/details/114654925

版权

实现方式

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

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布局

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:id="@+id/pager"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1">

android:id="@+id/tab_host"

android:layout_width="match_parent"

android:layout_height="wrap_content">

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 的布局图片在上文本在下比较简单

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/icon"

android:layout_width="30dp"

android:layout_height="30dp"

android:layout_gravity="center"/>

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"/>

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 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 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 分别实现自动关联和手动关联

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:id="@+id/tab_layout"

android:layout_width="match_parent"

android:layout_height="wrap_content"

app:tabMode="fixed"

app:tabSelectedTextColor="#f0f"

app:tabIndicatorColor="#f0f">

android:id="@+id/container"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1">

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">

初始化自动关联的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 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 fragments ;

private String[] titles = new String[]{"发现","关注","消息","我的"};

public FragmentAdapter(FragmentManager fm,List 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];

}

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

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

持续低熵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
java底部菜单_Android开发之微信底部菜单栏实现的几种方法汇总

实现方式实现的方式有很多种这里总结最常见的几种方式，以后再添加其他的。viewPager + RadioGroupviewPager + FragmentTabHostviewpager +TabLayoutviewPager+RadioGroup感觉这是最简单的一个了，我也就不贴代码说说我理解的思路吧通过给pager 和RadioGroup 添加监听，监听两个控件的变化实现联动当viewP...
复制链接

扫一扫