Android自定义控件图片+文字布局

原本想用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);
	}
}