自定义控件的实现

以下内容整理自慕课网 Andoid UI模板设计

自定义控件的实现主要步骤

1.设计需要的属性

2.实现一个我们要定义的View

3.引用View，基本相同于引用系统的控件

    这里，我们实现一个简单的Topbar为例，只有leftButton,tittle,rightButton三个部分

  

首先，在values 下新建一个 attr.xml ，用于保存要自定义的控件需要用到的属性

<?xml version="1.0" encoding="utf-8"?>
<resources>


    <declare-styleable name="Topbar">

        <attr name="tittle" format="string"/>
        <attr name="tittleTextSize" format="dimension"/>
        <attr name="tittleTextColor" format="color"/>

        <attr name="leftTextColor" format="color"/>
        <attr name="leftBackground" format="reference|color"/>
        <attr name="leftText" format="string"/>

        <attr name="rightTextColor" format="color"/>
        <attr name="rightBackground" format="reference|color"/>
        <attr name="rightText" format="string"/>

    </declare-styleable>


</resources>

自定义控件，主要包括实例化所需的子控件，控件属性值的读取和赋值，控件的宽高和布局设置，以及为控件的点击事件设置回调接口

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;

/**
 * Created by wjc on 2017/1/9.
 */
public class Topbar extends RelativeLayout {

    private Button leftButton,rightButton;
    private TextView tvTittle;

    private int leftTextColor;
    private Drawable leftBackground;
    private String leftText;

    private int rightTextColor;
    private Drawable rightBackground;
    private String rightText;

    private float titleTextSize;
    private int tittleTextColor;
    private String tittle;

    private LayoutParams leftParams,rightParams,tittleParams;

    private topbarClickListener listener;

    //回调接口，具体的点击事件可以在调用方实现接口的时候设定
    public interface topbarClickListener{
        public void leftClick();
        public void rightClick();

    }

    //为两个Buttton定义点击事件
    public void setOnTopbarClickListener(topbarClickListener listener){

        this.listener=listener;
    }

    public Topbar(Context context, AttributeSet attrs) {
        super(context, attrs);

        //使用TypedArray保存在xml文件中自定义的值
        TypedArray ta=context.obtainStyledAttributes(attrs,R.styleable.Topbar);
        //默认值为0
        leftTextColor=ta.getColor(R.styleable.Topbar_leftTextColor,0);
        leftBackground=ta.getDrawable(R.styleable.Topbar_leftBackground);
        leftText=ta.getString(R.styleable.Topbar_leftText);


        rightTextColor=ta.getColor(R.styleable.Topbar_rightTextColor,0);
        rightBackground=ta.getDrawable(R.styleable.Topbar_rightBackground);
        rightText=ta.getString(R.styleable.Topbar_rightText);

        titleTextSize=ta.getDimension(R.styleable.Topbar_tittleTextSize,0);
        tittleTextColor=ta.getColor(R.styleable.Topbar_tittleTextColor,0);
        tittle=ta.getString(R.styleable.Topbar_tittle);

        //在使用完TypedArray之后，进行回收，避免浪费资源和一些其他的错误
        ta.recycle();

        //实例化所需的子控件
        leftButton=new Button(context);
        rightButton=new Button(context);
        tvTittle=new TextView(context);

        //将xml中定义过的属性赋值给控件，也可以新加入一些属性作为默认属性设置
        leftButton.setTextColor(leftTextColor);
        leftButton.setBackground(leftBackground);
        leftButton.setText(leftText);

        rightButton.setTextColor(rightTextColor);
        rightButton.setBackground(rightBackground);
        rightButton.setText(rightText);

        tvTittle.setTextColor(tittleTextColor);
        tvTittle.setTextSize(titleTextSize);
        tvTittle.setText(tittle);
        tvTittle.setGravity(Gravity.CENTER);

        setBackgroundColor(0xFFF33333);

        //所有的布局属性都是设置在LayoutParams
        //设定自定义子控件的宽高参数，以及在ViewGroup(RelativeLayout)中的位置
        leftParams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT,TRUE);//这里的TRUE是一个int

        rightParams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE);

        tittleParams=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.MATCH_PARENT);
        tittleParams.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE);


        //将自控件加入ViewGroup中
        addView(leftButton,leftParams);
        addView(rightButton,rightParams);
        addView(tvTittle,tittleParams);


        //这里的点击事件实际是由Topbar的调用方来实现的
        leftButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                listener.leftClick();
            }
        });

        rightButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                listener.rightClick();
            }
        });

    }
}

自定义控件在xml布局文件中的使用，需要先引入自定义的namespace

这里的属性就是一开始自定义的控件属性，引用控件的时候使用完整的包名

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:myns="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="jintong.slidemenu.MainActivity">

    <jintong.slidemenu.Topbar
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"

        myns:leftBackground="#734f4f"
        myns:leftText="Back"
        myns:leftTextColor="#ffffff"

        myns:rightText="More"
        myns:rightTextColor="#ffffff"
        myns:rightBackground="#734f4f"

        myns:tittle="我的标题"
        myns:tittleTextColor="#6d9bc2"
        myns:tittleTextSize="10sp"
        >

    </jintong.slidemenu.Topbar>

</RelativeLayout>

控件点击事件的实现，只需要调用自定义的方法并实现接口

        Topbar topbar= (Topbar) findViewById(R.id.topbar);
        assert topbar != null;
        topbar.setOnTopbarClickListener(new Topbar.topbarClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(MainActivity.this,"left",Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {
                Toast.makeText(MainActivity.this,"right",Toast.LENGTH_SHORT).show();

            }
        });