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

本来想用Tabrow来布局一组上面是图片下面是文字说明的控件，可是发现Tabrow不像想象的那样简易，并且这几组之间的控件距离很差把握，在网上找了两种方法以供参照。html

方法1、利用RadioButton巧妙的实现布局

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:orientation="vertical">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:button="@null"

android:drawableTop="@drawable/vibrator48"

android:text="测试" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:button="@null"

android:drawableTop="@drawable/vibrator"

android:text="测试" />

利用RadioButton的配置参数drawableTop实现文字和图片的布局，固然还能够用drawablepadding来设置图片和文字的距离。相似的控件还有TextView、ChexBox等。可是好像他对太大的图片时，下面的文字不能居中显示。java

方法2、自定义控件

自定义控件是Android中玩得比较高级的一种思路，能够把布局作的很炫，可是实现起来天然会没有方法一那么方便。android

一、写布局文件

写一个图片和文字框的布局文件image_text_button.xml.推荐调试时将资源文件写进去，方便布局调试。ide

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:alpha="20"

android:orientation="vertical">

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"/>

android:id="@+id/text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:text="测试"/>

二、对应布局文件写一个类

写一个对应布局文件的类，这个类继承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);

}

}

三、将自定义控件应用到布局文件中

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:orientation="horizontal" >

android:id="@+id/itbTest"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal" />

android:id="@+id/itbTest"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal" />

android:id="@+id/itbTest"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center_horizontal" />

四、在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);

}

}