組合控件是自定義控件的一種，只不過(guò)它是由其他幾個(gè)原生控件組合而成，故名組合控件。
在實(shí)際項(xiàng)目中，GUI 會(huì)遇到一些可以提取出來(lái)做成自定義控件情況。
一個(gè)自定義控件的好處就是把一些需要模塊化的 UI 和邏輯放在一起，做到了高內(nèi)聚，向其他模塊提供接口并很少依賴外界，這樣就是低耦合。一個(gè)自定義控件就是一個(gè)封閉的王國(guó)，這里由你掌控。
上述是我自己的一個(gè)體會(huì)，想必大家也會(huì)常做自定義控件吧，就像邏輯部分的模塊化一樣。
下面我要做一個(gè)例子，請(qǐng)看完成圖。
http://wiki.jikexueyuan.com/project/android-actual-combat-skills/images/2-1.png" alt="fig.1" />
下面一排圖片加文字就是組合控件了，我是怎么做的呢？
其實(shí)這里用到了兩個(gè)組合控件，一個(gè)是圖片+文字，我把它叫一個(gè) Item，而三個(gè)在一起就是另一個(gè)控件了。
重點(diǎn)看這個(gè) 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> 這個(gè)文件在 values 下，和 string 文件同級(jí)。把你自己要定義的屬性都寫(xiě)在這里吧。format 是屬性的“單位”，如果你要問(wèn)有多少中 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> 這里唯一值得一說(shuō)的是文本的顏色。大家看見(jiàn)他是8位的，前兩位是表示不透明度的，后六位是表示顏色的，三色，范圍都是00～ff。
如果在 Java 中設(shè)置顏色，需要這樣。
setTextColor(0x23ffffff); 關(guān)于不透明度，一般美工會(huì)定義。有些要求不透明如30%這樣的，可以用整型換算一下。00～ff 對(duì)應(yīng)十進(jìn)制為0～255，那么30%就是255x0.3=76.5，用科學(xué)計(jì)算機(jī)換算為4c。
更多顏色相關(guān)請(qǐng)看《Android 中設(shè)置文本顏色的三種辦法》
然后我們就要寫(xiě)一個(gè)類(lèi)，我這繼承子線性布局。有兩個(gè)構(gòu)造函數(shù)，我們主要在兩個(gè)參數(shù)的函數(shù)中工作。
public class LevelMenuItem extends LinearLayout {
public LevelMenuItem(Context context, AttributeSet attrs) {
super(context, attrs);
} 這個(gè)類(lèi)中我們要完成的工作是，初始化控件屬性、提供外部修改屬性的接口、控件點(diǎn)擊的回調(diào)接口。
此類(lèi)完整代碼：
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;
/**
* 自定義一個(gè)關(guān)卡
* 共有7個(gè)屬性，看attr文件
* 在程序中提供修改這7個(gè)屬性的接口，
* 一個(gè)自定義控件的任務(wù)就算完成。
* 一個(gè)自定義控件的好處就是把一些需要模塊化的
* UI和邏輯放在一起，做到了高內(nèi)聚，向其他模塊提供接口并很少
* 依賴外界，這樣就是低耦合。一個(gè)自定義控件就是一個(gè)封閉的王國(guó)，
* 這里由你掌控。
*
* 編寫(xiě)時(shí)，如果遇到在attr里寫(xiě)好屬性，但是在這里認(rèn)不出來(lái)，
* 就clean一下項(xiàng)目。切記。
*
* @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();
}
/**
* 設(shè)置此控件的文本
* @param text
*/
public void setText(String text)
{
mTextView.setText(text);
}
/**
* 設(shè)置文字顏色
* @param textColor
*/
public void setTextColor(int textColor)
{
mTextView.setTextColor(textColor);
}
/**
* 設(shè)置字體大小
* @param textSize
*/
public void setTextSize(int textSize)
{
mTextView.setTextSize(textSize);
}
/**
* 設(shè)置圖片
* @param resId
*/
public void setImageResource(int resId)
{
mImageView.setImageResource(resId);
}
/**
* 設(shè)置圖片背景
*/
public void setBackgroundResource(int resId)
{
mImageView.setBackgroundResource(resId);
}
/**
* 設(shè)置圖片的不透名度
* @param alpha
*/
public void setImageAlpha(int alpha)
{
mImageView.setAlpha(alpha);
}
/**
* 設(shè)置圖片的大小
* 這里面需要使用LayoutParams這個(gè)布局參數(shù)來(lái)設(shè)置
* @param width
* @param height
*/
public void setImageSize(int width,int height)
{
LayoutParams layoutParams = new LayoutParams(width, height);
mImageView.setLayoutParams(layoutParams);
}
/**
* image點(diǎn)擊事件的回調(diào)
* @param listener
*/
public void setOnClickListener(OnItemClickListener listener)
{
mImageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
listener.onImageClick();
}
});
}
/**
* 點(diǎn)擊事件接口
* @author linc
*
*/
public interface OnItemClickListener
{
public void onImageClick();
}
} 好，一個(gè)完整的組合控件就做好了，那么，我們?nèi)绾问褂媚兀?/p>
我要在 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");
}
});
}
} 在處理圖片點(diǎn)擊事件的時(shí)候，我用到了選擇器（selector），這是我們實(shí)際開(kāi)發(fā)中最常用的小技巧了。它能描述的狀態(tài)很多，各位看官可以去查查。
<?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> 好，組合控件的例子先到這里，實(shí)際功能在下一個(gè)實(shí)戰(zhàn)技巧中演練。
大家在做自定義控件時(shí)需要注意的是：
1、自定義控件類(lèi)不能是是抽象類(lèi)
2、要用
(Context context, AttributeSet attrs) 這個(gè)構(gòu)造函數(shù)
否則報(bào)錯(cuò)：android.view.InflateException: Binary XML file line #15: Error inflating cla。。。
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多