前言
根據啟艦大大 的博客所學習的自定義View。
一、測量
1. MeasureSpec
MeasureSpec.getMode(int spec) //獲取MODE
MeasureSpec.getSize(int spec) //獲取數值
- MODE:
- MeasureSpec.AT_MOST(至多):子元素至多達到指定大小的值->wrap_content。
- MeasureSpec.EXACTLY(完全):父元素決定自元素的確切大小,子元素將被限定在給定的邊界里而忽略它本身大小->match_parent。
- MeasureSpec.UNSPECIFIED(未指定):父元素不對子元素施加任何束縛,子元素可以得到任意想要的大小->具體值。
2. onMeasure()
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
一般用法舉例:
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);
int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);
//經過計算,控件所占的寬和高分別對應width和height
…………
setMeasuredDimension((measureWidthMode == MeasureSpec.EXACTLY) ? measureWidth: width, (measureHeightMode == MeasureSpec.EXACTLY) ? measureHeight: height);
}
3. measureChild與measureChildren
measureChild用來測量子View的寬高
//
protected void measureChild(View child, int parentWidthMeasureSpec,
int parentHeightMeasureSpec);
measureChildren是用來測量所有子View的寬高
protected void measureChildren(int widthMeasureSpec, int heightMeasureSpec) {
final int size = mChildrenCount;
final View[] children = mChildren;
for (int i = 0; i < size; ++i) {
final View child = children[i];
if ((child.mViewFlags & VISIBILITY_MASK) != GONE) {
measureChild(child, widthMeasureSpec, heightMeasureSpec);
}
}
}
二、onLayout():實現所有子控件布局的函數
protected void onLayout(boolean changed, int left, int top, int right, int bottom)
自定義實現簡易的縱向LinearLayout:
public class MyLinear extends ViewGroup {
public MyLinear(Context context) {
this(context, null);
}
public MyLinear(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
int widthMode = MeasureSpec.getMode(measureWidth);
int heightMode = MeasureSpec.getMode(measureHeight);
int height=0;
int width=0;
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
measureChild(child,widthMeasureSpec,heightMeasureSpec);
int childHeight=child.getMeasuredHeight();
int childWidth=child.getMeasuredWidth();
height+=childHeight;
width=Math.max(width,childWidth);
}
setMeasuredDimension((widthMode==MeasureSpec.EXACTLY)?measureWidth:width,(heightMode==MeasureSpec.EXACTLY)?measureHeight:height);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int childCount = getChildCount();
int top = 0;
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
child.layout(l, top, l + child.getMeasuredWidth(), top + child.getMeasuredHeight());
top += child.getMeasuredHeight();
}
}
}
<com.crossroads.demo.demo.MyLinear
android:background="#00ff00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<TextView
android:background="@color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="自定義"
/>
<TextView
android:background="@color/colorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="實現"
/>
<TextView
android:background="@color/colorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="簡易LinearLayout效果"
/>
</com.crossroads.demo.demo.MyLinear>
效果圖
getMeasuredWidth()與getWidth()區別
- getMeasureWidth()方法在measure()過程結束后就可以獲取到了,
而getWidth()方法要在layout()過程結束后才能獲取到。
- getMeasureWidth()方法中的值是通過setMeasuredDimension()方法來進行設置的,而getWidth()方法中的值則是通過layout(left,top,right,bottom)方法設置的。
三、獲取子控件Margin
上邊的例子中,發現設置margin無效,那么該怎么設置margin呢?
只需要重寫下邊這三個方法就可以獲取到Margin啦
@Override
protected LayoutParams generateLayoutParams(LayoutParams p) {
return new MarginLayoutParams(p);
}
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(),attrs);
}
@Override
protected LayoutParams generateDefaultLayoutParams() {
return new MarginLayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
}
然后,onLayout和onMeasure也需要將margin計算進去滴
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
int widthMode = MeasureSpec.getMode(measureWidth);
int heightMode = MeasureSpec.getMode(measureHeight);
int height=0;
int width=0;
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
measureChild(child,widthMeasureSpec,heightMeasureSpec);
MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();
int childHeight=child.getMeasuredHeight()+layoutParams.bottomMargin+layoutParams.topMargin;
int childWidth=child.getMeasuredWidth()+layoutParams.leftMargin+layoutParams.rightMargin;
height+=childHeight;
width=Math.max(width,childWidth);
}
setMeasuredDimension((widthMode==MeasureSpec.EXACTLY)?measureWidth:width,(heightMode==MeasureSpec.EXACTLY)?measureHeight:height);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int childCount = getChildCount();
int top = 0;
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();
child.layout(l+layoutParams.leftMargin, top+layoutParams.topMargin, l + child.getMeasuredWidth()+layoutParams.leftMargin, top + child.getMeasuredHeight()+layoutParams.topMargin);
top += child.getMeasuredHeight()+layoutParams.topMargin+layoutParams.bottomMargin;
}
}
<com.crossroads.demo.demo.MyLinear
android:background="#00ff00"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<TextView
android:layout_marginTop="5dp"
android:background="@color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="自定義"
/>
<TextView
android:layout_margin="10dp"
android:background="@color/colorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="實現"
/>
<TextView
android:layout_marginBottom="10dp"
android:background="@color/colorPrimary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="簡易LinearLayout效果"
/>
</com.crossroads.demo.demo.MyLinear>
flow
四、接下來完成這個效果
自適應
代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="180dp"/>
<padding
android:bottom="3dp"
android:left="5dp"
android:right="5dp"
android:top="3dp"/>
<solid android:color="#fff"/>
</shape>
public class FlowLayout extends ViewGroup {
public FlowLayout(Context context) {
super(context);
}
public FlowLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
int heightMode = MeasureSpec.getMode(measureHeight);
int height = 0;//viewGroup高度
int lineWidth = 0;//累加當前行的行寬
int lineHeight = 0;//當前行的行高
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
measureChild(child, widthMeasureSpec, heightMeasureSpec);
MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();
int childWidthWithMargin = child.getMeasuredWidth() + layoutParams.leftMargin + layoutParams.rightMargin;
int childHeightWithMargin = child.getMeasuredHeight() + layoutParams.topMargin + layoutParams.bottomMargin;
if (lineWidth + childWidthWithMargin > measureWidth) {
//換行
lineWidth = childWidthWithMargin;
height += lineHeight;
lineHeight = childHeightWithMargin;
}
else {
//不換行
lineHeight = Math.max(childHeightWithMargin, lineHeight);
lineWidth += childWidthWithMargin;
}
//最后一行還沒有計算呢
if (i == childCount - 1) {
height += lineHeight;
}
}
setMeasuredDimension(measureWidth, (heightMode == MeasureSpec.EXACTLY) ? measureHeight : height);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int childCount = getChildCount();
int top = 0;
int lineWidth = 0, lineHeight = 0;
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();
int childWidthWithMargin = child.getMeasuredWidth() + layoutParams.leftMargin + layoutParams.rightMargin;
int childHeightWithMargin = child.getMeasuredHeight() + layoutParams.topMargin + layoutParams.bottomMargin;
if (lineWidth + childWidthWithMargin > getMeasuredWidth()) {
//換行
top += lineHeight;
child.layout(layoutParams.leftMargin, top + layoutParams.topMargin, layoutParams.leftMargin + child.getMeasuredWidth(), top + layoutParams.topMargin + child.getMeasuredHeight());
lineWidth = childWidthWithMargin;
lineHeight = childHeightWithMargin;
}
else {
//不換行
child.layout(lineWidth + layoutParams.leftMargin, top + layoutParams.topMargin, lineWidth + layoutParams.leftMargin + child.getMeasuredWidth(), top + layoutParams.topMargin + child.getMeasuredHeight());
lineHeight = Math.max(childHeightWithMargin, lineHeight);
lineWidth += childWidthWithMargin;
}
}
}
@Override
protected LayoutParams generateLayoutParams(LayoutParams p) {
return new MarginLayoutParams(p);
}
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
@Override
protected LayoutParams generateDefaultLayoutParams() {
return new MarginLayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
}
}
<com.crossroads.demo.demo.FlowLayout
android:id="@+id/flowLayout"
android:background="#00ff00"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
final FlowLayout flowLayout = (FlowLayout) findViewById(R.id.flowLayout);
flowLayout.removeAllViews();
for (int i = 0; i < 10; i++) {
final TextView child = new TextView(this);
if (i % 7 == 0 || i % 7 == 1)
child.setText("兩只老虎" + i);
else if (i % 7 == 2 || i % 7 == 3)
child.setText("跑得快" + i);
else if (i % 7 == 4 )
child.setText("一只沒有尾巴,一只沒有眼睛" + i);
else
child.setText("真奇怪" + i);
child.setTextSize(20);
child.setBackgroundResource(R.drawable.roundrect);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
params.setMargins(3, 4, 5, 7);
child.setLayoutParams(params);
child.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
flowLayout.removeView(child);
}
});
flowLayout.addView(child);
}
}