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