2.2 彰显你的个性—自定义UI组件

很多时刻，Android的常用控件并不克不及知足我们的需求。为了吸引更多的眼球，达到标新立异的效不雅，我们可以本身来定义各类控件。我们可以经由过程持续基本控件来重写某些环节，当然我们也可以将多个控件组合成一个新控件来应用。
我们先来看看下面一个例子，在这个例子傍边，我们实现了一个带有图片和文字的按钮。
起首，定义一个layout，实现按钮内部的构造。代码如下：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="horizontal" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"  > 
<ImageView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:id="@+id/iv" 
    android:paddingTop="5dip" 
    android:paddingBottom="5dip" 
    android:paddingLeft="20dip" 
    android:layout_gravity="center_vertical"  /> 
<TextView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:textColor="#333" 
    android:id="@+id/tv" 
    android:layout_marginLeft="8dip" 
    android:layout_gravity="center_vertical"  /> 
</LinearLayout>

 
这个xml实现了一个左图右字的构造，接下来写一个类MyLayout持续LinearLayout，导入方才的构造，并且设置须要的办法，大年夜而使得能在代码中控制这个自定义控件内容的显示。代码如下：

// import略
public class MyLayout extends LinearLayout {
 
    private ImageView iv;
    private TextView tv;
 
    public MyLayout(Context context) {
        this(context, null);
    }
    public MyLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        // 导入构造
        LayoutInflater.from(context).inflate(R.layout.mylayout, this, true);
        iv = (ImageView) findViewById(R.id.iv);
        tv = (TextView) findViewById(R.id.tv);
    }
    /**
     * 设置图片资本
     */
    public void setImageResource(int resId) {
        iv.setImageResource(resId);
    }
    /**
     * 设置显示的文字
     */
    public void setTextViewText(String text) {
        tv.setText(text);
    }
}

 
然后，我们在须要应用这个自定义控件的layout中参加这控件，只须要在xml中参加即可：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <com.char2.MyLayout
        android:id="@+id/my_button" 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content" 
        android:background="@drawable/button_gray"/>
</LinearLayout>

 
最后，我们在activity中设置该控件的内容，部分代码如下：

MyLayout myLayout = (MyLayout)findViewById(R.id.my_button);
myLayout.setImageResource(R.drawable.close);
myLayout.setTextViewText("封闭");

 
效不雅如图2-18所示：
[img]http://img.blog.csdn.net/20150104092408414?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYXJ1aTMxOQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
图2-18 多个控件的组合
 
如许，一个带文字和图片的组合按钮控件就完成了。如许梳理一下，应用照样异常简单的。下面，我们再来看一个例子，自定义一个控件，显示带有边框的字。我们新建一个类持续TextView，然后重写它的onDraw办法，部分代码如下：

private Canvas canvas = new Canvas();
 
    public MyTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        this.canvas = canvas;
        Rect rec = canvas.getClipBounds();
        Paint paint = new Paint();
        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(2);
        canvas.drawRect(rec, paint);
    }

 
然后，我们在须要应用这个自定义控件的layout中参加这控件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <com.char2.MyTextView
        android:layout_centerInParent="true"
        android:id="@+id/my_button" 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content" 
        android:text="自定义控件"
        android:textSize="24sp"/>
</RelativeLayout>

 
效不雅如图2-19所示：
[img]http://img.blog.csdn.net/20150104092415871?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYXJ1aTMxOQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

图2-19 重写控件onDraw办法
 
可以看到，带有边框的字已经实现了。