在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.csdn.net/do168/androidtestcenter/