Android自定义控件实现底部菜单(上)

今天我们封装一个底部的菜单栏,这个大多数的应用都会用到,因此我们来自定义,方便以后项目的使用。

该控件的实现将分上下篇来介绍,先来看一个菜单栏的子控件–MenuItemM,这个控件有什么用呢?我们来看下一些主流app上的一些控件,如:

以上三张图片分别来自微信,今日头条和去哪儿,接下来我们将看到如何通过一个控件来实现不同的效果。
首先看下我写的一个deme

可以看到标题栏的消息控件,以及底部三个菜单项都是通过MenuItemM来实现的

这里面只是演示菜单栏的子控件,我们将在下一篇博客中完成底部菜单栏的封装,这个控件里使用了上一篇博客介绍的一个控件ButtonExtendM,可以先看一下http://www.jb51.net/article/103920.htm

接下来看下实现过程

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上下结构的控件加上右上角的三种提示信息,数量提示,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);
    }
   }
   //设置显示的文本内容
   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);
   }
   //设置消息未读数量
   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);
    }
   }
  });
 }

 /**
  * 设置为被选中状态
  * @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, "无效参数");
   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);
 }

 /**
  * 设置显示的文本内容
  *
  * @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和未读数量图标
  * @param visibleMore
  */
 public void setVisibilityMore(int visibleMore) {
  if (visibleMore == VISIBLE) {
   resetTip();
  }
  ivMore.setVisibility(visibleMore);
 }

 /**
  * 设置New提示是否显示
  * 如果显示则先重置更多和未读数量图标
  * @param visibleNew
  */
 public void setVisibilityNew(int visibleNew) {
  if (visibleNew == VISIBLE) {
   resetTip();
  }
  ivNew.setVisibility(visibleNew);
 }

 /**
  * 设置未读数量
  * 如果小于等于0,表示隐藏
  * 如果大于99,则将其隐藏,同时显示更多的提示
  * 如果在0-99区间,则隐藏更多和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){
 //默认为选中状态
 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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android自定义控件简单实现侧滑菜单效果

    侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现:多少都有点复杂,完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现,史上最简单有点夸张,但是的确是我目前遇到过的最简单的一种实现~~~ 1.原理分析 既然是侧滑,无非就是在巴掌大的屏幕,塞入大概两巴掌大的布局,需要滑动可以出现另一个,既然这样,大家为啥不考虑使用Android

  • Android自定义控件之仿优酷菜单

    去年的优酷HD版有过这样一种菜单,如下图: 应用打开之后,先是三个弧形的三级菜单,点击实体键menu之后,这三个菜单依次旋转退出,再点击实体键menu之后,一级菜单会旋转进入,点击一级菜单,二级菜单旋转进入,点击二级菜单的menu键,三级菜单旋转进入,再次点击二级菜单的旋转键,三级菜单又会旋转退出,这时再点击一级菜单,二级菜单退出,最后点击实体menu键,一级菜单退出. 总体来说实现这样的功能: (1)点击实体menu键时,如果界面上有菜单显示,不管有几个,全部依次退出,如果界面上没有菜单显示,

  • Android自定义控件案例汇总1(菜单、popupwindow、viewpager)

    自定义控件是根据自己的需要自己来编写控件.安卓自带的控件有时候无法满足你的需求,这种时候,我们只能去自己去实现适合项目的控件.同时,安卓也允许你去继承已经存在的控件或者实现你自己的控件以便优化界面和创造更加丰富的用户体验.在平常的项目中,我们 人为的把自定义控件分为两种:一种是组合方式实现.一种是通过继承view或viewgroup及其子类实现.两者都可以实现我们想要的效果,因此,我们可以根据自己的需求,选择合适的方案.本文以案例的形式来显示几种较为常见的自定义控件. 案例一 优酷菜单: 功能介

  • Android使用自定义控件HorizontalScrollView打造史上最简单的侧滑菜单

    侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现:多少都有点复杂,完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现,史上最简单有点夸张,但是的确是我目前遇到过的最简单的一种实现~~~ 1.原理分析 既然是侧滑,无非就是在巴掌大的屏幕,塞入大概两巴掌大的布局,需要滑动可以出现另一个,既然这样,大家为啥不考虑使用Android

  • Android控件之菜单的创建方式

    显示效果图: 第一种创建方式 ------- package com.example.androidthismenus; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; public class MainActivity extends Activity { @Override protected void onCreate

  • Android自定义控件实现底部菜单(下)

    在app中经常会用到底部菜单的控件,每次都需要写好多代码,今天我们用到了前几篇博客里的控件来进一步封装底部菜单.先看效果图: 主要包括以下功能: 1 设置icon以及点击之后的icon 2 设置文字 3 设置文字颜色以及点击之后的文字颜色 4 设置未读数量.更多以及new 我们先看如何使用,然后再看如何实现的 1 在布局文件中引用MenuM <com.landptf.view.MenuM android:id="@+id/mm_bottom" android:layout_wid

  • Android编程之下拉菜单Spinner控件用法示例

    本文实例讲述了Android下拉菜单Spinner控件用法.分享给大家供大家参考,具体如下: activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent

  • Android控件View打造完美的自定义侧滑菜单

    一.概述 在App中,经常会出现侧滑菜单,侧滑滑出View等效果,虽然说Android有很多第三方开源库,但是实际上咱们可以自己也写一个自定义的侧滑View控件,其实不难,主要涉及到以下几个要点: 1.对Android中Window类中的DecorView有所了解 2.对Scroller类实现平滑移动效果 3.自定义ViewGroup的实现 首先来看看效果图吧:     下面现在就来说说这里咱们实现侧滑View的基本思路吧,这里我采用的是自定义一个继承于RelativeLayout的控件叫做XC

  • Android 中 SwipeLayout一个展示条目底层菜单的侧滑控件源码解析

    由于项目上的需要侧滑条目展示收藏按钮,记得之前代码家有写过一个厉害的开源控件 AndroidSwipeLayout 本来准备直接拿来使用,但是看过 issue 发现现在有不少使用者反应有不少的 bug ,而且代码家现在貌似也不进行维护了.故自己实现了一个所要效果的一个控件.因为只是实现我需要的效果,所以大家也能看到,代码里有不少地方我是写死的.希望对大家有些帮助.而且暂时也不需要 AndroidSwipeLayout 大而全的功能,算是变相给自己做的项目精简代码了. 完整示例代码请看:GitHu

  • Android自定义控件实现底部菜单(上)

    今天我们封装一个底部的菜单栏,这个大多数的应用都会用到,因此我们来自定义,方便以后项目的使用. 该控件的实现将分上下篇来介绍,先来看一个菜单栏的子控件–MenuItemM,这个控件有什么用呢?我们来看下一些主流app上的一些控件,如: 以上三张图片分别来自微信,今日头条和去哪儿,接下来我们将看到如何通过一个控件来实现不同的效果. 首先看下我写的一个deme 可以看到标题栏的消息控件,以及底部三个菜单项都是通过MenuItemM来实现的 这里面只是演示菜单栏的子控件,我们将在下一篇博客中完成底部菜

  • Android如何实现底部菜单固定到底部

    今天搞了很久的一个问题,导航菜单没有固定到底部,因为上面是ListView,可是没内容,于是就浮动上去了. 效果如下: 这里采用的是一个碎片,代码是: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"

  • Android中底部菜单被输入法顶上去的解决方案

    安卓手机输入法弹出,消失会触发 window.onresize事件,我们一般的解决方法是获取焦点,底部隐藏,失去焦点,底部菜单出现,但是,有些人会点击这个按钮收起键牌 那么,这个时候你的失去焦点无效,还有一种方法呢,是把position:fixed;改成position:absoult;这样底部菜单就不会顶上去,但是这种方法,经过我的实验,还是会被输入法顶上去,这两种方法都不要完全解决问题,还有一种是布局的问题,主页面:position:relative,底部菜单:position:absoul

  • Android 使用FragmentTabHost实现底部菜单功能

    前言 现在大部分App底部都有一个菜单,实现这个功能也有好多办法: - TabHost+Fragment - RadioGroup+Fragment - FragmentTabHost+Fragment - 5.0以后有个新控件,BottomNavigator 这篇主要介绍下FragmentTabHost配合Fragment使用 运行效果图 效果图分析 FragmentTabHost简单介绍 首先我们看下官方文档的介绍 OK,接着官方还给出了一份使用的代码,我们也来看下 Activity中使用

  • Android使用开源组件PagerBottomTabStrip实现底部菜单和顶部导航功能

    PagerBottomTabStrip 是一个基本按谷歌Material Design规范完成的安卓底部导航栏控件 官方设计规范:https://www.google.com/design/spec/components/bottom-navigation.html 1.前言 (1)底部选择菜单功能应该是大多app都会用到的,实现方式也有很多种,比较笨的方法可以自定义一个xml,下方布局样式,每次点击不同按钮时跳转到不同activity,这个activity重新加载一下底部菜单 (2)今天介绍一

  • Android仿QQ空间底部菜单示例代码

    之前曾经在网上看到Android仿QQ空间底部菜单的Demo,发现这个Demo有很多Bug,布局用了很多神秘数字.于是研究了一下QQ空间底部菜单的实现,自己写了一个,供大家参考.效果如下图所示:   1.实现原理很简单,底部菜单是一个水平分布的LinearLayout,里面又是五个LinearLayout,它们的layout_weight都为1,意味着底部菜单的子控件将屏幕宽度平均分为5部分.五个LinearLayout除了中间那个,其余都在里面放置ImageView和TextView(中间先空

  • Android底部菜单简单应用

    在Android中实现菜单功能有多种方法. Options Menu:用户按下menu Button时显示的菜单. Context Menu:用户长时间按下屏幕,所显示出来的菜单也称为上下文菜单. Submenu:子菜单. 但是有时候这些内置的菜单并不能满足我们功能,这就需要自己自定义一种菜单.接下来我说的这种就是通过TabHost与RadioGroup结合完成的菜单.这也是很常用的一种底部菜单做法.先上图: Xml代码 <?xml version="1.0" encoding=

  • 详解Xamarin.Android 利用Fragment实现底部菜单

    本篇文章主要介绍了详解Xamarin.Android 利用Fragment实现底部菜单,分享给大家,具体如下: 效果图: 第一步:添加引用 引用 Crosslight.Xamarin.Android.Support.v7.AppCompat 这个包. 第二步:绘制Main和Fragment界面 fg_home.axml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:androi

随机推荐