Android自定义控件系列(四)—底部菜单(下)

转载请注明出处:https://my.oschina.net/landptf/blog/825973

在app中经常会用到底部菜单的控件,每次都需要写好多代码,今天我们用到了前几篇博客里的控件来进一步封装底部菜单。先看效果图:


底部菜单
底部菜单

主要包括以下功能:
1 设置icon以及点击之后的icon
2 设置文字
3 设置文字颜色以及点击之后的文字颜色
4 设置未读数量、更多以及new

我们先看如何使用,然后再看如何实现的

使用

1 在布局文件中引用MenuM

<com.landptf.view.MenuM
   android:id="@+id/mm_bottom"
   android:layout_width="match_parent"
   android:layout_height="56dp"
   android:layout_alignParentBottom="true"
   landptf:backColor="@color/content"
   landptf:textColor="@color/text"
   landptf:textColorPress="@color/colorPrimary"
   landptf:count="4"
   />

这里主要说一下count属性,表示菜单项的个数。

2 在Activity中初始化

final MenuM mmBottom = (MenuM) findViewById(R.id.mm_bottom);
mmBottom.setText(text);
mmBottom.setIconDrawable(iconDrawable);
mmBottom.setIconDrawablePress(iconDrawablePress);
//设置默认选中第一项
mmBottom.setPressState(0, MotionEvent.ACTION_DOWN);
mmBottom.setOnItemClickListener(new MenuM.OnItemClickListener() {
    @Override
    public void onItemClick(int position) {
        Toast.makeText(MenuMTestActivity.this, mmBottom.getText(position), Toast.LENGTH_SHORT).show();
    }
});

mmBottom.setUnReadCount(0, 100);
mmBottom.setUnReadCount(1, 15);
mmBottom.setVisibilityMore(2, View.VISIBLE);
mmBottom.setVisibilityNew(3, View.VISIBLE);

有以下几个全局变量

text = new String[]{"首页", "通讯录", "发现", "我"};
//为了演示方便我只找了两张icon,在实际开发中一般需要从网络上下载,然后在设置
Drawable drawable = getResources().getDrawable(R.drawable.icon_home_page);
Drawable drawablePress = getResources().getDrawable(R.drawable.icon_home_page_press);
iconDrawable = new Drawable[]{drawable, drawable, drawable, drawable};
iconDrawablePress = new Drawable[]{drawablePress, drawablePress, drawablePress, drawablePress};

以上就是全部代码是不是很方便呢!!!
接下来我们来看下如何实现的

实现

1 在style里定义了几个属性这里就不贴出来了,大家可以查看源码,在本文的最后会给出全部源码的下载地址
2 MenuM.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.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import com.landptf.R;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by landptf on 2017/01/15.
 * 菜单,可用于底部导航菜单,以及内容区的菜单列表
 */
public class MenuM extends LinearLayout {
    private static final String TAG = MenuM.class.getSimpleName();

    private Context mContext;
    private List<MenuItemM> menuList;
    private List<RelativeLayout> rlList;
    private OnItemClickListener mOnItemClickListener;
    private int count = 0;

    public MenuM(Context context) {
        this(context, null, 0);
    }

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

    public MenuM(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        mContext = context;
        init(attrs, defStyle);
    }

    private void init(AttributeSet attrs, int defStyle) {
        setOrientation(LinearLayout.HORIZONTAL);
        TypedArray a = mContext.obtainStyledAttributes(attrs, R.styleable.menuM, defStyle, 0);
        if (a != null) {
            //初始化菜单数量
            count = a.getInteger(R.styleable.menuM_count, 0);
            if (count > 0) {
                initControl();
            }
            //设置背景色
            ColorStateList colorList = a.getColorStateList(R.styleable.menuM_backColor);
            if (colorList != null) {
                int backColor = colorList.getColorForState(getDrawableState(), 0);
                if (backColor != 0) {
                    setBackColor(backColor);
                }
            }
            //设置文字的颜色
            ColorStateList textColorList = a.getColorStateList(R.styleable.menuM_textColor);
            if (textColorList != null) {
                int textColor = textColorList.getColorForState(getDrawableState(), 0);
                if (textColor != 0) {
                    setTextColor(textColor);
                }
            }
            //记录View被按下时文字的颜色
            ColorStateList textColorPressList = a.getColorStateList(R.styleable.menuM_textColorPress);
            if (textColorPressList != null) {
                int textColorPress = textColorPressList.getColorForState(getDrawableState(), 0);
                if (textColorPress != 0) {
                    setTextColorPress(textColorPress);
                }
            }
            //设置文本字体大小
            float textSize = a.getFloat(R.styleable.menuM_textSize, 0);
            if (textSize != 0) {
                setTextSize(textSize);
            }
            a.recycle();
        }
    }

    /**
     * 由于MenuItemM是有ButtonExtendM扩展而来,为了适应上下左右不同的样式
     * 需要在MenuItemM外层嵌套一层RelativeLayout,暂时没有找到更好的替代方案
     */
    private void initControl() {
        rlList = new ArrayList<>(count);
        menuList = new ArrayList<>(count);
        for (int i = 0; i < count; i++) {
            RelativeLayout rlPanel = new RelativeLayout(mContext);
            LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.MATCH_PARENT);
            lp.weight = 1;
            rlPanel.setLayoutParams(lp);
            final MenuItemM menuItem = new MenuItemM(mContext);
            RelativeLayout.LayoutParams lpR = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            lpR.addRule(RelativeLayout.CENTER_IN_PARENT);
            menuItem.setLayoutParams(lpR);
            menuItem.setOnClickListener(new MenuItemM.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //此处需要根据view获取position
                    MenuM.this.onClick(getPosition(menuItem));
                }
            });
            rlPanel.addView(menuItem);
            menuList.add(menuItem);
            rlList.add(rlPanel);
            addView(rlPanel);
        }
    }

    /**
     * 设置View的背景色
     *
     * @param backColor
     */
    public void setBackColor(int backColor) {
        if (backColor == 0) return;
        if (!checkCount()) {
            return;
        }
        for (RelativeLayout item : rlList) {
            item.setBackgroundColor(backColor);
        }
        for (MenuItemM item : menuList) {
            item.setBackColor(backColor);
        }
    }

    /**
     * 设置文字的颜色
     *
     * @param textColor
     */
    public void setTextColor(int textColor) {
        if (textColor == 0) return;
        if (!checkCount()) {
            return;
        }
        for (MenuItemM item : menuList) {
            item.setTextColor(textColor);
        }
    }

    /**
     * 设置View被按下时文字的颜色
     *
     * @param textColorPress
     */
    public void setTextColorPress(int textColorPress) {
        if (textColorPress == 0) return;
        if (!checkCount()) {
            return;
        }
        for (MenuItemM item : menuList) {
            item.setTextColorPress(textColorPress);
        }
    }

    /**
     * 设置icon的图片
     *
     * @param iconDrawable
     */
    public void setIconDrawable(Drawable[] iconDrawable) {
        if (count != iconDrawable.length) {
            Log.e(TAG, "the iconDrawable length do not equals count");
            return;
        }
        for (int i = 0; i < count; i++) {
            if (iconDrawable[i] != null) {
                menuList.get(i).setIconDrawable(iconDrawable[i]);
            }
        }
    }

    /**
     * 设置icon的图片
     *
     * @param iconDrawable
     */
    public void setIconDrawable(List<Drawable> iconDrawable) {
        if (count != iconDrawable.size()) {
            Log.e(TAG, "the iconDrawable length do not equals count");
            return;
        }
        for (int i = 0; i < count; i++) {
            if (iconDrawable.get(i) != null) {
                menuList.get(i).setIconDrawable(iconDrawable.get(i));
            }
        }
    }

    /**
     * 设置View被按下时的icon的图片
     *
     * @param iconDrawablePress
     */
    public void setIconDrawablePress(Drawable[] iconDrawablePress) {
        if (count != iconDrawablePress.length) {
            Log.e(TAG, "the iconDrawablePress length do not equals count");
            return;
        }
        for (int i = 0; i < count; i++) {
            if (iconDrawablePress[i] != null) {
                menuList.get(i).setIconDrawablePress(iconDrawablePress[i]);
            }
        }
    }

    /**
     * 设置View被按下时的icon的图片
     *
     * @param iconDrawablePress
     */
    public void setIconDrawablePress(List<Drawable> iconDrawablePress) {
        if (count != iconDrawablePress.size()) {
            Log.e(TAG, "the iconDrawablePress length do not equals count");
            return;
        }
        for (int i = 0; i < count; i++) {
            if (iconDrawablePress.get(i) != null) {
                menuList.get(i).setIconDrawablePress(iconDrawablePress.get(i));
            }
        }
    }

    /**
     * 设置显示的文本内容
     *
     * @param text
     */
    public void setText(CharSequence[] text) {
        for (int i = 0; i < count; i++) {
            menuList.get(i).setText(text[i]);
        }
    }

    /**
     * 设置显示的文本内容
     *
     * @param text
     */
    public void setText(List<CharSequence> text) {
        if (count != text.size()) {
            Log.e(TAG, "the text length do not equals count");
            return;
        }
        for (int i = 0; i < count; i++) {
            menuList.get(i).setText(text.get(i));
        }
    }

    /**
     * 获取显示的文本
     *
     * @return
     */
    public String getText(int index) {
        if (!checkIndex(index)) {
            return "";
        }
        return menuList.get(index).getText();
    }

    /**
     * 设置文本字体大小
     *
     * @param size
     */
    public void setTextSize(float size) {
        if (!checkCount()) {
            return;
        }
        for (MenuItemM item : menuList) {
            item.setTextSize(size);
        }
    }

    /**
     * 设置更多提示是否显示
     * 如果显示则先重置new和未读数量图标
     *
     * @param visibleMore
     */
    public void setVisibilityMore(int index, int visibleMore) {
        if (!checkIndex(index)) {
            return;
        }
        menuList.get(index).setVisibilityMore(visibleMore);
    }

    /**
     * 设置New提示是否显示
     * 如果显示则先重置更多和未读数量图标
     *
     * @param visibleNew
     */
    public void setVisibilityNew(int index, int visibleNew) {
        if (!checkIndex(index)) {
            return;
        }
        menuList.get(index).setVisibilityNew(visibleNew);
    }

    /**
     * 设置未读数量
     * 如果小于等于0,表示隐藏
     * 如果大于99,则将其隐藏,同时显示更多的提示
     * 如果在0-99区间,则隐藏更多和new图标
     *
     * @param unReadCount
     */
    public void setUnReadCount(int index, int unReadCount) {
        if (!checkIndex(index)) {
            return;
        }
        menuList.get(index).setUnReadCount(unReadCount);
    }

    /**
     * 设置为被选中状态
     *
     * @param index
     * @param state in MotionEvent.ACTION_DOWN or MotionEvent.ACTION_UP
     */
    public void setPressState(int index, int state) {
        if (!checkIndex(index)) {
            return;
        }
        menuList.get(index).setPressState(state);
    }

    /**
     * 设置菜单点击事件
     *
     * @param listener
     */
    public void setOnItemClickListener(@Nullable OnItemClickListener listener) {
        mOnItemClickListener = listener;
    }

    private void onClick(int position) {
        for (int i = 0; i < count; i++) {
            if (i == position) {
                setPressState(i, MotionEvent.ACTION_DOWN);
            } else {
                setPressState(i, MotionEvent.ACTION_UP);
            }
        }
        mOnItemClickListener.onItemClick(position);
    }

    /**
     * 获取点击菜单项的位置
     * @param item
     * @return
     */
    private int getPosition(MenuItemM item) {
        for (int i = 0; i < count; i++) {
            if (item == menuList.get(i)) {
                return i;
            }
        }
        return -1;
    }

    /**
     * 检查是否设置了Count参数
     *
     * @return
     */
    private boolean checkCount() {
        if (count == 0) {
            Log.e(TAG, "You must set the count first");
            return false;
        }
        return true;
    }

    /**
     * 校验输入参数是否合法
     *
     * @param index
     * @return
     */
    private boolean checkIndex(int index) {
        if (!checkCount()) {
            return false;
        }
        if (index < 0 || index >= count) {
            Log.e(TAG, "the index is wrong");
            return false;
        }
        return true;
    }

    public interface OnItemClickListener {
        void onItemClick(int position);
    }
}

代码比较简单,相信大家看一遍都可以理解,这里面使用了MenuItemM自定义控件,有不了解的可以参考以前的博客https://my.oschina.net/landptf/blog/825970
全部代码已托管到开源中国的码云上,点击这里查看源码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,464评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,019评论 4 62
  • 嗨,生日快乐~ 大概你会觉得我特别矫情吧,但我还是想跟你说些什么。哈哈哈 现在的你应该已经睡着了吧。做梦了么? 反...
    嗨了呢阅读 474评论 0 0
  • 嗯,年度新闻,普利策。照片被波兰辟谣网站揭是PS的,另外本身这帮在叙利亚的波兰志愿者的所作所为早就被波兰人自己怀疑...
    griffon328阅读 123评论 0 0
  • 城市里的霓虹灯色彩斑斓,发散着令人头晕目眩的光,它们在豪华或者简陋的店铺门前悬挂,不规则地拼接、延伸着,试图铺设一...
    灰甜Kilig阅读 260评论 0 0