学步园

      Android提供了一个功能强大的UI组件模型，基于丰富的布局类View和ViewGroup。我们这章就是基于View和ViewGroup派生的子类开始来讲怎样建立自己UI。

      Android系统提供了部分可用的Widget，包括Button, TextView, EditText, ListView, CheckBox, RadioButton, Gallery, Spinner,还有一些用于专门用途的，包括AutoCompleteTextView,
ImageSwitcher, 和TextSwitcher,另外也有些关于布局的LinearLayout,FrameLayout, RelativeLayout（Common Layout Objects）等等。

如果这些系统内置Widget或者布局View不能满足需求，我们可以建立我们自己的View子类，来实现自己的Widget和Layout。

      那如何创建呢？下面是创建View子类完全自绘WIDGET的最基本步骤：

      1.       创建自己的类，必须继承View。里面有三个构造函数，一个参数的构造函数主要是让使用者能动态建立，而两个参数的构造函数则是用于XML配置的

       2.       重载一些父类的带On方法，比如onDraw(),onMeasure()和onKeyDown()等。其中onDraw和onMeasure（）是必须重载
                     的，onDraw主要是从父类传递Canvas过来，能让你定制自己的2D组件，onMeasure则是定制你组件的大小，在之中你必须得              
  调用setMeasuredDimension()。

      3.       在你的程序Activity中使用你扩展的类

     下面是示例程序：

在Activity中的程序使用Widget

先定义attr.xml，定义WIDGET的一些属性

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

然后建立自己的Widget（OwnButton）：

package com.OwnWidget.OwnButton;<br /> import com.OwnWidget.R;<br /> import android.content.Context;<br /> import android.content.res.TypedArray;<br /> import android.graphics.Canvas;<br /> import android.graphics.Color;<br /> import android.graphics.Paint;<br /> import android.graphics.Paint.Align;<br /> import android.graphics.Rect;<br /> import android.util.AttributeSet;<br /> import android.view.MotionEvent;<br /> import android.view.View;<br /> public class OwnButton extends View<br /> {<br /> private Rect mClientRect = null;<br /> private Paint mPaint = null;<br /> private String mStr;<br /> private int mTag = 0;<br /> TypedArray mArray;</p> <p> private void initDraw()<br /> {<br /> mClientRect = new Rect();<br /> mPaint = new Paint();</p> <p> mStr = "JackLam";</p> <p> mClientRect.left = this.getLeft();<br /> mClientRect.top = this.getTop();<br /> mClientRect.right = mClientRect.left + 100;<br /> mClientRect.bottom = mClientRect.top + 100;</p> <p> mTag = 0;</p> <p> }</p> <p> // 用于自己创建<br /> public OwnButton(Context context)<br /> {<br /> super(context);</p> <p> initDraw();<br /> }</p> <p> //用于RESOURCE<br /> public OwnButton(Context context, AttributeSet attrs)<br /> {<br /> super(context, attrs);<br /> //TypedArray是一个用来存放由context.obtainStyledAttributes获得的属性的数组<br /> //在使用完成后，一定要调用recycle方法<br /> //属性的名称是styleable中的名称+“_”+属性名称<br /> mArray = context.obtainStyledAttributes(attrs, R.styleable.OwnButton);<br /> initDraw();<br /> mArray.recycle(); //一定要调用，否则这次的设定会对下次的使用造成影响<br /> }</p> <p> @Override<br /> protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec)<br /> {<br /> setMeasuredDimension(mClientRect.right - mClientRect.left,<br /> mClientRect.bottom - mClientRect.top);//must called,default 100 * 100 in android system<br /> }</p> <p> @Override<br /> protected void onLayout (boolean changed, int left, int top, int right, int bottom)<br /> {</p> <p> }</p> <p> @Override<br /> protected void onDraw (Canvas canvas)<br /> {<br /> Rect r = new Rect();</p> <p> this.getGlobalVisibleRect(r);</p> <p> mPaint.setColor(Color.GREEN);<br /> canvas.drawRect(mClientRect, mPaint);</p> <p> mPaint.setTextAlign(Align.CENTER);<br /> mPaint.setColor(Color.BLACK);<br /> canvas.drawText(mStr, mClientRect.left + r.left, mClientRect.top + r.top,<br /> mPaint);<br /> }</p> <p> @Override<br /> public boolean onTouchEvent (MotionEvent event)<br /> {<br /> switch(event.getAction())<br /> {<br /> case MotionEvent.ACTION_DOWN:<br /> if(mTag == 0)<br /> {<br /> mStr = "Love";<br /> mTag++;<br /> }<br /> else if(mTag == 1)<br /> {<br /> mStr = "Elaine";<br /> mTag++;<br /> }<br /> else if(mTag == 2)<br /> {<br /> mStr = "Love";<br /> mTag++;<br /> }<br /> else<br /> {<br /> mStr = "JackLam";<br /> mTag = 0;<br /> }<br /> this.invalidate();<br /> break;</p> <p> case MotionEvent.ACTION_UP:<br /> break;</p> <p> default:<br /> break;<br /> }<br /> return super.onTouchEvent(event);</p> <p> }<br /> }<br />  

接着就可以在Activity中使用自己组建的Widget，下面我们用xml的形式来使用。

在layout的main.xml中增加Widget

<?xml version="1.0" encoding="utf-8"?><br /> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> android:orientation="vertical"<br /> android:layout_width="fill_parent"<br /> android:layout_height="fill_parent"<br /> ><br /> <TextView<br /> android:layout_width="fill_parent"<br /> android:layout_height="wrap_content"<br /> android:text="@string/hello"<br /> /><br /> <com.OwnWidget.OwnButton.OwnButton<br /> android:id="@+id/widget_myButton"<br /> android:layout_width = "wrap_content"<br /> android:layout_height = "wrap_content"><br /> </com.OwnWidget.OwnButton.OwnButton><br /> </LinearLayout><br />  

然后在Activity中就可以使用了

package com.OwnWidget;<br /> import com.OwnWidget.OwnButton.OwnButton;<br /> import android.app.Activity;<br /> import android.os.Bundle;<br /> import android.widget.LinearLayout;<br /> public class OwnWidget extends Activity {<br /> /** Called when the activity is first created. */<br /> @Override<br /> public void onCreate(Bundle savedInstanceState) {<br /> super.onCreate(savedInstanceState);<br /> /*LinearLayout layout = new LinearLayout(this);<br /> layout.setOrientation(LinearLayout.VERTICAL);<br /> OwnButton btn = new OwnButton(this);<br /> layout.addView(btn);<br /> setContentView(layout);*/<br /> setContentView(R.layout.main);<br /> }<br /> }<br />  

当然，也可以动态创建WIDGET,在Activity的注释代码就是动态创建的方式，只要把setContentView(R.layout.main);注释掉。

下面一章将会介绍另一种自绘方式，这种方式利用的原有的Widget，将原有的Widget组合起来形成自己的Widget（如由Edit和Button等组成的下拉列表框）。