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是我从项目中提出来的会有小小的不同但不影响你的学习！