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

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

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

    

        

        
    

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

Android自定义控件图片+文字布局_第1张图片

方法二、自定义控件

自定义控件是Android中玩得比较高级的一种思路,可以把布局做的很炫,但是实现起来自然会没有方法一那么方便。

1、写布局文件

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



  
    
    
 
Android自定义控件图片+文字布局_第2张图片

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、将自定义控件应用到布局文件中


    

        

        

        
    
Android自定义控件图片+文字布局_第3张图片

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);
	}
}

你可能感兴趣的:(Android,APP,Activity)