Home>

Today we encapsulate a menu bar at the bottom,Most of this application will be used,So let ’s customize it,Convenient for future projects.

The implementation of this control will be introduced in two parts,First look at a menu bar's child control-menuitemm. What's the use of this control?Let ’s take a look at some controls on some mainstream apps.Such as:

First look at a deme I wrote

You can see the message control in the title bar,And the bottom three menu items are implemented through menuitemm

This is just a sub control of the menu bar.We will complete the packaging of the bottom menu bar in the next blog,This control uses a control buttonextendm introduced in the previous blog, you can take a look first/go.php?id=103920&s=a

Next look at the implementation process

1 Defining attributes

<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" />
 <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>

Let's focus on the two enumeration values ​​in visiblemore and visiblenew.This is consistent with the visible and gone in the view source.Regarding how to define attributes and use them,You can refer to my previous blog.

2 layout file 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>

This uses framelayout, which mainly uses the buttons of the buttonextendm structure, plus three types of prompt information in the upper right corner.Quantity tips,more tips, new tips

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.
 * Menu button,Such as the bottom menu item or message control
 * /
public class menuitemm extends framelayout {
 private static final string tag=menuitemm.class.getsimplename ();
 /**
  * Define controls
  * /
 private buttonextendm bemmenu;
 private imageview ivmore;
 private imageview ivnew;
 private buttonm btmunreadcount;
 private onclicklistener onclicklistener=null;
 public interface onclicklistener {
  void onclick (view v);
 }
 /**
  * Set the click event of the view
  *
  * @param l
  * /
 public void setonclicklistener (onclicklistener l) {
  this.onclicklistener=l;
  //Intercept the click event of the buttonextendm control,Make it point to 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) {
  //Load layout
  layoutinflater.from (context) .inflate (r.layout.view_menu_item_m, this, true);
  //Initialize the control
  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) {
   //Set the background color
   colorstatelist colorlist=a.getcolorstatelist (r.styleable.menuitemm_backcolor);
   if (colorlist!=null) {
    int backcolor=colorlist.getcolorforstate (getdrawablestate (), 0);
    if (backcolor!=0) {
     setbackcolor (backcolor);
    }
   }
   //set icon
   drawable icondrawable=a.getdrawable (r.styleable.menuitemm_icondrawable);
   if (icondrawable!=null) {
    seticondrawable (icondrawable);
   }
   //Record the picture of the icon when the view is pressed
   drawable icondrawablepress=a.getdrawable (r.styleable.menuitemm_icondrawablepress);
   if (icondrawablepress!=null) {
    seticondrawablepress (icondrawablepress);
   }
   //Set the color of the text
   colorstatelist textcolorlist=a.getcolorstatelist (r.styleable.menuitemm_textcolor);
   if (textcolorlist!=null) {
    int textcolor=textcolorlist.getcolorforstate (getdrawablestate (), 0);
    if (textcolor!=0) {
     settextcolor (textcolor);
    }
   }
   //Record the color of the text when the view is pressed
   colorstatelist textcolorpresslist=a.getcolorstatelist (r.styleable.menuitemm_textcolorpress);
   if (textcolorpresslist!=null) {
    int textcolorpress=textcolorpresslist.getcolorforstate (getdrawablestate (), 0);
    if (textcolorpress!=0) {
     settextcolorpress (textcolorpress);
    }
   }
   //Set the displayed text content
   string text=a.getstring (r.styleable.menuitemm_text);
   if (text!=null) {
    settext (text);
   }
   //Set text font size
   float textsize=a.getfloat (r.styleable.menuitemm_textsize, 0);
   if (textsize!=0) {
    settextsize (textsize);
   }
   //Set whether more prompts are displayed
   int visiblemore=a.getint (r.styleable.menuitemm_visiblemore, -1);
   if (visiblemore!=-1) {
    setvisibilitymore (visiblemore);
   }
   //Set whether the new prompt is displayed
   int visiblenew=a.getint (r.styleable.menuitemm_visiblenew, -1);
   if (visiblenew!=-1) {
    setvisibilitynew (visiblenew);
   }
   //Set the number of unread messages
   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);
    }
   }
  });
 }
 /**
  * Set to selected
  * @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, "Invalid parameter");
   return;
  }
  bemmenu.setpressstate (state);
 }
 /**
  * Set the background color of the view
  *
  * @param backcolor
  * /
 public void setbackcolor (int backcolor) {
  bemmenu.setbackcolor (backcolor);
 }
 /**
  * Set icon image
  *
  * @param icondrawable
  * /
 public void seticondrawable (drawable icondrawable) {
  bemmenu.seticondrawable (icondrawable);
 }
 /**
  * Set the icon image when the view is pressed
  *
  * @param icondrawablepress
  * /
 public void seticondrawablepress (drawable icondrawablepress) {
  bemmenu.seticondrawablepress (icondrawablepress);
 }
 /**
  * Set text color
  *
  * @param textcolor
  * /
 public void settextcolor (int textcolor) {
  if (textcolor == 0) return;
  bemmenu.settextcolor (textcolor);
 }
 /**
  * Set the color of the text when the view is pressed
  *
  * @param textcolorpress
  * /
 public void settextcolorpress (int textcolorpress) {
  if (textcolorpress == 0) return;
  bemmenu.settextcolorpress (textcolorpress);
 }
 /**
  * Set the displayed text content
  *
  * @param text
  * /
 public void settext (charsequence text) {
  bemmenu.settext (text);
 }
 /**
  * Get displayed text
  *
  * @return
  * /
 public string gettext () {
  return bemmenu.gettext ();
 }
 /**
  * Set text font size
  *
  * @param size
  * /
 public void settextsize (float size) {
  bemmenu.settextsize (size);
 }
 /**
  * Set whether more prompts are displayed
  * If displayed, reset the new and unread quantity icons first
  * @param visiblemore
  * /
 public void setvisibilitymore (int visiblemore) {
  if (visiblemore == visible) {
   resettip ();
  }
  ivmore.setvisibility (visiblemore);
 }
 /**
  * Set whether the new prompt is displayed
  * If displayed then reset more and unread quantity icons first
  * @param visiblenew
  * /
 public void setvisibilitynew (int visiblenew) {
  if (visiblenew == visible) {
   resettip ();
  }
  ivnew.setvisibility (visiblenew);
 }
 /**
  * Set unread quantity
  * If less than or equal to 0, it means hidden
  * If greater than 99, hide it,Show more tips at the same time
  * If in the range of 0-99, hide more and new icons
  * @param unreadcount
  * /
 public void setunreadcount (int unreadcount) {
  if (unreadcount<= 0) {
   btmunreadcount.setvisibility (gone);
   //If you set 100 first (ivmore will be displayed at this time), then set 0, so you should set ivmore to gone at the same time
   if (ivmore.getvisibility () == visible) {
    ivmore.setvisibility (gone);
   }
   return;
  }
  if (unreadcount>99) {
   setvisibilitymore (visible);
   return;
  }
  resettip ();
  btmunreadcount.setvisibility (visible);
  btmunreadcount.settext (unreadcount + "");
 }
 /**
  * Reset message
  * /
 private void resettip () {
  setvisibilitymore (gone);
  setvisibilitynew (gone);
  setunreadcount (0);
 }
}

The code is a bit long,The logic is relatively simple,The process of custom control itself is similar,More are interfaces provided externally.

It is important to note that the size must be set to custom when using it.If size or match_parent is specified, the child control will be in the upper left corner,Cannot be centered.

4 Finally, let's take a brief look at how to use

<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="Home"
 />

This mainly uses the following four attributes,Represents the default icon and the icon displayed when pressed,As well as the text color and the text color when pressed

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) {
 //default is selected
 mimhomepage.setpressstate (motionevent.action_down);
 mimhomepage.setvisibilitymore (view.visible);
 mimhomepage.setonclicklistener (new menuitemm.onclicklistener () {
  @override
  public void onclick (view v) {
   //Hide the prompt message after pressing
   mimhomepage.setvisibilitymore (view.gone);
  }
 });
}
  • Previous C # Knowledge of Expression Trees
  • Next Socket multiplayer chat program C language version (2)