文章更新時間︰2013/06/04
文章更新次數︰3
一、前提
話說人是貪婪的，
這句話用在沉浸於3C的使用者來說，
真是滿恰當的。
一開始就以這段文字做開頭，
跟今天的主題很有關係，
一般初學者剛開始學的，
大部份都是如何建立一個TextView、EditText、Button等等的元件。
想要在我們的畫面上叫出一個TextView文字框，我們有以下2種方式︰
1.在程式碼裡
TextView text = new TextView(this);
text.setText("test");
我們的Layout.addView(text); //將TextView新增至我們的Layout
2.在xml裡宣告
<TextView
android:layout_width="fill_parent"
android:layout_height="warp_content"
android:text="test"/>
於是，我們可以很順利的得到這個畫面
但是這些基礎元件用久了，我們或使用者，
開始想要搞東搞西，想要
客製化。
以下是這篇分享文最後會呈現的樣子︰
ㄜ...這不就是再加一行字，並且把字的大小和顏色改一改而已嗎？
有什麼好說的呢？
二、文章開始
如果你這麼想，可就大錯特錯囉！
快來看看我在layout資料夾裡面的main.xml放了些什麼︰
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.test.testcustomize"
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"
/>
<com.test.testcustomize.LabelView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:text="Reddd" />
</LinearLayout>
有注意到嗎？多了
xmlns:app="http://schemas.android.com/apk/res/com.test.testcustomize"
app:text="Reddd"
這時候你會問︰
app:text="Reddd"
這個標籤怎麼來的？
從這裡︰
只要在res/values/裡新增attrs.xml這份文件，宣告我們自訂的屬性，
然後在main.xml裡導入這份文件，
再加上之後會提到LabelView.class的一些設定，
就可以達到藍色字的效果了。
也許你會說︰
「天啊！
為什麼我們要把一個原本可以很簡單設定大小和顏色就能做到的事，
搞得那麼複雜？」
這就是我今天要說的「客製化」。
不知道你有沒有注意到，畫面中藍色的那行字，
只在main.xml裡很簡單的宣告文字內容，
app:text="Reddd"
卻呈現了藍色、而且更大的字體。
Android允許我們自訂View，
呈現我們自己想呈現的基本樣式。
技術文件說︰
如果我們想要有自己的View，
那我們就自己寫一個類並繼承View。
所以在這份文件裡，我多寫了一個LabelView來繼承View。
該類別Code如下(可快速跳過這段)︰
package com.test.testcustomize;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
public class LabelView extends View {
private Paint mTextPaint;
private String mText;
private int mAscent;
public LabelView(Context context) {
super(context);
initLabelView();
}
public LabelView(Context context, AttributeSet attrs) {
super(context, attrs);
initLabelView();
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.LabelView);
CharSequence s = a.getString(R.styleable.LabelView_text);
if(s!=null){
setText(s.toString());
}
setTextColor(a.getColor(R.styleable.LabelView_textColor, 0xFF0000FF));
int textSize = a.getDimensionPixelOffset(R.styleable.LabelView_textSize, 0);
if (textSize > 0) {
setTextSize(textSize);
}
a.recycle();
}
private void initLabelView(){
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setTextSize(24);
mTextPaint.setColor(0xFF000000);
setPadding(3,3,3,3);
}
private void setText(String str){
mText = str;
requestLayout();
invalidate(); //每呼叫一次就會重新繪圖onDraw()
}
/**
* Sets the text size for this label
* @param size Font size
*/
public void setTextSize(int size) {
mTextPaint.setTextSize(size);
requestLayout();
invalidate(); //每呼叫一次就會重新繪圖onDraw()
}
/**
* Sets the text color for this label.
* @param color ARGB value for the text
*/
public void setTextColor(int color) {
mTextPaint.setColor(color);
invalidate(); //每呼叫一次就會重新繪圖onDraw()
}
/**
* @see android.view.View#measure(int, int)
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(measureWidth(widthMeasureSpec),
measureHeight(heightMeasureSpec));
}
/**
* Determines the width of this view
* @param measureSpec A measureSpec packed into an int
* @return The width of the view, honoring constraints from measureSpec
*/
private int measureWidth(int measureSpec) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
// We were told how big to be
result = specSize;
} else {
// Measure the text
result = (int) mTextPaint.measureText(mText) + getPaddingLeft()
+ getPaddingRight();
if (specMode == MeasureSpec.AT_MOST) {
// Respect AT_MOST value if that was what is called for by measureSpec
result = Math.min(result, specSize);
}
}
return result;
}
/**
* Determines the height of this view
* @param measureSpec A measureSpec packed into an int
* @return The height of the view, honoring constraints from measureSpec
*/
private int measureHeight(int measureSpec) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
mAscent = (int) mTextPaint.ascent();
Log.i("tag", "Height Ascent: "+mAscent);
if (specMode == MeasureSpec.EXACTLY) {
// We were told how big to be
result = specSize;
} else {
// Measure the text (beware: ascent is a negative number)
result = (int) (-mAscent + mTextPaint.descent()) + getPaddingTop()
+ getPaddingBottom();
Log.i("tag", "Height mTextPaint.descent(): "+mTextPaint.descent());
if (specMode == MeasureSpec.AT_MOST) {
// Respect AT_MOST value if that was what is called for by measureSpec
result = Math.min(result, specSize);
}
}
return result;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawText(mText, getPaddingLeft(), getPaddingTop() - mAscent, mTextPaint);
}
}
Code很長，請聽我一一道來。
這段Code的基本骨架是這樣的︰
1.一開始，宣告2個建構式︰
//建構式1
public LabelView(Context context) {
super(context);
initLabelView(); //設定文字的最初樣式
}
//建構式2
public LabelView(Context context, AttributeSet attrs) {
super(context, attrs);
initLabelView(); //設定文字的最初樣式
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.LabelView);
CharSequence s = a.getString(R.styleable.LabelView_text);
if(s!=null){
setText(s.toString());
}
setTextColor(a.getColor(R.styleable.LabelView_textColor, 0xFF0000FF));
int textSize = a.getDimensionPixelOffset(R.styleable.LabelView_textSize, 0);
if (textSize > 0) {
setTextSize(textSize);
}
a.recycle();
}
技術文件裡提到，
如果我們想對我們想呈現的View初始化，
那麼我們就應該
在建構式裡做基本的設定。
先不看第2段建構式的龐大內容，
這2個建構式都有一個共通點︰
都呼叫了
initLabelView();
該函式的內容如下︰
private void initLabelView(){
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true); //設定反鉅齒
mTextPaint.setTextSize(24); //設定預設大小為24
mTextPaint.setColor(0xFF000000); //設定預設的顏色為黑字體
setPadding(3,3,3,3); //設定在版面上下左右各距離3
}
我們在輸入文字的一開始，
馬上呼叫了Paint，
並對這個我們自訂的View做了初始化．
回到第2個建構式︰
//建構式2
public LabelView(Context context, AttributeSet attrs) {
super(context, attrs);
initLabelView();
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.LabelView);
CharSequence s = a.getString(R.styleable.LabelView_text);
if(s!=null){
setText(s.toString());
}
setTextColor(a.getColor(R.styleable.LabelView_textColor, 0xFF0000FF));
int textSize = a.getDimensionPixelOffset(R.styleable.LabelView_textSize, 0);
if (textSize > 0) {
setTextSize(textSize);
}
a.recycle();
}
第6行︰將我們自己做的attrs.xml呼叫進來
第7行︰取出我們在main.xml裡設定的字
第8行︰如果有取到字，則呼叫setText()函式
第11行︰設定文字最後會呈現的顏色，如果在main.xml裡面沒有設定的話，
就用這裡的預設值︰0xFF0000FF，設為藍色
第13行︰設定文字大小
第18行︰讓我們自訂的attrs可以重覆被使用(因為以後也可能被用到啊！)
Android在畫出一個View時，
原理是這樣子的︰
1.不斷的呼叫我們程式裡的onMeasure()函式去量測現在要畫的View的尺寸會有多大︰
/**
* @see android.view.View#measure(int, int)
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(measureWidth(widthMeasureSpec),
measureHeight(heightMeasureSpec));
}
2.最後呼叫onDraw()繪圖
當我在試驗時，程式為了畫出藍色字體，
至少呼叫了3次的onMeasure()才呼叫onDraw()。
所以我們得知︰
系統在開始onDraw()前，
會不斷的呼叫onMeasure()去跟Layout問現在要畫的藍色字體，
範圍是多大。
所以，我們就要將尺寸的算法在這裡交待一下了︰
/**
* 量測這個View的寬
* @param measureSpec A measureSpec packed into an int
* @return The width of the view, honoring constraints from measureSpec
*/
private int measureWidth(int measureSpec) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
// We were told how big to be
result = specSize;
} else {
// Measure the text
result = (int) mTextPaint.measureText(mText) + getPaddingLeft()
+ getPaddingRight();
if (specMode == MeasureSpec.AT_MOST) {
// Respect AT_MOST value if that was what is called for by measureSpec
result = Math.min(result, specSize);
}
}
return result;
}
/**
* 量測這個View的高
* @param measureSpec A measureSpec packed into an int
* @return The height of the view, honoring constraints from measureSpec
*/
private int measureHeight(int measureSpec) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
mAscent = (int) mTextPaint.ascent();
Log.i("tag", "Height Ascent: "+mAscent);
if (specMode == MeasureSpec.EXACTLY) {
// We were told how big to be
result = specSize;
} else {
// Measure the text (beware: ascent is a negative number)
result = (int) (-mAscent + mTextPaint.descent()) + getPaddingTop()
+ getPaddingBottom();
Log.i("tag", "Height mTextPaint.descent(): "+mTextPaint.descent());
if (specMode == MeasureSpec.AT_MOST) {
// Respect AT_MOST value if that was what is called for by measureSpec
result = Math.min(result, specSize);
}
}
return result;
}
第6行︰一開始系統傳進來的引數measureSpec是從main.xml裡抓過來的
第9行︰在MeasureSpec.getMode()裡會抓到的尺寸模式，有以下3種
Mode
|
Value
|
備註
|
main.xml裡相對應的設定
|
AT_MOST
|
-2147483648
|
子視圖可自行調整尺寸大小
|
android:layout_width或height 設為"wrap_content"時
|
EXACTLY
|
1073741824
|
父Layout已經很明確的定義該子視圖的大小
|
android:layout_width或height有自訂大小或為"fill_parent"時
|
UNSPECIFIED
|
0
|
父Layout未指定大小，子視圖可自行調整。
|
|
第10行︰你在main.xml裡真實設定的尺寸。
幾次的onMeasure()呼叫完後，就跑去呼叫onDraw()開始繪圖了。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawText(mText, getPaddingLeft(), getPaddingTop() - mAscent, mTextPaint);
}
挪，結束了。
三、結論
1.在res/values/新增一個自訂的attrs.xml
2.在main.xml裡使用他們
3.繼承View，並在
(1)建構式 裡宣告初始值
(2)在onMeasure()裡交待清楚這個自創的View應該有多大
(3)在onDraw()裡開始繪圖
這樣子，你就能為所欲為，畫出任何你預設想呈現出來的View了。
有點複雜，但搞懂了就簡單了。
備註︰
來源︰百度知道
1.基準點是baseline
2.ascent：是baseline之上至字符最高處的距離
3.descent：是baseline之下至字符最低處的距離
4.leading：是上一行字符的descent到下一行的ascent之間的距離，也就是相鄰行間的空白距離
5.top：指的是最高字符到baseline的值，即ascent的最大值
6.bottom：指最低字符到baseline的值，即descent的最大值
