Android(安卓)自定义底部导航栏

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

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

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

 private static final String KEY_CURRENT_TAG = "NavigateTabBar";    private List 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属性

重头戏添加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);    }

更多相关文章

随机推荐