自定义带图片和文字的ImageTextButton

今天我们来讲一下有关自定义控件的问题，今天讲的这篇是从布局自定义开始的，难度不大，一看就明白，估计有的同学或者开发者看了说，这种方式多此一举，但是小编我不这么认为，多一种解决方式，就多一种举一反三的学习。下一次或者过几天我会从自定义属性，在布局文件中使用属性的方式再讲一篇关于自定义控件的文章，希望对大家能够有所帮助。

现在开始讲自定义带图片和文字的ImageTextButton的实现方法。

效果图如下：

第一步：新建一个image_text_buttton.xml的布局文件，供自定义的控件使用

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="wrap_content"
4. android:layout_height="wrap_content"
5. android:orientation="vertical" >
6. <ImageView
7. android:id="@+id/iv"
8. android:layout_width="wrap_content"
9. android:layout_height="wrap_content"
10. android:layout_gravity="center_horizontal"
11. android:layout_marginTop="12dp" />
12. <TextView
13. android:id="@+id/tv"
14. android:layout_width="wrap_content"
15. android:layout_height="wrap_content"
16. android:layout_gravity="center_horizontal"
17. android:layout_marginTop="8dp"
18. android:textColor="#000000" />
19. </LinearLayout>

第二步：自定义一个类ImageTextButton继承LinearLayout

[java] view plain copy

1. package net.loonggg.itbd.view;
2. import net.loonggg.itbd.R;
3. import android.content.Context;
4. import android.util.AttributeSet;
5. import android.view.LayoutInflater;
6. import android.widget.ImageView;
7. import android.widget.LinearLayout;
8. import android.widget.TextView;
9. public class ImageTextButton extends LinearLayout {
10. private ImageView iv;
11. private TextView tv;
12. public ImageTextButton(Context context) {
13. super(context);
14. }
15. public ImageTextButton(Context context, AttributeSet attrs) {
16. super(context, attrs);
17. LayoutInflater.from(context).inflate(R.layout.image_text_buttton, this,
18. true);
19. iv = (ImageView) findViewById(R.id.iv);
20. tv = (TextView) findViewById(R.id.tv);
21. }
22. public void setDefaultImageResource(int resId) {
23. iv.setImageResource(resId);
24. }
25. public void setDefaultTextViewText(String text) {
26. tv.setText(text);
27. }
28. /**
29. * @param resId
30. */
31. public void setImageResource(int resId) {
32. iv.setImageResource(resId);
33. }
34. /**
35. * @param text
36. */
37. public void setTextViewText(String text) {
38. tv.setText(text);
39. }
40. /**
41. * @param color
42. */
43. public void setTextColor(int color) {
44. tv.setTextColor(color);
45. }
46. }

第三步：自定义控件的使用，在布局文件activity_main.xml中的使用

[html] view plain copy

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:paddingBottom="@dimen/activity_vertical_margin"
6. android:paddingLeft="@dimen/activity_horizontal_margin"
7. android:paddingRight="@dimen/activity_horizontal_margin"
8. android:paddingTop="@dimen/activity_vertical_margin"
9. tools:context=".MainActivity" >
10. <net.loonggg.itbd.view.ImageTextButton
11. android:id="@+id/itb"
12. android:layout_width="wrap_content"
13. android:layout_height="wrap_content" />
14. </RelativeLayout>

第四步：在Activiy中的使用

[java] view plain copy

1. public class MainActivity extends Activity {
2. private ImageTextButton itb;
3. @Override
4. protected void onCreate(Bundle savedInstanceState) {
5. super.onCreate(savedInstanceState);
6. setContentView(R.layout.activity_main);
7. itb = (ImageTextButton) findViewById(R.id.itb);
8. itb.setImageResource(R.drawable.sure);
9. itb.setTextViewText("确定");
10. }
11. }