Android项目：手机安全卫士（4）—— 自定义（组合）控件、属性

1 总纲

手机安全卫士共有 9 个功能，我们先来看看设置界面长什么样：

大家已经发现了，第一反应就是用 ListView 实现，但是，我们仔细一看，每一个 Item 并不完全一样，况且 Item 数量也不多，所以，我们可以用自定义（组合）控件来实现，把每一个 Item 抽象出来，做成控件，之所以叫组合控件，因为这个控件中用到了很多系统控件，我们只是修改了它们的布局而已。

关于项目相关文章，请访问：

• Android 项目：手机安全卫士（1）—— 闪屏界面
• Android 项目：手机安全卫士（2）—— 版本升级
• Android 项目：手机安全卫士（3）—— 主界面布局

项目源码地址（实时更新）：https://github.com/xwdoor/MobileSafe

2 自定义组合控件

先按照上图中的自动更新设置为模板进行实现，包括四个控件：两个 TextView，一个 CheckBox，一条横线。其中横线的实现思路很有意思，它也是一个 TextView，只是设置了它的高度为 1 个像素，然后这是背景为黑色即可。好了，废话不多说，开始写代码，首先创建布局文件：item_setting.xml，内容如下：

    <?xml version="1.0" encoding="utf-8"?>    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"        android:orientation="vertical" android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:padding="5dp">        <TextView            android:id="@+id/tv_title"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textSize="20sp"            android:text="自动更新设置"            android:textColor="@android:color/black"/>        <TextView            android:id="@+id/tv_desc"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginTop="5dp"            android:text="自动更新已开启"            android:layout_below="@id/tv_title"            android:textColor="#b000"/>        <CheckBox            android:id="@+id/cb_check"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:clickable="false"            android:focusableInTouchMode="false"            android:focusable="false"            android:layout_alignParentRight="true"            android:layout_centerVertical="true"/>        <TextView            android:layout_width="match_parent"            android:layout_height="1px"            android:background="@android:color/black"            android:layout_marginTop="5dp"            android:layout_below="@id/tv_desc"/>    </RelativeLayout>

这就是自动更新设置的 UI 实现了，注意，该布局中屏蔽了 CheckBox 的点击事件，并且不让它获取焦点。接下来就是创建自定义组件，且使用该 UI 作为界面。创建类：SettingItemView，继承自 RelativeLayout，代码如下：

    /**     * Created by XWdoor on 2016/3/1 001 16:19.     * 博客：http://blog.csdn.net/xwdoor     */    public class SettingItemView extends RelativeLayout {        private TextView tvTitle;        private TextView tvDesc;        private CheckBox cbCheck;        public SettingItemView(Context context) {            super(context);            initView();        }        public SettingItemView(Context context, AttributeSet attrs) {            super(context, attrs);            initView();        }        public SettingItemView(Context context, AttributeSet attrs, int defStyleAttr) {            super(context, attrs, defStyleAttr);            initView();        }        private void initView(){            View view = View.inflate(getContext(), R.layout.item_setting,null);            tvTitle = (TextView) view.findViewById(R.id.tv_title);            tvDesc = (TextView) view.findViewById(R.id.tv_desc);            cbCheck = (CheckBox) view.findViewById(R.id.cb_check);            addView(view);        }        /** 设置标题 */        public void setTitle(String title){            tvTitle.setText(title);        }        /** 设置描述 */        public void setDesc(String desc){            tvDesc.setText(desc);        }        /** 是否开启 */        public boolean isChecked(){            return cbCheck.isChecked();        }        /** 设置开启状态 */        public void setChecked(boolean checked){            cbCheck.setChecked(checked);        }    }

SettingItemView 使用了先前定义的布局，并对外公开 4 个接口，分别是：设置标题、设置描述、获取开启状态、设置开启状态。接下来就是使用它了，先是创建 SettingActivity，及其布局文件：activity_setting.xml，在布局文件中，使用刚才自定义的控件，代码如下：

    <?xml version="1.0" encoding="utf-8"?>    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">        <TextView            android:id="@+id/tv_title"            style="@style/TitleBar"            android:text="设置"/>        <!-- 自定义控件 -->        <net.xwdoor.mobilesafe.view.SettingItemView            android:id="@+id/siv_update"            android:layout_width="match_parent"            android:layout_height="wrap_content"/>    </LinearLayout>

至此，自定义控件就弄好了，然后我们就可以像其他普通控件一样使用它了，以下是 SettingActivity 中的代码：

    @Override    protected void initViews(Bundle savedInstanceState) {        setContentView(R.layout.activity_setting);        final SettingItemView sivUpdate = (SettingItemView) findViewById(R.id.siv_update);        sivUpdate.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                sivUpdate.setChecked(!sivUpdate.isChecked());                if(sivUpdate.isChecked()){                    //若选中，开启自动更新设置                    sivUpdate.setDesc("自动更新已开启");                }else {                    //关闭自动更新                    sivUpdate.setDesc("自动更新已关闭");                }            }        });    }

运行结果如图：

3 自定义属性

聪明的你已经发现了，每次点击时，我们都要设置它的描述，sivUpdate.setDesc("自动更新已开启"); 是已开启，sivUpdate.setDesc("自动更新已关闭"); 是已关闭，一个 Item 还好，但是如果有很多个的话，管理起来就比较麻烦了，而且文字常量显示什么的属于 UI 的数据，应该在设计 UI 的时候就设置好的，所以，我们最好将这几个状态，以及标题，设置为 SettingItemView 的属性，也就是我们的自定义属性。

在 res->values 文件夹中创建资源文件：attr.xml，因为我使用的是 Android Studio，不存在该文件，所以手动创建，然后写自定义属性，代码如下：

    <?xml version="1.0" encoding="utf-8"?>    <resources>        <declare-styleable name="SettingItemView">            <attr name="stitle" format="string" />            <attr name="desc_on" format="string" />            <attr name="desc_off" format="string" />        </declare-styleable>    </resources>

其中 name 是自定义的，format 是该属性的值类型。好了，很简单吧，接下来使用它了，首先在布局文件的根节点中，为自定义属性声明一个命名空间：xmlns:xwdoor="http://schemas.android.com/apk/res-auto", 其中，xwdoor 是自定义部分，这样，系统就可以找到我们的自定义属性文件的位置，然后就可以直接用了，代码如下：

    <!-- 自定义控件 -->    <net.xwdoor.mobilesafe.view.SettingItemView        android:id="@+id/siv_update"        android:layout_width="match_parent"        android:layout_height="wrap_content"        xwdoor:stitle="自动更新设置"        xwdoor:desc_on="自动更新已开启"        xwdoor:desc_off="自动更新已关闭"/>

当然，仅仅是这样，我们是看不到效果的，我们还需要在自定义控件 SettingItemView 中做一些修改才行，代码如下：

/** * Created by XWdoor on 2016/3/1 001 16:19. * 博客：http://blog.csdn.net/xwdoor */public class SettingItemView extends RelativeLayout {    public static final String NAMESPACE_XWDOOR = "http://schemas.android.com/apk/res-auto";    private String mDescOff;    private String mDescOn;    private TextView tvTitle;    private TextView tvDesc;    private CheckBox cbCheck;    public SettingItemView(Context context) {        super(context);        initView();    }    public SettingItemView(Context context, AttributeSet attrs) {        super(context, attrs);        int attrCount = attrs.getAttributeCount();        //获取stitle属性的值        String title = attrs.getAttributeValue(NAMESPACE_XWDOOR, "stitle");        //获取关闭设置时的描述        mDescOn = attrs.getAttributeValue(NAMESPACE_XWDOOR, "desc_on");        //获取开启设置时的描述        mDescOff = attrs.getAttributeValue(NAMESPACE_XWDOOR, "desc_off");        initView();        setTitle(title);        setDesc(mDescOff);    }    public SettingItemView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        initView();    }    /** 设置开启状态 */    public void setChecked(boolean checked){        cbCheck.setChecked(checked);        if(checked){            setDesc(mDescOn);        }else {            setDesc(mDescOff);        }    }}

4 总结

好了，到此，我们的自定义组合控件、自定义属性就完成了，本文主要是关于 UI 设计与实现，没有多大难度，主要是知识点的整合与熟悉，且整个项目基本如此，都是熟悉 Android 开发的特性、熟悉代码风格、掌握知识点。

关于项目相关文章，请访问：

• Android 项目：手机安全卫士（1）—— 闪屏界面
• Android 项目：手机安全卫士（2）—— 版本升级
• Android 项目：手机安全卫士（3）—— 主界面布局

项目源码地址（实时更新）：https://github.com/xwdoor/MobileSafe