Flow VirtualLayout

Flow 是不可見的虛擬佈局，概念類似於之前的chain，可以依據元件的ids，對 constraint_referenced_ids列表中的元件們進行水平或垂直的排列(orientation)
註:Flow跟Group兩者元件清單(constraint_referenced_ids )不同的是，Flow 的元件清單中的順序是會影響排序的。

如何建立flow

框選所有需要的元件後，任一元件上點選滑鼠右鍵 -> add helps -> Flow
(或是在工具列輔助線圖示點開也有)。
或直接在xml中創建一個flow的標籤再加入需要的元件列表，也是可行的。

4種排列模式(flow_wrapMode)

以兩個同樣大小的flow、同樣數量、尺寸的元件，來展示一下水平及垂直排列時的3種wrap mode效果，如下

• none : 形成一條水平或垂直鏈結的概念
  

• chain : 依照水平或垂直形成多條鏈結(可以想成換列/換行)，最後一行若元件沒有排滿，會是平均分配間距的模式排列。
  

• aligned : 與chain類似的意思，最後一行是對齊排好的
  

• chain2 : 看起來跟chain沒兩樣，但是無法使用app:flow_maxElementsWrap更改一行幾個元件。
  

其他屬性

以下都以horizontal來比較chain跟chain2、aligned模式下對這些屬性的表現反應，none模式都維持一條鍊的型態就不討論了

• app:flow_maxElementsWrap="3" 限制每列或每行元件最大數量，超過的換行，從文章上段我們可以看到原本是4個元件一列，chain2沒有被 app:flow_maxElementsWrap="3" 影響，依舊維持4個一列。
  
  而aligned模式下，也跟chain一樣受app:flow_maxElementsWrap="3"影響變成3個一列，惟最後一行表現不同。
  

• app:flow_firstHorizontalStyle="packed"、 app:flow_lastHorizontalStyle="spread_inside"，這兩個屬性分別是針對第一列和最後一列做排列設定，有3種模式(spread、spread_inside、packed)
  
  對，你沒看錯，aligned模式不被這個屬性影響。chain2表現出來跟chain一樣，所以就偷懶這樣。
  垂直版面的時候當然也有app:flow_firstVerticalStyle、app:flow_lastVerticalStyle

• app:flow_horizontalStyle="packed" 全部行列水平方向排列的模式有3模式(spread、spread_inside、packed)
  chain、chain2模式下，適用這個屬性外，還可以另外控制首、尾列，aligned模式只接受app:flow_horizontalStyle="packed"，但無法控制首、尾列，對spread、spread_inside則沒有反應。
  

• app:flow_horizontalBias="0"，0~1之間的float值，只在app:flow_horizontalStyle="packed" 的模式下有用，下圖chain的首尾列都不是packed，所以都不受這屬性影響。
  

• flow_horizontalGap、flow_veticalGap:分別控制元件與元件間橫向間距及垂直的間距"dp"

為什麼aligned不被某些屬性影響呢?
官方文檔說:

flow_wrapMode = "aligned"
Same XML attributes as for WRAP_CHAIN, with the difference that the elements are going to be laid out in a set of rows and columns instead of chains. The attribute specifying chains style and bias are thus not going to be applied.

ImageFilterView、ImageFliterButton

這兩個元件是ConstraintLayout 2.0之後才有的，支援一些簡單的濾鏡，如圓角、對比、冷暖色系、亮度...等，可以省去一些做手工的時間。
ImageFilterView 官方文檔
ImageFliterButton 官方文檔

濾鏡屬性

ImageFilterView、ImageFliterButton都具有下圖的這些屬性:

<ImageView
        android:id="@+id/imageView2"
        android:layout_width="200dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="W,1:1"
        android:background="@color/black"
        android:contentDescription="@string/image_description"
        android:src="@drawable/pngtree_cute_pet"
        ... />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/imageFilterView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@color/black"
        android:contentDescription="@string/image_description"
        app:brightness="3"
        app:contrast="5"
        app:warmth="3"
        app:round="250dp"
        app:roundPercent="1"
        app:srcCompat="@drawable/pngtree_cute_pet"
        .../>

    <androidx.constraintlayout.utils.widget.ImageFilterButton
        android:id="@+id/imageFilterButton"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="@color/black"
        android:contentDescription="@string/image_description"
        android:scaleType="fitCenter"
        app:brightness="1"
        app:contrast="3"
        app:roundPercent="0.3"
        app:srcCompat="@drawable/pngtree_cute_pet" 
        .../>

圖片取自網路免費圖庫pngtree

補充

上面ImageView中有使用app:layout_constraintDimensionRatio這個屬性順便介紹一下:

• app:layout_constraintDimensionRatio : 依照寬高比來定義圖片，但前提是，寬高不能同時固定dp(否則會依照設定的固定dp)，其中一個一定要是"0dp"(match constraint)，另一個則可以是0dp、固定dp、wrap_content、match_parent。
  • "3:1" 寬:高
    • 寬固定，高0dp時 或是 寬0dp，高固定時都一樣: 3:1 = 寬 : 高
      -但是呈現出來的尺寸效果並不一定會一樣。
  • "W,3:1" W指約束寬度，逗號後面3:1如下
    • 寬固定，高0dp時: 3:1 = 高 : 寬
    • 寬0dp，高固定時: 3:1 = 寬 : 高
  • "H,3:1" H指約束高度，逗號後面3:1如下
    • 寬固定，高0dp時: 3:1 = 寬 : 高
    • 寬0dp，高固定時: 3:1 = 高 : 寬
  • 寬、高都0dp時:不管上面3種的哪一種寫法，數字比都是寬:高

  app:layout_constraintDimensionRatio = "3:1"     
  app:layout_constraintDimensionRatio = "W,3:1"   
  app:layout_constraintDimensionRatio = "H,3:1"