原本想用Tabrow來佈局一組上面是圖片下面是文字說明的控制元件，但是發現Tabrow不像想象的那樣簡易，而且這幾組之間的控制元件距離不好把握，在網上找了兩種方法以供參照。

方法一、利用RadioButton巧妙的實現佈局

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_gravity="center"
        android:orientation="vertical">

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:button="@null"
            android:drawableTop="@drawable/vibrator48"
            android:text="測試" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:button="@null"
            android:drawableTop="@drawable/vibrator"
            android:text="測試" />
    </LinearLayout>
 

利用RadioButton的配置引數drawableTop實現文字和圖片的佈局，當然還可以用drawablepadding來設定圖片和文字的距離。類似的控制元件還有TextView、ChexBox等。但是好像他對太大的圖片時，下面的文字不能居中顯示。

方法二、自定義控制元件

自定義控制元件是Android中玩得比較高階的一種思路，可以把佈局做的很炫，但是實現起來自然會沒有方法一那麼方便。

1、寫佈局檔案

寫一個圖片和文字框的佈局檔案image_text_button.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:alpha="20"
    android:orientation="vertical">  
    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/vibrator"
        android:scaleType="centerInside"
        android:paddingBottom="2dip"/>
    <TextView   
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="測試"/>
</LinearLayout> 
 

2、對應佈局檔案寫一個類

寫一個對應佈局檔案的類，這個類繼承LinearLayout的ImageTextButton.java

package com.example.test;

import android.content.Context;  
import android.util.AttributeSet;  
import android.view.LayoutInflater;  
import android.widget.ImageView;  
import android.widget.LinearLayout;  
import android.widget.TextView;  

public class ImageTextButton extends LinearLayout {  
  
    private ImageView mImgView = null;  
    private TextView mTextView = null;  
    private Context mContext;  
      
    public ImageTextButton(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        LayoutInflater.from(context).inflate(R.layout.image_text_button, this, true);  
        mContext = context;  
        mImgView = (ImageView)findViewById(R.id.img);  
        mTextView = (TextView)findViewById(R.id.text);
    }  
  
    /*設定圖片介面*/  
    public void setImageResource(int resId){  
        mImgView.setImageResource(resId);  
    }  
      
    /*設定文字介面*/  
    public void setText(String str){  
        mTextView.setText(str);  
    }  
    /*設定文字大小*/  
    public void setTextSize(float size){  
        mTextView.setTextSize(size);  
    }  
  
} 
 

3、將自定義控制元件應用到佈局檔案中

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="horizontal" >

        <com.example.test.ImageTextButton
            android:id="@+id/itbTest"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal" />

        <com.example.test.ImageTextButton
            android:id="@+id/itbTest"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal" />

        <com.example.test.ImageTextButton
            android:id="@+id/itbTest"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal" />
    </LinearLayout>

4、在Activity引用自定義控制元件

public class MainActivity extends Activity implements OnClickListener{
	ImageView imageView;
	Animation animation;
	private long speed = 1200;
	private ImageTextButton itbTest;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		Log.i("jobschu", "onCreate");
		
		itbTest = (ImageTextButton)findViewById(R.id.itbTest);
		itbTest.setImageResource(R.drawable.vibrator);
		itbTest.setText("測試");
		itbTest.setTextSize(10);
		itbTest.setOnClickListener(this);
	}
}