自定义控件-2.控件实例

举个简单的例子TextView

对于常用的九宫格一般都是textView+imageView的样式,可以直接使用textview并设置drawableRight/Top属性的

但是有一个缺点,drawable图片的宽高无法调整

网上的处理方法都是自定义类继承TextView,并进行一定的处理~

但是通常这样的处理都是相对比较死板的, 最好是能够封装成一个自定义控件,直接在布局里就利用参数设置宽高

下面就以此例子来熟悉自定义控件的使用

首先在values/attrs.xml内新建一个declare-styleable

这里设置了两个属性,图片宽和高,为的是控制drawableTop..图片的大小

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

<resources>

    <declare-styleable name ="DrawableTextView">

        <attr name ="drawableWidth" format="dimension" />

        <attr name ="drawableHeight" format="dimension" />

    </declare-styleable >

</resources>

下面是类文件的代码

public class DrawableTextView extends TextView {

      public DrawableTextView(Context context, AttributeSet attrs, int defStyle) {

             super(context, attrs, defStyle);

            TypedArray ta = context.obtainStyledAttributes(attrs,

                        R.styleable. DrawableTextView);

             int widthPx = ta.getDimensionPixelSize(

                        R.styleable. DrawableTextView_drawableWidth, -1);

             int heightPx = ta.getDimensionPixelSize(

                        R.styleable. DrawableTextView_drawableHeight, -1);

            Drawable[] drawables = getCompoundDrawables();

            Drawable drawable = null;

             for ( int i = 0; i < drawables. length; i++) {

                   if (drawables[i] != null) {

                        drawable = drawables[i];

                         break;

                  }

            }

             if (drawable != null && widthPx != -1 && heightPx != -1) {

                  drawable.setBounds(0, 0, widthPx, heightPx);

            }

             // 将图片放回到TextView中

            setCompoundDrawables(drawables[0], drawables[1], drawables[2],

                        drawables[3]);

            ta.recycle();

      }

      public DrawableTextView(Context context, AttributeSet attrs) {

             this(context, attrs, 0);

      }

      public DrawableTextView(Context context) {

             this(context, null);

      }

}

其中红色部分作用是,将自定义的attr参数与该自定义控件绑定~算是固定写法

而自定义控件所需的特殊逻辑就自行处理了,写在控件类的构造函数里,即上面两个红色部分之间的内容

比如我们例子所需的自定义textview drawableRight/Top图片的宽高

首先利用ta.getDimensionPixelSize方法获取到自定义控件中该参数对应的值~

此外还有ta.getInt/ta.getColor等放啊,对应attr中format设置的不同值类型

获取到自定义控件所需参数的值后,就可以根据需要进行处理了(这些都自行百度了),比如例子中所需的功能处理如下:

获取图片数组getCompoundDrawables,数组是因为textview绘图分不同情况,

即drawableRight drawableTop drawableLeft drawableBottom四个,再获取到非空的那个,即我们在textview中设置的图片

利用drawable.setBounds方法,传入x,y,width,height值进行图片的大小控制~

最后setCompoundDrawables传回去修改好后的drawable~

最后别忘了recycle回收,结束~

好了,现在可以在布局文件中使用查看效果了

<LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:app="http://schemas.android.com/apk/res/com.boredream.view"

    android:layout_width= "match_parent"

    android:layout_height= "match_parent"

    android:orientation="vertical"

    tools:context=".MainActivity" >

    <com.boredream.view.DrawableTextView

        android:layout_width= "wrap_content"

        android:layout_height= "wrap_content"

        android:drawableRight= "@drawable/ic_launcher"

        android:text="图片"

        android:textSize= "130sp"

        app:drawableHeight= "130dp"

        app:drawableWidth= "130dp" />

</LinearLayout>