仿美團外賣自定義加減控件(一)

前言

項目中有時要用到數(shù)目加減的問題，直接布局的話顯得有些麻煩，于是查查，決定自定義一個加減控件。
此篇文章的由來參考自以下鏈接
高仿美團外賣加減號自定義控件
我只是在他的基礎(chǔ)上做了一些簡單的代碼優(yōu)化，此篇文章的作用

  • 學習簡單的自定義控件
  • 學習控件的測量和重新定義寬高

ok，下面開始正式講解。

第一步，附上自定義控件 CicleAddAndSubView 的代碼
package com.test.ui.main;

import android.content.Context;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.test.R;

/**
 * Instruction:自定義加減數(shù)量控件
 * <p>
 * Author:pei
 * Date: 2017/7/13
 * Description:
 */


public class CicleAddAndSubView extends LinearLayout implements View.OnClickListener{

    public static final int TYPE_SUBTRACT = 0;//減
    public static final int TYPE_ADD = 1;//加
    private static final int DEFAULT_NUM=0;//默認num值

    private View mLayoutView;
    private Context mContext;
    private ImageView mBtnAdd;//加按鈕
    private ImageView mBtnSub;//減按鈕
    private TextView mTvCount;//數(shù)量顯示
    private int mNum;
    private OnNumChangeListener mOnNumChangeListener;

    /**
     * 設(shè)置監(jiān)聽回調(diào)
     *
     * @param onNumChangeListener
     */
    public void setOnNumChangeListener(OnNumChangeListener onNumChangeListener) {
        this.mOnNumChangeListener = onNumChangeListener;
    }

    public CicleAddAndSubView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mLayoutView=LayoutInflater.from(context).inflate(R.layout.add_sub_view, this);
        this.mContext=context;

        initView();
        initData();
        setListener();
    }

    private void initView(){
        mBtnAdd = (ImageView) mLayoutView.findViewById(R.id.btn_add);
        mBtnSub = (ImageView) mLayoutView.findViewById(R.id.btn_sub);
        mTvCount = (TextView) mLayoutView.findViewById(R.id.tv_count);

        setPadding(1, 1, 1, 1);
        //重新設(shè)置mBtnAdd，mBtnSub寬高，用來保證顯示正方形
        setViewSize(mBtnAdd);
        setViewSize(mBtnSub);
    }

    private void initData(){
        setAddBtnImageResource(R.drawable.goods_add_btn);
        setSubBtnImageResource(R.drawable.goods_sub_btn);
        mNum=DEFAULT_NUM;
        setNum(mNum);//設(shè)置默認數(shù)量
    }

    private void setListener(){
        mBtnAdd.setOnClickListener(this);
        mBtnSub.setOnClickListener(this);
    }

    private void setViewSize(final View view){
        view.post(new Runnable(){
            public void run() {//這里獲取寬高
                int width=view.getWidth();
                int height=view.getHeight();

                LinearLayout.LayoutParams params= (LayoutParams) view.getLayoutParams();
                if(width<height){
                    params.height=width;
                }else if(width>height){
                    params.width=height;
                }
                view.setLayoutParams(params);
            }
        });
    }

    @Override
    public void onClick(View v) {
        String countText = mTvCount.getText().toString();
        if (TextUtils.isEmpty(countText)) {
            mNum = DEFAULT_NUM;
            mTvCount.setText(String.valueOf(mNum));
            return;
        }
        switch(v.getId()){
           case R.id.btn_add://加號
                mNum++;
                setNum(mNum);
               if (mOnNumChangeListener != null) {
                   mOnNumChangeListener.onNumChange(mLayoutView, TYPE_ADD, getNum());
               }
                break;
           case R.id.btn_sub://減號
                mNum--;
                setNum(mNum);
               if (mOnNumChangeListener != null) {
                   mOnNumChangeListener.onNumChange(mLayoutView, TYPE_SUBTRACT, getNum());
               }
                break;
           default:
                break;
          }
    }


    /**
     * 設(shè)置中間的距離
     *
     * @param distance
     */
    public void setMiddleDistance(int distance) {
        mTvCount.setPadding(distance, 0, distance, 0);
    }

    /**
     * 設(shè)置數(shù)量
     *
     * @param num
     */
    public void setNum(int num) {
        this.mNum = num;
        if (mNum > 0) {
            mBtnSub.setVisibility(View.VISIBLE);
            mTvCount.setVisibility(View.VISIBLE);
        } else {
            mBtnSub.setVisibility(View.INVISIBLE);
            mTvCount.setVisibility(View.INVISIBLE);
        }
        mTvCount.setText(String.valueOf(mNum));
    }

    /**
     * 獲取值
     *
     * @return
     */
    public int getNum() {
        String countText=mTvCount.getText().toString().trim();
        if (!TextUtils.isEmpty(countText)) {
            return Integer.parseInt(countText);
        } else {
            return DEFAULT_NUM;
        }
    }


    /**
     * 設(shè)置加號圖片
     *
     * @param addBtnDrawable
     */
    public void setAddBtnImageResource(int addBtnDrawable) {
        mBtnAdd.setImageResource(addBtnDrawable);
    }

    /**
     * 設(shè)置減法圖片
     *
     * @param subBtnDrawable
     */
    public void setSubBtnImageResource(int subBtnDrawable) {
        mBtnSub.setImageResource(subBtnDrawable);
    }

    /**
     * 設(shè)置加法減法的背景色
     *
     * @param addBtnColor
     * @param subBtnColor
     */
    public void setButtonBgColor(int addBtnColor, int subBtnColor) {
        mBtnAdd.setBackgroundColor(addBtnColor);
        mBtnSub.setBackgroundColor(subBtnColor);
    }

    public interface OnNumChangeListener {
        /**
         * 監(jiān)聽方法
         *
         * @param view
         * @param stype 點擊按鈕的類型
         * @param num   返回的數(shù)值
         */
        void onNumChange(View view, int stype, int num);
    }

}

對應(yīng)的 add_sub_view.xml 布局代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/btn_sub"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/tv_count"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1.0"
        android:gravity="center"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:text="0"
        android:textColor="@color/black"
        android:textSize="16sp"/>

    <ImageView
        android:id="@+id/btn_add"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

然后涉及到的 R.drawable.goods_add_btn 和 R.drawable.goods_sub_btn 分別是兩張 加，減 圓形圖片，這里就不深講了。

第二步，activity_main.xml 中引用控件：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:gravity="center"
    android:orientation="vertical">

    <com.test.ui.main.CicleAddAndSubView
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_margin="10dp"
        android:padding="10dp"/>

</LinearLayout>
第三步，MainActivity中使用控件：
package com.test.ui.main;

import android.support.annotation.Nullable;
import android.view.View;

import com.test.R;
import com.test.base.BaseActivity;
import com.test.base.BasePresenter;
import com.test.util.LogUtil;

import butterknife.BindView;

/**
 * Created by Admin on 2017/5/19.
 */

public class MainActivity extends BaseActivity implements View.OnClickListener{

    @BindView(R.id.btn)
    CicleAddAndSubView mCicleAddAndSubView;

    @Override
    protected int getContentViewId() {
        return R.layout.activity_main;
    }

    @Override
    protected void initData() {

    }

    @Override
    protected void setListener() {
        mCicleAddAndSubView.setOnNumChangeListener(new CicleAddAndSubView.OnNumChangeListener() {
            @Override
            public void onNumChange(View view, int stype, int num) {
                //點擊加號，減號打印數(shù)量值
                LogUtil.e("====num====="+num);
            }
        });
    }

    @Nullable
    @Override
    protected BasePresenter getPresenter() {
        return null;
    }

    @Override
    protected void onDestroy(){
        super.onDestroy();
    }

    @Override
    public void onClick(View v) {

    }
}
最后，讓我們來看看效果圖
1.gif

好了，今天的內(nèi)容就講到這里吧，謝謝誒。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 之前寫過一個自定義加減數(shù)量的控件，不知道的同學可以移步仿美團外賣自定義加減控件(一) 然后隨著項目的進展，竟...
    奔跑的佩恩閱讀 1,293評論 0贊 6
  • 之前寫過自定義加減控件的文章，大家可以看看仿美團外賣自定義加減控件(二)然后個人覺得將“加號事件”，“減號事件”和...
    奔跑的佩恩閱讀 1,296評論 3贊 5
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,351評論 25贊 708
  • 去年不知什么時候，小孩看到他的小伙伴有一只豬豬存錢罐，他也好想買一只，到了超市，發(fā)現(xiàn)只剩最后一只了，被一個顧先拿到...
    記錄自己的見聞閱讀 220評論 0贊 0
  • 以前一直覺的自己只是心情不好，那天偶然看了一篇抑郁的文章，才發(fā)現(xiàn)原來自己是抑郁啊，而且還是重度抑郁。思維遲鈍，精力...
    曼曼風雨閱讀 420評論 0贊 0

友情鏈接更多精彩內(nèi)容