菜鸟笔记的第一天，自定义View(组合控件)

~~~~新的一年已经开始，每个人都做好了自己的人生规划，开启了新的航程。回过头来，我发现做程序员已经有四五年的光景了，可是扪心自问，我并没有从菜鸟进化成大牛。所以趁我还年轻，我决定改变我现在的生活状态，我希望能像鸿神所说的那样，通过写文章来让自己变得很厉害。
大家有没有发现，很多技术点我们用起来很6，但是却总是遇到奇奇怪怪的bug或者问题，在面试的时候如果面试官让你去讲，很有可能讲两三分钟就讲完了，而且答的并不理想。最根本的原因就是，我们并没有完全get这个点。如果你再去研究，肯定会有意想不到的收获。
扯淡扯了这么久，下面开始进入正题。

Android自定义View主要包括3种实现方式：组合控件、绘制控件、继承控件。
那今天我呢就主要来聊一下组合控件吧~

第一步，当然是画布局页面了

<?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:paddingLeft="@dimen/ds_30"
    android:paddingRight="@dimen/ds_30"
    android:layout_marginBottom="@dimen/ds_3"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:background="#fff">

    <ImageView
        android:id="@+id/mine_item_img"
        android:layout_width="@dimen/ds_81"
        android:layout_height="@dimen/ds_81"
        android:background="@mipmap/ic_launcher"
        android:layout_centerVertical="true" />

    <TextView
        android:id="@+id/mine_item_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_centerVertical="true"
        android:layout_marginLeft="@dimen/ds_30"
        android:layout_toRightOf="@+id/mine_item_img"
        android:text="标题"
        android:textColor="#333"
        android:textSize="@dimen/fs_45" />
    <TextView
        android:id="@+id/mine_item_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="@dimen/ds_30"
        android:layout_toRightOf="@+id/mine_item_img"
        android:text="1"
        android:textColor="#999"
        android:textSize="@dimen/fs_42" />

    <ImageView
        android:id="@+id/mine_item_next"
        android:layout_width="@dimen/ds_42"
        android:layout_height="@dimen/ds_42"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:background="@mipmap/icon_more" />

</LinearLayout>

四个元素横向排布，分别是菜单图标、标题、标签、进入图标，这个不多说

第二步，values目录下创建一个属性文件attrs.xml，并创建标签添加自定义属性，这里我自定义了菜单图标、标题和数量，当然我们还可以自定义字号、颜色等等：

    <declare-styleable name="MineItemView">
        <attr name="leftImg" format="reference"/>
        <attr name="title" format="string"/>
        <attr name="count" format="string"/>
    </declare-styleable>

第三步，创建一个类 MineItemView.class，继承该布局的父布局类型，从自定义的属性文件中取值并给控件赋值：

public class MineItemView extends LinearLayout {

    private TextView countView;
    //构造方法
    public MineItemView(Context context) {
        super(context);
    }

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

    public MineItemView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);
    }
    //初始化View
    private void initView(Context context, AttributeSet attrs) {
        LayoutInflater inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.widget_mine_item, this, true);
        ImageView leftImg = (ImageView) view.findViewById(R.id.mine_item_img);
        TextView titleView = (TextView) view.findViewById(R.id.mine_item_title);
        countView = (TextView) view.findViewById(R.id.mine_item_count);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MineItemView);
        Drawable leftDrawable = typedArray.getDrawable(R.styleable.MineItemView_leftImg);
        String title = typedArray.getString(R.styleable.MineItemView_title);
        String count = typedArray.getString(R.styleable.MineItemView_count);
        typedArray.recycle();
        if(leftDrawable == null){
            leftDrawable = ContextCompat.getDrawable(context, R.mipmap.ic_launcher);
        }
        leftImg.setBackground(leftDrawable);
        if(TextUtils.isEmpty(title)){
            title = "";
        }
        titleView.setText(title);
        if(TextUtils.isEmpty(count)){
            count = "";
        }
        countView.setText(count);
    }

第四步，在我们的主页面布局中引入自定义属性，添加自定义控件并给自定义的属性赋值：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout          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:orientation="vertical"
    <com.bryan.app.MineItemView
        android:layout_width="match_parent"
        android:layout_height="@dimen/ds_144"
        app:leftImg="@mipmap/ic_launcher"
        app:count="8"
        app:title="我的消息" />
<LinearLayout />

注意：xmlns:app=”http://schemas.android.com/apk/res-auto” 中的“app”可以随意命名,只需要控件中的与之对应即可。代码敲到这里，我们先喝杯咖啡，看看运行效果：

运行效果

很轻松愉快的我们就完成了一个实用的自定义View，当然我们可以用同样的方式做一些更复杂的View，今天就到这里吧~

*初来乍到，一心向学，如有问题，烦请指正。*

菜鸟笔记的第一天，自定义View(组合控件)

猜你喜欢