2.2 彰顯你的個性—自定義UI組件

很多時刻，Android的常用控件并不克不及知足我們的需求。為了吸引更多的眼球，達(dá)到標(biāo)新立異的效不雅，我們可以本身來定義各類控件。我們可以經(jīng)由過程持續(xù)基本控件來重寫某些環(huán)節(jié)，當(dāng)然我們也可以將多個控件組合成一個新控件來應(yīng)用。
我們先來看看下面一個例子，在這個例子傍邊，我們實(shí)現(xiàn)了一個帶有圖片和文字的按鈕。
起首，定義一個layout，實(shí)現(xiàn)按鈕內(nèi)部的構(gòu)造。代碼如下：

<?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實(shí)現(xiàn)了一個左圖右字的構(gòu)造，接下來寫一個類MyLayout持續(xù)LinearLayout，導(dǎo)入方才的構(gòu)造，并且設(shè)置須要的辦法，大年夜而使得能在代碼中控制這個自定義控件內(nèi)容的顯示。代碼如下：

// 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);
        // 導(dǎo)入構(gòu)造
        LayoutInflater.from(context).inflate(R.layout.mylayout, this, true);
        iv = (ImageView) findViewById(R.id.iv);
        tv = (TextView) findViewById(R.id.tv);
    }
    /**
     * 設(shè)置圖片資本
     */
    public void setImageResource(int resId) {
        iv.setImageResource(resId);
    }
    /**
     * 設(shè)置顯示的文字
     */
    public void setTextViewText(String text) {
        tv.setText(text);
    }
}

 
然后，我們在須要應(yīng)用這個自定義控件的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中設(shè)置該控件的內(nèi)容，部分代碼如下：

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 多個控件的組合
 
如許，一個帶文字和圖片的組合按鈕控件就完成了。如許梳理一下，應(yīng)用照樣異常簡單的。下面，我們再來看一個例子，自定義一個控件，顯示帶有邊框的字。我們新建一個類持續(xù)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);
    }

 
然后，我們在須要應(yīng)用這個自定義控件的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辦法
 
可以看到，帶有邊框的字已經(jīng)實(shí)現(xiàn)了。