在Android自定组件简明教程-水平横向Picker

在项目中往往要重复的用到一些UI设计，这时我们可以使用自定义组件来使我们的代码更加精炼。

本教程是Android自定组件最简明的教程，并不是高级教程。简单到可能有人会笑的程度，因为实在是太简单了，哈哈。希望对你有用。

Android Studio是有UI Component模板的，但我们这次不用这个模板，因为那个模板太复杂了。我们用最简单的办法。

首先创建一个layout文件，layout XML中定义我们的UI界面。如下

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

    <Button
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:text="<"
        android:id="@+id/button_minus"
        android:background="@android:color/transparent" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center_vertical|center_horizontal"
        android:id="@+id/packerValueLayout">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="文字"
            android:id="@+id/text_value" />

    </LinearLayout>

    <Button
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:text=">"
        android:id="@+id/button_plus"
        style="?android:attr/borderlessButtonStyle"
        android:background="@android:color/transparent" />

</LinearLayout>

然后我们继承LinearLayout创建一个类，在类的初始化方法中初始化我们的UI组件，如下

package com.fsp.jianchi.androidtestapps;

import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * Created by Administrator on 2016/6/22.
 */
public class HorizontalPicker extends LinearLayout {
    private TextView textValue;
    private Button buttonPlus;
    private Button buttonMinus;
    private int index;
    private IHorizontalPickerAdapter adapter;
    private IHorizontalPickerListener listener;

    public HorizontalPicker(Context context) {
        this(context, null);
    }

    public HorizontalPicker(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public HorizontalPicker(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }


    private void init(Context context, AttributeSet attrs) {

        //忽略编辑模式
        if (isInEditMode()) {
            return;
        }

        LayoutInflater layoutInflater =
                (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        layoutInflater.inflate(R.layout.horizontal_picker, this);


        buttonPlus = (Button) findViewById(R.id.button_plus);

        buttonPlus.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {
                index--;
                drawValue();
            }
        });


        buttonMinus = (Button) findViewById(R.id.button_minus);

        buttonMinus.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                index++;
                drawValue();
            }
        });
        textValue = (TextView) findViewById(R.id.text_value);

    }

    public void setAdapter(IHorizontalPickerAdapter adp){
        index = 0;
        adapter=adp;
        drawValue();
    }

    public void setListener(IHorizontalPickerListener listener) {
        this.listener = listener;
    }

    private void drawValue(){
        textValue.setText(adapter.getItem(index));
        if (listener != null) {
            listener.onHorizontalPickerChanged(this, index);
        }
    }

    public void setIndex(int i) {
        index=0;
        drawValue();
    }
    public String getValue(int i) {
        return adapter.getItem(i);
    }
}

我们看到上面的类很简单，只是实现了几个在XML中定义的组件的简单控制方法。

为了响应事件，声明下面的interface

public interface IHorizontalPickerListener {
    void onHorizontalPickerChanged(HorizontalPicker horizontalPicker, int index);
}

为了提供数据，声明下面的interface

public interface IHorizontalPickerAdapter {
    int getCount();
    String getItem(int index);
}

使用方法很简单，我们只需要在XML layout中加入我们的控件，如下

    <com.fsp.jianchi.androidtestapps.HorizontalPicker
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:id="@+id/hp" >
    </com.fsp.jianchi.androidtestapps.HorizontalPicker>

使用下面的java代码进行控制

        HorizontalPicker hp = (HorizontalPicker) findViewById(R.id.hp);
        String[] values = {"周一","周二","周三","周四","周五","周六","周日"};
        hp.setAdapter(new HPAdapter(values));
        hp.setIndex(0);

        hp.setListener(new IHorizontalPickerListener() {
            @Override
            public void onHorizontalPickerChanged(HorizontalPicker horizontalNumberPicker, int value) {
                Toast.makeText(getApplicationContext(),"选择索引"+ String.valueOf(value),Toast.LENGTH_SHORT).show();
            }
        });

上面的HPAdapter是实现了IHorizontalPickerAdapter接口的一个类，代码如下

public class HPAdapter implements IHorizontalPickerAdapter {

    String[] values;
    public HPAdapter(String[] values){
        this.values=values;
    }

    @Override
    public int getCount() {
        return values.length;
    }

    @Override
    public String getItem(int index) {
        return values[Math.abs(index%values.length)];
    }
}

很简单，没有任何技术难度，我们就可以看到我们的自定义UI组件了，如下图所示

这是我的一个测试例子，代码在这里可以找到

https://code.youkuaiyun.com/do168/androidtestcenter/