组合控件详解 & 自定义属性
摘录来源：极客学院WiKi
组合控件是自定义控件的一种，只不过它是由其他几个原生控件组合而成，故名组合控件。
在实际项目中，GUI 会遇到一些可以提取出来做成自定义控件情况。
一个自定义控件的好处就是把一些需要模块化的 UI 和逻辑放在一起，做到了高内聚，向其他模块提供接口并很少依赖外界，这样就是低耦合。一个自定义控件就是一个封闭的王国，这里由你掌控。
上述是我自己的一个体会，想必大家也会常做自定义控件吧，就像逻辑部分的模块化一样。
下面我要做一个例子，请看完成图。
ocn.yang
下面一排图片加文字就是组合控件了，我是怎么做的呢？
其实这里用到了两个组合控件，一个是图片+文字，我把它叫一个 Item，而三个在一起就是另一个控件了。
重点看这个 Item，它有自己的属性如图片、文字、图片大小、文字大小、不透明度等等。这些把它定义在 attr 文件中，然后在 xml 文件中配置，就像我们用原生控件一样。
自定义属性
先看 attr 文件。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="LevelMenuItem">
<attr name="text" format="string" />
<attr name="text_color" format="color"/>
<attr name="text_size" format="dimension" />
<attr name="image_src" format="reference"/>
<attr name="image_bg" format="reference"/>
<attr name="image_alpha" format="integer" />
<attr name="image_height" format="dimension"></attr>
<attr name="image_width" format="dimension" />
</declare-styleable>
</resources>
这个文件在 values 下，和 string 文件同级。把你自己要定义的属性都写在这里吧。format 是属性的“单位”，如果你要问有多少中 format 呀？答案在这里。
组合控件的布局文件
有了属性了，下面看看布局文件 level_menu_item.xml。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http:// schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageView
android:id="@+id/image_item"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
/>
<TextView
android:id="@+id/tv_item"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="#23ffffff"
android:textSize="25sp"
/>
</LinearLayout>
这里唯一值得一说的是文本的颜色。大家看见他是8位的，前两位是表示不透明度的，后六位是表示颜色的，三色，范围都是00～ff。
如果在 Java 中设置颜色，需要这样。
setTextColor(0x23ffffff);
关于不透明度，一般美工会定义。有些要求不透明如30%这样的，可以用整型换算一下。00～ff 对应十进制为0～255，那么30%就是255x0.3=76.5，用科学计算机换算为4c。
更多颜色相关设置这里附上《Android 中设置文本颜色的三种办法》
1、 利于系统自带的颜色类
如： TextView1.setTextColor(android.graphics.Color.RED);
布局文件中：android:textColor="@android:color/white"
详见Android源码:base/core/res/res/values/colors.xml
2、 数字颜色表示法
TextView1.setTextColor(0xffff00ff);
3、 自定义颜色
TextView1.setTextColor(this.getResources().getColor(R.drawable.red));
组合控件的类文件
然后我们就要写一个类，我这继承子线性布局。有两个构造函数，我们主要在两个参数的函数中工作。
public class LevelMenuItem extends LinearLayout {
public LevelMenuItem(Context context, AttributeSet attrs) {
super(context, attrs);
}
这个类中我们要完成的工作是，初始化控件属性、提供外部修改属性的接口、控件点击的回调接口。
此类完整代码：
package com.linc.game;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
/**
* 自定义一个关卡
* 共有7个属性，看attr文件
* 在程序中提供修改这7个属性的接口，
* 一个自定义控件的任务就算完成。
* 一个自定义控件的好处就是把一些需要模块化的
* UI和逻辑放在一起，做到了高内聚，向其他模块提供接口并很少
* 依赖外界，这样就是低耦合。一个自定义控件就是一个封闭的王国，
* 这里由你掌控。
*
* 编写时，如果遇到在attr里写好属性，但是在这里认不出来，
* 就clean一下项目。切记。
*
* @author linc
*
*/
public class LevelMenuItem extends LinearLayout {
private TextView mTextView = null;
private ImageView mImageView = null;
public LevelMenuItem(Context context) {
super(context);
}
public LevelMenuItem(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater layoutInflater = (LayoutInflater) context.
getSystemService(Context.LAYOUT_INFLATER_SERVICE);
layoutInflater.inflate(R.layout.level_menu_item, this);
TypedArray typedArray = context.obtainStyledAttributes(attrs
,R.styleable.LevelMenuItem);
initWidget(typedArray);
}
private void initWidget(TypedArray typedArray)
{
mTextView = (TextView)findViewById(R.id.tv_item);
String textString = typedArray.getString(R.styleable.LevelMenuItem_text);
int textColor = typedArray.getColor(R.styleable.LevelMenuItem_text_color,
0xffffffff);
float textSize = typedArray.getDimension(R.styleable.LevelMenuItem_text_size,
20);
mTextView.setText(textString);
mTextView.setTextColor(textColor);
mTextView.setTextSize(textSize);
mImageView = (ImageView)findViewById(R.id.image_item);
int imageHeight = (int) typedArray.getDimension(R.styleable.LevelMenuItem_image_height, 25);
int imageWidth = (int) typedArray.getDimension(R.styleable.LevelMenuItem_image_width, 25);
int imageSrc = typedArray.getResourceId(R.styleable.LevelMenuItem_image_src, 0);
int imageBg = typedArray.getResourceId(R.styleable.LevelMenuItem_image_bg, 0);
int imageAlpha = typedArray.getInt(R.styleable.LevelMenuItem_image_alpha, 255);
mImageView.setAlpha(imageAlpha);
mImageView.setImageResource(imageSrc);
mImageView.setBackgroundResource(imageBg);
LayoutParams layoutParams = new LayoutParams(imageWidth, imageHeight);
mImageView.setLayoutParams(layoutParams);
typedArray.recycle();
}
/**
* 设置此控件的文本
* @param text
*/
public void setText(String text)
{
mTextView.setText(text);
}
/**
* 设置文字颜色
* @param textColor
*/
public void setTextColor(int textColor)
{
mTextView.setTextColor(textColor);
}
/**
* 设置字体大小
* @param textSize
*/
public void setTextSize(int textSize)
{
mTextView.setTextSize(textSize);
}
/**
* 设置图片
* @param resId
*/
public void setImageResource(int resId)
{
mImageView.setImageResource(resId);
}
/**
* 设置图片背景
*/
public void setBackgroundResource(int resId)
{
mImageView.setBackgroundResource(resId);
}
/**
* 设置图片的不透名度
* @param alpha
*/
public void setImageAlpha(int alpha)
{
mImageView.setAlpha(alpha);
}
/**
* 设置图片的大小
* 这里面需要使用LayoutParams这个布局参数来设置
* @param width
* @param height
*/
public void setImageSize(int width,int height)
{
LayoutParams layoutParams = new LayoutParams(width, height);
mImageView.setLayoutParams(layoutParams);
}
/**
* image点击事件的回调
* @param listener
*/
public void setOnClickListener(OnItemClickListener listener)
{
mImageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
listener.onImageClick();
}
});
}
/**
* 点击事件接口
* @author linc
*
*/
public interface OnItemClickListener
{
public void onImageClick();
}
}
组合控件的使用
好，一个完整的组合控件就做好了，那么，我们如何使用呢？
我要在 LevelMenu 中用它。xml 文件如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:linc="http://schemas.android.com/apk/res/com.linc.game"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<com.linc.game.LevelMenuItem
android:id="@+id/item1"
android:layout_width="70dp"
android:layout_height="80dp"
linc:text="@string/item1"
linc:text_size="14sp"
linc:text_color="#80fa8072"
linc:image_src="@drawable/orange_button_selector"
linc:image_alpha="128"
linc:image_height="48dp"
linc:image_width="48dp"
/>
<com.linc.game.LevelMenuItem
android:id="@+id/item2"
android:layout_marginLeft="20dp"
android:layout_width="70dp"
android:layout_height="80dp"
linc:text="@string/item2"
linc:text_size="14sp"
linc:text_color="#ffeee8aa"
linc:image_src="@drawable/red_button_selector"
linc:image_alpha="255"
linc:image_height="48dp"
linc:image_width="48dp"
/>
<com.linc.game.LevelMenuItem
android:id="@+id/item3"
android:layout_marginLeft="20dp"
android:layout_width="70dp"
android:layout_height="80dp"
linc:text="@string/item3"
linc:text_size="14sp"
linc:text_color="#80cd853f" linc:image_src="@drawable/yellow_button_selector"
linc:image_alpha="128"
linc:image_height="48dp"
linc:image_width="48dp"
/>
</LinearLayout>
加入自己包名的索引
xmlns:linc="http://schemas.android.com/apk/res/com.linc.game"
剩下的就一目了然了。
用到组合控件的类文件
LevelMenu.java
package com.linc.game;
import com.linc.game.LevelMenuItem.OnItemClickListener;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.widget.LinearLayout;
public class LevelMenu extends LinearLayout {
private LevelMenuItem item1,item2,item3;
public LevelMenu(Context context) {
super(context);
}
public LevelMenu(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater layoutInflater = (LayoutInflater) context.
getSystemService(Context.LAYOUT_INFLATER_SERVICE);
layoutInflater.inflate(R.layout.level_menu, this);
initWidget();
}
private void initWidget()
{
item1 = (LevelMenuItem)findViewById(R.id.item1);
item2 = (LevelMenuItem)findViewById(R.id.item2);
item3 = (LevelMenuItem)findViewById(R.id.item3);
item1.setOnClickListener(new OnItemClickListener() {
@Override
public void onImageClick() {
Log.e("dfjdkfjd","dfdfd");
}
});
}
}
在处理图片点击事件的时候，我用到了选择器（selector），这是我们实际开发中最常用的小技巧了。它能描述的状态很多，各位看官可以去查查。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true"
android:drawable="@drawable/button_push"/>
<item android:drawable="@drawable/orange_button"/>
</selector>
好，组合控件的例子先到这里，实际功能在下一个实战技巧中演练。
大家在做自定义控件时需要注意的是：
1、自定义控件类不能是是抽象类
2、要用 (Context context, AttributeSet attrs) 这个构造函数。
否则报错：android.view.InflateException: Binary XML file line #15: Error inflating cla。。。
最后普及一下，attrs.xml中的属性的format（类型）说明
1. reference：参考某一资源ID。
（1）属性定义：
<declare-styleable name = "名称">
<attr name = "background" format = "reference" />
</declare-styleable>
（2）属性使用：
<ImageView
android:layout_width = "42dip"
android:layout_height = "42dip"
android:background = "@drawable/图片ID"
/>
2. color：颜色值。
（1）属性定义：
<declare-styleable name = "名称">
<attr name = "textColor" format = "color" />
</declare-styleable>
（2）属性使用：
<TextView
android:layout_width = "42dip"
android:layout_height = "42dip"
android:textColor = "#00FF00"
/>
3. boolean：布尔值。
（1）属性定义：
<declare-styleable name = "名称">
<attr name = "focusable" format = "boolean" />
</declare-styleable>
（2）属性使用：
<Button
android:layout_width = "42dip"
android:layout_height = "42dip"
android:focusable = "true"
/>
4. dimension：尺寸值。
（1）属性定义：
<declare-styleable name = "名称">
<attr name = "layout_width" format = "dimension" />
</declare-styleable>
（2）属性使用：
<Button
android:layout_width = "42dip"
android:layout_height = "42dip"
/>
5. float：浮点值。
（1）属性定义：
<declare-styleable name = "AlphaAnimation">
<attr name = "fromAlpha" format = "float" />
<attr name = "toAlpha" format = "float" />
</declare-styleable>
（2）属性使用：
<alpha
android:fromAlpha = "1.0"
android:toAlpha = "0.7"
/>
6. integer：整型值。
（1）属性定义：
<declare-styleable name = "AnimatedRotateDrawable">
<attr name = "visible" />
<attr name = "frameDuration" format="integer" />
<attr name = "framesCount" format="integer" />
<attr name = "pivotX" />
<attr name = "pivotY" />
<attr name = "drawable" />
</declare-styleable>
（2）属性使用：
<animated-rotate
xmlns:android = "http://schemas.android.com/apk/res/android"
android:drawable = "@drawable/图片ID"
android:pivotX = "50%"
android:pivotY = "50%"
android:framesCount = "12"
android:frameDuration = "100"
/>
7. string：字符串。
（1）属性定义：
<declare-styleable name = "MapView">
<attr name = "apiKey" format = "string" />
</declare-styleable>
（2）属性使用：
<com.google.android.maps.MapView
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
android:apiKey = "0jOkQ80oD1JL9C6HAja99uGXCRiS2CGjKO_bc_g"
/>
8. fraction：百分数。
（1）属性定义：
<declare-styleable name="RotateDrawable">
<attr name = "visible" />
<attr name = "fromDegrees" format = "float" />
<attr name = "toDegrees" format = "float" />
<attr name = "pivotX" format = "fraction" />
<attr name = "pivotY" format = "fraction" />
<attr name = "drawable" />
</declare-styleable>
（2）属性使用：
<rotate
xmlns:android = "http://schemas.android.com/apk/res/android"
android:interpolator = "@anim/动画ID"
android:fromDegrees = "0"
android:toDegrees = "360"
android:pivotX = "200%"
android:pivotY = "300%"
android:duration = "5000"
android:repeatMode = "restart"
android:repeatCount = "infinite"
/>
9. enum：枚举值。
（1）属性定义：
<declare-styleable name="名称">
<attr name="orientation">
<enum name="horizontal" value="0" />
<enum name="vertical" value="1" />
</attr>
</declare-styleable>
（2）属性使用：
<LinearLayout
xmlns:android = "http://schemas.android.com/apk/res/android"
android:orientation = "vertical"
android:layout_width = "fill_parent"
android:layout_height = "fill_parent"
>
</LinearLayout>
10. flag：位或运算。
（1）属性定义：
<declare-styleable name="名称">
<attr name="windowSoftInputMode">
<flag name = "stateUnspecified" value = "0" />
<flag name = "stateUnchanged" value = "1" />
<flag name = "stateHidden" value = "2" />
<flag name = "stateAlwaysHidden" value = "3" />
<flag name = "stateVisible" value = "4" />
<flag name = "stateAlwaysVisible" value = "5" />
<flag name = "adjustUnspecified" value = "0x00" />
<flag name = "adjustResize" value = "0x10" />
<flag name = "adjustPan" value = "0x20" />
<flag name = "adjustNothing" value = "0x30" />
</attr>
</declare-styleable>
（2）属性使用：
<activity
android:name = ".StyleAndThemeActivity"
android:label = "@string/app_name"
android:windowSoftInputMode = "stateUnspecified | stateUnchanged | stateHidden">
<intent-filter>
<action android:name = "android.intent.action.MAIN" />
<category android:name = "android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
特别要注意：
属性定义时可以指定多种类型值。
（1）属性定义：
<declare-styleable name = "名称">
<attr name = "background" format = "reference|color" />
</declare-styleable>
（2）属性使用：
<ImageView
android:layout_width = "42dip"
android:layout_height = "42dip"
android:background = "@drawable/图片ID|#00FF00"
/>
