Android 사용자 정의 컨트롤 이 아래쪽 메뉴 구현(위)

오늘 우 리 는 아래쪽 메뉴 표시 줄 을 패키지 합 니 다.이 대부분의 응용 프로그램 이 사 용 될 것 입 니 다.따라서 우 리 는 다음 항목 의 사용 을 편리 하 게 정의 합 니 다.
이 컨트롤 의 실현 은 상하 편 으로 나 뉘 어 소개 합 니 다.먼저 메뉴 표시 줄 의 하위 컨트롤 CMenuItemM 을 살 펴 보 겠 습 니 다.이 컨트롤 은 무슨 소 용이 있 습 니까?다음 주류 app 의 컨트롤 을 살 펴 보 겠 습 니 다.예 를 들 어:
 
위의 세 장의 사진 은 각각 위 챗,오늘 의 톱기사 와 어디로 가 는 지,그 다음 에 우 리 는 하나의 컨트롤 을 통 해 서로 다른 효 과 를 실현 하 는 방법 을 볼 것 이다.
일단 제 가 쓴 deme 를 보 겠 습 니 다.

제목 표시 줄 의 메시지 컨트롤 을 볼 수 있 고,아래 세 개의 메뉴 항목 은 모두 MenuItemM 을 통 해 이 루어 집 니 다.
이 안 은 메뉴 표시 줄 의 하위 컨트롤 일 뿐 입 니 다.다음 블 로그 에서 아래쪽 메뉴 표시 줄 의 패 키 징 을 완성 할 것 입 니 다.이 컨트롤 은 이전 블 로그 에서 소개 한 컨트롤 Button ExtendeM 을 사 용 했 습 니 다.먼저 볼 수 있 습 니 다https://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>

이 안 에는 visible More 와 visible New 의 두 개의 매 거 진 값 을 중점적으로 살 펴 보 겠 습 니 다.이 안 에는 View 소스 코드 의 visible 과 gone 과 일치 합 니 다.속성 을 어떻게 정의 하고 사용 하 는 지 에 대해 서 는 이전의 블 로 그 를 참고 할 수 있 습 니 다.
2 레이아웃 파일 viewmenu_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 를 사 용 했 습 니 다.주로 ButtonExtendeM 상하 구조의 컨트롤 에 오른쪽 상단 의 세 가지 알림 정보,수량 알림,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);
  }
 });
}

자,여기까지 소개 하 겠 습 니 다.더 많은 사용 방법 은 소스 코드 인 Menu ItemMTest Activity.자바 를 참고 할 수 있 습 니 다.
모든 코드 는 오픈 소스 중국의 코드 클 라 우 드 에 위탁 되 었 습 니 다.다운로드 환영 합 니 다.주소:https://git.oschina.net/landptf/landptf.git
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.