Android\OPhone自定義視圖(View)

最經在Android上作遊戲居多了,在Android平臺做遊戲和做應用少有少許的不同,做遊戲就會更多的使用自定義視圖了,有很多東西需要我們自己去實現,就不像做應用,用得最多的就是Android系統的一些組件,當然偶爾也會涉及到自定義一些界面,但是這些自定義界面都是使用系統的一些組件來組合完成了,而遊戲不同了,遊戲在圖形的處理上要求會更多,這時,自定義視圖就派上用場了。

說老實話,做了幾個遊戲出來之後,才發現,以前要實現某個功能會經過很多的步驟並且很複雜,在Android就可以很輕鬆的解決,比如最簡單的一個漸變色的處理,要是在J2ME上計算就會多很多,在Android就需要定義一個shape的XML文件即可,同時還可以利用shape來繪製一些基本的圖形(有機會右面會介紹這個shape),甚至代替很多圖片內容,這樣既節省了空間,又提高了效率,爲什麼不好呢?Android真的很強大,主要是很靈活,我們可以用很多方法去實現某個功能。

好了,又廢話了這麼多,下面進入正題。

我們都知道Android的UI,都是基於View和ViewGroup以及一些子類,比如layout等等,所以我們在自定義視圖時就需要將自定義的類繼承自這個類。

首先我們需要在values目錄下建立一個attrs.xml文件,來定義我們在自定義視圖中需要使用的一些資源,比如:背景、字體大小、字體等等。代碼如下:

<?xml version="1.0" encoding="utf-8"?>     
<resources>     
<declare-styleable name="TestView">     
<attr name="textColor" format="color" />     
<attr name="textSize" format="dimension" />     
<attr name="backGround" format="integer" />     
</declare-styleable>     
</resources>  

上面的代碼很好理解,我們將自定義的試圖名定位TestView,其中包括了字體顏色(textColor),字體尺寸(textSize)以及背景(backGround)。
接下來我們就需要建立一個類TestView,繼承自View了。 
代碼如下(代碼加入了註釋,這裏就不多說了):

package com.yarin.Android.Test;     
    
import android.content.Context;     
import android.content.res.TypedArray;     
import android.graphics.Canvas;     
import android.graphics.Paint;     
import android.util.AttributeSet;     
import android.view.View;     
    
public class TestView extends View     
{     
    private Paint   mPaint      = null;     
    
    private Context     mContext    = null;     
    
    /**    
     *  mTestView = new TestView(this);    
     *  setContentView(mTestView);    
     *  如果在Activity中這樣寫,那麼就需要實現這個構造函數    
     */    
    public TestView(Context context)     
    {     
        super(context);     
             
        mContext = context;     
        mPaint = new Paint();     
    }     
         
    /**    
     *  setContentView(R.layout.main);    
     *  mTestView = (TestView)findViewById(R.id.mTestView);    
     *  如果在Activity中這樣寫,那麼就需要實現這個構造函數    
     */    
    public TestView(Context context, AttributeSet attrs)     
    {     
        super(context, attrs);     
             
        mContext = context;     
    
        mPaint = new Paint();     
             
        TypedArray params = context.obtainStyledAttributes(attrs,R.styleable.TestView);     
        //取得xml佈局文件中所定義的背景     
        int backgroudId = params.getResourceId(R.styleable.TestView_backGround,0);     
        if (backgroudId != 0)      
        {     
            setBackgroundResource(backgroudId);     
        }     
        //字體顏色     
        int textColor = params.getColor(R.styleable.TestView_textColor,0XFFFFFFFF);     
        mPaint.setColor(textColor);     
        //字體大小     
        float textSize = params.getDimension(R.styleable.TestView_textSize, 20);     
        mPaint.setTextSize(textSize);     
    }     
    protected void onDraw(Canvas canvas)      
    {     
        super.onDraw(canvas);     
    
        //測試繪製一個矩形     
        canvas.drawRect(30, 50, 80, 90, mPaint);     
        //繪製一個字符串     
        canvas.drawText("測試字符串", 50, 150, mPaint);     
    }     
} 
接下來,我們需要在main.xml中來修改加入自定義視圖了,修改如下:
<?xml version="1.0" encoding="utf-8"?>    
<LinearLayout      
    xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:test="http://schemas.android.com/apk/res/com.yarin.Android.Test"    
    android:orientation="vertical"    
    android:layout_width="fill_parent"    
    android:layout_height="fill_parent"    
    >    
<TextView       
    android:layout_width="fill_parent"      
    android:layout_height="wrap_content"      
    android:text="@string/hello"    
    />    
    <!-- 自定義視圖      
    注意這裏是如何來申明自定義視圖中的字體顏色、字體大小、背景的,     
    在線性佈局中不要忘記“xmlns:test="http://schemas.android.com/apk/res/com.yarin.Android.Test”     
    -->    
<com.yarin.Android.Test.TestView      
    android:id="@+id/mTestView"    
    android:layout_width="fill_parent"      
    android:layout_height="fill_parent"    
    test:textColor="#FFFFFFFF"      
    test:textSize="25dip"    
    test:backGround="@drawable/bg"    
/>    
</LinearLayout>  
最後在Activity中,不管我們採用下面那一種方式來寫都可以了:
//mTestView = new TestView(this);     
//setContentView(mTestView);     
             
setContentView(R.layout.main);     
mTestView = (TestView)findViewById(R.id.mTestView); 
大家可以從代碼看出,我們在屏幕上繪製了一個矩形和一個字符串做測試。效果如下(這個效果是在OPhone1.0上測試的):

也沒什麼多說的,網絡上已經早已有方法你來講解了,就算自己作個記錄吧,能幫助到某個朋友,當然很高興,下面是Eclipse工程文件。   

需要說明一下,3D的應用時不能這樣的,3D需要使用SurfaceView來實現,後面有時間在介紹。最後總結一點經驗,Android上開發應用,最主要的就是UI界面的佈局,其他的都好解決,正在努力想UI的佈局有沒有更好的方式。

謝謝大家支持。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章