android 自定義底部導航欄
阿新 • • 發佈：2018-12-29
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" />