android 自定义组合控件[有Demo]

我们在开发中，往往会遇到一些相同的布局，要是用Ctrl+C,然后再Ctrl+V.进行复制布局，然后修改一个控件的id,那就太Low啦！

今天我们来用用android的自定义组合控件，里面会用到自定义属性【详细了解】！

先上效果图看看

第一步在values/attrs.xml

format不明白的可以点击这里【Android自定义属性,attr format取值类型】

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="infoFragment_item">
        <attr name="titleInfo" format="string"></attr>
        <attr name="title_color" format="color"></attr>
        <attr name="bottom_text" format="string"></attr>
        <attr name="bottom_text_color" format="color"></attr>
        <attr name="leftBackground" format="reference|color"></attr>
        <attr name="rightText" format="string"></attr>
        <attr name="rightText_color" format="color"></attr>
    </declare-styleable>
</resources>

第二步写控件的xml(item_info.xml)

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

    <RelativeLayout
        android:id="@+id/rl_Memo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/dp_10"
        android:layout_marginRight="@dimen/dp_10"
        android:layout_marginTop="@dimen/dp_10">

        <ImageView
            android:id="@+id/iv_MemoIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tabbar_compose_camera" />

        <TextView
            android:id="@+id/tv_MemoTitle"
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:layout_marginLeft="@dimen/dp_10"
            android:layout_marginTop="@dimen/dp_10"
            android:layout_toRightOf="@+id/iv_MemoIcon"
            android:text="备忘"
            android:textSize="@dimen/medium_text" />

        <TextView
            android:id="@+id/tv_desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/iv_MemoIcon"
            android:layout_alignLeft="@+id/tv_MemoTitle"
            android:layout_below="@+id/tv_MemoTitle"
            android:text="电话联系,沟通空调维修问题"
            android:singleLine="true"
            android:textSize="@dimen/small_text" />

        <TextView
            android:id="@+id/tv_MemoTime"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dp_10"
            android:layout_alignParentRight="true"
            android:text="11:30" />

    </RelativeLayout>

    <TextView
        android:id="@+id/xian_02"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@id/rl_Memo"
        android:layout_marginTop="@dimen/dp_10"
        android:background="@color/bg_blackgray"
        />

</RelativeLayout>

第三步：代码实现一个继承RelativeLayout的java文件（）

package com.abc.oa.widgets;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.abc.oa.R;

/**
 * Created by jason on 2016/4/20.
 * Copyright (c) 2015
 */
public class InfoFragmentItem extends RelativeLayout {

    private Context context;
    private String titleInfo;
    private String bottom_text;
    private String rightText;
    private ImageView iv_memoIcon;
    private TextView tv_memoTitle;
    private TextView tv_desc;
    private TextView tv_memoTime;
    private Drawable left_background;

    public InfoFragmentItem(Context context) {
        super(context,null);
    }

    public InfoFragmentItem(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context=context;

        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.infoFragment_item);
        titleInfo = typedArray.getString(R.styleable.infoFragment_item_titleInfo);
        bottom_text = typedArray.getString(R.styleable.infoFragment_item_bottom_text);
        rightText = typedArray.getString(R.styleable.infoFragment_item_rightText);

        int title_color = typedArray.getColor(R.styleable.infoFragment_item_title_color, 0);
        int bottom_text_color = typedArray.getColor(R.styleable.infoFragment_item_bottom_text_color, 0);
        int right_text_color = typedArray.getColor(R.styleable.infoFragment_item_rightText_color, 0);

        left_background = typedArray.getDrawable(R.styleable.infoFragment_item_leftBackground);

        View infoView = inflate(context, R.layout.item_info, this);
        iv_memoIcon = (ImageView) infoView.findViewById(R.id.iv_MemoIcon);
        tv_memoTitle = (TextView) infoView.findViewById(R.id.tv_MemoTitle);
        tv_desc = (TextView)infoView.findViewById(R.id.tv_desc);
        tv_memoTime = (TextView) infoView.findViewById(R.id.tv_MemoTime);

        tv_memoTitle.setText(titleInfo);
        tv_desc.setText(bottom_text);
        tv_memoTime.setText(rightText);
        if(left_background !=null){
            iv_memoIcon.setBackgroundDrawable(left_background);
        }


        infoView.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (infoViewOnClick != null) {
                    infoViewOnClick.infoViewOnClickListener(v);
                }
            }
        });
        typedArray.recycle();
        
        // addView(infoView);
    }

    public void setTitleInfo(String titleInfo){
        this.titleInfo=titleInfo;
        tv_memoTitle.setText(titleInfo);
    }

    public void setBottom_text(String bottom_text){
        this.bottom_text=bottom_text;
        tv_desc.setText(bottom_text);
    }

    public void setRightText(String rightText){
        this.rightText=rightText;
        tv_memoTime.setText(rightText);
    }

    public void setIv_memoIcon(Drawable left_background){
        this.left_background=left_background;
        iv_memoIcon.setBackgroundDrawable(left_background);
    }

    public interface InfoViewOnClickListener{
        void infoViewOnClickListener(View v);
    }

    private InfoViewOnClickListener infoViewOnClick;

    public void setInfoViewOnClickListener(InfoViewOnClickListener infoViewOnClick){
        this.infoViewOnClick=infoViewOnClick;
    }

}

第四步就是主xml的界面中去应用

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

    <com.abc.oa.widgets.InfoFragmentItem
        android:id="@+id/Memo"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/title_bar"
        infofragment:leftBackground="@drawable/tabbar_compose_idea"/>

    <com.abc.oa.widgets.InfoFragmentItem
        android:id="@+id/Task"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/Memo"
        infofragment:titleInfo="@string/StrTask"
        infofragment:bottom_text="请及时修复您的1bug"
        infofragment:leftBackground="@drawable/tabbar_compose_camera"
        infofragment:rightText="11:30"/>

    <com.abc.oa.widgets.InfoFragmentItem
        android:id="@+id/Schedule"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/Task"
        infofragment:titleInfo="@string/StrSchedule"
        infofragment:bottom_text="周五要和领导进行项目的沟通"
        infofragment:leftBackground="@drawable/tabbar_compose_lbs"
        infofragment:rightText="14:45"/>

</RelativeLayout>

第五步就是在Activity or Fragment 去引用布局，这个代码就不贴出来啦，不明白可以下载的demo

疑问求解答：InfoFragmentItem.java代码中,获取布局有两种方式

1.
View infoView = inflate(context, R.layout.item_info, null);
//最后要写addView(infoView)
2.
View infoView = inflate(context, R.layout.item_info, this);
//它两的本质都一样，有点区别是，写点击事件的接口回调时，方式一，实现自定义的点击事件接口不好用。方式二是没有问题的。
//Demo中用的是第二种方式，第一种给注释啦！

Demo下载 :demo是我从项目中提出来的会有小小的不同但不影响你的学习！