這個系列是老外寫的,干貨!翻譯出來一起學習。如有不妥,不吝賜教!
- Android自定義視圖一:擴展現有的視圖,添加新的XML屬性
- Android自定義視圖二:如何繪制內容
- Android自定義視圖三:給自定義視圖添加“流暢”的動畫
- Android自定義視圖四:定制onMeasure強制顯示為方形
上一篇開發之后的效果如上圖。不過看著這張圖,需要注意的不是我們自定義視圖展示了什么,而是這個視圖的大小和位置。你會看到這個折線圖有一個特定的大?。╯ize)。這個size是怎么定的呢?現在的代碼是使用了一個豎直方向的
LinearLayout
,折線圖和他下面的TextView
使用layout_weight
屬性平分了他們所在的LinearLayout
的高度。那么如果我們刪掉了TextView
和全部的layout_weight
,并把折線圖的高度設定為wrap_content
會發生什么呢?是的,以上修改之后整個的圖就變成了這樣。雖然使用了
wrap_content
的高度,但是效果是填滿了整個LinearLayout
。這就是View的默認布局行為,但是,如果我們要改變一下呢?
View的Layout
自定義視圖顯示在屏幕上一共分三步:measure(測量),layout(布局),draw(繪制)。基本上一個自定義視圖在測量這一步計算大小,之后可以通過getMeasureWidth
和getMeasureHeight
得到View的寬度和高度。在布局計算這個自定義視圖的左上和右下坐標以及實際的寬度和高度,最后根據以上layout步驟獲得的數據調用onDraw
方法把View繪制在屏幕上。
所以要修改size,也就是自定義視圖中修改默認的行為,就需要override onMeasure()
方法。一般的通用做法是:
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
var widthSpecMode = MeasureSpec.getMode(widthMeasureSpec)
var widthSpecSize = MeasureSpec.getSize(widthMeasureSpec)
var heightSpecMode = MeasureSpec.getMode(heightMeasureSpec)
var heightSpecSize = MeasureSpec.getSize(heightMeasureSpec)
if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) {
// set default width and height values you defined
setMeasuredDimension(mDefaultWidth, mDefaultHeight)
} else if (widthSpecMode == MeasureSpec.AT_MOST) {
// set default width value and calculated `heightSpecSize` as height
setMeasuredDimension(mDefaultWidth, heightSpecSize)
} else if (heightSpecMode == MeasureSpec.AT_MOST) {
// set calculated `widthSpecSize` as width and default height
setMeasuredDimension(widthSpecSize, mDefaultHeight)
}
}
簡單理解MeasureSpec.AT_MOST
就是你給折線圖的layout_width
或者layout_height
設置了wrap_content
,系統不知道精確的寬度、高度是多少的時候的一個標記。如果有具體的50dp, 100dp的時候,這個標記的值為MeasureSpec.EXACTLY
。一般,一個view的寬度、高度只有這兩種標記。
View的寬、高度測量分別處理三種情況:
- 如果寬、高度都是
AT_MOST
的時候,寬度和高度設置為默認值。 - 寬度為
AT_MOST
高度不是的時候,寬度設置為默認值,高度設置為測量的值heightSpecSize
。 - 寬度為精確值,高度為
AT_MOST
的時候,寬度設置為widthSpecSize
,高度設置為默認值。
而我們這里則是意外的簡單。因為要設置為正方形,所以使用寬度和高度中相對較小的那個值來作為寬、高度共同的值就可以了:
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
var size = 0
var width = getMeasuredWidth()
var height = getMeasuredHeight()
if (width > height) {
size = height
} else {
size = width
}
setMeasuredDimension(size, size)
}
如前文所說,我們要把折線圖這個自定義視圖設置為正方形。所以,不管測量的Mode是如何的,只要用寬、高中的最小值就可以了。
而上面說到的layout部分,對于有子view的`View`比較有用,
也就是說對于繼承自`ViewGroup`的`View`來說比較有用。
我們的折線圖知識一個單純的不能更單純的`View`。
我們前面在onDraw
方法使用的getWidth()
和getHeight()
在onMeasure()
方法中都是不可用的。因為這個時候正在計算寬、高度。在這個方法里只能取到getMeasuredWidth()
和getMeasuredHeight()
。
override onMeasure
方法就一定要在最后調用setMeasuredDimension
方法。調用setMeasuredDimension
方法是告訴父view當前view的測量高度是多少。如果不調用這個方法的話會拋異常。
修改之后的布局,寬度match_parent
,高度wrap_content
。不必要的屬性都略掉了。
<RelativeLayout>
<LinearLayout>
<Button android:text="walking" />
<Button android:text="Running" />
<Button android:text="Cycling" />
</LinearLayout>
<demo.customview.customviewdemo.Views.SquareLineChartView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
效果:
支持任意寬高比例
一個正方形的View已經非常實用了。比如繼承ImageView
之后像上面一樣override了onMeasure()
方法就可以得到一個一直都是正方形顯示的View。那么,既然我們已經支持了寬、高1:1了,為什么不支持任意的寬高比呢。
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
var width = getMeasuredWidth()
var height = getMeasuredHeight()
var widthWithoutPadding = width - paddingLeft - paddingRight
var heightWithoutPadding = height - paddingTop - paddingBottom
var maxWidth = (heightWithoutPadding * RATIO).toInt()
var maxHeight = (widthWithoutPadding / RATIO).toInt()
if (widthWithoutPadding > maxWidth) {
width = maxWidth + paddingLeft + paddingRight
} else {
height = maxHeight + paddingTop + paddingBottom
}
setMeasuredDimension(width, height)
}
上面的代碼就可以支持任意的寬高比了??纯葱Чū壤?:3):