1. 程式人生 > >熱門標籤之流式佈局

熱門標籤之流式佈局

說到流式佈局第一時間想起的就是RecyclerView,但是在很多很多種情況下,並不適用於用它。因為RecyclerView是一個帶滾動的view,而當我們需要多個RecyclerView在一個介面上拼接一起滑動的時候,也就是說可能會遇到ScrollView巢狀RecyclerView的情況下,這個時候無論是改寫RecyclerView的LayoutParams還是重寫RecyclervView的滑動事件都不是一個好主意,因為RecyclerView是一個佈局複用的控制元件,改寫了這些東西意味著你將不能再使用複用模式而導致內耗加大,當item不可見時,記憶體不會回收,從而造成OOM的風險。
所以使用新的方式替代RecyclerView是我們目前唯一的選擇,新的選擇和RecyclerView的最大區別在於是否有滑動事件,也就是說,它不是一個AbsListView,也沒有滑動事件。它是一個ViewGroup,這個GroupView像LinearLayout、RadioGroup一樣是一個可以裝載子控制元件的佈局集合,我們可以通過動態的新增子控制元件方式,進行介面效果的實現。
第一步,自定義View,繼承ViewGroup,重寫onMeasure()方法,動態的適配子控制元件的寬高從而達到流式佈局的效果。

public class FlowLayout extends ViewGroup {

    private float mVerticalSpacing; //每個item縱向間距
    private float mHorizontalSpacing; //每個item橫向間距
    private int mMinimumWidth = 0;
    private FlowLayoutAdapter mAdapter;

    public FlowLayout(Context context) {
        super(context);
        this.mMinimumWidth = (ConstantsUtils.DISPLAYW - 100
) / 2; } public FlowLayout(Context context, AttributeSet attrs) { super(context, attrs); this.mMinimumWidth = (ConstantsUtils.DISPLAYW - 100) / 2; } public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); this
.mMinimumWidth = (ConstantsUtils.DISPLAYW - 100) / 2; } public void setHorizontalSpacing(float pixelSize) { mHorizontalSpacing = pixelSize; } public void setVerticalSpacing(float pixelSize) { mVerticalSpacing = pixelSize; } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int selfWidth = resolveSize(0, widthMeasureSpec); int paddingLeft = getPaddingLeft(); int paddingTop = getPaddingTop(); int paddingRight = getPaddingRight(); int paddingBottom = getPaddingBottom(); int childLeft = paddingLeft; int childTop = paddingTop; int lineHeight = 0; //通過計算每一個子控制元件的高度,得到自己的高度 for (int i = 0, childCount = getChildCount(); i < childCount; ++i) { View childView = getChildAt(i); childView.setMinimumWidth(mMinimumWidth); LayoutParams childLayoutParams = childView.getLayoutParams(); childView.measure( getChildMeasureSpec(widthMeasureSpec, paddingLeft + paddingRight, childLayoutParams.width), getChildMeasureSpec(heightMeasureSpec, paddingTop + paddingBottom, childLayoutParams.height)); int childWidth = childView.getMeasuredWidth(); int childHeight = childView.getMeasuredHeight(); // 如果子控制元件有需要設定最小寬度的可以在此重設 if (childWidth < mMinimumWidth){ childView.setMinimumWidth(mMinimumWidth); } lineHeight = Math.max(childHeight, lineHeight); if (childLeft + childWidth + paddingRight > selfWidth) { childLeft = paddingLeft; childTop += mVerticalSpacing + lineHeight; lineHeight = childHeight; } else { childLeft += childWidth + mHorizontalSpacing; } } int wantedHeight = childTop + lineHeight + paddingBottom; setMeasuredDimension(selfWidth, resolveSize(wantedHeight, heightMeasureSpec)); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { int myWidth = r - l; int paddingLeft = getPaddingLeft(); int paddingTop = getPaddingTop(); int paddingRight = getPaddingRight(); int childLeft = paddingLeft; int childTop = paddingTop; int lineHeight = 0; //根據子控制元件的寬高,計運算元控制元件應該出現的位置。 for (int i = 0, childCount = getChildCount(); i < childCount; ++i) { View childView = getChildAt(i); if (childView.getVisibility() == View.GONE) { continue; } int childWidth = childView.getMeasuredWidth(); int childHeight = childView.getMeasuredHeight(); lineHeight = Math.max(childHeight, lineHeight); if (childLeft + childWidth + paddingRight > myWidth) { childLeft = paddingLeft; childTop += mVerticalSpacing + lineHeight; lineHeight = childHeight; } childView.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight); childLeft += childWidth + mHorizontalSpacing; } } public void setAdapter(FlowLayoutAdapter adapter){ this.mAdapter = adapter; mAdapter.init(); } // 資料介面卡 public interface FlowLayoutAdapter{ /** 初始化佈局,可在此方法內動態新增控制元件*/ void init(); /** 重新整理佈局*/ void refresh(); /** 設定動作事件的重新整理回撥*/ void setChoosed(String name,String value); } }

第二步,佈局檔案中寫入ScrollView,內包含一個子控制元件LinearLayout,並在java程式碼中動態新增FlowLayout控制元件。

第三步,重寫FlowLayout的監聽器,並進行監聽呼叫

相關推薦

熱門標籤佈局

說到流式佈局第一時間想起的就是RecyclerView,但是在很多很多種情況下,並不適用於用它。因為RecyclerView是一個帶滾動的view,而當我們需要多個RecyclerView在一個介面上拼接一起滑動的時候,也就是說可能會遇到ScrollView巢狀

解決:Android中常見的熱門標籤佈局flowlayout不能wrap_content

最近在專案中藥使用流式佈局,但是在網上找的都不能滿足要求,這篇部落格內容只支援match_parent,我改後的程式碼可以支援wrap_content,原文也僅僅是少加一行高度而已。。新部落格希望大家多多評論。。原文連結 一:概述: 1.流式佈局的特點以

GUI佈局管理器

1.流式佈局管理器——FlowLayout,最簡單的佈局管理器,當你向容器新增元件時,會按照從左到右放置。到達邊界時,會跳轉到下一行。 FlowLayout()如果不進行設定,元件會預設居中對齊,水平,垂直間距預設5個單位。 FlowLayout(int align)指定容器的對齊方式,水平

Android : 自定義View佈局

寫了一個很簡單的佈局 這是周圍圓框的drawable <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

自定義view佈局

如圖: 自定義view 繼承viewgroup  實現流式佈局 (程式碼中有註釋,就不一一詳解了,注意標紅欄位) public class WaterfallViewGroup extends ViewGroup { //儲存所有子View priva

Qt佈局QFlow

Qt沒有像網頁那種能根據視窗大小改變的佈局,但是我們可以利用繼承QLayout 自己編寫 環境 Qt5.6.2+VS2013 程式碼 FlowLayout.h #ifndef FLOWLAYOUT_H #define FLOWLAYOUT_H #includ

自定義控制元件-佈局FlowLayout

前言 其實對於流式佈局控制元件,很多人並不陌生,專案中或多或少都會用到的.但是有多少人會寫一個流式佈局的控制元件這就不知道了,所以博主這裡對流式佈局進行一個講解,並且封裝一個比較完善的控制元件 效果圖 看到的這個整個就是一個流式佈局,裡面是

Android 實現FlowLayout佈局(類似熱門標籤

今天跟大家分享一下FlowLayout,最近專案中有遇到熱門標籤這個樣的佈局(文章末尾可下載原始碼),如下圖: 一,建立FlowLayout並繼承ViewGroup FlowLayout 類主要實現onMeasure,onLayout和generateL

Android開發標籤佈局

1、流式佈局的特點以及應用場景    特點:當上面一行的空間不夠容納新的TextView時候,才開闢下一行的空間。主要用於關鍵詞搜尋或者熱門標籤等場景。 2、自定義ViewGroup,重點重寫下面兩個方法     (1) onMeasure:測量子view的寬高,設

FlowLayout佈局實現搜尋歷史或熱門標籤

  最近專案中有這麼一個需求:實現搜尋歷史記錄的展示,預設只展示最近搜尋的10條記錄,並且最近搜尋的首先展示,其餘按搜尋時的先後順序依次展示;筆者想到(FlowLayout+SharedPreferences+List+TextView)來實現;   看一下實

imooc學習筆記——佈局熱門標籤

在看imooc打造Android中的流式佈局和熱門標籤這個課程時,感覺沒有什麼太大難度,但是一練習就發現有很多問題會不斷出現,於是就有了這個筆記….. 個人筆記,個人理解 , 如有錯誤歡迎指正 要想實現流式佈局 Android中沒有現成的控制元件,所以需要我

佈局FlowLayout使用

package com.a520it.mygoogleplay.ui; import android.content.Context; import android.util.AttributeSet; import android.view.View; import androi

自定義佈局 + 熱門搜尋 + 搜尋歷史 + SQLite資料儲存

建立SQLite 資料庫 public class DBHelper extends SQLiteOpenHelper { public DBHelper( Context context, String name, SQLiteDatabase.CursorFactory

Android學習RecyclerView學習(實現瀑布佈局

RecyclerView,大家可以通過匯入support-v7對其進行使用。  如果使用AndroidStudio開發, 需要在build.gradle中新增: compile 'com.android.support:appcompat-v7:24.2.1' com

Android開發RecyclerView實現佈局

RecyclerView是什麼? RecycleView的出現, 替代了ListView, 沒了OnitemClickListener,; LayoutManager負責計算佈局; Adapter 負責適配,還增加了ViewHolder;RecycleView

Android 佈局FlowLayout 實現關鍵字標籤

1.介紹 流式佈局的應用還是很廣泛的,比如搜尋熱詞、關鍵詞標籤等,GitHub上已經有很多這樣的佈局了,但是還是想著自己實現一下,最近一直在學自定義控制元件,也鞏固一下所學的知識。 本文實現的效果如下圖所示: 2.思路 繼承自RelativeL

使用TabLayout實現單行的flowlayout(標籤佈局)

前言 最近專案需求做一個單行的標籤選擇功能,效果類似下面的,一說到標籤選擇和流式佈局,我想很多同學都會想到鴻洋的FlowLayout,但是很多事情都是不完美的,這個庫挺好的,但是不支援單行的標籤顯示。我想要的是那種單行顯示,並且多餘的看不到的可以左右滑動。

安卓佈局(可換行的標籤)

最近,公司的專案中需要展示商品的規格和屬性,但是不同的商品屬性個數也是不一樣的, 怎麼能夠讓超過一行的屬性自動換行呢?這就需要用到我們的流式佈局,下面先看看效果圖 這篇文章更改的,流式是怎麼實現的還是請先看完上邊這篇文章. 在將樓主的原始碼下載下來使用的時候遇到以下幾

二十九、Java圖形化介面設計——佈局管理器FlowLayout(佈局

         前文講解了JFrame、JPanel,其中已經涉及到了空佈局的使用。Java雖然可以以畫素為單位對元件進行精確的定位,但是其在不同的系統中將會有一定的顯示差異,使得顯示效果不盡相同,為此java提供了佈局管理器,以使編寫的圖形介面具有良好的平臺無關性。

安卓中使用佈局實現標籤

我們在開發的時候通常需要加標籤,對於這個標籤怎麼說呢,反正也挺複雜的,最初開發這個標籤的時候還是沒有思路的,後來在github上面查找了一下資料,瞭解了通過流式佈局來實現這個標籤,我記得開始的時候我寫標籤的時候是三個TextView一個一個新增進去的,後來感覺還是不太好,所