自定义组合控件的一般步骤

2017-12-11 本文已影响0人 Maybe_G

说明：本文以cardview为例来记录一下自定义组合控件的一般步骤。效果如下图所示：

image.png

该自定义组合空间是由两个textview和一个switch控件组合而成的。

1.新建setting_item_cardview.xml布局文件。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="15dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="35dp"
        app:cardCornerRadius="4dp">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/text_item_up"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="20dp"

                android:textSize="14dp"
                android:textColor="#000000"
                android:text="设置自动更新" />

            <TextView
                android:id="@+id/text_item_down"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/text_item_up"
                android:layout_marginLeft="20dp"
                android:layout_marginBottom="10dp"
                android:textColor="#66000000"
                android:text="当前自动更新已经关闭" />

            <Switch
                android:id="@+id/switch_item"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_margin="10dp" />

        </RelativeLayout>


    </android.support.v7.widget.CardView>

</RelativeLayout>

2.新建一个属性XML

在value目录下按以下格式新建一个attrs.xml文件。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="SwitchView">
        <attr name="title" format="string"/>
        <attr name="switch_on" format="string"/>
        <attr name="switch_off" format="string"/>
    </declare-styleable>
</resources>

这个意思就是制定你自定义空间里面有哪些属性，类似于TextView中的text属性。

注意：SwitchView要与第3步的类名一致；format中string是小写。

3.新建一个类继承LinearLayout或RelativeLayout

/**
 * Class Name:SwitchView
 * Class desc. :自定义控件
 * date    : 2017/12/11
 * author   : Maybe
 */

public class SwitchView extends LinearLayout {

    public Switch sw;
    private TextView tv_switchInfo;
    private String title;
    private String switchOn;
    private String switchOff;
    private TextView tv_title;

    //在代码中实例化的时候使用
    public SwitchView(Context context) {
        super(context);
        initView(context);
    }
    //在布局文件实例化的时候使用
    public SwitchView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initView(context);
        title = attrs.getAttributeValue("http://schemas.android.com/apk/res-auto", "title");
        switchOff = attrs.getAttributeValue(nameSpace, "switch_off");
        tv_title.setText(title);
        tv_switchInfo.setText(switchOff);

    }
    private void initView(Context context) {
        //inflate :把布局文件转化成view
        //最后一个参数：添加布局文件的父类,也就是把布局文件挂载在SwitchLayout上
        View.inflate(context, R.layout.setting_item_cardview, this);
        sw = (Switch) findViewById(R.id.switch_item);
        tv_title = findViewById(R.id.text_item_up);
        tv_switchInfo = (TextView) findViewById(R.id.text_item_down);
    }
    public void setSwitchOnClickListener(CompoundButton.OnCheckedChangeListener listener) {
        sw.setOnCheckedChangeListener(listener);
    }
    /**
     * fun desc. :为自定义控件中的textView设置文字
     * params.   :
     *
     * @return :
     */
    public void setText(String string) {
        tv_switchInfo.setText(string);
    }
}

其中有以下两句代码需要解释一下：

        title = attrs.getAttributeValue("http://schemas.android.com/apk/res-auto", "title");
        switchOff = attrs.getAttributeValue("http://schemas.android.com/apk/res-auto", "switch_off");
        tv_title.setText(title);
        tv_switchInfo.setText(switchOff);

这两句的意思是我们定义一个命名空间"http://schemas.android.com/apk/res-auto"，然后从这个命名空间里面获取title和switch_off这两个属性，类似TextView的text属性。然后将获取到的String显示出来。

4.新建一个布局，将建好的自定义控件使用起来

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

    <com.maybe.android.mobilesafe.view.SwitchView
        android:id="@+id/slt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        maybe:switch_off="当前自动更新已经关闭"
        maybe:switch_on="当前自动更新已经开启"
        maybe:title="设置自动更新">
    </com.maybe.android.mobilesafe.view.SwitchView>

    <com.maybe.android.mobilesafe.view.SwitchView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        maybe:switch_off="这是自定义控件2"
        maybe:title="这是自定义控件">
    </com.maybe.android.mobilesafe.view.SwitchView>
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这是TextView的控件"
        android:layout_marginLeft="20dp"/>

</LinearLayout>

xmlns:maybe="http://schemas.android.com/apk/res-auto"，

注意

maybe是自己随便命名的，后面的属性也是按照这个来引用
新版本的Android Studio后面是接res-auto，老版本的是res/"包名"

        maybe:switch_off="这是自定义控件2"
        maybe:title="这是自定义控件"

5. 预览一下效果