Android實(shí)現(xiàn)單行標(biāo)簽流式布局
近期產(chǎn)品提了有關(guān)流式布局的新需求,要求顯示字?jǐn)?shù)不定的標(biāo)簽,如果一行顯示不完,就只顯示一行的內(nèi)容,而且還在一兩個頁面采取了多種樣式,無語了
自己歸類了一下,需求有以下幾個區(qū)別
1:可選擇添加標(biāo)簽與否
2:是否有具體數(shù)量限制(比如最多顯示3個)
3:是否要靠右對齊
有需求,先找一波現(xiàn)有的工具,看是不是可以直接用
參考Android流式布局實(shí)現(xiàn)熱門標(biāo)簽效果
FlowLayout原樣式:
這個和我們的需求已經(jīng)比較符合了,但是他并不能控制只顯示單行內(nèi)容
如果要實(shí)現(xiàn)這樣的布局,官方也提供了Flexbox和FlexboxLayout,但查閱文檔后發(fā)現(xiàn)他們都不支持設(shè)置單行,如果強(qiáng)行設(shè)置maxlines為1,所有子view都會被減少寬度來讓第一行擠下所有的子view
希望的樣式(第一行內(nèi)能放下多少就放多少,第二行開始都不顯示,也不占用高度):
實(shí)際上:
可以看到這些view的寬度都被嚴(yán)重壓縮了,即使設(shè)置了padding也是沒有用的。正好項(xiàng)目本身使用了FlowLayout,就在他的基礎(chǔ)上進(jìn)行修改。
import android.content.Context; import android.os.Build; import android.util.AttributeSet; import android.util.Log; import android.view.View; import android.view.ViewGroup; import androidx.annotation.RequiresApi; import java.util.ArrayList; import java.util.List; public class SingleLineFlowLayout extends ViewGroup { private static final String TAG = "FlowLayout"; public int position=-1; public boolean alignRight; public boolean countMore; private List<List<View>> mLineViews = new ArrayList<List<View>>(); private List<Integer> mLineHeight = new ArrayList<Integer>(); public SingleLineFlowLayout(Context context) { super(context); } public SingleLineFlowLayout(Context context, AttributeSet attrs) { super(context, attrs); } public SingleLineFlowLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) public SingleLineFlowLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); } /** * 測量所有子View大小,確定ViewGroup的寬高 * * @param widthMeasureSpec * @param heightMeasureSpec */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); //由于onMeasure會執(zhí)行多次,避免重復(fù)的計(jì)算控件個數(shù)和高度,這里需要進(jìn)行清空操作 mLineViews.clear(); mLineHeight.clear(); //獲取測量的模式和尺寸大小 int widthMode = MeasureSpec.getMode(widthMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec) - getPaddingLeft() - getPaddingRight(); int heightMode = MeasureSpec.getMode(heightMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec) + getPaddingTop() + getPaddingBottom(); //記錄ViewGroup真實(shí)的測量寬高 int viewGroupWidth = widthSize; int viewGroupHeight = getPaddingTop() + getPaddingBottom(); if (widthMode == MeasureSpec.EXACTLY && heightMode == MeasureSpec.EXACTLY) { viewGroupWidth = widthSize; viewGroupHeight = heightSize; } else { //當(dāng)前所占的寬高 int currentLineWidth = 0; int currentLineHeight = 0; int lastChildWidth=0; int doubleLastChildWidth=0; //用來存儲每一行上的子View List<View> lineView = new ArrayList<View>(); for (int i = 0; i < getChildCount(); i++) { View childView = getChildAt(i); //對子View進(jìn)行測量 measureChild(childView, widthMeasureSpec, heightMeasureSpec); MarginLayoutParams marginLayoutParams = (MarginLayoutParams) childView.getLayoutParams(); int childViewWidth = childView.getMeasuredWidth() + marginLayoutParams.leftMargin + marginLayoutParams.rightMargin; int childViewHeight = childView.getMeasuredHeight() + marginLayoutParams.topMargin + marginLayoutParams.bottomMargin; if (currentLineWidth + childViewWidth > widthSize) { //從當(dāng)前位置開始,刪除view,保留最后一個moreView String tag=(String) childView.getTag(); if (tag!=null&&tag.equals("More")){ currentLineHeight = Math.max(currentLineHeight, childViewHeight); }else { removeViews(i,getChildCount()-1-i); childView = getChildAt(i); tag=(String) childView.getTag(); if (tag==null||!tag.equals("More")){ currentLineHeight = Math.max(currentLineHeight, childViewHeight); }else { //對子View進(jìn)行測量 measureChild(childView, widthMeasureSpec, heightMeasureSpec); marginLayoutParams = (MarginLayoutParams) childView.getLayoutParams(); childViewWidth = childView.getMeasuredWidth() + marginLayoutParams.leftMargin + marginLayoutParams.rightMargin; childViewHeight = childView.getMeasuredHeight() + marginLayoutParams.topMargin + marginLayoutParams.bottomMargin; if (currentLineWidth + childViewWidth > widthSize) { //lineView.remove(i-1); lineView.remove(getChildAt(i-1)); removeViewAt(i-1); currentLineWidth=currentLineWidth-lastChildWidth; } if (i-1>0&¤tLineWidth + childViewWidth > widthSize){ currentLineWidth=currentLineWidth-doubleLastChildWidth-marginLayoutParams.leftMargin - marginLayoutParams.rightMargin; lineView.remove(getChildAt(i-2)); removeViewAt(i-2); } currentLineWidth += childViewWidth; currentLineHeight = Math.max(currentLineHeight, childViewHeight); //添加行對象里的子View if (alignRight){ int rightMargin=marginLayoutParams.rightMargin; marginLayoutParams.setMargins(marginLayoutParams.leftMargin,marginLayoutParams.topMargin,0,marginLayoutParams.bottomMargin); childView.setLayoutParams(marginLayoutParams); marginLayoutParams=(MarginLayoutParams) getChildAt(0).getLayoutParams(); marginLayoutParams.setMargins(marginLayoutParams.leftMargin+widthSize-currentLineWidth+rightMargin,marginLayoutParams.topMargin,marginLayoutParams.rightMargin,marginLayoutParams.bottomMargin); getChildAt(0).setLayoutParams(marginLayoutParams); }else { marginLayoutParams.setMargins(widthSize-currentLineWidth,marginLayoutParams.topMargin,0,marginLayoutParams.bottomMargin); childView.setLayoutParams(marginLayoutParams); } lineView.add(childView); } } } else { //當(dāng)前行寬+子View+左右外邊距<=ViewGroup的寬度,不換行 if (i>1){ doubleLastChildWidth=lastChildWidth; } lastChildWidth=childViewWidth; currentLineWidth += childViewWidth; currentLineHeight = Math.max(currentLineHeight, childViewHeight); //添加行對象里的子View String tag=(String) childView.getTag(); if (tag!=null&&tag.equals("More")){ if (countMore){ lineView.add(childView); } }else { lineView.add(childView); } } if (i >= getChildCount() - 1) { //最后一個子View的時候 //添加行對象 if (alignRight){ int rightMargin=marginLayoutParams.rightMargin; marginLayoutParams.setMargins(marginLayoutParams.leftMargin,marginLayoutParams.topMargin,0,marginLayoutParams.bottomMargin); childView.setLayoutParams(marginLayoutParams); marginLayoutParams=(MarginLayoutParams) getChildAt(0).getLayoutParams(); marginLayoutParams.setMargins(marginLayoutParams.leftMargin+widthSize-currentLineWidth+rightMargin,marginLayoutParams.topMargin,marginLayoutParams.rightMargin,marginLayoutParams.bottomMargin); getChildAt(0).setLayoutParams(marginLayoutParams); } mLineViews.add(lineView); viewGroupWidth = Math.max(childViewWidth, widthSize); viewGroupHeight = viewGroupHeight+currentLineHeight; //添加行高 mLineHeight.add(currentLineHeight); } } } setMeasuredDimension(viewGroupWidth, viewGroupHeight); } /** * 設(shè)置ViewGroup里子View的具體位置 * * @param changed * @param l * @param t * @param r * @param b */ @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { int left = getPaddingLeft(); int top = getPaddingTop(); //一共有幾行 int lines = mLineViews.size(); for (int i = 0; i < lines; i++) { //每行行高 int lineHeight = mLineHeight.get(i); //行內(nèi)有幾個子View List<View> viewList = mLineViews.get(i); int views = viewList.size(); for (int j = 0; j < views; j++) { View view = viewList.get(j); MarginLayoutParams marginLayoutParams = (MarginLayoutParams) view.getLayoutParams(); int vl = left + (j == 0 ? 0 : marginLayoutParams.leftMargin); if (alignRight){ vl = left + marginLayoutParams.leftMargin; } int vt = top + marginLayoutParams.topMargin; int vr = vl + view.getMeasuredWidth(); int vb = vt + view.getMeasuredHeight(); view.layout(vl, vt, vr, vb); if (alignRight){ left += view.getMeasuredWidth() + marginLayoutParams.leftMargin + marginLayoutParams.rightMargin; }else { left += view.getMeasuredWidth() + (j == 0 ? 0 : marginLayoutParams.leftMargin) + marginLayoutParams.rightMargin; } } left = getPaddingLeft(); top += lineHeight; } } /** * 指定ViewGroup的LayoutParams * * @param attrs * @return */ @Override public LayoutParams generateLayoutParams(AttributeSet attrs) { return new MarginLayoutParams(getContext(), attrs); } }
使用方法:
1:使用addView()將所有的標(biāo)簽都添加到布局中
2:如果需要顯示代表更多的標(biāo)簽,在添加完所有標(biāo)簽后,再添加對應(yīng)的view,并且設(shè)置view.setTag("More")即可(該View會自動靠右對齊,并且會檢測是否能放得下該標(biāo)簽,如果放不下的話會依次嘗試兩次從后往前刪除子view后能否放得下,如果遇到特殊情況需要刪除更多的子view的話,可以自己修改代碼)
3:如果需要所有的view都右對齊,要在addView()前設(shè)置布局的alignRight=true
4:如果需要超過某個數(shù)量后,即使可以單行顯示,也要添加更多標(biāo)簽的話,要在addView()前設(shè)置布局的countMore=true,使用addView()時自己控制添加的數(shù)量,并在超過數(shù)量的時候添加對應(yīng)的view,并且設(shè)置view.setTag("More")
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android WebView實(shí)現(xiàn)截長圖功能
這篇文章主要為大家詳細(xì)介紹了Android截長圖的一種實(shí)現(xiàn)方式,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-05-05Android Studio 恢復(fù)小窗口??磕J?Docked Mode)
這篇文章主要介紹了Android Studio 恢復(fù)小窗口??磕J?Docked Mode),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-04-04ionic監(jiān)聽android返回鍵實(shí)現(xiàn)“再按一次退出”功能
本篇文章主要介紹了ionic監(jiān)聽android返回鍵實(shí)現(xiàn)“再按一次退出”功能,非常具有實(shí)用價值,需要的朋友可以參考下2018-02-02RelativeLayout(相對布局)用法實(shí)例講解
在本文里小編給大家分享了關(guān)于RelativeLayout(相對布局)用法知識點(diǎn)以及對應(yīng)的實(shí)例內(nèi)容,需要的朋友們學(xué)習(xí)下。2019-02-02詳解如何使用VisualStudio高效開發(fā)調(diào)試AndroidNDK
這篇文章主要介紹了詳解如何使用VisualStudio高效開發(fā)調(diào)試AndroidNDK,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12android shape的使用及漸變色、分割線、邊框、半透明陰影
這篇文章主要介紹了android shape的使用及漸變色、分割線、邊框、半透明陰影,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08如何利用Flutter實(shí)現(xiàn)酷狗流暢Tabbar效果
這篇文章主要給大家介紹了關(guān)于如何利用Flutter實(shí)現(xiàn)酷狗流暢Tabbar效果的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-02-02基于fluttertoast實(shí)現(xiàn)封裝彈框提示工具類
這篇文章主要為大家介紹了基于fluttertoast實(shí)現(xiàn)封裝彈框提示工具類的實(shí)現(xiàn)代碼,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-05-05