Android 自定义底部导航栏

在我们开发中呢。项目框架不是三个页面就是四个页面。我们采用  BottomNavigationView 去写。也会采用自定义additem 去完成。今天就简单看一下如何自定义additem去完成一个底部导航。先上图：

可以看到有 1 2 3 4 个选项卡。

第一步：（自定义NavigateTabBar继承LinearLayout）

 private static final String KEY_CURRENT_TAG = "NavigateTabBar";
    private List<ViewHolder> mViewHolderList;
    private OnTabSelectedListener mTabSelectListener;
    private FragmentActivity mFragmentActivity;
    private String                mRestoreTag;
    /**
     * 主内容显示区域View的id
     */
    private int mMainContentLayoutId;
    /**
     * 选中的Tab文字颜色
     */
    private ColorStateList mSelectedTextColor;
    /**
     * 正常的Tab文字颜色
     */
    private ColorStateList mNormalTextColor;
    /**
     * Tab文字的颜色
     */
    private float mTabTextSize;
    /**
     * 默认选中的tab index
     */
    private int mDefaultSelectedTab = 0;
    /**
     * 当前选中的tab
     */
    private int mCurrentSelectedTab;

    private long lastClickTimeStamp = 0;

    public NavigateTabBar(Context context) {
        this(context, null);
    }

    public NavigateTabBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public NavigateTabBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.NavigateTabBar, 0, 0);
        ColorStateList tabTextColor = typedArray.getColorStateList(R.styleable.NavigateTabBar_navigateTabTextColor);
        ColorStateList selectedTabTextColor = typedArray.getColorStateList(R.styleable.NavigateTabBar_navigateTabSelectedTextColor);
        this.mTabTextSize = typedArray.getDimensionPixelSize(R.styleable.NavigateTabBar_navigateTabTextSize, 0);
        this.mMainContentLayoutId = typedArray.getResourceId(R.styleable.NavigateTabBar_containerId, 0);
        this.mNormalTextColor = (tabTextColor != null ? tabTextColor : context.getResources().getColorStateList(R.color.navigate_tabbar_text_normal));

        if (selectedTabTextColor != null) {
            this.mSelectedTextColor = selectedTabTextColor;
        }
        else {
            TypedValue typedValue = new TypedValue();
            context.getTheme().resolveAttribute(R.attr.colorPrimary, typedValue, true);
            this.mSelectedTextColor = context.getResources().getColorStateList(typedValue.resourceId);
        }

        this.mViewHolderList = new ArrayList<>();
    }

这个相信大家都看得懂。紧接着贴出 attr.xml属性

 <declare-styleable name="NavigateTabBar">
        <attr format="color|reference" name="navigateTabTextColor"/>
        <attr format="color|reference" name="navigateTabSelectedTextColor"/>
        <attr format="integer|reference" name="containerId"/>
        <attr format="dimension|reference" name="navigateTabTextSize"/>
    </declare-styleable>

重头戏添加Tab

 /**
     * 添加tab
     *
     * @param tabParam
     */
    public void addTab(TabParam tabParam) {
        int defaultLayout = R.layout.cube_tab_view;
        View view = LayoutInflater.from(getContext()).inflate(defaultLayout, null);
        view.setFocusable(true);

        ViewHolder holder = new ViewHolder();
        holder.tabIndex = this.mViewHolderList.size();
        holder.tag = tabParam.title;
        holder.tabIndex = tabParam.index;
        holder.pageParam = tabParam;
        holder.tabIcon = (ImageView) view.findViewById(R.id.tab_icon);
        holder.tabTitle = ((TextView) view.findViewById(R.id.tab_title));
        holder.redNumTv = (TextView) view.findViewById(R.id.tab_badge_tv);
        holder.redImag = (ImageView)view.findViewById(R.id.tab_badge_red_img);

        if (TextUtils.isEmpty(tabParam.title)) {
            holder.tabTitle.setVisibility(View.GONE);
            RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) holder.tabIcon.getLayoutParams();
            layoutParams.height = RelativeLayout.LayoutParams.MATCH_PARENT;
            holder.tabIcon.setLayoutParams(layoutParams);
        }
        else {
            holder.tabTitle.setText(tabParam.title);
        }

        if (this.mTabTextSize != 0) {
            holder.tabTitle.setTextSize(TypedValue.COMPLEX_UNIT_PX, this.mTabTextSize);
        }
        if(tabParam.index == 0){
            holder.tabTitle.setTextColor(this.mSelectedTextColor);
        }
        else if (this.mNormalTextColor != null) {
            holder.tabTitle.setTextColor(this.mNormalTextColor);
        }

        if (tabParam.backgroundColor > 0) {
            view.setBackgroundResource(tabParam.backgroundColor);
        }

        if (tabParam.iconResId > 0) {
            if(tabParam.index == 0){
                holder.tabIcon.setImageResource(tabParam.iconSelectedResId);
            }
            else{
                holder.tabIcon.setImageResource(tabParam.iconResId);
            }
        }
        else {
            holder.tabIcon.setVisibility(View.INVISIBLE);
        }

        if (tabParam.iconResId > 0 && tabParam.iconSelectedResId > 0) {
            view.setTag(holder);
            view.setOnClickListener(this);
            this.mViewHolderList.add(holder);
        }

        super.addView(view, new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT, 1.0F));
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        if (this.mMainContentLayoutId == 0) {
            throw new RuntimeException("mFrameLayoutId Cannot be 0");
        }
        if (this.mViewHolderList.size() == 0) {
            throw new RuntimeException("mViewHolderList.size Cannot be 0, Please call addTab()");
        }
        if (!(getContext() instanceof FragmentActivity)) {
            throw new RuntimeException("parent activity must is extends FragmentActivity");
        }
        this.mFragmentActivity = (FragmentActivity) getContext();

        ViewHolder defaultHolder = null;

        if (!TextUtils.isEmpty(this.mRestoreTag)) {
            for (ViewHolder holder : this.mViewHolderList) {
                if (TextUtils.equals(this.mRestoreTag, holder.tag)) {
                    defaultHolder = holder;
                    this.mRestoreTag = null;
                    break;
                }
            }
        }
        else {
            defaultHolder = this.mViewHolderList.get(this.mDefaultSelectedTab);
        }
    }

    @Override
    public void onClick(View v) {
        // TODO: 2018/03/30 暂时限制一下频繁切换
        long tempTime = System.currentTimeMillis();
        if (tempTime - lastClickTimeStamp < 100) {
            return;
        }
        lastClickTimeStamp = tempTime;
        Object object = v.getTag();
        if (object != null && object instanceof ViewHolder) {
            ViewHolder holder = (ViewHolder) v.getTag();
            if (this.mTabSelectListener != null) {
                this.mTabSelectListener.onTabSelected(holder);
                if(holder.tabIndex == 2){
                    return;
                }
                this.selectIcon(holder.tabIndex);
            }
        }
    }

    /**
     * 设置选中的tab文字颜色
     *
     * @param color
     */
    public void setSelectedTabTextColor(int color) {
        this.mSelectedTextColor = ColorStateList.valueOf(color);
    }

    /**
     * 设置tab文字颜色
     *
     * @param color
     */
    public void setTabTextColor(int color) {
        this.mNormalTextColor = ColorStateList.valueOf(color);
    }

    /**
     * 设置fragment布局文件
     *
     * @param frameLayoutId
     */
    public void setFrameLayoutId(int frameLayoutId) {
        this.mMainContentLayoutId = frameLayoutId;
    }

    /**
     * 恢复状态
     *
     * @param savedInstanceState
     */
    public void onRestoreInstanceState(Bundle savedInstanceState) {
        if (savedInstanceState != null) {
            this.mRestoreTag = savedInstanceState.getString(KEY_CURRENT_TAG);
        }
    }



    private void selectIcon(int position) {
        for (ViewHolder holder : this.mViewHolderList) {
            if (position != holder.tabIndex) {
                holder.tabIcon.setImageResource(holder.pageParam.iconResId);
                holder.tabTitle.setTextColor(this.mNormalTextColor);
            }
            else {
                holder.tabIcon.setImageResource(holder.pageParam.iconSelectedResId);
                holder.tabTitle.setTextColor(this.mSelectedTextColor);
            }
        }
    }

    /**
     * ViewHolder
     */
    public static class ViewHolder {
        public String    tag;
        public int       tabIndex;
        public TabParam  pageParam;
        public ImageView tabIcon;
        public TextView  tabTitle;
        public TextView  redNumTv;
        public ImageView redImag;
    }

    /**
     * tab参数类
     */
    public static class TabParam {
        public int backgroundColor = android.R.color.white;
        public int    iconResId;
        public int    iconSelectedResId;
        public int    titleStringRes;
        public int    tabViewResId;
        public int    index;
        public String title;

        /**
         * 构造方法
         *
         * @param iconResId
         * @param iconSelectedResId
         * @param title
         */
        public TabParam(int iconResId, int iconSelectedResId, String title) {
            this.iconResId = iconResId;
            this.iconSelectedResId = iconSelectedResId;
            this.title = title;
        }

        /**
         * 构造方法
         *
         * @param iconResId
         * @param iconSelectedResId
         * @param title
         * @param index
         */
        public TabParam(int iconResId, int iconSelectedResId, String title, int index) {
            this.iconResId = iconResId;
            this.iconSelectedResId = iconSelectedResId;
            this.title = title;
            this.index = index;
        }

        /**
         * 构造方法
         *
         * @param iconResId
         * @param iconSelectedResId
         * @param titleStringRes
         */
        public TabParam(int iconResId, int iconSelectedResId, int titleStringRes) {
            this.iconResId = iconResId;
            this.iconSelectedResId = iconSelectedResId;
            this.titleStringRes = titleStringRes;
        }

        /**
         * 构造方法
         *
         * @param backgroundColor
         * @param iconResId
         * @param iconSelectedResId
         * @param titleStringRes
         */
        public TabParam(int backgroundColor, int iconResId, int iconSelectedResId, int titleStringRes) {
            this.backgroundColor = backgroundColor;
            this.iconResId = iconResId;
            this.iconSelectedResId = iconSelectedResId;
            this.titleStringRes = titleStringRes;
        }

        /**
         * 构造方法
         *
         * @param backgroundColor
         * @param iconResId
         * @param iconSelectedResId
         * @param title
         */
        public TabParam(int backgroundColor, int iconResId, int iconSelectedResId, String title) {
            this.backgroundColor = backgroundColor;
            this.iconResId = iconResId;
            this.iconSelectedResId = iconSelectedResId;
            this.title = title;
        }
    }

    /**
     * tab选中监听器
     */
    public interface OnTabSelectedListener {
        void onTabSelected(ViewHolder holder);
    }

    /**
     * 设置tab选中监听器
     *
     * @param tabSelectListener
     */
    public void setTabSelectListener(OnTabSelectedListener tabSelectListener) {
        this.mTabSelectListener = tabSelectListener;
    }

    /**
     * 设置默认选中的tab
     *
     * @param index
     */
    public void setDefaultSelectedTab(int index) {
        if (index >= 0 && index < this.mViewHolderList.size()) {
            this.mDefaultSelectedTab = index;
        }
    }

    /**
     * 获取当前选中的tab
     *
     * @return
     */
    public int getCurrentSelectedTab() {
        return this.mCurrentSelectedTab;
    }

使用得话，

    /**
     * 初始化数据
     */

    private void initData() {
        this.mPopWindowManager = new ExtendPopWindowManager(mContext);
        this.mNavigateTabBar.onRestoreInstanceState(mSavedInstanceState);
        this.mNavigateTabBar.addTab(new NavigateTabBar.TabParam(R.drawable.ic_tab_message_befor, R.drawable.ic_tab_message_down, MAIN_PAGE_MESSAGE, 0));
        this.mNavigateTabBar.addTab(new NavigateTabBar.TabParam(R.drawable.ic_tab_find_befor, R.drawable.ic_tab_find_down, MAIN_PAGE_DISCOVER, 1));
       // this.mNavigateTabBar.addTab(new NavigateTabBar.TabParam(R.drawable.ic_tab_more, R.drawable.ic_tab_more, MAIN_PAGE_MINE, 2));
        this.mNavigateTabBar.addTab(new NavigateTabBar.TabParam(R.drawable.ic_tab_contacts_befor, R.drawable.ic_tab_contacts_down, MAIN_PAGE_CONTACTS, 3));
        this.mNavigateTabBar.addTab(new NavigateTabBar.TabParam(R.drawable.ic_tab_mine_befor, R.drawable.ic_tab_mine_down, MAIN_PAGE_MINE, 4));
        // 打开默认Fragment
        mRecentFragment = Fragment1.newInstance();
        selectFragment(mRecentFragment, MAIN_PAGE_MESSAGE);
    }