Android FlowLayout流式布局實(shí)現(xiàn)詳解

更新時(shí)間：2020年09月23日 08:15:06 作者：小肥洋_

這篇文章主要為大家詳細(xì)介紹了Android FlowLayout流式布局的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Android FlowLayout流式布局的具體代碼，供大家參考，具體內(nèi)容如下

最近使用APP的時(shí)候經(jīng)?？吹接?/p>

這種流式布局 ,今天我就跟大家一起來動(dòng)手?jǐn)]一個(gè)這種自定義控件.

首先說一下自定義控件的流程:

自定義控件一般要么繼承View要么繼承ViewGroup

View的自定義流程:

繼承一個(gè)View-->重寫onMeasure方法-->重寫onDraw方法-->定義自定義屬性-->處理手勢(shì)操作

ViewGroup的自定義流程:

繼承一個(gè)ViewGroup-->重寫onMeasure方法-->重寫onLayout-->重寫onDraw方法->定義自定義屬性-->處理手勢(shì)操作

我們可以看到自定義View和自定義ViewGroup略微有些不同,自定義ViewGroup多了個(gè)onlayout方法,那么這些方法都有什么作用呢？這里由于篇幅的問題不做過多的描述，簡(jiǎn)單的說

onMeasure:用來計(jì)算,計(jì)算自身顯示在頁(yè)面上的大小

onLayout:用來計(jì)算子View擺放的位置,因?yàn)閂iew已經(jīng)是最小單元了,所以沒有字View,所以沒有onLayout方法

onDraw:用來繪制你想展示的東西

定義自定義屬性就是暴露一些屬性給外部調(diào)用

好了,了解了自定義View的基本自定義流程,我們可以知道我們應(yīng)該需要自定義一個(gè)ViewGroup就可以滿足該需求.

首先自定義一個(gè)View命名為FlowLayout繼承ViewGroup

public class FlowLayout extends ViewGroup {
 public FlowLayout(Context context) {
 this(context,null);
 }
 
 public FlowLayout(Context context, AttributeSet attrs) {
 this(context, attrs,0);
 }
 
 public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 }
 
 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
 int count = getChildCount();
 for (int i = 0; i < count; i++) {
 getChildAt(i).layout(l,t,r,b);
 }
 }
}

可以看到onLayout是必須重寫的,不然系統(tǒng)不知道你這個(gè)ViewGroup的子View擺放的位置.

然后XML中引用

<test.hxy.com.testflowlayout.FlowLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:id="@+id/mFlowLayout"
 android:layout_margin="10dp"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />

Activity中設(shè)置數(shù)據(jù)

protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 FlowLayout mFlowLayout = (FlowLayout) findViewById(R.id.mFlowLayout);
 List<String> list = new ArrayList<>();
 list.add("java");
 list.add("javaEE");
 list.add("javaME");
 list.add("c");
 list.add("php");
 list.add("ios");
 list.add("c++");
 list.add("c#");
 list.add("Android");
 for (int i = 0; i < list.size(); i++) {
 View inflate = LayoutInflater.from(this).inflate(R.layout.item_personal_flow_labels, null);
 TextView label = (TextView) inflate.findViewById(R.id.tv_label_name);
 label.setText(list.get(i));
 mFlowLayout.addView(inflate);
 }
 }

運(yùn)行一下:

咦!!!這時(shí)候發(fā)現(xiàn)我們添加的子View竟然沒添加進(jìn)去?這是為什么呢?

這時(shí)候就不得不說一下onMeasure方法了,我們重寫一下onMeasure然后在看一下:

@Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int totalWidth = MeasureSpec.getSize(widthMeasureSpec);
 int totalHeight = MeasureSpec.getSize(heightMeasureSpec);
 
 int sizeWidth = MeasureSpec.getSize(widthMeasureSpec) - getPaddingRight() - getPaddingLeft();
 int sizeHeight = MeasureSpec.getSize(heightMeasureSpec) - getPaddingTop() - getPaddingBottom();
 
 int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
 int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
 final int count = getChildCount();
 for (int i = 0; i < count; i++) {
 final View child = getChildAt(i);
 int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(sizeWidth, modeWidth == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : modeWidth);
 int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(sizeHeight, modeHeight == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : modeHeight);
 // 測(cè)量child
 child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
 }
 setMeasuredDimension(totalWidth, resolveSize(totalHeight, heightMeasureSpec));
 }

在運(yùn)行一下:

我們可以看到確實(shí)是有View顯示出來了,可是為什么只有一個(gè)呢?

其實(shí)這里顯示的不是只有一個(gè),而是所有的子View都蓋在一起了,所以看起來就像只有一個(gè)View,這是因?yàn)槲覀兊膐nLayout里面getChildAt(i).layout(l,t,r,b);所有的子View擺放的位置都是一樣的,所以這邊要注意一下,自定義ViewGroup的時(shí)候一般onLayout和onMeasure都必須重寫,因?yàn)檫@兩個(gè)方法一個(gè)是計(jì)算子View的大小,一個(gè)是計(jì)算子View擺放的位置,缺少一個(gè)子View都會(huì)顯示不出來.

接下來我們?cè)诟膶懸幌耾nLayout方法讓子View都顯示出來

@Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
 int count = getChildCount();
 for (int i = 0; i < count; i++) {
 getChildAt(i).layout(l,t,r,b);
 l+=getChildAt(i).getMeasuredWidth();
 }
 }

這樣子View就不會(huì)重疊在一起了,可是又發(fā)現(xiàn)一個(gè)問題,就是子View都在排在同一行了,我們?cè)趺床拍茏屪覸iew計(jì)算排滿一行就自動(dòng)換行呢?

接下來我們定義一個(gè)行的類Line來保存一行的子View:

class Line{
 int mWidth = 0;// 該行中所有的子View累加的寬度
 int mHeight = 0;// 該行中所有的子View中高度的那個(gè)子View的高度
 List<View> views = new ArrayList<View>();
 
 public void addView(View view) {// 往該行中添加一個(gè)
 views.add(view);
 mWidth += view.getMeasuredWidth();
 int childHeight = view.getMeasuredHeight();
 mHeight = mHeight < childHeight ? childHeight : mHeight;//高度等于一行中最高的View
 }
 //擺放行中子View的位置
 public void Layout(int l, int t){
 
 }
 
 }

這樣我們就可以讓FlowLayout專門對(duì)Line進(jìn)行擺放,然后Line專門對(duì)本行的View進(jìn)行擺放

接下來針對(duì)Line我們重新寫一下onMeasure和onLayout方法

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int totalWidth = MeasureSpec.getSize(widthMeasureSpec);
 int sizeWidth = MeasureSpec.getSize(widthMeasureSpec) - getPaddingRight() - getPaddingLeft();
 int sizeHeight = MeasureSpec.getSize(heightMeasureSpec) - getPaddingTop() - getPaddingBottom();
 restoreLine();// 還原數(shù)據(jù)，以便重新記錄
 int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
 int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
 final int count = getChildCount();
 for (int i = 0; i < count; i++) {
 final View child = getChildAt(i);
 if (child.getVisibility() == View.GONE) {
 break;
 }
 int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(sizeWidth, modeWidth == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : modeWidth);
 int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(sizeHeight, modeHeight == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : modeHeight);
 // 測(cè)量child
 child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
 if (mLine == null) {
 mLine = new Line();
 }
 int measuredWidth = child.getMeasuredWidth();
 mUsedWidth += measuredWidth;// 增加使用的寬度
 if (mUsedWidth < sizeWidth) { //當(dāng)本行的使用寬度小于行總寬度的時(shí)候直接加進(jìn)line里面
 mLine.addView(child);
 mUsedWidth += mHorizontalSpacing;// 加上間隔
 if (mUsedWidth >= sizeWidth){
 if (!newLine()){
 break;
 }
 }
 }else {// 使用寬度大于總寬度。需要換行
 if (mLine.getViewCount() == 0){//如果這行一個(gè)View也沒有超過也得加進(jìn)去,保證一行最少有一個(gè)View
 mLine.addView(child);
 if (!newLine()) {// 換行
 break;
 }
 }else {
 if (!newLine()) {// 換行
 break;
 }
 mLine.addView(child);
 mUsedWidth += measuredWidth + mHorizontalSpacing;
 }
 }
 }
 if (mLine !=null && mLine.getViewCount() > 0 && !mLines.contains(mLine)){
 mLines.add(mLine);
 }
 int totalHeight = 0;
 final int linesCount = mLines.size();
 for (int i = 0; i < linesCount; i++) {// 加上所有行的高度
 totalHeight += mLines.get(i).mHeight;
 }
 totalHeight += mVerticalSpacing * (linesCount - 1);// 加上所有間隔的高度
 totalHeight += getPaddingTop() + getPaddingBottom();// 加上padding
 // 設(shè)置布局的寬高，寬度直接采用父view傳遞過來的最大寬度，而不用考慮子view是否填滿寬度，因?yàn)樵摬季值奶匦跃褪翘顫M一行后，再換行
 // 高度根據(jù)設(shè)置的模式來決定采用所有子View的高度之和還是采用父view傳遞過來的高度
 setMeasuredDimension(totalWidth, resolveSize(totalHeight, heightMeasureSpec));
 }

可能有點(diǎn)長(zhǎng),不過注釋都寫得比較清楚了,簡(jiǎn)單的說就是遍歷計(jì)算子View的寬高,動(dòng)態(tài)加入行中,如果View的寬大于剩余的行寬就在取一行放下,接下來我們?cè)谥貙懸恍﹐nLayout:

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
 if (!mNeedLayout && changed){
 mNeedLayout = false;
 int left = getPaddingLeft();//獲取最初的左上點(diǎn)
 int top = getPaddingTop();
 int count = mLines.size();
 for (int i = 0; i < count; i++) {
 Line line = mLines.get(i);
 line.LayoutView(left,top);//擺放每一行中子View的位置
 top +=line.mHeight+ mVerticalSpacing;//為下一行的top賦值
 }
 }
 }

由于我們把子View的擺放都放在Line中了,所以onLayout比較簡(jiǎn)單,接下來我們看一下Line的LayoutView方法:

public void LayoutView(int l, int t) {
 int left = l;
 int top = t;
 int count = getViewCount();
 int layoutWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();//行的總寬度
 //剩余的寬度，是除了View和間隙的剩余空間
 int surplusWidth = layoutWidth - mWidth - mHorizontalSpacing * (count - 1);
 if (surplusWidth >= 0) {
 for (int i = 0; i < count; i++) {
 final View view = views.get(i);
 int childWidth = view.getMeasuredWidth();
 int childHeight = view.getMeasuredHeight();
 //計(jì)算出每個(gè)View的頂點(diǎn)，是由最高的View和該View高度的差值除以2
 int topOffset = (int) ((mHeight - childHeight) / 2.0 + 0.5);
 if (topOffset < 0) {
 topOffset = 0;
 }
 view.layout(left,top+topOffset,left+childWidth,top + topOffset + childHeight);
 left += childWidth + mVerticalSpacing;//為下一個(gè)View的left賦值
 }
 }
 }

也是比較簡(jiǎn)單,其實(shí)就是根據(jù)寬度動(dòng)態(tài)計(jì)算而已,我們看看效果吧

可以了吧,看起來是大功告成了,可是我們發(fā)現(xiàn)左邊和右邊的間距好像不相等,能不能讓子View居中顯示呢?答案當(dāng)然是可以的,接下來我們提供個(gè)方法,讓外部可以設(shè)置里面子View的對(duì)齊方式:

public interface AlienState {
 int RIGHT = 0;
 int LEFT = 1;
 int CENTER = 2;
 
 @IntDef(value = {RIGHT, LEFT, CENTER})
 @interface Val {}
 }
 public void setAlignByCenter(@AlienState.Val int isAlignByCenter) {
 this.isAlignByCenter = isAlignByCenter;
 requestLayoutInner();
 }
 
 private void requestLayoutInner() {
 new Handler(Looper.getMainLooper()).post(new Runnable() {
 @Override
 public void run() {
 requestLayout();
 }
 });
 }

提供一個(gè)setAlignByCenter的方法,分別有左對(duì)齊右對(duì)齊和居中對(duì)齊,然后我們?cè)贚ine的layoutView中改寫一下:

//布局View
 if (i == 0) {
 switch (isAlignByCenter) {
 case AlienState.CENTER:
 left += surplusWidth / 2;
 break;
 case AlienState.RIGHT:
 left += surplusWidth;
 break;
 default:
 left = 0;
 break;
 }
}

在layoutView中把剩余的寬度按照對(duì)齊的類型平分一下就得到我們要的效果了

好了,這樣就達(dá)到我們要的效果了.可是在回頭來看一下我們MainActivity里面的寫法會(huì)不會(huì)感覺很撮呢?對(duì)于習(xí)慣了ListView,RecyclerView的Adapter寫法的我們有沒有辦法改一下,像寫adapter一樣來寫布局呢?聰明的程序猿是沒有什么辦不到的,接下來我們就來改寫一下:

public void setAdapter(List<?> list, int res, ItemView mItemView) {
 if (list == null) {
 return;
 }
 removeAllViews();
 int layoutPadding = dipToPx(getContext(), 8);
 setHorizontalSpacing(layoutPadding);
 setVerticalSpacing(layoutPadding);
 int size = list.size();
 for (int i = 0; i < size; i++) {
 Object item = list.get(i);
 View inflate = LayoutInflater.from(getContext()).inflate(res, null);
 mItemView.getCover(item, new ViewHolder(inflate), inflate, i);
 addView(inflate);
 }
 }
 
 public abstract static class ItemView<T> {
 abstract void getCover(T item, ViewHolder holder, View inflate, int position);
 }
 
 class ViewHolder {
 View mConvertView;
 
 public ViewHolder(View mConvertView) {
 this.mConvertView = mConvertView;
 mViews = new SparseArray<>();
 }
 
 public <T extends View> T getView(int viewId) {
 View view = mViews.get(viewId);
 if (view == null) {
 view = mConvertView.findViewById(viewId);
 mViews.put(viewId, view);
 }
 try {
 return (T) view;
 } catch (ClassCastException e) {
 e.printStackTrace();
 }
 return null;
 }
 
 public void setText(int viewId, String text) {
 TextView view = getView(viewId);
 view.setText(text);
 }
 }

然后我們?cè)贛ainActivity中在使用一下:

protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 FlowLayout mFlowLayout = (FlowLayout) findViewById(R.id.mFlowLayout);
 List<String> list = new ArrayList<>();
 list.add("java");
 list.add("javaEE");
 list.add("javaME");
 list.add("c");
 list.add("php");
 list.add("ios");
 list.add("c++");
 list.add("c#");
 list.add("Android");
 mFlowLayout.setAlignByCenter(FlowLayout.AlienState.CENTER);
 mFlowLayout.setAdapter(list, R.layout.item, new FlowLayout.ItemView<String>() {
 @Override
 void getCover(String item, FlowLayout.ViewHolder holder, View inflate, int position) {
 holder.setText(R.id.tv_label_name,item);
 }
 });
 }

怎么樣，是不是就根絕在跟使用adapter一樣了呢.

Demo已放到github,歡迎大家指點(diǎn)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: