3、自定义view初体验：设置列表页展示（组合控件）

转载请注明出处：http://blog.csdn.net/q649381130/article/details/51433534

漆可的博客

1、 前言

当我们拿到设计图，看到有多个布局比较类似的地方如下图中的微信设置列表页，每一个列表都相类似，我们就可以考虑采用组合控件自定义view来展示，这样做的好处是，可以简化布局，便于统一管理，后期维护修改更加方便简单。

组合控件是自定义view中入门功夫，也是一项常用的基本技能。使用也非常简单，只要自己理解需求做好封装及扩展性就好。

2、布局展示

先分析下我们的自定义view，他包含一个ico图标，一个文本标题，另外还有新消息提示的小红点。布局很简单，代码也一目了然。

自定义view布局文件view_set_home_line.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="44dp"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/tv_title_set_home_line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:drawableLeft="@drawable/set_line_album"
        android:drawablePadding="10dp"
        android:gravity="center_vertical"
        android:text="收藏"
        android:textSize="16sp" />

    <View
        android:id="@+id/v_dot_set_home_line"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_marginLeft="12dp"
        android:layout_marginBottom="4dp"
        android:layout_gravity="center_vertical"
        android:background="@drawable/dot_hit_shap" />

</LinearLayout>

3、自定义属性

自定义属性是自定义view的很重要的一部分。
我们在res/values 目录下新建attr文件。在这里我们需要定义三个属性：

• 标题：titile
• 图标：ico
• 是否显示提示点：dot_visiable

相关代码如下：

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

    <!-- 设置主页行view -->
    <declare-styleable name="SetHomeLineView">
        <attr name="title" format="string" />
        <attr name="ico" format="reference" />
        <attr name="dot_visiable" format="boolean" />
    </declare-styleable>

</resources>

解释下上面的代码：
<declare-styleable name="SetHomeLineView">表示什么的属性名叫SetHomeLineView,同时，在R文件的styleable内部类中会自动生成一个叫“SetHomeLineView”的int数组，数组元素就是下面attr中属性名在R文件中的常量值（每一个自定义属性在styleable中都有一个对应的常量值）。

另外在“attr”中，那么字段表示改属性吗，format表示属性的类型，有以下八大类型：

format	含义
reference	引用
color	颜色
boolean	布尔值
dimension	尺寸值
float	浮点值
integer	整型值
string	字符串
enum	枚举值

4、自定义View

我们自定义继承自FrameLayout的Viewgroup，在初始化的时候调用代码
View.inflate(getContext(), R.layout.view_set_home_line, this)
将写好的布局文件加载到本view中。这样就将布局文件与我们的自定义view结合在一起了。

在构造方法SetHomeLineView(Context context, AttributeSet attrs, int defStyle)中，参数AttributeSet attrs已经将布局文件中的自定义属性保存在集合中了，我们通过代码直接取出来就行：

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.SetHomeLineView);

这样ta中就包含了所有的属性，我们再通过对应的get代码就可以获取到指定属性在布局文件中设置的值，获取完值后记得调用 ta.recycle()。

ta.getString(R.styleable.SetHomeLineView_title);

将获取的值再通过java代码设置给对应的控件即可，完整代码如下：

public class SetHomeLineView extends FrameLayout {
    private View mRootView;

    private TextView tv_title;// 标题
    private View v_dot;// 用于提示的小红点

    private String mTitle;// 标题
    private Drawable mIco;// 图标
    private boolean mIsDotShow = false;// 小红点是否显示

    public SetHomeLineView(Context context, AttributeSet attrs)
    {
        this(context, attrs, 0);
    }

    public SetHomeLineView(Context context)
    {
        this(context, null);
    }

    public SetHomeLineView(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);

        init();

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.SetHomeLineView);

        mTitle = ta.getString(R.styleable.SetHomeLineView_title);
        mIco = ta.getDrawable(R.styleable.SetHomeLineView_ico);
        mIsDotShow = ta.getBoolean(R.styleable.SetHomeLineView_dot_visiable, mIsDotShow);

        ta.recycle();

        // 设置标题
        tv_title.setText(mTitle);

        // 设置图标
        if (mIco != null)
        {
            mIco.setBounds(0, 0, mIco.getMinimumWidth(), mIco.getMinimumWidth());
            tv_title.setCompoundDrawables(mIco, null, null, null);
        }

        // 设置小红点显示
        v_dot.setVisibility(mIsDotShow ? View.VISIBLE : View.GONE);
    }

    private void init()
    {
        // 将布局文件加载到当前view中
        mRootView = View.inflate(getContext(), R.layout.view_set_home_line, this);

        tv_title = (TextView) mRootView.findViewById(R.id.tv_title_set_home_line);
        v_dot = mRootView.findViewById(R.id.v_dot_set_home_line);
    }

    /** * 设置标题 * @author 漆可 * @date 2016-5-18 下午8:24:20 * @param title */
    public void setTitle(String title)
    {
        tv_title.setText(title);
    }
}

5、使用

首先在需要使用自定义属性的布局文件中申明我们自定义的命名空间，申明语句以下俩种都可以

xmlns:app=”http://schemas.android.com/apk/res-auto”
xmlns:app1=”http://schemas.android.com/apk/res/com.qike.fragmentpractice”>

以下是自定义属性的使用
`
<com.qike.fragmentpractice.widget.SetHomeLineView
android:id="@+id/fl_sysset_setting_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
app:ico="@drawable/set_line_set"
app:title="设置" />


最后奉上完整代码下载地址
敬请期待我的下一篇博客，fragment的封装技巧