Android 自定义组合控件

前言：

在Android日常开发过程中难免会遇到Android标准控件库中没有满足要求的，这时候就需要自定义控件。一个好的自定义控件应当和Android本身提供的控件一样，封装了一系列的功能以供开发者使用，不仅具有完备的功能，也优化对内存和CPU的使用。

指标：

个人自定义控件应该满足下面一些指标：

1. 应当遵守Android标准的规范(命名，可配置，事件处理等)。
2. 在XML布局中可配置控件的属性。
3. 对交互应当有合适的反馈，比如touch，click等。
4. 具有兼容性， Android版本很多，应该具有广泛的适用性。
好在Android已经提供了一系列基础控件和xml属性来帮助我们进行自定义控件的创建。

1.View的子类

在Android，几乎所有的控件均继承自View，你也可以直接继承View也可以继承其他的控件比如ImageView等，也可能对这些控件进行组合。具体定义时需要至少提供一个构造函数，其中Context和AttributeSet作为参数,如下：

public LevelMenuItem(Context context, AttributeSet attrs) {    super(context, attrs);}

2. 自定义属性

优秀的自定义控件需要支持可添加xml来配置属性和风格。 实现步骤如下：

1） Style XML 中添加自定义属性
2） 在xml的中，指定属性的名称与值类型
3） 在view中获取xml中的值
4） 将获取的值应用到view中

如sytle.xml中添加：

<declare-styleable name="LevelMenuItem">    <attr name="text" format="string" />    <attr name="text_color" format="color"/>    <attr name="text_size" format="dimension" />    <attr name="image_src" format="reference"/>    <attr name="image_bg" format="reference"/>    <attr name="image_alpha" format="integer" />    <attr name="image_height" format="dimension"/>    <attr name="image_width" format="dimension" />declare-styleable>

layout中设置属性值：

<com.example.qinghua_liu.myapplication.LevelMenuItem    android:id="@+id/item0"    android:layout_below="@+id/mybutton1"    android:layout_width="70dp"    android:layout_height="80dp"    linc:text="杭州"    linc:text_size="6sp"    linc:text_color="#80fa8072"    linc:image_src="@drawable/orange_button_selector"    linc:image_alpha="128"    linc:image_height="48dp"    linc:image_width="48dp"    />

3. 应用属性值

之后 在自定义控件中，就可以读这些值，并应用到控件上了,需要注意的是， TypeArray使用完毕后需要销毁，不然会发生内存泄露

mTextView = (TextView) findViewById(R.id.tv_item);String textString = typedArray.getString(R.styleable.LevelMenuItem_text);int textColor = typedArray.getColor(R.styleable.LevelMenuItem_text_color,        0xffffffff);float textSize = typedArray.getDimension(R.styleable.LevelMenuItem_text_size,        20);mTextView.setText(textString);mTextView.setTextColor(textColor);mTextView.setTextSize(textSize);

4. 设置方法与事件回调自定义它只能在view初始化的时候被应用到控件中。为了添加更加灵活的行为，就需要自定义方法：

public int getTextSize() {    return this.mTextSize;}

public void setTextSize(int textSize) {

     this.mTextSize=textSize;

     invalidate();     requestLayout();

}

invalidate()和requestLayout(), 保证了view能及时的更新。在你的自定义View中，如果有属性被改变并且需要立即生效时，
就需要调用这个方法。 这样系统会立即重新绘制view。 同样的，如果view的尺寸或者形状发生了变化，也必须调用requestLayout()。

实战

下面结合代码来尝试自定义组合控件的实现：

素材：

找两张图片素材，做一个圆形的按钮，一张正常显示，一点按下时显示：

Style属性：

<declare-styleable name="LevelMenuItem">    <attr name="text" format="string" />    <attr name="text_color" format="color"/>    <attr name="text_size" format="dimension" />    <attr name="image_src" format="reference"/>    <attr name="image_bg" format="reference"/>    <attr name="image_alpha" format="integer" />    <attr name="image_height" format="dimension">attr>    <attr name="image_width" format="dimension" />declare-styleable>

定义ImageView selector xml

drawable/selector

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android" >    <item android:state_pressed="true"        android:drawable="@drawable/button_push"/>    <item android:drawable="@drawable/orange_button"/>selector>

layout:

level_menu_item.xml（图片加文字的组合按钮）

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:gravity="center"    android:orientation="vertical" >    <ImageView        android:layout_gravity="center_horizontal"        android:id="@+id/image_item"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:scaleType="fitCenter"        />    <TextView        android:id="@+id/tv_item"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:gravity="center_horizontal"        android:textColor="#23ffffff"        android:textSize="25sp"        android:layout_gravity="center_horizontal"        />LinearLayout>

level_menu.xml:(控件组，包含三个上面的控件)

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:linc="http://schemas.android.com/apk/res-auto"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="horizontal">    <com.example.qinghua_liu.myapplication.LevelMenuItem        android:id="@+id/item1"        android:layout_width="70dp"        android:layout_height="80dp"        linc:text="天气"        linc:text_size="6sp"        linc:text_color="#80fa8072"        linc:image_src="@drawable/orange_button_selector"        linc:image_alpha="128"        linc:image_height="48dp"        linc:image_width="48dp"        />    <com.example.qinghua_liu.myapplication.LevelMenuItem        android:id="@+id/item2"        android:layout_marginLeft="20dp"        android:layout_width="70dp"        android:layout_height="80dp"        linc:text="新闻"        linc:text_size="6sp"        linc:text_color="#ffeee8aa"        linc:image_src="@drawable/orange_button_selector"        linc:image_alpha="255"        linc:image_height="48dp"        linc:image_width="48dp"        />    <com.example.qinghua_liu.myapplication.LevelMenuItem        android:id="@+id/item3"        android:layout_marginLeft="20dp"        android:layout_width="70dp"        android:layout_height="80dp"        linc:text="景区"        linc:text_size="6sp"        linc:text_color="#80cd853f"        linc:image_src="@drawable/orange_button_selector"        linc:image_alpha="128"        linc:image_height="48dp"        linc:image_width="48dp"        />LinearLayout>

LevelMenuItem.java

public class LevelMenuItem extends LinearLayout {    private TextView mTextView = null;    private ImageView mImageView = null;    public LevelMenuItem(Context context) {        super(context);    }    public LevelMenuItem(Context context, AttributeSet attrs) {        super(context, attrs);        LayoutInflater layoutInflater = (LayoutInflater) context.                getSystemService(Context.LAYOUT_INFLATER_SERVICE);        layoutInflater.inflate(R.layout.level_menu_item, this);        TypedArray typedArray = context.obtainStyledAttributes(attrs                , R.styleable.LevelMenuItem);        initWidget(typedArray);    }    private void initWidget(TypedArray typedArray) {        mTextView = (TextView) findViewById(R.id.tv_item);        String textString = typedArray.getString(R.styleable.LevelMenuItem_text);        int textColor = typedArray.getColor(R.styleable.LevelMenuItem_text_color,                0xffffffff);        float textSize = typedArray.getDimension(R.styleable.LevelMenuItem_text_size,                20);        mTextView.setText(textString);        mTextView.setTextColor(textColor);        mTextView.setTextSize(textSize);        mImageView = (ImageView) findViewById(R.id.image_item);        int imageHeight = (int) typedArray.getDimension(R.styleable.LevelMenuItem_image_height, 25);        int imageWidth = (int) typedArray.getDimension(R.styleable.LevelMenuItem_image_width, 25);        int imageSrc = typedArray.getResourceId(R.styleable.LevelMenuItem_image_src, 0);        int imageBg = typedArray.getResourceId(R.styleable.LevelMenuItem_image_bg, 0);        int imageAlpha = typedArray.getInt(R.styleable.LevelMenuItem_image_alpha, 255);        mImageView.setAlpha(imageAlpha);        mImageView.setImageResource(imageSrc);        mImageView.setBackgroundResource(imageBg);        LayoutParams layoutParams = new LayoutParams(imageWidth, imageHeight);        mImageView.setLayoutParams(layoutParams);        typedArray.recycle();    }    /**     * 设置此控件的文本     *     * @param text     */    public void setText(String text) {        mTextView.setText(text);    }    /**     * 设置文字颜色     *     * @param textColor     */    public void setTextColor(int textColor) {        mTextView.setTextColor(textColor);    }    /**     * 设置字体大小     *     * @param textSize     */    public void setTextSize(int textSize) {        mTextView.setTextSize(textSize);    }    /**     * 设置图片     *     * @param resId     */    public void setImageResource(int resId) {        mImageView.setImageResource(resId);    }    /**     * 设置图片背景     */    public void setBackgroundResource(int resId) {        mImageView.setBackgroundResource(resId);    }    /**     * 设置图片的不透名度     *     * @param alpha     */    public void setImageAlpha(int alpha) {        mImageView.setAlpha(alpha);    }    /**     * 设置图片的大小     * 这里面需要使用LayoutParams这个布局参数来设置     *     * @param width     * @param height     */    public void setImageSize(int width, int height) {        LayoutParams layoutParams = new LayoutParams(width, height);        mImageView.setLayoutParams(layoutParams);    }    /**     * image点击事件的回调     *     * @param listener     */    public void setOnClickListener(OnItemClickListener listener) {        lis = null;        lis = listener;        mImageView.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                lis.onImageClick();            }        });    }    /**     * 点击事件接口     *     * @author linc     */    private OnItemClickListener lis;    public interface OnItemClickListener {        public void onImageClick();    }}

LevelMenu.java

public class LevelMenu extends LinearLayout {    private LevelMenuItem item1, item2, item3;    private String TAG = this.getClass().getName();    public LevelMenu(Context context) {        super(context);    }    public LevelMenu(Context context, AttributeSet attrs) {        super(context, attrs);        LayoutInflater layoutInflater = (LayoutInflater) context.                getSystemService(Context.LAYOUT_INFLATER_SERVICE);        layoutInflater.inflate(R.layout.level_menu, this);        initWidget();    }    public boolean setOnClickListener(int id, LevelMenuItem.OnItemClickListener lis) {        boolean bRes = false;        switch (id) {            case R.id.item1: {                item1.setOnClickListener(lis);                bRes = true;            }            break;            case R.id.item2: {                item2.setOnClickListener(lis);                bRes = true;            }            break;            case R.id.item3: {                item3.setOnClickListener(lis);                bRes = true;            }            break;        }        return bRes;    }    private void initWidget() {        item1 = (LevelMenuItem) findViewById(R.id.item1);        item2 = (LevelMenuItem) findViewById(R.id.item2);        item3 = (LevelMenuItem) findViewById(R.id.item3);    }}

layout使用 LevelMenu

<com.example.qinghua_liu.myapplication.LevelMenu    android:layout_below="@+id/item0"    android:id="@+id/levelMenu"    android:layout_width="wrap_content"    android:layout_height="wrap_content" />

自定义控件组的使用：

levelMenu = (LevelMenu) findViewById(R.id.levelMenu);levelMenu.setOnClickListener(R.id.item1, new LevelMenuItem.OnItemClickListener() {    @Override    public void onImageClick() {        Intent it = new Intent(Main2Activity.this,                ActivityMain3Activity.class);        try {            startActivity(it);        } catch (Exception e) {            Log.e(TAG, e.toString());        }        Log.e(TAG, "item1 clicked");    }});levelMenu.setOnClickListener(R.id.item2, new LevelMenuItem.OnItemClickListener() {    @Override    public void onImageClick() {        Intent it = new Intent(Main2Activity.this,                ActivityMain4Activity.class);        try {            startActivity(it);        } catch (Exception e) {            Log.e(TAG, e.toString());        }        Log.e(TAG, "item2 clicked");    }});levelMenu.setOnClickListener(R.id.item3, new LevelMenuItem.OnItemClickListener() {    @Override    public void onImageClick() {        WorkClass workClass =new WorkClass();        workClass.test();        Log.e(TAG, "item3 clicked");    }});

Activity Layout:

更多相关文章

随机推荐