仿微信底部导航

最新推荐文章于 2021-05-04 09:59:26 发布
最新推荐文章于 2021-05-04 09:59:26 发布
阅读量2k 收藏 2
点赞数 1
分类专栏： 技术 文章标签： 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weinan_w/article/details/51969068
版权

仿微信可左右滑动的底部导航

今天北京下起了大雨，办公室开的空调很低，快冻死我了，很想睡觉，为了自己的梦想，拒绝睡意，写个博客大家看看吧！

  • 封装框架
  • 提高开发速度
  • 减少bug量
  • 少后期项目维护时间

上面所描述的四点：是所有程序名媛的心声，好了我们开始第一步–>框架的封装

底部导航

  • 现在市场上所有的app底部导航几乎采用的都是静态的，像微信那种可左右滑动的底部导航还很少呢。

下面介绍代码

  • 首先看布局文件，很简单，布局中只需要引用自定义的TabView
 <com.ab.view.sliding.AbBottomTabView
      android:id="@+id/mBottomTabView"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent" />
  • 自定义TabView–滑动的tab
public class AbBottomTabView extends LinearLayout {

    /** The context. */
    private Context context;

    /** tab的线性布局. */
    private LinearLayout mTabLayout = null;

    /** The m view pager. */
    private ViewPager mViewPager;

    /** The m listener. */
    private ViewPager.OnPageChangeListener mListener;

    /** tab的列表. */
    private ArrayList<TextView> tabItemList = null;

    /** 内容的View. */
    private ArrayList<Fragment> pagerItemList = null;

    /** tab的文字. */
    private List<String> tabItemTextList = null;

    /** tab的图标. */
    private List<Drawable> tabItemDrawableList = null;

    /** 当前选中编号. */
    private int mSelectedTabIndex = /*0*/2; // 设置默认的显示项

    /** 内容区域的适配器. */
    private AbFragmentPagerAdapter mFragmentPagerAdapter = null;

    /** tab的背景. */
    private int tabBackgroundResource = -1;

    /** tab的文字大小. */
    private int tabTextSize = 15;

    /** tab的文字颜色. */
    private int tabTextColor = Color.BLACK;

    /** tab的选中文字颜色. */
    private int tabSelectColor = Color.WHITE;

    /** The m tab click listener. */
    private OnClickListener mTabClickListener = new OnClickListener() {
        public void onClick(View view) {
            AbTabItemView tabView = (AbTabItemView)view;
            setCurrentItem(tabView.getIndex());
        }
    };


    /**
     * Instantiates a new ab bottom tab view.
     *
     * @param context the context
     * @param attrs the attrs
     */
    public AbBottomTabView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;

        this.setOrientation(LinearLayout.VERTICAL);
//      this.setBackgroundColor(Color.rgb(255, 255, 255));

        mTabLayout = new LinearLayout(context);
        mTabLayout.setOrientation(LinearLayout.HORIZONTAL);
        mTabLayout.setGravity(Gravity.CENTER);
        //内容的View的适配
        mViewPager = new ViewPager(context);
        //手动创建的ViewPager,必须调用setId()方法设置一个id
        mViewPager.setId(1985);
        pagerItemList = new ArrayList<Fragment>();
        this.addView(mViewPager,new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT,0,1));
        addView(mTabLayout, new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));

        //定义Tab栏
        tabItemList = new ArrayList<TextView>();
        tabItemTextList = new ArrayList<String>();
        tabItemDrawableList = new ArrayList<Drawable>();
        //要求必须是FragmentActivity的实例
        if(!(this.context instanceof FragmentActivity)){

        }

        FragmentManager mFragmentManager = ((FragmentActivity)this.context).getFragmentManager();
        mFragmentPagerAdapter = new AbFragmentPagerAdapter(
                mFragmentManager, pagerItemList);
        mViewPager.setAdapter(mFragmentPagerAdapter);
        mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());
        mViewPager.setOffscreenPageLimit(3);

    }



    /**
     * The listener interface for receiving myOnPageChange events.
     * The class that is interested in processing a myOnPageChange
     * event implements this interface, and the object created
     * with that class is registered with a component using the
     * component's <code>addMyOnPageChangeListener<code> method. When
     * the myOnPageChange event occurs, that object's appropriate
     * method is invoked.
     *
     * @see MyOnPageChangeEvent
     */
    public class MyOnPageChangeListener implements OnPageChangeListener{

        /* (non-Javadoc)
         * @see android.support.v4.view.ViewPager.OnPageChangeListener#onPageScrollStateChanged(int)
         */
        @Override
        public void onPageScrollStateChanged(int arg0) {

        }

        /* (non-Javadoc)
         * @see android.support.v4.view.ViewPager.OnPageChangeListener#onPageScrolled(int, float, int)
         */
        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        /* (non-Javadoc)
         * @see android.support.v4.view.ViewPager.OnPageChangeListener#onPageSelected(int)
         */
        @Override
        public void onPageSelected(int arg0) {
            setCurrentItem(arg0);
        }

    }

    /**
     * 描述：设置显示哪一个.
     *
     * @param index the new current item
     */
    public void setCurrentItem(int index) {
        if (mViewPager == null) {
            throw new IllegalStateException("ViewPager has not been bound.");
        }
        mSelectedTabIndex = index;
        final int tabCount = mTabLayout.getChildCount();
        for (int i = 0; i < tabCount; i++) {
            final AbTabItemView child = (AbTabItemView)mTabLayout.getChildAt(i);
            final boolean isSelected = (i == index);
            child.setSelected(isSelected);
            if (isSelected) {
                child.setTabTextColor(tabSelectColor);
                if(tabBackgroundResource!=-1){
                     child.setTabBackgroundResource(tabBackgroundResource);
                }
                if(tabItemDrawableList.size() >= tabCount*2){
                     child.setTabCompoundDrawables(null, tabItemDrawableList.get(index*2+1), null, null);
                }else if(tabItemDrawableList.size() >= tabCount){
                     child.setTabCompoundDrawables(null, tabItemDrawableList.get(index), null, null);
                }
                mViewPager.setCurrentItem(index);
            }else{
                if(tabBackgroundResource!=-1){
                   child.setBackgroundDrawable(null);
                }
                if(tabItemDrawableList.size() >= tabCount*2){
                    child.setTabCompoundDrawables(null, tabItemDrawableList.get(i*2), null, null);
                }
                child.setTabTextColor(tabTextColor);
            }
        }
    }

    /**
     * 描述：设置一个外部的监听器.
     *
     * @param listener the new on page change listener
     */
    public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) {
        mListener = listener;
    }

    /* (non-Javadoc)
     * @see android.widget.LinearLayout#onMeasure(int, int)
     */
    @Override
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    /**
     * 描述：设置单个tab的背景选择器.
     *
     * @param resid the new tab background resource
     */
    public void setTabBackgroundResource(int resid) {
        tabBackgroundResource = resid;
    }

    /**
     * 描述：设置Tab的背景.
     *
     * @param resid the new tab layout background resource
     */
    public void setTabLayoutBackgroundResource(int resid) {
        this.mTabLayout.setBackgroundResource(resid);
    }
    public void setTabBackgroundColor(int color){
        mTabLayout.setBackgroundColor(color);

    }
    /**
     * Gets the tab text size.
     *
     * @return the tab text size
     */
    public int getTabTextSize() {
        return tabTextSize;
    }

    /**
     * Sets the tab text size.
     *
     * @param tabTextSize the new tab text size
     */
    public void setTabTextSize(int tabTextSize) {
        this.tabTextSize = tabTextSize;
    }

    /**
     * 描述：设置tab文字的颜色.
     *
     * @param tabColor the new tab text color
     */
    public void setTabTextColor(int tabColor) {
        this.tabTextColor = tabColor;
    }

    /**
     * 描述：设置选中的颜色.
     *
     * @param tabColor the new tab select color
     */
    public void setTabSelectColor(int tabColor) {
        this.tabSelectColor = tabColor;
    }

    /**
     * 描述：创造一个Tab.
     *
     * @param text the text
     * @param index the index
     */
    private void addTab(String text, int index) {
        addTab(text,index,null);
    }

    /**
     * 描述：创造一个Tab.
     *
     * @param text the text
     * @param index the index
     * @param top the top
     */
    private void addTab(String text, int index,Drawable top) {

        AbTabItemView tabView = new AbTabItemView(this.context);

        if(top!=null){
            tabView.setTabCompoundDrawables(null, top, null, null);
        }
        tabView.setTabTextColor(tabTextColor);
        tabView.setTabTextSize(tabTextSize);

        tabView.init(index,text);
        tabItemList.add(tabView.getTextView());
        tabView.setOnClickListener(mTabClickListener);
        mTabLayout.addView(tabView, new LayoutParams(0,LayoutParams.WRAP_CONTENT,1));
    }

    /**
     * 描述：tab有变化刷新.
     */
    public void notifyTabDataSetChanged() {
        mTabLayout.removeAllViews();
        tabItemList.clear();
        final int count = mFragmentPagerAdapter.getCount();
        for (int i = 0; i < count; i++) {
            if(tabItemDrawableList.size()>=count*2){
                addTab(tabItemTextList.get(i), i,tabItemDrawableList.get(i*2));
            }else if(tabItemDrawableList.size()>=count){
                addTab(tabItemTextList.get(i), i,tabItemDrawableList.get(i));
            }else{
                addTab(tabItemTextList.get(i), i);
            }
        }
        if (mSelectedTabIndex > count) {
            mSelectedTabIndex = count - 1;
        }
        setCurrentItem(mSelectedTabIndex); 
        requestLayout();
    }


    /**
     * 描述：增加一组内容与tab.
     *
     * @param tabTexts the tab texts
     * @param fragments the fragments
     */
    public void addItemViews(List<String> tabTexts,List<Fragment> fragments){

        tabItemTextList.addAll(tabTexts);
        pagerItemList.addAll(fragments);

        mFragmentPagerAdapter.notifyDataSetChanged();
        notifyTabDataSetChanged();
    }

    /**
     * 描述：增加一组内容与tab附带顶部图片.
     *
     * @param tabTexts the tab texts
     * @param fragments the fragments
     * @param drawables the drawables
     */
    public void addItemViews(List<String> tabTexts,List<Fragment> fragments,List<Drawable> drawables){

        tabItemTextList.addAll(tabTexts);
        pagerItemList.addAll(fragments);
        tabItemDrawableList.addAll(drawables);
        mFragmentPagerAdapter.notifyDataSetChanged();
        notifyTabDataSetChanged();
    }

    /**
     * 描述：增加一个内容与tab.
     *
     * @param tabText the tab text
     * @param fragment the fragment
     */
    public void addItemView(String tabText,Fragment fragment){
        tabItemTextList.add(tabText);
        pagerItemList.add(fragment);
        mFragmentPagerAdapter.notifyDataSetChanged();
        notifyTabDataSetChanged();
    }

    /**
     * 描述：增加一个内容与tab.
     *
     * @param tabText the tab text
     * @param fragment the fragment
     * @param drawableNormal the drawable normal
     * @param drawablePressed the drawable pressed
     */
    public void addItemView(String tabText,Fragment fragment,Drawable drawableNormal,Drawable drawablePressed){
        tabItemTextList.add(tabText);
        pagerItemList.add(fragment);
        tabItemDrawableList.add(drawableNormal);
        tabItemDrawableList.add(drawablePressed);
        mFragmentPagerAdapter.notifyDataSetChanged();
        notifyTabDataSetChanged();
    }


    /**
     * 描述：删除某一个.
     *
     * @param index the index
     */
    public void removeItemView(int index){

        mTabLayout.removeViewAt(index);
        pagerItemList.remove(index);
        tabItemList.remove(index);
        tabItemDrawableList.remove(index);
        mFragmentPagerAdapter.notifyDataSetChanged();
        notifyTabDataSetChanged();
    }

    /**
     * 描述：删除所有.
     */
    public void removeAllItemViews(){
        mTabLayout.removeAllViews();
        pagerItemList.clear();
        tabItemList.clear();
        tabItemDrawableList.clear();
        mFragmentPagerAdapter.notifyDataSetChanged();
        notifyTabDataSetChanged();
    }

    /**
     * 描述：获取这个View的ViewPager.
     *
     * @return the view pager
     */
    public ViewPager getViewPager() {
        return mViewPager;
    }

    /**
     * 描述：设置每个tab的边距.
     *
     * @param left the left
     * @param top the top
     * @param right the right
     * @param bottom the bottom
     */
    public void setTabPadding(int left, int top, int right, int bottom) {
        for(int i = 0;i<tabItemList.size();i++){
            TextView tv = tabItemList.get(i);
            tv.setPadding(left, top, right, bottom);
        }
    }

}
  • 最后中间容器用Fragment来填充

项目下载地址　

http://download.csdn.net/detail/weinan_w/9581322

weinan_w
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java BottomNavigationView实现底部导航栏 特别简单
那人独钓寒江雪
02-27 322
底部导航栏
仿微信移动端的底部导航切换，显示高亮文字和图片
皮卡丘の开发之路
08-23 9307
在实现移动手机端的操作时，难免会需要用到切换icon 高亮的操作，下面就来说说切换这点事。因为之前没写过这养分开切换显示的操作，只写过针对当前对象进行切换，但是，其实原理和思路很简单：就是点击选中当前元素，改变当前元素的显示效果，当切换另一个元素的时候，移除当前元素的状态，将切换后的元素加上高亮的显示效果。我首先想到的就是使用javascript的removecClass和addClass来进行操作
Android高仿qq及微信底部菜单的几种实现方式
想你依然心痛的博客
12-15 2万+
最近项目没那么忙，想着开发app的话，有很多都是重复，既然是重复的，那就没有必要每次都去写，所以就想着写一个app通用的基本框架，这里说的框架不是什么MVC,MVP,MVVM这种，而是app开发的通用模式，一般的app都是底部有几个菜单按钮，类似qq这样的，只不过个数不一样而已，设计上说底部的按钮以三到五个为最佳，多或少都会很难看。本来想着自己闲着没事写一下的，不过后来去网上看了看，基本上都有了，自
微信小程序底部导航栏——tabBar
weixin_48553717的博客
05-04 1万+
微信小程序底部导航栏——tabBar 微信小程序底部导航栏是一个常见的基础的功能，下面就让我们一起来探索吧！ 首先上图：完成之后就是这样的效果 对于底部导航栏，小程序上给出的文档要求里面的item最少2个，最多五个。 首先在项目中找到这个文件 话不多说上代码： "tabBar": { "selectedColor":"#33a3dc", "list": [ { "pagePath": "pages/home/home",
仿微信底部导航栏
04-21
在本文中，我们将探讨如何创建和封装一个仿微信底部导航栏，并通过一个工具类实现界面切换。 首先，我们要理解微信底部导航栏的核心功能：响应用户的点击事件，更新选中状态，并相应地切换显示的内容。在Android...
Android实现仿微信底部导航栏
09-16
总之，通过结合使用ViewPager和RadioGroup，我们可以轻松地在Android应用中创建一个仿微信底部导航栏，提升应用的用户体验。这个设计模式不仅适用于微信，还可以广泛应用于许多其他需要多页面切换的应用中。
仿微信底部导航菜单
10-18
在Android应用开发中，微信底部导航菜单是一种常见的用户界面元素，用于实现多页面间的切换，让用户可以方便地在主要功能间进行浏览。这种设计模式在众多应用中被广泛采用，以提供良好的用户体验。本篇文章将深入...
小程序 底部导航栏(tabBar)图标的正确做法
热门推荐
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
05-13 2万+
许多人都认为小程序系统的底部导航栏特别不好看，为了美观而选择自定义，从此身陷漩涡无法自拔。其实真正的原因是图标的图片处理不当（说白了就是前端和设计太菜了），导致会有线条变粗，间距不当的视觉感受。 除小程序外 uni-app框架开发的 app也可参照本篇文章中的方法进行调整 小程序中自定义底部导航是非常不明确的选择，小编有发布过一篇《说一说要求 小程序自定义导航栏 的产品有多沙雕》，文章地址：https://blog.csdn.net/u013350495/article/details/105645..
Android封装好的类似于RadioGroup的底部导航或顶部导航、仿微信底部导航，附源码及demo
07-13
Android封装好的类似于RadioGroup的底部导航或顶部导航、仿微信底部导航，附源码及demo
Android仿微信底部菜单栏+今日头条顶部导航栏
10-16
在Android中实现两种主要的Tab效果： 1. 仿微信底部菜单；2. 仿今日头条顶部导航条。博客讲解见：https://blog.csdn.net/ahuyangdong/article/details/82493158。github源码：https://github.com/ahuyangdong/TabCustom
3分钟教你实现仿微信底部导航栏效果（BottomNavigationView + ViewPager）
Android_小黑
05-19 2121
微信你肯定有，那你想不想知道微信的界面是怎么实现的呢？来，跟着我一探究竟！咱们动手做一个！
android高仿微信底部导航栏
qq_33408235的博客
05-08 7099
这几天在公司没什么工作,闲来没事写了一下关于微信底部渐变的导航,textview 是利用 ArgbEvaluator 实现颜色渐变的效果,图片渐变是自定义imageview 来设置透明度进行渐变的本代码与其他实现的优越性: 代码简单 容易看懂,对新手来说不是问题 直接可以copy到自己的项目中使用 首先看一下效果图先了解一下ArgbEvaluator的使用,ArgbEvaluator俗称颜色计算器,
模仿微信底部输入栏之自定义控件
andp_ma的专栏
05-13 1048
1、onMeasure方法： onMeasure方法在控件的父元素正要放置它的子控件时调用.它会问一个问题，“你想要用多大地方啊？”，然后传入两个参数——widthMeasureSpec和heightMeasureSpec.
安卓商城学习笔记--01-底部导航栏
u014412243的博客
03-28 916
 一、常见的底部菜单（底部导航栏）的实现方式   常见的实现方式有： 1、TabHost+Activity：资源开销比较大，官方已经不推荐使用。 2、RadioButton（RadioGroup）+Fragment：实现起来比较麻烦。 3、FragmentTabHost+Fragment：实现简单，资源开销小，推荐使用。     二、Fra
微信 设置底部导航栏
weixin_43077063的博客
08-27 1万+
转 微信小程序设置底部导航栏目方法 2...
java加载导航栏_Flutter底部导航栏的添加方法（BottomNavigationBar）
weixin_30978387的博客
02-28 181
本节教程将介绍如何添加Flutter底部导航栏的方法，主要用到了FlutterBottomNavigationBar这个组件，底部导航栏几乎是每个移动app必备的设计要求，所有请认真阅读本教程，学会Flutter底部菜单的使用。首先我们新建一个Flutter App，此过程小编就不介绍了，新建之后项目中会有一个“main.dart”的主文件，我们只需要在extends继承“State”这个类的地...
微信小程序 底部导航
最新发布
07-27
微信小程序底部导航是小程序页面底部的导航栏，用于快速切换不同页面。它通常由两个到五个按钮组成，每个按钮表示一个页面。当用户点击导航栏上的按钮时，小程序会切换到相应的页面。 要实现底部导航，首先需要在小...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值