android 组合控件

有时候项目中常常需要用到一些一样的控件，那些控件形状一样，但是具体内容却不一样，如下图：



如果每次都把要用到的控件在布局中一个一个的用代码写出来，会显得非常麻烦，这时就要用到组合控件了。组合控件是指把系统的几个已有控件组合为一个适合自己的可用的控件。

要定义自己的组合控件非常简单，首先定义控件应有的属性，在res/values下新建attrs.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Menu">
<attr name="text" format="string"></attr>
<attr name="textSize" format="dimension"></attr>
<attr name="textColor" format="color"></attr>
<attr name="picture_height" format="dimension"></attr>
<attr name="picture_width" format="dimension"></attr>
<attr name="picture_src" format="reference"></attr>
</declare-styleable>
</resources>

attr 标签定义了该组合控件的属性，name为属性名 format为属性值，string表示这个值是string类型，dimension表示尺寸，color表示颜色,reference表示关联。还有其他值可以查阅文档

然后定义组合控件的布局view_menu.xml，里面定义你想组合的控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv_menu_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<ImageView
android:id="@+id/iv_menu_picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

然后定义组合控件的类MenuView继承LinearLayout。这里继承LinearLayout是因为布局中根布局用的是LinearLayout，如果布局中根布局是RelativeLayout则要继承RelativeLayout，其他布局同理。

作者：mhwang
* 创建时间：2015/12/16
*/
public class MenuView extends LinearLayout{
/*菜单项文本*/
private TextView tvText = null;
/*菜单项图片*/
private ImageView ivPitcture = null;

public MenuView(Context context) {
super(context);
/*获得布局的inflater*/
LayoutInflater inflater = (LayoutInflater)context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

/*将自定义布局加入当前布局*/
inflater.inflate(R.layout.view_menu, this);

/*初始化控件*/
initComponent();
}

public MenuView(Context context, AttributeSet attrs) {
super(context, attrs);
/*获得布局的inflater*/
LayoutInflater inflater = (LayoutInflater)context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

/*将自定义布局加入当前布局*/
inflater.inflate(R.layout.view_menu,this);

/*初始化控件*/
initComponent();

/*获取布局设置的属性集*/
TypedArray typedArray = context.obtainStyledAttributes(attrs,
R.styleable.Menu);

/*根据获得的属性集设置自定义控件*/
initWidgt(typedArray);
}

/**
* 初始化控件
*/
private void initComponent() {
tvText = (TextView)findViewById(R.id.tv_menu_text);
ivPitcture = (ImageView)findViewById(R.id.iv_menu_picture);
}

/**初始化控件属性
* @param typedArray    属性集,里面包含在xml中设置的控件属性
*/
private void initWidgt(TypedArray typedArray) {
/*获取xml中设置的text属性*/
String text = typedArray.getString(R.styleable.Menu_text);
int textSize = (int)typedArray.getDimension(
R.styleable.Menu_textSize,15);
int textColor = (int)typedArray.getColor(
R.styleable.Menu_textColor,0xffffff);

/*设置文本*/
tvText.setText(text);
tvText.setTextSize(textSize);
tvText.setTextColor(textColor);

/*获取xml中设置的图片属性*/
int pictureHeight = (int)typedArray.getDimension(
R.styleable.Menu_picture_height,20);
int pictureWidth = (int)typedArray.getDimension(
R.styleable.Menu_picture_width,20);
int pictureSrc = (int)typedArray.getResourceId(
R.styleable.Menu_picture_src,0);

/*设置图片属性*/
ivPitcture.setLayoutParams(new LayoutParams(pictureWidth,pictureHeight));
ivPitcture.setImageResource(pictureSrc);

/*记得释放typedArray对象*/
typedArray.recycle();
}

/**设置菜单文本内容
* @param text  要设置的文本
*/
public void setMenuText(String text){
if(text != null) {
tvText.setText(text);
}
}

/**取得菜单文本
* @return  菜单文本字符串
*/
public String getMenuText(){
return tvText.getText().toString();
}

/**设置菜单文本字体大小
* @param size  字体大小
*/
public void setMenuTextSize(int size){
tvText.setTextSize(size);
}

/**获取菜单文本字体大小
* @return  字体大小
*/
public float getMenuTextSize(){
return tvText.getTextSize();
}

/**设置菜单文本颜色
* @param color 颜色
*/
public void setMenuTextColor(int color){
tvText.setTextColor(color);
}

/**获取菜单文本颜色
* @return
*/
public int getMenuTextColor(){
return tvText.getCurrentTextColor();
}

/**设置图片宽度和高度大小
* @param width 宽度大小
* @param height    高度大小
*/
public void setPictureParams(int width,int height){
ivPitcture.setLayoutParams(new LayoutParams(width,height));
}

/**获得图片宽度
* @return  图片宽度整形值
*/
public int getPictureWidth(){
return ivPitcture.getWidth();
}

/**获取图片高度
* @return  图片高度整形值
*/
public int getPictureHeight(){
return ivPitcture.getHeight();
}

/**设置菜单图片
* @param srcId 图片的id
*/
public void setPictureSrc(int srcId){
ivPitcture.setImageResource(srcId);
}

后面的设置和获取组合控件中子控件内容是为了方便在代码中动态设置组合控件属性而提供的接口，如果不用可以删掉。

最后在需要用到该组合控件的地方引用就可以了。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
***xmlns:mhwang="http://schemas.android.com/apk/res-auto"***
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:orientation="horizontal"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".SelfViewActivity">

<com.mhwang.view.MenuView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="@drawable/menu_border"
mhwang:text="@string/picture"
mhwang:textSize="@dimen/text_size_normal"
mhwang:textColor="#111111"
mhwang:picture_height="60dp"
mhwang:picture_width="60dp"
mhwang:picture_src="@drawable/mh_picture">
</com.mhwang.view.MenuView>

<com.mhwang.view.MenuView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="@drawable/menu_border"
mhwang:text="@string/picture_one"
mhwang:textSize="@dimen/text_size_normal"
mhwang:textColor="#111111"
mhwang:picture_height="60dp"
mhwang:picture_width="60dp"
mhwang:picture_src="@drawable/mh_picture">
</com.mhwang.view.MenuView>

<com.mhwang.view.MenuView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:background="@drawable/menu_border"
mhwang:text="@string/picture_two"
mhwang:textSize="@dimen/text_size_normal"
mhwang:textColor="#111111"
mhwang:picture_height="60dp"
mhwang:picture_width="60dp"
mhwang:picture_src="@drawable/mh_picture">
</com.mhwang.view.MenuView>

</LinearLayout>

这里加粗斜体的字是自己加上去的，用于下面引用自定义属性。要注意的是，在android studio中引号中的内容是”http://schemas.android.com/apk/res-auto“，而在eclipse中该内容应为”http://schemas.android.com/apk/res/“+包名; 如 “http://schemas.android.com/apk/res/com.mhwang.selfview“，该包名需要与应用mainifest.xml中的包名相同，不然会报错。

源码下载地址：https://github.com/wmh1104520881/SelfView