android 自定义底部导航栏

编程语言 2018-12-29 13:15:01 阅读次数: 0


1.编写布局

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_bottom_menu_item"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal">

    <RelativeLayout
        android:id="@+id/rl_bottom_menu_first"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="bottom"
        android:layout_weight="1"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/iv_bottom_menu_first"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/tab_better_pressed" />

        <TextView
            android:id="@+id/tv_bottom_menu_first"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/iv_bottom_menu_first"
            android:layout_centerInParent="true"
            android:text="首页"
            android:textSize="10sp" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_bottom_menu_second"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="bottom"
        android:layout_weight="1"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/iv_bottom_menu_second"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/tab_better_pressed" />

        <TextView
            android:id="@+id/tv_bottom_menu_second"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/iv_bottom_menu_second"
            android:layout_centerInParent="true"
            android:text="美女"
            android:textSize="10sp" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_bottom_menu_third"
        android:layout_width="0dp"
        android:layout_height="90dp"
        android:layout_weight="1"
        android:layout_gravity="bottom"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/iv_bottom_menu_third"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_centerInParent="true"
            android:background="@drawable/tab_better_pressed" />

        <TextView
            android:id="@+id/tv_bottom_menu_third"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/iv_bottom_menu_third"
            android:layout_centerInParent="true"
            android:text="功能"
            android:textSize="10sp" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_bottom_menu_fourth"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="bottom"
        android:layout_weight="1"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/iv_bottom_menu_fourth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/tab_better_pressed" />

        <TextView
            android:id="@+id/tv_bottom_menu_fourth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/iv_bottom_menu_fourth"
            android:layout_centerInParent="true"
            android:text="消息"
            android:textSize="10sp" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_bottom_menu_fifth"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_gravity="bottom"
        android:layout_weight="1"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/iv_bottom_menu_fifth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@drawable/tab_better_pressed" />

        <TextView
            android:id="@+id/tv_bottom_menu_fifth"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/iv_bottom_menu_fifth"
            android:layout_centerInParent="true"
            android:text="我的"
            android:textSize="10sp" />

    </RelativeLayout>

</LinearLayout>


2.自定义相关属性

<!--底部菜单-->
<declare-styleable name="BottomMenuView">
    <attr name="first_drawable" format="reference"/>
    <attr name="first_text" format="string"/>
    <attr name="second_drawable" format="reference"/>
    <attr name="second_text" format="string"/>
    <attr name="third_drawable" format="reference"/>
    <attr name="third_text" format="string"/>
    <attr name="fourth_drawable" format="reference"/>
    <attr name="fourth_text" format="string"/>
    <attr name="fifth_drawable" format="reference"/>
    <attr name="fifth_text" format="string"/>
    <attr name="menu_text_color" format="color"/>
    <attr name="menu_text_size" format="dimension"/>
    <attr name="menu_center_visible" format="boolean"/>
</declare-styleable>
3.编写自定义控件


package com.dejun.commonsdk.wight;

import android.content.Context;
import android.content.res.TypedArray;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.dejun.commonsdk.R;
import com.dejun.commonsdk.util.DensitySizeUtil;

/**
 * Author:DoctorWei
 * Time:2018/12/29 9:11
 * Description:底部菜单选择项
 * email:[email protected]
 */

public class BottomMenuView extends LinearLayout implements View.OnClickListener{
    private ImageView mIvFirst;
    private TextView mTvFirst;
    private ImageView mIvSecond;
    private TextView mTvSecond;
    private ImageView mIvThird;
    private TextView mTvThird;
    private ImageView mIvFourth;
    private TextView mTvFourth;
    private ImageView mIvFifth;
    private TextView mTvFifth;
    private RelativeLayout mRlFirst;
    private RelativeLayout mRlSecond;
    private RelativeLayout mRlThird;
    private RelativeLayout mRlFourth;
    private RelativeLayout mRlFifth;
    public BottomMenuView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        //设置中间按钮不受父容器控制
        setClipChildren(false);
        initViews(context,attrs);
    }

    private void initViews(Context context, AttributeSet attrs) {
        View view= LayoutInflater.from(context).inflate(R.layout.bottom_menu_layout,this);
        TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.BottomMenuView);
        int firstIcon=typedArray.getResourceId(R.styleable.BottomMenuView_first_drawable,R.drawable.tab_better_pressed);
        int secondIcon=typedArray.getResourceId(R.styleable.BottomMenuView_second_drawable,R.drawable.tab_better_pressed);
        int thirdIcon=typedArray.getResourceId(R.styleable.BottomMenuView_third_drawable,R.drawable.tab_better_pressed);
        int fourthIcon=typedArray.getResourceId(R.styleable.BottomMenuView_fourth_drawable,R.drawable.tab_better_pressed);
        int fifthIcon=typedArray.getResourceId(R.styleable.BottomMenuView_fifth_drawable,R.drawable.tab_better_pressed);
        String firstText=typedArray.getString(R.styleable.BottomMenuView_first_text);
        String secondText=typedArray.getString(R.styleable.BottomMenuView_second_text);
        String thirdText=typedArray.getString(R.styleable.BottomMenuView_third_text);
        String fourthText=typedArray.getString(R.styleable.BottomMenuView_fourth_text);
        String fifthText=typedArray.getString(R.styleable.BottomMenuView_fifth_text);
        int textColor=typedArray.getColor(R.styleable.BottomMenuView_menu_text_color,context.getResources().getColor(R.color.cardview_dark_background));
        float textSize=typedArray.getDimension(R.styleable.BottomMenuView_menu_text_size,0.0f);


        mIvFirst=view.findViewById(R.id.iv_bottom_menu_first);
        mTvFirst=view.findViewById(R.id.tv_bottom_menu_first);
        mIvSecond=view.findViewById(R.id.iv_bottom_menu_second);
        mTvSecond=view.findViewById(R.id.tv_bottom_menu_second);
        mIvThird=view.findViewById(R.id.iv_bottom_menu_third);
        mTvThird=view.findViewById(R.id.tv_bottom_menu_third);
        mIvFourth=view.findViewById(R.id.iv_bottom_menu_fourth);
        mTvFourth=view.findViewById(R.id.tv_bottom_menu_fourth);
        mIvFifth=view.findViewById(R.id.iv_bottom_menu_fifth);
        mTvFifth=view.findViewById(R.id.tv_bottom_menu_fifth);
        mRlFirst=view.findViewById(R.id.rl_bottom_menu_first);
        mRlSecond=view.findViewById(R.id.rl_bottom_menu_second);
        mRlThird=view.findViewById(R.id.rl_bottom_menu_third);
        mRlFourth=view.findViewById(R.id.rl_bottom_menu_fourth);
        mRlFifth=view.findViewById(R.id.rl_bottom_menu_fifth);
        setRes(typedArray, firstIcon, secondIcon, thirdIcon, fourthIcon, fifthIcon, firstText, secondText, thirdText, fourthText, fifthText);
        setText(context,typedArray, textColor, textSize);
        setListeners();
    }



    private void setRes(TypedArray typedArray, int firstIcon, int secondIcon, int thirdIcon, int fourthIcon, int fifthIcon, String firstText, String secondText, String thirdText, String fourthText, String fifthText) {
        if (typedArray.hasValue(R.styleable.BottomMenuView_first_drawable)){
            mIvFirst.setImageResource(firstIcon);
        }
        if (typedArray.hasValue(R.styleable.BottomMenuView_first_text)){
            mTvFirst.setText(firstText);
        }
        if (typedArray.hasValue(R.styleable.BottomMenuView_second_drawable)){
            mIvSecond.setImageResource(secondIcon);
        }
        if (typedArray.hasValue(R.styleable.BottomMenuView_second_text)){
            mTvSecond.setText(secondText);
        }
        if (typedArray.hasValue(R.styleable.BottomMenuView_third_drawable)){
            mIvThird.setImageResource(thirdIcon);
        }
        if (typedArray.hasValue(R.styleable.BottomMenuView_third_text)){
            mTvThird.setText(thirdText);
        }
        if (typedArray.hasValue(R.styleable.BottomMenuView_fourth_drawable)){
            mIvFourth.setImageResource(fourthIcon);
        }
        if (typedArray.hasValue(R.styleable.BottomMenuView_fourth_text)){
            mTvFourth.setText(fourthText);
        }
        if (typedArray.hasValue(R.styleable.BottomMenuView_fifth_drawable)){
            mIvFifth.setImageResource(fifthIcon);
        }
        if (typedArray.hasValue(R.styleable.BottomMenuView_fifth_text)){
            mTvFifth.setText(fifthText);
        }
        if (typedArray.hasValue(R.styleable.BottomMenuView_menu_center_visible)){
            boolean centerVisibale=typedArray.getBoolean(R.styleable.BottomMenuView_menu_center_visible,false);
            if (centerVisibale) {
                mRlThird.setVisibility(View.VISIBLE);
            }else{
                mRlThird.setVisibility(View.GONE);
            }
        }
    }

    private void setText(Context context,TypedArray typedArray, int textColor, float textSize) {
        if (typedArray.hasValue(R.styleable.BottomMenuView_menu_text_color)){
            mTvFirst.setTextColor(textColor);
            mTvSecond.setTextColor(textColor);
            mTvThird.setTextColor(textColor);
            mTvFourth.setTextColor(textColor);
            mTvFifth.setTextColor(textColor);
        }
        if (typedArray.hasValue(R.styleable.BottomMenuView_menu_text_size)){
            mTvFirst.setTextSize(DensitySizeUtil.px2sp(context,textSize));
            mTvSecond.setTextSize(DensitySizeUtil.px2sp(context,textSize));
            mTvThird.setTextSize(DensitySizeUtil.px2sp(context,textSize));
            mTvFourth.setTextSize(DensitySizeUtil.px2sp(context,textSize));
            mTvFifth.setTextSize(DensitySizeUtil.px2sp(context,textSize));
        }
    }
    private void setListeners() {
        mRlFirst.setOnClickListener(this);
        mRlSecond.setOnClickListener(this);
        mRlThird.setOnClickListener(this);
        mRlFourth.setOnClickListener(this);
        mRlFifth.setOnClickListener(this);
    }
    @Override
    public void onClick(View v) {
        int id = v.getId();
        if (onClickListener!=null) {
            if (id == R.id.rl_bottom_menu_first) {
                onClickListener.firstClick();
            } else if (id == R.id.rl_bottom_menu_second) {
                onClickListener.secondClick();
            } else if (id == R.id.rl_bottom_menu_third) {
                onClickListener.thirdClick();
            } else if (id == R.id.rl_bottom_menu_fourth) {
                onClickListener.fourthClick();
            } else if (id == R.id.rl_bottom_menu_fifth) {
                onClickListener.fifthClick();
            }
        }
    }
    public OnClickListener onClickListener;
    public void setOnClickListener(OnClickListener onClickListener){
         this.onClickListener=onClickListener;
    }
    public interface OnClickListener{
        void firstClick();
        void secondClick();
        void thirdClick();
        void fourthClick();
        void fifthClick();
    }
}

4.使用
<com.dejun.commonsdk.wight.BottomMenuView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:fifth_drawable="@drawable/tab_better_pressed"
    app:fifth_text="你好"
    app:menu_text_color="#000"
    app:menu_text_size="12sp"
    app:menu_center_visible="true"
    app:layout_constraintBottom_toBottomOf="parent"
    />

猜你喜欢

转载自blog.csdn.net/Anthonybuer/article/details/85336339
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
OOP第二次作业
java web 乱码问题
android 禁止scrollview 因控件变化自动滚动到底的方法
mysql服务解压版的安装(5.7)
centos7 nginx+tomcat配置https 安装免费SSL Let’s Encrypt
使用Mosquitto遗嘱机制实现感知客户端上下线功能的方法
面向对象之------多态与多态性
开发Teams Tabs应用程序
C# 希尔排序
第2章 Jupyter Notebooks
每日归档
更多
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022