Android自定義控件實(shí)現(xiàn)底部菜單(上)
更新時(shí)間：2017年01月22日 11:04:07 作者：landptf
這篇文章主要為大家詳細(xì)介紹了Android自定義控件實(shí)現(xiàn)底部菜單的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
今天我們封裝一個(gè)底部的菜單欄，這個(gè)大多數(shù)的應(yīng)用都會(huì)用到，因此我們來(lái)自定義，方便以后項(xiàng)目的使用。
該控件的實(shí)現(xiàn)將分上下篇來(lái)介紹，先來(lái)看一個(gè)菜單欄的子控件–MenuItemM，這個(gè)控件有什么用呢？我們來(lái)看下一些主流app上的一些控件，如：
以上三張圖片分別來(lái)自微信，今日頭條和去哪兒，接下來(lái)我們將看到如何通過(guò)一個(gè)控件來(lái)實(shí)現(xiàn)不同的效果。
首先看下我寫(xiě)的一個(gè)deme
可以看到標(biāo)題欄的消息控件，以及底部三個(gè)菜單項(xiàng)都是通過(guò)MenuItemM來(lái)實(shí)現(xiàn)的
這里面只是演示菜單欄的子控件，我們將在下一篇博客中完成底部菜單欄的封裝，這個(gè)控件里使用了上一篇博客介紹的一個(gè)控件ButtonExtendM，可以先看一下http://www.dbjr.com.cn/article/103920.htm
接下來(lái)看下實(shí)現(xiàn)過(guò)程
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>
這里面重點(diǎn)看一下visibleMore和visibleNew里面的兩個(gè)枚舉值,這里面與View源碼中的visible和gone保持一致。關(guān)于如何定義屬性以及使用，可以參考我之前的博客。
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上下結(jié)構(gòu)的控件加上右上角的三種提示信息，數(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);
}
/**
* 設(shè)置View的Click事件
*
* @param l
*/
public void setOnClickListener(OnClickListener l) {
this.onClickListener = l;
//攔截ButtonExtendM控件的點(diǎn)擊事件，使其指向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) {
//設(shè)置背景色
ColorStateList colorList = a.getColorStateList(R.styleable.MenuItemM_backColor);
if (colorList != null) {
int backColor = colorList.getColorForState(getDrawableState(), 0);
if (backColor != 0) {
setBackColor(backColor);
}
}
//設(shè)置icon
Drawable iconDrawable = a.getDrawable(R.styleable.MenuItemM_iconDrawable);
if (iconDrawable != null) {
setIconDrawable(iconDrawable);
}
//記錄View被按下時(shí)的icon的圖片
Drawable iconDrawablePress = a.getDrawable(R.styleable.MenuItemM_iconDrawablePress);
if (iconDrawablePress != null) {
setIconDrawablePress(iconDrawablePress);
}
//設(shè)置文字的顏色
ColorStateList textColorList = a.getColorStateList(R.styleable.MenuItemM_textColor);
if (textColorList != null) {
int textColor = textColorList.getColorForState(getDrawableState(), 0);
if (textColor != 0) {
setTextColor(textColor);
}
}
//記錄View被按下時(shí)文字的顏色
ColorStateList textColorPressList = a.getColorStateList(R.styleable.MenuItemM_textColorPress);
if (textColorPressList != null) {
int textColorPress = textColorPressList.getColorForState(getDrawableState(), 0);
if (textColorPress != 0) {
setTextColorPress(textColorPress);
}
}
//設(shè)置顯示的文本內(nèi)容
String text = a.getString(R.styleable.MenuItemM_text);
if (text != null) {
setText(text);
}
//設(shè)置文本字體大小
float textSize = a.getFloat(R.styleable.MenuItemM_textSize, 0);
if (textSize != 0) {
setTextSize(textSize);
}
//設(shè)置更多提示是否顯示
int visibleMore = a.getInt(R.styleable.MenuItemM_visibleMore, -1);
if (visibleMore != -1){
setVisibilityMore(visibleMore);
}
//設(shè)置new提示是否顯示
int visibleNew = a.getInt(R.styleable.MenuItemM_visibleNew, -1);
if (visibleNew != -1){
setVisibilityNew(visibleNew);
}
//設(shè)置消息未讀數(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);
}
}
});
}
/**
* 設(shè)置為被選中狀態(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, "無(wú)效參數(shù)");
return;
}
bemMenu.setPressState(state);
}
/**
* 設(shè)置View的背景色
*
* @param backColor
*/
public void setBackColor(int backColor) {
bemMenu.setBackColor(backColor);
}
/**
* 設(shè)置icon的圖片
*
* @param iconDrawable
*/
public void setIconDrawable(Drawable iconDrawable) {
bemMenu.setIconDrawable(iconDrawable);
}
/**
* 設(shè)置View被按下時(shí)的icon的圖片
*
* @param iconDrawablePress
*/
public void setIconDrawablePress(Drawable iconDrawablePress) {
bemMenu.setIconDrawablePress(iconDrawablePress);
}
/**
* 設(shè)置文字的顏色
*
* @param textColor
*/
public void setTextColor(int textColor) {
if (textColor == 0) return;
bemMenu.setTextColor(textColor);
}
/**
* 設(shè)置View被按下時(shí)文字的顏色
*
* @param textColorPress
*/
public void setTextColorPress(int textColorPress) {
if (textColorPress == 0) return;
bemMenu.setTextColorPress(textColorPress);
}
/**
* 設(shè)置顯示的文本內(nèi)容
*
* @param text
*/
public void setText(CharSequence text) {
bemMenu.setText(text);
}
/**
* 獲取顯示的文本
*
* @return
*/
public String getText() {
return bemMenu.getText();
}
/**
* 設(shè)置文本字體大小
*
* @param size
*/
public void setTextSize(float size) {
bemMenu.setTextSize(size);
}
/**
* 設(shè)置更多提示是否顯示
* 如果顯示則先重置new和未讀數(shù)量圖標(biāo)
* @param visibleMore
*/
public void setVisibilityMore(int visibleMore) {
if (visibleMore == VISIBLE) {
resetTip();
}
ivMore.setVisibility(visibleMore);
}
/**
* 設(shè)置New提示是否顯示
* 如果顯示則先重置更多和未讀數(shù)量圖標(biāo)
* @param visibleNew
*/
public void setVisibilityNew(int visibleNew) {
if (visibleNew == VISIBLE) {
resetTip();
}
ivNew.setVisibility(visibleNew);
}
/**
* 設(shè)置未讀數(shù)量
* 如果小于等于0，表示隱藏
* 如果大于99，則將其隱藏，同時(shí)顯示更多的提示
* 如果在0-99區(qū)間，則隱藏更多和new圖標(biāo)
* @param unReadCount
*/
public void setUnReadCount(int unReadCount){
if (unReadCount <= 0){
btmUnReadCount.setVisibility(GONE);
//如果先設(shè)置100（此時(shí)會(huì)顯示ivMore），再設(shè)置0，因此此處應(yīng)將ivMore同時(shí)置為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);
}
}
代碼有點(diǎn)長(zhǎng)，邏輯比較簡(jiǎn)單，本身自定義控件的過(guò)程都是類似的，比較多的是對(duì)外提供的接口。
特別要注意的是使用時(shí)大小要設(shè)置為自定義，如果指定了大小或者match_parent，則子控件將居于左上角，無(wú)法居中。
4 最后簡(jiǎn)單看下如何使用
<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="首頁(yè)" />
這里面主要使用了以下四個(gè)屬性，分別表示默認(rèn)圖標(biāo)和按下后顯示的圖標(biāo)，以及文字顏色和按下后的文字顏色
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){
//默認(rèn)為選中狀態(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。
全部代碼已托管到開(kāi)源中國(guó)的碼云上，歡迎下載，地址：https://git.oschina.net/landptf/landptf.git
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Android使用CoordinatorLayout實(shí)現(xiàn)底部彈出菜單
- Android底部菜單欄實(shí)現(xiàn)的實(shí)例代碼
- android SectorMenuView底部導(dǎo)航扇形菜單的實(shí)現(xiàn)代碼
- android實(shí)現(xiàn)上滑屏幕隱藏底部菜單欄的示例
- Android仿微信底部菜單欄效果
- Android仿網(wǎng)易嚴(yán)選底部彈出菜單效果
- Android使用Activity實(shí)現(xiàn)從底部彈出菜單或窗口的方法
- Android自定義控件實(shí)現(xiàn)底部菜單(下)
- Android如何實(shí)現(xiàn)底部菜單固定到底部
相關(guān)文章
OpenGL Shader實(shí)例分析（7）雪花飄落效果
這篇文章主要為大家詳細(xì)介紹了OpenGL Shader實(shí)例分析第7篇，實(shí)現(xiàn)雪花飄落效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-02-02
這篇文章主要為大家詳細(xì)介紹了android繪制觸點(diǎn)軌跡的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
新浪微博第三方登錄界面上下拉伸圖片之第三方開(kāi)源PullToZoomListViewEx（一）
PullZoomView要實(shí)現(xiàn)兩類，一類是典型的Android ListView，另外一類是Android 的scroll view。本文先介紹PullZoomView在ListView上的實(shí)現(xiàn)：PullToZoomListViewEx2015-12-12
Android基于Sqlite實(shí)現(xiàn)注冊(cè)和登錄功能
這篇文章主要為大家詳細(xì)介紹了Android基于Sqlite實(shí)現(xiàn)注冊(cè)和登錄功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
android RecycleView實(shí)現(xiàn)下拉刷新和上拉加載
這篇文章主要為大家詳細(xì)介紹了android RecycleView實(shí)現(xiàn)下拉刷新和上拉加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
Android使用內(nèi)置WebView打開(kāi)TextView超鏈接的實(shí)現(xiàn)方法
這篇文章主要介紹了Android使用內(nèi)置WebView打開(kāi)TextView超鏈接的實(shí)現(xiàn)方法，文中給出了詳細(xì)的示例代碼，對(duì)各位Android開(kāi)發(fā)者們具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-03
Android之軟鍵盤(pán)自動(dòng)彈出和關(guān)閉【代碼分享】
本文主要介紹了Android中軟鍵盤(pán)自動(dòng)彈出和關(guān)閉的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
Android ScrollView只能添加一個(gè)子控件問(wèn)題解決方法
這篇文章主要介紹了Android ScrollView只能添加一個(gè)子控件問(wèn)題解決方法,涉及Android界面布局的相關(guān)技巧,需要的朋友可以參考下2016-02-02
Android通過(guò)Java sdk的方式接入OpenCv的方法
這篇文章主要介紹了Android通過(guò)Java sdk的方式接入OpenCv的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Flutter 和 Android 互相傳遞數(shù)據(jù)的實(shí)現(xiàn)
這篇文章主要介紹了Flutter 和 Android 互相傳遞數(shù)據(jù)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11