Android自定義控件實現(xiàn)底部菜單(上)

更新時間：2017年01月22日 11:04:07 作者：landptf

這篇文章主要為大家詳細介紹了Android自定義控件實現(xiàn)底部菜單的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

今天我們封裝一個底部的菜單欄，這個大多數(shù)的應用都會用到，因此我們來自定義，方便以后項目的使用。

該控件的實現(xiàn)將分上下篇來介紹，先來看一個菜單欄的子控件–MenuItemM，這個控件有什么用呢？我們來看下一些主流app上的一些控件，如：

以上三張圖片分別來自微信，今日頭條和去哪兒，接下來我們將看到如何通過一個控件來實現(xiàn)不同的效果。
首先看下我寫的一個deme

可以看到標題欄的消息控件，以及底部三個菜單項都是通過MenuItemM來實現(xiàn)的

這里面只是演示菜單欄的子控件，我們將在下一篇博客中完成底部菜單欄的封裝，這個控件里使用了上一篇博客介紹的一個控件ButtonExtendM，可以先看一下http://m.dhdzp.com/article/103920.htm

接下來看下實現(xiàn)過程

1 定義屬性

<declare-styleable name="MenuItemM">
 <attr name="backColor" />
 <attr name="textColor" />
 <attr name="textColorPress" />
 <attr name="iconDrawable" />
 <attr name="iconDrawablePress" />
 <attr name="text" />
 <attr name="textSize" />
 <attr name="unReadCount" format="integer" />
 <attr name="visibleMore">
  <enum name="visible" value="0x00000000" />
  <enum name="gone" value="0x00000008" />
 </attr>
 <attr name="visibleNew">
  <enum name="visible" value="0x00000000" />
  <enum name="gone" value="0x00000008" />
 </attr>
</declare-styleable>

這里面重點看一下visibleMore和visibleNew里面的兩個枚舉值,這里面與View源碼中的visible和gone保持一致。關于如何定義屬性以及使用，可以參考我之前的博客。

2 布局文件view_menu_item_m.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:landptf="http://schemas.android.com/apk/res-auto"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center">

 <com.landptf.view.ButtonExtendM
  android:id="@+id/bem_menu"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:layout_marginRight="8dp"
  landptf:style="iconUp" />

 <ImageView
  android:id="@+id/iv_more"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="top|right"
  android:background="@drawable/icon_more"
  android:visibility="gone" />

 <ImageView
  android:id="@+id/iv_new"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="top|right"
  android:background="@drawable/icon_new"
  android:visibility="gone" />

 <com.landptf.view.ButtonM
  android:id="@+id/btm_unread_count"
  android:layout_width="20dp"
  android:layout_height="20dp"
  android:layout_gravity="top|right"
  android:textSize="12sp"
  android:visibility="gone"
  landptf:backColor="#ff0000"
  landptf:fillet="true"
  landptf:shape="oval"
  landptf:textColor="@android:color/white" />

</FrameLayout>

這里面使用了FrameLayout，主要使用了ButtonExtendM上下結構的控件加上右上角的三種提示信息，數(shù)量提示，more提示，new提示

3 MenuItemM.java

package com.landptf.view;

import android.content.Context;
import android.content.res.ColorStateList;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;

import com.landptf.R;

/**
 * Created by landptf on 2016/11/07.
 * 菜單按鈕，例如底部菜單的item或者消息控件
 */
public class MenuItemM extends FrameLayout {

 private static final String TAG = MenuItemM.class.getSimpleName();

 /**
  * 定義控件
  */
 private ButtonExtendM bemMenu;
 private ImageView ivMore;
 private ImageView ivNew;
 private ButtonM btmUnReadCount;

 private OnClickListener onClickListener = null;

 public interface OnClickListener {
  void onClick(View v);
 }

 /**
  * 設置View的Click事件
  *
  * @param l
  */
 public void setOnClickListener(OnClickListener l) {
  this.onClickListener = l;
  //攔截ButtonExtendM控件的點擊事件，使其指向this.onclick
  bemMenu.setOnClickListener(new ButtonExtendM.OnClickListener() {
   @Override
   public void onClick(View v) {
    onClickListener.onClick(v);
   }
  });
 }

 public MenuItemM(Context context) {
  super(context);
 }

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

 public MenuItemM(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  init(context, attrs, defStyleAttr);
 }

 private void init(Context context, AttributeSet attrs, int defStyle) {
  //加載布局
  LayoutInflater.from(context).inflate(R.layout.view_menu_item_m, this, true);
  //初始化控件
  bemMenu = (ButtonExtendM) findViewById(R.id.bem_menu);
  ivMore = (ImageView) findViewById(R.id.iv_more);
  ivNew = (ImageView) findViewById(R.id.iv_new);
  btmUnReadCount = (ButtonM) findViewById(R.id.btm_unread_count);
  btmUnReadCount.setGravity(Gravity.CENTER);
  TypedArray a = getContext().obtainStyledAttributes(
    attrs, R.styleable.MenuItemM, defStyle, 0);
  if (a != null) {
   //設置背景色
   ColorStateList colorList = a.getColorStateList(R.styleable.MenuItemM_backColor);
   if (colorList != null) {
    int backColor = colorList.getColorForState(getDrawableState(), 0);
    if (backColor != 0) {
     setBackColor(backColor);
    }
   }
   //設置icon
   Drawable iconDrawable = a.getDrawable(R.styleable.MenuItemM_iconDrawable);
   if (iconDrawable != null) {
    setIconDrawable(iconDrawable);
   }
   //記錄View被按下時的icon的圖片
   Drawable iconDrawablePress = a.getDrawable(R.styleable.MenuItemM_iconDrawablePress);
   if (iconDrawablePress != null) {
    setIconDrawablePress(iconDrawablePress);
   }
   //設置文字的顏色
   ColorStateList textColorList = a.getColorStateList(R.styleable.MenuItemM_textColor);
   if (textColorList != null) {
    int textColor = textColorList.getColorForState(getDrawableState(), 0);
    if (textColor != 0) {
     setTextColor(textColor);
    }
   }
   //記錄View被按下時文字的顏色
   ColorStateList textColorPressList = a.getColorStateList(R.styleable.MenuItemM_textColorPress);
   if (textColorPressList != null) {
    int textColorPress = textColorPressList.getColorForState(getDrawableState(), 0);
    if (textColorPress != 0) {
     setTextColorPress(textColorPress);
    }
   }
   //設置顯示的文本內(nèi)容
   String text = a.getString(R.styleable.MenuItemM_text);
   if (text != null) {
    setText(text);
   }
   //設置文本字體大小
   float textSize = a.getFloat(R.styleable.MenuItemM_textSize, 0);
   if (textSize != 0) {
    setTextSize(textSize);
   }
   //設置更多提示是否顯示
   int visibleMore = a.getInt(R.styleable.MenuItemM_visibleMore, -1);
   if (visibleMore != -1){
    setVisibilityMore(visibleMore);
   }
   //設置new提示是否顯示
   int visibleNew = a.getInt(R.styleable.MenuItemM_visibleNew, -1);
   if (visibleNew != -1){
    setVisibilityNew(visibleNew);
   }
   //設置消息未讀數(shù)量
   int unReadCount = a.getInt(R.styleable.MenuItemM_unReadCount, -1);
   if (unReadCount != -1){
    setUnReadCount(unReadCount);
   }
   a.recycle();
  }

  setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
    if (onClickListener != null) {
     onClickListener.onClick(v);
    }
   }
  });
 }

 /**
  * 設置為被選中狀態(tài)
  * @param state in MotionEvent.ACTION_DOWN or MotionEvent.ACTION_UP
  */
 public void setPressState(int state){
  if (state != MotionEvent.ACTION_DOWN && state != MotionEvent.ACTION_UP){
   Log.w(TAG, "無效參數(shù)");
   return;
  }
  bemMenu.setPressState(state);
 }

 /**
  * 設置View的背景色
  *
  * @param backColor
  */
 public void setBackColor(int backColor) {
  bemMenu.setBackColor(backColor);
 }

 /**
  * 設置icon的圖片
  *
  * @param iconDrawable
  */
 public void setIconDrawable(Drawable iconDrawable) {
  bemMenu.setIconDrawable(iconDrawable);
 }

 /**
  * 設置View被按下時的icon的圖片
  *
  * @param iconDrawablePress
  */
 public void setIconDrawablePress(Drawable iconDrawablePress) {
  bemMenu.setIconDrawablePress(iconDrawablePress);
 }

 /**
  * 設置文字的顏色
  *
  * @param textColor
  */
 public void setTextColor(int textColor) {
  if (textColor == 0) return;
  bemMenu.setTextColor(textColor);
 }

 /**
  * 設置View被按下時文字的顏色
  *
  * @param textColorPress
  */
 public void setTextColorPress(int textColorPress) {
  if (textColorPress == 0) return;
  bemMenu.setTextColorPress(textColorPress);
 }

 /**
  * 設置顯示的文本內(nèi)容
  *
  * @param text
  */
 public void setText(CharSequence text) {
  bemMenu.setText(text);
 }

 /**
  * 獲取顯示的文本
  *
  * @return
  */
 public String getText() {
  return bemMenu.getText();
 }

 /**
  * 設置文本字體大小
  *
  * @param size
  */
 public void setTextSize(float size) {
  bemMenu.setTextSize(size);
 }

 /**
  * 設置更多提示是否顯示
  * 如果顯示則先重置new和未讀數(shù)量圖標
  * @param visibleMore
  */
 public void setVisibilityMore(int visibleMore) {
  if (visibleMore == VISIBLE) {
   resetTip();
  }
  ivMore.setVisibility(visibleMore);
 }

 /**
  * 設置New提示是否顯示
  * 如果顯示則先重置更多和未讀數(shù)量圖標
  * @param visibleNew
  */
 public void setVisibilityNew(int visibleNew) {
  if (visibleNew == VISIBLE) {
   resetTip();
  }
  ivNew.setVisibility(visibleNew);
 }

 /**
  * 設置未讀數(shù)量
  * 如果小于等于0，表示隱藏
  * 如果大于99，則將其隱藏，同時顯示更多的提示
  * 如果在0-99區(qū)間，則隱藏更多和new圖標
  * @param unReadCount
  */
 public void setUnReadCount(int unReadCount){
  if (unReadCount <= 0){
   btmUnReadCount.setVisibility(GONE);
   //如果先設置100（此時會顯示ivMore），再設置0，因此此處應將ivMore同時置為GONE
   if (ivMore.getVisibility() == VISIBLE){
    ivMore.setVisibility(GONE);
   }
   return;
  }
  if (unReadCount > 99){
   setVisibilityMore(VISIBLE);
   return;
  }
  resetTip();
  btmUnReadCount.setVisibility(VISIBLE);
  btmUnReadCount.setText(unReadCount + "");
 }

 /**
  * 重置提示信息
  */
 private void resetTip(){
  setVisibilityMore(GONE);
  setVisibilityNew(GONE);
  setUnReadCount(0);
 }

}

代碼有點長，邏輯比較簡單，本身自定義控件的過程都是類似的，比較多的是對外提供的接口。
特別要注意的是使用時大小要設置為自定義，如果指定了大小或者match_parent，則子控件將居于左上角，無法居中。

4 最后簡單看下如何使用

<com.landptf.view.MenuItemM
 android:id="@+id/mim_home_page"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerVertical="true"
 android:layout_marginLeft="32dp"
 landptf:iconDrawable="@drawable/icon_home_page"
 landptf:iconDrawablePress="@drawable/icon_home_page_press"
 landptf:textColor="#696969"
 landptf:textColorPress="#303f9f"
 landptf:text="首頁"
 />

這里面主要使用了以下四個屬性，分別表示默認圖標和按下后顯示的圖標，以及文字顏色和按下后的文字顏色

landptf:iconDrawable="@drawable/icon_home_page"
landptf:iconDrawablePress="@drawable/icon_home_page_press"
landptf:textColor="#696969"
landptf:textColorPress="#303f9f"

final MenuItemM mimHomePage = (MenuItemM) findViewById(R.id.mim_home_page);
if (mimHomePage != null){
 //默認為選中狀態(tài)
 mimHomePage.setPressState(MotionEvent.ACTION_DOWN);
 mimHomePage.setVisibilityMore(View.VISIBLE);
 mimHomePage.setOnClickListener(new MenuItemM.OnClickListener() {
  @Override
  public void onClick(View v) {
   //按下后隱藏提示信息
   mimHomePage.setVisibilityMore(View.GONE);
  }
 });
}

好了，就介紹到這里了，更多的使用方法可以參考源碼MenuItemMTestActivity.java。
全部代碼已托管到開源中國的碼云上，歡迎下載，地址：https://git.oschina.net/landptf/landptf.git

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Android使用ShareSDK實現(xiàn)應用分享的功能
這篇文章主要為大家詳細介紹了Android使用ShareSDK實現(xiàn)應用分享的功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-05-05
Android組件化、插件化詳細講解
這篇文章主要介紹了Android組件化、插件化詳細講解，這些單獨?次封裝的功能模塊apk，就稱作插件，文章圍繞主題展開詳細的內(nèi)容介紹，需要的朋友可以參考一下
2022-07-07
Android利用Theme自定義Activity間的切換動畫
這篇文章主要為大家詳細介紹了Android利用Theme自定義Activity間的切換動畫，感興趣的小伙伴們可以參考一下
2016-09-09
Android中主要資源文件及文件夾介紹
在Android項目文件夾里面，主要的資源文件是放在res文件夾里面的，下面為大家詳細介紹下各個資源文件的作用，感興趣的朋友可以參考下哈
2013-06-06
探究Android中ListView復用導致布局錯亂的解決方案
這篇文章主要介紹了探究Android中ListView復用導致布局錯亂的解決方案，非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-10-10
Android studio實現(xiàn)左右滑動切換圖片
這篇文章主要為大家詳細介紹了Android studio實現(xiàn)左右滑動切換圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-05-05
Android客戶端實現(xiàn)注冊、登錄詳解（1）
這篇文章主要為大家詳細介紹了Android客戶端實現(xiàn)注冊、登錄代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
Android跑馬燈MarqueeView源碼解析
這篇文章主要為大家詳細介紹了Android跑馬燈MarqueeView源碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
Android studio 禁用AndroidX方式
這篇文章主要介紹了Android studio 禁用AndroidX方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-04-04
Android仿網(wǎng)易一元奪寶客戶端下拉加載動畫效果(一)
本文通過一個demo給大家介紹了android仿網(wǎng)易一元奪寶客戶端下拉加載動畫效果,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-09-09