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

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

Android学习之自定义控件之图片带文字的View_第1张图片

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

更多相关文章

随机推荐