自定义组合View

这里记录一下自定义组合控件的创建。本文主要创建类似于大多App都有的个人主页的子项，具体样式如图：

主要分为四个部分：左部的图标及文字，右部的图标，以及底部的划线。

一般自定义组合View分为三步：

• 新建一个attrs.xml属性文件，自定义控件的属性（）
• 新建一个xml布局文件，要显示的组合控件的布局
• 新建一个类，继承FrameLayout,LinearLayout或者RelativeLayout,在类中初始化布局，获取自定义属性的值，并设置给布局中的子控件
• 之后在布局中引用该自定义View就好

---

第一步：根据样式定义需要的属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MeItemView">
        <attr name="leftText" format="string|reference"/>
        <attr name="leftIcon" format="integer|reference"/>
        <attr name="rightIcon" format="integer|reference"/>
        <attr name="textSize" format="float|reference"/>
        <attr name="textColor" format="color|reference"/>
        <attr name="isShowUnderLine" format="boolean"/>
    </declare-styleable>
</resources>

这里定义左部和右部的图标，文字的大小，颜色，该有下划线是否显示。

---

第二步，创建布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rootView"
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <ImageView
        android:id="@+id/left_icon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="8dp"
        />

    <TextView
        android:id="@+id/left_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="8dp"
        android:layout_toRightOf="@+id/left_icon"
        android:text="123456"/>

    <ImageView
        android:id="@+id/right_icon"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="8dp"/>

    <View
        android:id="@+id/underline"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:background="#000000"/>
</RelativeLayout>

布局就不多说了。

---

接下来就是定义自定义的组合View：
新建一个类继承继承FrameLayout,LinearLayout或者RelativeLayout。这是是继承RelativeLayout。

public class MeItemView extends RelativeLayout{

    private RelativeLayout mRooView;
    private ImageView mLeft_icon;
    private TextView mLeft_text;
    private ImageView mRight_icon;
    private View mLine;
    private OnItemClick mOnItemClick;

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

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

    public MeItemView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context);
        getCustomStyle(context, attrs);
        mRooView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mOnItemClick!=null){
                    mOnItemClick.onClick();
                }
            }
        });
    }

    private void initView(Context context) {
        LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view= layoutInflater.inflate(R.layout.item, this);
        mRooView = view.findViewById(R.id.rootView);
        mLeft_icon = view.findViewById(R.id.left_icon);
        mLeft_text = view.findViewById(R.id.left_text);
        mRight_icon = view.findViewById(R.id.right_icon);
        mLine = view.findViewById(R.id.underline);
    }

    private void getCustomStyle(Context context, AttributeSet attrs) {
        TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.MeItemView);
        int num=typedArray.getIndexCount();
        for (int i=0;i<num;i++){
            int arr=typedArray.getIndex(i);
            if (arr==R.styleable.MeItemView_leftIcon){
                Drawable leftIcon=typedArray.getDrawable(arr);
                mLeft_icon.setImageDrawable(leftIcon);
            }if (arr==R.styleable.MeItemView_leftText){
                String left_text=typedArray.getString(arr);
                mLeft_text.setText(left_text);
            }
            if (arr==R.styleable.MeItemView_rightIcon){
                Drawable rightIcon=typedArray.getDrawable(arr);
                mRight_icon.setImageDrawable(rightIcon);
            }
            if (arr==R.styleable.MeItemView_isShowUnderLine){
                boolean isshow=typedArray.getBoolean(arr,true);
                if (!isshow){
                    mLine.setVisibility(View.GONE);
                }

            }

        }
        typedArray.recycle();
    }

    public  interface OnItemClick{
        void onClick();
    }

    public void setOnItemClick(OnItemClick onItemClick){
        this.mOnItemClick= onItemClick;
    }

}

在构造方法中完成对布局的初始化，获取到相应的控件。然后得到属性集对象，具体代码是：

TypedArray typedArray=context.obtainStyledAttributes(attrs,R.styleable.MeItemView);

然后再从属性集中获取相应的属性，并设置给对应的控件。

---

最后就是在布局中引用该View啦。

<com.coderzj.combinedview.view.MeItemView
        android:id="@+id/me_one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:leftIcon="@drawable/my_icon_about_normal"
        app:leftText="@string/app_name"
        app:rightIcon="@drawable/my_icon_author_normal"
        app:isShowUnderLine="true"/>

记得命名空间：

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