本项目来自菜鸟窝，有兴趣者点击http://www.cniao5.com/course/
项目已经做完，
https://github.com/15829238397/CN5E-shop
仿京东商城系列0------项目简介
仿京东商城系列1------fragmentTabHost实现底部导航栏
仿京东商城系列2------自定义toolbar
仿京东商城系列3------封装Okhttp
仿京东商城系列4------轮播广告条
仿京东商城系列5------商品推荐栏
仿京东商城系列6------下拉刷新上拉加载的商品列表
仿京东商城系列7------商品分类页面
仿京东商城系列8------自定义的数量控制器
仿京东商城系列9------购物车数据存储器实现
仿京东商城系列10------添加购物车，管理购物车功能实现
仿京东商城系列11------商品排序功能以及布局切换实现（Tablayout）
仿京东商城系列12------商品详细信息展示（nativie与html交互）
仿京东商城系列13------商品分享（shareSDK）
仿京东商城系列14------用户登录以及app登录拦截
仿京东长城系列15------用户注册，SMSSDK集成
仿京东商城系列16------支付SDK集成
仿京东商城系列17------支付功能实现
仿京东商城系列18------xml文件读取（地址选择器）
仿京东商城系列19------九宫格订单展示
仿京东商城系列20------终章
前言
本文我们将介绍一个自定义控件，数量控制器。先看看效果吧。
数量控制器.gif
内容
我们的数量控制器内容相当简单，中间显示现在的数值，左右两侧为加减按钮。可以限制中间数值的最大值和最小值，以及可以设置两个按钮和中间显示框的背景。接下来我们一起来看如何自定义这样的一个空间。
- 新建一个xml文件描述空间的内部。代码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:id="@+id/subButton"
style="@style/Widget.AppCompat.Button.Small"
android:layout_width="60dp"
android:layout_height="35dp"
android:layout_gravity="center"
android:gravity="center"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:text="-"
android:textColor="@color/black"
/>
<TextView
android:id="@+id/num"
android:layout_width="50dp"
android:layout_height="35dp"
android:layout_gravity="center"
android:gravity="center"
android:text="10" />
<Button
android:id="@+id/addButton"
android:gravity="center"
style="@style/Widget.AppCompat.Button.Small"
android:layout_width="60dp"
android:layout_height="35dp"
android:textColor="@color/black"
android:text="+"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:layout_gravity="center"/>
</LinearLayout>
- 新建自定义属性，在starrs文件中添加以下自定义属性
<declare-styleable name="NumControlerView">
<attr name="value" format="reference|integer"/>
<attr name="minValue" format="reference|integer"/>
<attr name="maxValue" format="reference|integer"/>
<attr name="subButtonBackground" format="reference"/>
<attr name="addButtonBackground" format="reference"/>
<attr name="numTextBackGround" format="reference"/>
</declare-styleable>
- 新建自定义控件类，继承LinearLayout类。代码如下：
package com.example.cne_shop.widget;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.support.annotation.Nullable;
import android.support.annotation.RequiresApi;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import com.example.cne_shop.R;
/**
* Created by 博 on 2017/7/13.
*/
public class NumControlerView extends LinearLayout implements View.OnClickListener{
private View view ;
private Context context ;
private LayoutInflater inflater ;
private Button addButoon ;
private Button subButton ;
private TextView num ;
private int value ;
private int minValue ;
private int maxValue ;
private Drawable addButtonBackGround ;
private Drawable subButtonBackGround ;
private Drawable numTextBackGround ;
private TypedArray typedArray ;
private onNumChangedListener listener ;
@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
public NumControlerView(Context context) {
this(context , null) ;
}
@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
public NumControlerView(Context context, @Nullable AttributeSet attrs) {
this(context , attrs ,0) ;
}
@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
public NumControlerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context ;
inflater = LayoutInflater.from(context) ;
typedArray = context.obtainStyledAttributes(attrs , R.styleable.NumControlerView) ;
initView();
typedArray.recycle();
}
@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
public void initView(){
view = inflater.inflate(R.layout.num_controller_layout , null , false) ;
addButoon = (Button) view.findViewById(R.id.addButton) ;
subButton = (Button) view.findViewById(R.id.subButton) ;
num = (TextView) view.findViewById(R.id.num) ;
getAttrValue() ;
addButoon.setBackground(addButtonBackGround);
subButton.setBackground(subButtonBackGround);
num.setBackground(numTextBackGround);
num.setText(value+"");
addButoon.setOnClickListener(this);
subButton.setOnClickListener(this);
num.setOnClickListener(this);
addView(view);
}
public int getValue() {
return value;
}
public void setValue(int value) {
this.value = value;
num.setText(value+"");
}
public int getMinValue() {
return minValue;
}
public void setMinValue(int minValue) {
this.minValue = minValue;
}
public int getMaxValue() {
return maxValue;
}
public void setMaxValue(int maxValue) {
this.maxValue = maxValue;
}
public void getAttrValue(){
maxValue = typedArray.getInt(R.styleable.NumControlerView_maxValue , 0) ;
value = typedArray.getInt(R.styleable.NumControlerView_value , 0) ;
minValue = typedArray.getInt(R.styleable.NumControlerView_minValue , 0) ;
addButtonBackGround = typedArray.getDrawable(R.styleable.NumControlerView_addButtonBackground ) ;
subButtonBackGround = typedArray.getDrawable(R.styleable.NumControlerView_subButtonBackground ) ;
numTextBackGround = typedArray.getDrawable(R.styleable.NumControlerView_numTextBackGround ) ;
}
@Override
public void onClick(View v) {
if (v.getId() == R.id.addButton){
if (addValue() && listener != null)
listener.addValueListener(v , getValue());
}else if (v.getId() == R.id.subButton){
if (subValue() && listener != null)
listener.subValueListener(v , getValue());
}
}
private Boolean addValue(){
if( num.getText()!=null && value != maxValue ) {
value++ ;
num.setText(value+"");
return true ;
}else {
Toast.makeText( context ,"已达到允许的最大值" , Toast.LENGTH_SHORT ).show();
return false ;
}
}
private Boolean subValue(){
if( num.getText()!=null && value != minValue ) {
value-- ;
num.setText(value+"");
return true ;
}else {
Toast.makeText( context ,"已达到允许的最小值" , Toast.LENGTH_SHORT ).show();
return false ;
}
}
public interface onNumChangedListener{
void addValueListener(View v, int value) ;
void subValueListener(View v, int value) ;
}
public void setValueChangeListener(onNumChangedListener listener){
this.listener = listener ;
}
}
上述代码完成以下工作：
1.实现构造方法。
2.调用context.obtainStyledAttributes(attrs , R.styleable.NumControlerView) 方法得到typedArray 。用来取出对应的自定义属性的值。
3.得到加减按钮和显示框的实例，进行事件添加，和输入限制。
- 随后使用我们的自定义控件的类名，进行使用，具体代码如下：
<com.example.cne_shop.widget.NumControlerView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:value="1"
app:minValue="1"
app:maxValue="10"
app:numTextBackGround="@color/white"
app:addButtonBackground="@color/white"
app:subButtonBackground="@color/white"
></com.example.cne_shop.widget.NumControlerView>
网友评论