2021-05-12 14:32:11
Android實現單行標籤流式佈局
2020-09-23 09:00:31
近期產品提了有關流式佈局的新需求，要求顯示字數不定的標籤，如果一行顯示不完，就只顯示一行的內容，而且還在一兩個頁面採取了多種樣式，無語了
自己歸類了一下，需求有以下幾個區別
1：可選擇新增標籤與否
2：是否有具體數量限制（比如最多顯示3個）
3：是否要靠右對齊
有需求，先找一波現有的工具，看是不是可以直接用
FlowLayout原樣式：
這個和我們的需求已經比較符合了，但是他並不能控制只顯示單行內容
如果要實現這樣的佈局，官方也提供了Flexbox和FlexboxLayout，但查閱檔案後發現他們都不支援設定單行，如果強行設定maxlines為1，所有子view都會被減少寬度來讓第一行擠下所有的子view
希望的樣式（第一行內能放下多少就放多少，第二行開始都不顯示，也不佔用高度）：
實際上：
可以看到這些view的寬度都被嚴重壓縮了，即使設定了padding也是沒有用的。正好專案本身使用了FlowLayout，就在他的基礎上進行修改。
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會執行多次,避免重複的計算控制元件個數和高度,這裡需要進行清空操作
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真實的測量寬高
int viewGroupWidth = widthSize;
int viewGroupHeight = getPaddingTop() + getPaddingBottom();
if (widthMode == MeasureSpec.EXACTLY && heightMode == MeasureSpec.EXACTLY) {
viewGroupWidth = widthSize;
viewGroupHeight = heightSize;
} else {
//當前所佔的寬高
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進行測量
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) {
//從當前位置開始，刪除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進行測量
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 {
//當前行寬+子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);
}
/**
* 設定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);
//行內有幾個子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()將所有的標籤都新增到佈局中
2：如果需要顯示代表更多的標籤，在新增完所有標籤後，再新增對應的view，並且設定view.setTag("More")即可（該View會自動靠右對齊，並且會檢測是否能放得下該標籤，如果放不下的話會依次嘗試兩次從後往前刪除子view後能否放得下，如果遇到特殊情況需要刪除更多的子view的話，可以自己修改程式碼）
3：如果需要所有的view都右對齊，要在addView()前設定佈局的alignRight=true
4:如果需要超過某個數量後，即使可以單行顯示，也要新增更多標籤的話，要在addView()前設定佈局的countMore=true，使用addView()時自己控制新增的數量，並在超過數量的時候新增對應的view，並且設定view.setTag("More")
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。
相關文章