最終效果圖
效果圖.png
- FlowLayout自定義控件
自定義view繼承ViewGroup,重寫(xiě)onMeasure（），onLayout（）方法冲杀。可根據(jù)子元素寬度動(dòng)態(tài)測(cè)量寬高
public class FlowLayout extends ViewGroup {
public FlowLayout(Context context) {
super(context);
}
public FlowLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//遍歷去調(diào)用所有子元素的measure方法（child.getMeasuredHeight()才能獲取到值铐殃，否則為0）
measureChildren(widthMeasureSpec, heightMeasureSpec);
int measuredWidth = 0, measuredHeight = 0;
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int widtMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
//由于計(jì)算子view所占寬度渊迁，這里傳值需要自身減去PaddingRight寬度，PaddingLeft會(huì)在接下來(lái)計(jì)算子元素位置時(shí)加上
Map<String, Integer> compute = compute(widthSize-getPaddingRight());
//EXACTLY模式：對(duì)應(yīng)于給定大小或者match_parent情況
if (widtMode == MeasureSpec.EXACTLY) {
measuredWidth = widthSize;
//AT_MOS模式：對(duì)應(yīng)wrap-content（需要手動(dòng)計(jì)算大小剃盾，否則相當(dāng)于match_parent）
} else if (widtMode == MeasureSpec.AT_MOST) {
measuredWidth = compute.get("allChildWidth");
}
if (heightMode == MeasureSpec.EXACTLY) {
measuredHeight = heightSize;
} else if (heightMode == MeasureSpec.AT_MOST) {
measuredHeight = compute.get("allChildHeight");
}
//設(shè)置flow的寬高
setMeasuredDimension(measuredWidth,measuredHeight);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
Rect rect = (Rect) getChildAt(i).getTag();
child.layout(rect.left,rect.top,rect.right,rect.bottom);
}
}
/**
* 測(cè)量過(guò)程
* @param flowWidth 該view的寬度
* @return 返回子元素總所占寬度和高度（用于計(jì)算Flowlayout的AT_MOST模式設(shè)置寬高）
*/
private Map<String, Integer> compute(int flowWidth) {
//是否是單行
boolean aRow = true;
MarginLayoutParams marginParams;//子元素margin
int rowsWidth = getPaddingLeft();//當(dāng)前行已占寬度(注意需要加上paddingLeft)
int columnHeight =getPaddingTop();//當(dāng)前行頂部已占高度(注意需要加上paddingTop)
int rowsMaxHeight = 0;//當(dāng)前行所有子元素的最大高度（用于換行累加高度）
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
//獲取元素測(cè)量寬度和高度
int measuredWidth = child.getMeasuredWidth();
int measuredHeight = child.getMeasuredHeight();
//獲取元素的margin
marginParams = (MarginLayoutParams) child.getLayoutParams();
//子元素所占寬度 = MarginLeft+ child.getMeasuredWidth+MarginRight 注意此時(shí)不能child.getWidth,因?yàn)榻缑鏇](méi)有繪制完成腺占，此時(shí)wdith為0
int childWidth = marginParams.leftMargin + marginParams.rightMargin + measuredWidth;
int childHeight = marginParams.topMargin + marginParams.bottomMargin + measuredHeight;
//判斷是否換行： 該行已占大小+該元素大小>父容器寬度 則換行
rowsMaxHeight = Math.max(rowsMaxHeight, childHeight);
//換行
if (rowsWidth + childWidth > flowWidth) {
//重置行寬度
rowsWidth = getPaddingLeft()+getPaddingRight();
//累加上該行子元素最大高度
columnHeight += rowsMaxHeight;
//重置該行最大高度
rowsMaxHeight = childHeight;
aRow = false;
}
//累加上該行子元素寬度
rowsWidth += childWidth;
//判斷時(shí)占的寬段時(shí)加上margin計(jì)算，設(shè)置頂點(diǎn)位置時(shí)不包括margin位置痒谴，不然margin會(huì)不起作用衰伯，這是給View設(shè)置tag,在onlayout給子元素設(shè)置位置再遍歷取出
child.setTag(new Rect(rowsWidth - childWidth + marginParams.leftMargin, columnHeight + marginParams.topMargin, rowsWidth - marginParams.rightMargin, columnHeight + childHeight - marginParams.bottomMargin));
}
//返回子元素總所占寬度和高度（用于計(jì)算Flowlayout的AT_MOST模式設(shè)置寬高）
Map<String, Integer> flowMap = new HashMap<>();
//單行
if (aRow) {
flowMap.put("allChildWidth", rowsWidth);
} else {
//多行
flowMap.put("allChildWidth", flowWidth);
}
//FlowLayout測(cè)量高度 = 當(dāng)前行頂部已占高度 +當(dāng)前行內(nèi)子元素最大高度+FlowLayout的PaddingBottom
flowMap.put("allChildHeight", columnHeight+rowsMaxHeight+getPaddingBottom());
return flowMap;
}
- xml
<com.ys.view.widget.FlowLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#e8e8e8"
android:padding="5dp"
android:id="@+id/flow"/>
- Activity調(diào)用
public class MainActivity extends AppCompatActivity {
private FlowLayout flowLayout;
private List<String> list=new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
flowLayout = findViewById(R.id.flow);
for (int i = 0; i <10; i++) {
list.add("Android");
list.add("Java");
list.add("IOS");
list.add("python");
}
//往容器內(nèi)添加TextView數(shù)據(jù)
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(10, 5, 10, 5);
if (flowLayout != null) {
flowLayout.removeAllViews();
}
for (int i = 0; i < list.size(); i++) {
TextView tv = new TextView(this);
tv.setPadding(28, 10, 28, 10);
tv.setText(loveList.get(i));
tv.setMaxEms(10);
tv.setSingleLine();
tv.setBackgroundResource(R.drawable.selector_playsearch);
tv.setLayoutParams(layoutParams);
flowLayout.addView(tv, layoutParams);
}
}
}
