Android学习之自定义控件之图片带文字的View

实际项目开发中肯定会遇到Android提供的原生的控件不能满足我们实际使用需求的情况，这时候就需要自定义控件啦，自定义控件有很多种方式，有的只需要重写某个控件，有的则需要完全自己写个控件，前者比较简单，后者比较复杂，当然我对Android的理解也不是很深入，这里就讲下自己对后者的使用。今天就讲下自定义一个图片带文字的控件的实现（怎么感觉跟TextView的android:drawableXXX有点类似，算了不管了，过程才是重点）

流程：

1.res/values之下新建attrs.xml，里面自定义属性，这里自定义了图片，文字，字号和字色，记住根节点是<declare-styleable>，这个是用来自定义属性的

<?xml version="1.0" encoding="utf-8"?>
<resources>

<declare-styleable name="ImageWithTextView">
<attr name="view_image" format="reference" />
<attr name="view_text" format="string" />
<attr name="view_text_size" format="dimension" />
<attr name="view_text_color" format="color" />
</declare-styleable>

</resources>

2.画这个控件的布局，这里控件上面是图片，下面是文字，很简单的一个控件布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/linearlayout_view_image_with_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">

<ImageView
android:id="@+id/imageview_view_image_with_text"
android:layout_width="77dp"
android:layout_height="84dp"
android:scaleType="centerInside" />

<TextView
android:id="@+id/textview_view_image_with_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>

3.重点来了，当然是在代码中自定义控件了，先继承LinearLayout，这里实现1个参数和2个参数的构造方法，其中第二个构造方法很重要，TypedArray是个属性的容器，obtainStyledAttributes()可以获取TypedArray，里面传入自定义属性的name，再通过TypedArray获取各个属性，记得字号其实就是这里的默认值设定的，不能在布局中设定，稍后会讲。最后一定要通过TypedArray.recycle()回收TypedArray，为什么要回收TypedArray呢？百度了之后发现自定义View时使用TypedArray，会随着
Activity的每次创建而创建，因此需要系统频繁的创建TypedArray，对内存和性能是一个不小的开销，如果不回收，每次都让GC来回收，很可能就会造成OutOfMemory即内存溢出。这里大家注意到还有个接口的回调，因为自定义View肯定是有某些需求要实现的，所以这里的接口目的就是这个，当然我的目的就是弹出Toast ...- -|||

/**
* 自定义图片带文字的View
*
* @author yuzhentao
*/
public class ImageWithTextView extends LinearLayout {

private Context context;
private Drawable viewImage;
private String viewText;
private int viewTextColor;
private float viewTextSize;
private OnImageWithTextViewClickListener onImageWithTextViewClickListener;

public ImageWithTextView(Context context) {
this(context, null);
}

public ImageWithTextView(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ImageWithTextView);
viewImage = typedArray.getDrawable(R.styleable.ImageWithTextView_view_image);
viewText = typedArray.getString(R.styleable.ImageWithTextView_view_text);
viewTextColor = typedArray.getColor(R.styleable.ImageWithTextView_view_text_color, 0);
viewTextSize = typedArray.getDimension(R.styleable.ImageWithTextView_view_text_size, 16);
initView();
typedArray.recycle();
}

private void initView() {
View view = LayoutInflater.from(context).inflate(R.layout.view_image_with_text, this, true);
LinearLayout lv = (LinearLayout) view.findViewById(R.id.linearlayout_view_image_with_text);
ImageView iv = (ImageView) view.findViewById(R.id.imageview_view_image_with_text);
TextView tv = (TextView) view.findViewById(R.id.textview_view_image_with_text);
iv.setImageDrawable(viewImage);
tv.setText(viewText);
tv.setTextColor(viewTextColor);
tv.setTextSize(viewTextSize);
lv.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
onImageWithTextViewClickListener.onViewClick(ImageWithTextView.this);
}
});
}

/**
* 设置OnImageWithTextViewClickListener回调
*
* @param onImageWithTextViewClickListener:OnImageWithTextViewClickListener
*/
public void setOnImageWithTextViewClickListener(OnImageWithTextViewClickListener onImageWithTextViewClickListener) {
this.onImageWithTextViewClickListener = onImageWithTextViewClickListener;
}

}

4.看下接口，好吧，就一个方法

/**
* 自定义图片带文字的View单击监听接口
*
* @author yuzhentao
*/
public interface OnImageWithTextViewClickListener {

/**
* 单击View
*/
void onViewClick(View v);

}

5.然后是主布局中使用我们自定义的控件，记得加上自定义的命名空间，这里用app来作为前缀，大家随意

xmlns:app="http://schemas.android.com/apk/res-auto"

不然布局中肯定找不到自定义的属性

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">

<yuzhentao.imagewithtextviewdemo.ImageWithTextView
android:id="@+id/imagewithtextview_activity_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/holo_green_light"
app:view_image="@mipmap/ic_launcher"
app:view_text="@string/app_name"
app:view_text_color="@android:color/white" />

</LinearLayout>

还有一点就是不要在这里设置view_text_size，不然显示出来的字号是不对的，会根据不同的分辨率而改变

详见：http://blog.csdn.net/yangzl2008/article/details/7879019?utm_source=tuicool&utm_medium=referral

6.最后当然是在主界面中使用，顺便实现一下接口，实现下方法

/**
* 主界面
*
* @author yuzhentao
*/
public class MainActivity extends Activity {

private Context context;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}

private void initView() {
context = this;
ImageWithTextView imageWithTextView = (ImageWithTextView) findViewById(R.id.imagewithtextview_activity_main);
imageWithTextView.setOnImageWithTextViewClickListener(new OnImageWithTextViewClickListener() {
@Override
public void onViewClick(View v) {
Toast.makeText(context, "点击了自定义控件", Toast.LENGTH_SHORT).show();
}
});
}

}

效果图，丑是丑了点，希望对大家有点帮助：



Demo地址：http://download.csdn.net/detail/qq_23940659/9467057