Android 簡單實現(xiàn)一個流式布局的示例
本篇文章主要介紹了Android 簡單實現(xiàn)一個流式布局的示例,分享給大家,具體如下:
流式布局應(yīng)該是我們很常見的一種布局了,在很多場景下都會遇到它,例如:標簽之類的功能等。用輪子不如造輪子來的爽,這里自己簡單的實現(xiàn)下流式布局:
- onMeasure
- onLayout
通過以上兩個方法我們就可以完成對流式布局的基本操作:
onMeasure
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); // 獲得它的父容器為它設(shè)置的測量模式和大小 int sizeWidth = MeasureSpec.getSize(widthMeasureSpec); int sizeHeight = MeasureSpec.getSize(heightMeasureSpec); int modeWidth = MeasureSpec.getMode(widthMeasureSpec); int modeHeight = MeasureSpec.getMode(heightMeasureSpec); // 如果是warp_content情況下,記錄寬和高 int width = 0; int height = 0; //記錄每一行的寬度,width不斷取最大寬度 int lineWidth = 0; //記錄每一行的寬度,不斷累加每行最大高度獲取height int lineHeight = 0; //獲取子View的數(shù)量 int childCount = getChildCount(); //遍歷每個子元素 for (int i = 0; i < childCount; i++) { //獲取每一個子View View childView = getChildAt(i); //測量每一個子View的寬和高 measureChild(childView,widthMeasureSpec,heightMeasureSpec); //得到子View的lp LayoutParam lp = (LayoutParam) childView.getLayoutParams(); //當(dāng)前子View實際占據(jù)的寬度 int childWidth = childView.getMeasuredWidth() + lp.leftMargin + lp.rightMargin; //當(dāng)前子View實際占據(jù)的高度 int childHeight = childView.getMeasuredHeight() + lp.bottomMargin + lp.topMargin; //如果加入當(dāng)前childView,超出最大寬度,則得到目前最大寬度給width,類加height 然后開啟新行 if (lineWidth + childWidth > sizeWidth) { // 取最大的寬度 width = Math.max(lineWidth, childWidth); //重新開啟新行,重新計算 lineWidth = childWidth; //疊加當(dāng)前高度 height += childHeight; //記錄下一行高度 lineHeight = childHeight; }else { // 累加值lineWidth,lineHeight取最大高度 lineWidth += childWidth; lineHeight = Math.max(lineHeight,childHeight); } // 如果是最后一個,則將當(dāng)前記錄的最大寬度和當(dāng)前l(fā)ineWidth做比較 if (i == childCount - 1) { width = Math.max(width,lineWidth); height += lineHeight; } } setMeasuredDimension(modeWidth == MeasureSpec.EXACTLY?sizeWidth:width,modeHeight == MeasureSpec.EXACTLY?sizeHeight:height); }
在onMeasure方法中負責(zé)設(shè)置子控件的測量模式和大小 根據(jù)所有子控件設(shè)置自己的寬和高,一旦寬度超出最大寬度便進行換行處理。高度不斷累加從而獲取最終高度。
onLayout
//存儲所有的View,按行記錄 private List<List<View>> mAllViews = new ArrayList<>(); //記錄每一行的最大高度 private List<Integer> mLineHeight = new ArrayList<>(); @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { mAllViews.clear(); mLineHeight.clear(); int lineWidth = 0; int lineHeight = 0; int width = getWidth(); int childCount = getChildCount(); // 存儲每一行所有的childView List<View> lineViews = new ArrayList<>(); for (int i = 0; i < childCount; i++) { View childView = getChildAt(i); LayoutParam lp = (LayoutParam) childView.getLayoutParams(); int childWidth = childView.getMeasuredWidth() + lp.rightMargin + lp.leftMargin; int childHeight = childView.getMeasuredHeight() + lp.topMargin + lp.bottomMargin; if (lineWidth + childWidth > width) { // 記錄這一行所有的View以及最大高度 mLineHeight.add(lineHeight); // 將當(dāng)前行的childView保存,然后開啟新的ArrayList保存下一行的childView mAllViews.add(lineViews); lineWidth = 0; lineViews = new ArrayList<>(); } //如果不需要換行,則累加 lineWidth += childWidth; lineHeight = Math.max(lineHeight,childHeight); lineViews.add(childView); } // 記錄最后一行 mAllViews.add(lineViews); mLineHeight.add(lineHeight); int left = 0; int top = 0; // 得到總行數(shù) int size = mAllViews.size(); for (int i = 0; i < size; i++) { // 每一行的所有的views lineViews = mAllViews.get(i); // 當(dāng)前行的最大高度 lineHeight = mLineHeight.get(i); for (View view : lineViews) { LayoutParam lp = (LayoutParam) view.getLayoutParams(); //計算childView的left,top,right,bottom int lc = left + lp.leftMargin; int tc = top + lp.topMargin; int rc = lc + view.getMeasuredWidth(); int bc = tc + view.getMeasuredHeight(); view.layout(lc,tc,rc,bc); left += view.getMeasuredWidth() + lp.leftMargin + lp.rightMargin; } left = 0; top += lineHeight; } }
通過onLayout方法給子View布局,前提,我們必須得知道每個子View的寬度和高度。所以我們先要在onMeasure的時候,測量一下每個子View的具體大小。
測試
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); FlowLayout flowLayout = ((FlowLayout) findViewById(R.id.flowLayout)); FlowLayout.LayoutParam params = new FlowLayout.LayoutParam(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); params.setMargins(10,10,10,10); for (int i = 0; i < 10; i++) { TextView textView = new TextView(this); textView.setPadding(i * 10,10,i * 10,10); textView.setBackgroundColor(Color.BLUE); textView.setText("哈哈哈哈"); textView.setTextColor(Color.WHITE); textView.setLayoutParams(params); flowLayout.addView(textView); } } }
這里我們要注意下FlowLayout.LayoutParam params = new FlowLayout.LayoutParam(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);這個方法,有的小伙伴在寫的過程中可能點不出來這個方法,那是因為這個方法是需要我們自己寫一個靜態(tài)內(nèi)部類來實現(xiàn)。
@Override protected LayoutParams generateDefaultLayoutParams() { return new LayoutParam(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT); } @Override public LayoutParams generateLayoutParams(AttributeSet attrs) { return new LayoutParam(getContext(),attrs); } @Override protected LayoutParams generateLayoutParams(LayoutParams p) { return new LayoutParam(p); } public static class LayoutParam extends MarginLayoutParams{ public LayoutParam(Context c, AttributeSet attrs) { super(c, attrs); } public LayoutParam(@Px int width, @Px int height) { super(width, height); } public LayoutParam(MarginLayoutParams source) { super(source); } public LayoutParam(LayoutParams source) { super(source); } }
好了,這樣一個簡單的流式布局就結(jié)束了,有時候自己親自敲一遍將它實現(xiàn),才發(fā)現(xiàn)會學(xué)到很多。這里測試的代碼是循環(huán)加入的View,大家也可以嘗試的寫個類似適配器的方式去實現(xiàn)。貼上源碼供參考。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android流式布局FlowLayout詳解
- Android流式布局實現(xiàn)歷史搜索記錄功能
- Android實現(xiàn)熱門標簽的流式布局
- Java Swing組件布局管理器之FlowLayout(流式布局)入門教程
- Android簡單實現(xiàn)自定義流式布局的方法
- Android自定義ViewGroup之實現(xiàn)FlowLayout流式布局
- Android自定義流式布局/自動換行布局實例
- python GUI框架pyqt5 對圖片進行流式布局的方法(瀑布流flowlayout)
- android流式布局onLayout()方法詳解
- Flexbox+ReclyclerView實現(xiàn)流式布局
相關(guān)文章
Android第三方文件選擇器aFileChooser使用方法詳解
這篇文章主要介紹了Android第三方文件選擇器aFileChooser的使用方法詳解,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07Android Studio 3.0中mipmap-anydpi-v26是什么東東
在Android Studio 3.0中一旦我們創(chuàng)建了一個項目,一個名為mipmap-anydpi-v26自動創(chuàng)建的文件夾在res文件夾下。它究竟能干什么?為什么我們需要這個?我們在開發(fā)時該如何利用它,下面通過本文給大家介紹下2017-12-12Android?Activity?View加載與繪制流程深入刨析源碼
這篇文章主要介紹了Android?Activity?View的加載與繪制流程源碼分析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08Flutter使用SingleTickerProviderStateMixin報錯解決
這篇文章主要為大家介紹了Flutter使用SingleTickerProviderStateMixin報錯解決示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08Android編程中調(diào)用Camera時預(yù)覽畫面有旋轉(zhuǎn)問題的解決方法
這篇文章主要介紹了Android編程中調(diào)用Camera時預(yù)覽畫面有旋轉(zhuǎn)問題的解決方法,涉及Android針對Camera調(diào)用攝像頭源碼部分的相關(guān)修改技巧,需要的朋友可以參考下2015-11-11Android RecyclerView緩存復(fù)用原理解析
RecyclerView是Android一個更強大的控件,其不僅可以實現(xiàn)和ListView同樣的效果,還有優(yōu)化了ListView中的各種不足。其可以實現(xiàn)數(shù)據(jù)縱向滾動,也可以實現(xiàn)橫向滾動(ListView做不到橫向滾動)。接下來講解RecyclerView的用法2022-11-11Android設(shè)置PreferenceCategory背景顏色的方法
這篇文章主要介紹了Android設(shè)置PreferenceCategory背景顏色的方法,涉及Android設(shè)置背景色的技巧,需要的朋友可以參考下2015-05-05