技術標籤：android view裡更新textview

作者：新小夢

連結：https://juejin.im/post/6854573221312725000

前言

一年前寫ConstraintLayout,看完一篇真的就夠了麼？ 文章的時候說過，任何技術都會有時限性，只有不斷的學習，不斷的更新自我，才不會outer。 有朋友也留言，希望更新...那就有本文了。

目前2.0只是新增了一些新功能和新玩法，對1.x版本無取代之意，所以1.x版本還是得學習的。好文推薦 2.0版本新增的內容在實踐開發也是非常實用的，建議可以上車了。

「由於無知與惰性，讓我們感覺摸到了技術的天花板」

「對你有用，幫忙點贊~」

基於本文發表，ConstraintLayout版本已經更新到2.0.0-beta8,所以新增依賴的姿勢：

AndroidX:

  implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta8'

支援庫：

 implementation 'com.android.support.constraint:constraint-layout:2.0.0-beta8'

版本說明：

alpha:內部測試版,bug多多；

beta:公開測試版本，bug少點，支援嚐鮮；

rc:候選版本，功能不增，和釋出版本一致，修修小bug；

stable:穩定版本，你儘管用，bug能找到是福氣。

一、Flow流式虛擬佈局(alpha 5增加)

正常情況下，列表顯示一般採用ListView或者RecyclerView來實現，但其子Item佈局是非常呆板的。想象一下，如果一部作品的詳情頁結束打上一堆標籤，樣式如下，該怎麼實現？

這種佈局採用Flow來實現特別的簡單和方便，而且通過flow_wrapMode屬性可以設定不同對齊方式。

下面佈局程式碼簡單示例：Flow佈局通過constraint_referenced_ids屬性將要約束的View的id進行關聯，這裡簡單關聯A到G的TextView,由於TextView沒有設定約束條件，所以Android Studio 4.0 會報紅，給ConstraintLayout佈局新增tools:ignore="MissingConstraints"忽略報紅提示。

Flow佈局的flow_horizontalGap屬性表示水平之間兩個View的水平間隔，flow_verticalGap則是垂直方向間隔。

<?xml version="1.0" encoding="utf-8"?>        複製程式碼

flow_wrapMode屬性一共有三種值，在上面的佈局的基礎上，更換一下不同的值，看一下效果：

「none值」：所有引用的View形成一條鏈，水平居中，超出螢幕兩側的View不可見。

「chian值」：所引用的View形成一條鏈，超出部分會自動換行，同行的View會平分寬度。

「aligned值」：所引用的View形成一條鏈，但View會在同行同列。

即然是一條鏈，那麼可以通過鏈的樣式進行約束。

鏈約束

當flow_wrapMode屬性為aligned和chian屬性時，通過鏈進行約束。ConstraintLayout,看完一篇真的就夠了麼？ 此文有談到鏈約束(Chain)。

給Flow佈局新增以下屬性進行不同chain約束:

• flow_firstHorizontalStyle 約束第一條水平鏈，當有多條鏈(多行)時，只約束第一條鏈(第一行)，其他鏈(其他行)不約束；
• flow_lastHorizontalStyle 約束最後一條水平鏈，當有多條鏈(多行)時，只約束最後一條鏈(最後一行)，其他鏈(其他行)不約束；
• flow_horizontalStyle 約束所有水平鏈；
• flow_firstVerticalStyle 同水平約束；
• flow_lastVerticalStyle 同水平約束；
• flow_verticalStyle 約束所有垂直鏈；

以上屬性，取值有：spread、spread_inside、packed

「效果：」

「spread值：」

程式碼：

「spread_inside值：」

程式碼：

「packed值：」

程式碼：

其他效果大家在實踐可以嘗試看看效果，建議「點贊」收藏本文，在使用不會可以翻閱一下，效率事半功倍，免得重新浪費時間谷歌搜尋。

對齊

上文XML佈局中，所有TextView的寬高是一致的，所以看著整整齊齊，當寬高不一致時，可以進行對齊處理。個人試了一下app:flow_wrapMode="aligned"下的對齊，沒啥效果，估計有預設值了吧。看看flow_wrapMode屬性為none和chain情況吧。

給Flow佈局新增以下屬性進行不同Align約束:

• flow_verticalAlign 垂直方向對齊,取值有：top、bottom、center、baseline;
• flow_horizontalAlign 水平方向對齊,取值有：start、end、center;

對齊方向一般與鏈的方向相反才可生效，例如垂直鏈樣式，一般對齊View的左右邊和中間。

簡單舉個例子：垂直方向頂部對齊。

「效果圖：」

可以看到E和G、F頂部對齊。

程式碼：

簡單的理解aligned和chian是none的定製版，通過新增不同的屬性定製而成。由於Flow是虛擬佈局，簡單理解就是約束助手，它並不會增加布局層級，卻可以像正常的佈局一樣使用。

「其他屬性」

上文的XML的佈局沒有設定Flow對View的組織方式(水平or 垂直)，可以通過orientation屬性來設定水平horizontal和垂直vertical方向，例如改為垂直方向。

當flow_wrapMode屬性為aligned和chian時，通過flow_maxElementsWrap屬性控制每行最大的子View數量。例如：flow_maxElementsWrap=3。

當flow_wrapMode屬性為none時，A和G被擋住了，看不到。

要A或者G可見，通過設定flow_horizontalBias屬性，取值在0-1之間。前提條件是flow_horizontalStyle屬性為packed才會生效。

   複製程式碼

「效果圖：」

設定flow_horizontalBias=1那麼G就可以看到了。該屬性還有其他類似ChainStyle的屬性w玩法，具體可以實踐體驗。當然，也可以在flow_wrapMode屬性為其他值生效。

通過不同的屬性可以搭配很多不同的效果，再加上MotionLayout動畫，那就更炫酷了。

二、Layer 層佈局

Layer也是一個約束助手ConstraintHelper，相對Flow比較簡單，常用來增加背景，或者共同動畫。由於ConstraintHelper本身繼承自View，跟我們自己通過View在ConstraintLayout佈局中給多個View新增共同背景沒什麼區別，只是更方便而已。

「1、新增背景」

給ImageView和TextView添加個共同背景：

「效果：」

「程式碼：」

<?xml version="1.0" encoding="utf-8"?>        

「2、共同動畫」

通過屬性動畫給ImageView和TextView新增通過動畫效果。

「效果：」

「程式碼：」

val animator = ValueAnimator.ofFloat( 0f, 360f)animator.repeatMode=ValueAnimator.RESTARTanimator.duration=2000animator.interpolator=LinearInterpolator()animator.repeatCount=ValueAnimator.INFINITEanimator.addUpdateListener {    layer.rotation=  it.animatedValue as Float}layer.setOnClickListener {   animator.start()}

對屬性動畫模糊的同學可以看看：Android屬性動畫,看完這篇夠用了吧

支援：旋轉、位移、縮放動畫。透明效果試了一下，是針對自身的，而不是約束的View。

三、自定義ConstraintHelper

Flow和Layer都是ConstraintHelper的子類，當兩者不滿足需求時，可以通過繼承ConstraintHelper來實現想要的約束效果。

在某乎APP有這麼個類似的動畫廣告：

那麼通過自定義ConstraintHelper來實現就非常簡單：

class AdHelper :    ConstraintHelper {    constructor(context: Context?) : super(context)    constructor(context: Context?,attributeSet: AttributeSet):super(context,attributeSet)    constructor(context: Context?,attributeSet: AttributeSet,defStyleAttr: Int):super(context,attributeSet,defStyleAttr)    override fun updatePostLayout(container: ConstraintLayout?) {        super.updatePostLayout(container)        val views = getViews(container)        views.forEach {            val anim = ViewAnimationUtils.createCircularReveal(it, 0, 0, 0f, it.width.toFloat())            anim.duration = 5000            anim.start()        }    }}

佈局引用AdHleper：

<?xml version="1.0" encoding="utf-8"?>    複製程式碼

四、ImageFilterButton

圓角圖片，圓形圖片怎麼實現？自定義View?通過ImageFilterButton,一個屬性就搞定；ImageFilterButto能做的還有更多。

看看如何實現圓角或圓形圖片:

「原圖：」

將roundPercent屬性設定為1，取值在0-1，由正方形向圓形過渡。

    複製程式碼

「效果：」

也可以通過設定round屬性來實現：

「其他屬性：」

altSrc和src屬性是一樣的概念，altSrc提供的資源將會和src提供的資源通過crossfade屬性形成交叉淡化效果。預設情況下,crossfade=0，altSrc所引用的資源不可見,取值在0-1。 例如：

crossfade=0.5時，效果：

crossfade=1時，效果：

接下來幾個屬性是對圖片進行調節：

warmth色溫：1=neutral自然, 2=warm暖色, 0.5=cold冷色

brightness亮度：0 = black暗色, 1 = original原始, 2 = twice as bright兩倍亮度；這個效果不好貼圖，大家自行驗證；

saturation飽和度：0 = grayscale灰色, 1 = original原始, 2 = hyper saturated超飽和；

contrast對比：1 = unchanged原始, 0 = gray暗淡, 2 = high contrast高對比;

上面屬性的取值都是0、1、2，不過大家可以取其他值，效果也是不一樣的。 最後一個屬性overlay,表示不知道怎麼用，看不到沒效果，大家看看評論跟我說聲？

五、ImageFilterView

ImageFilterView與ImageFilterButton的屬性一模一樣，只是它兩繼承的父類不一樣，一些操作也就不一樣。ImageFilterButton繼承自AppCompatImageButton,也就是ImageButtion。而ImageFilterView繼承自ImageView。

六、MockView

還記得你家專案經理給你的UI原型圖麼？想不想回敬一下專案經理，是時候了~

MockView能簡單的幫助構建UI介面，通過對角線形成的矩形+標籤。例如：

<?xml version="1.0" encoding="utf-8"?>            

「效果：」

中間黑色顯示的是MockView的id。通過MockView可以很好的構建一些UI思路。

七、MotionLayout

MitionLayou主要是用來實現動作動畫，可以參考我的另一篇文章：Android MotionLayout動畫：續寫ConstraintLayout新篇章

八、邊距問題的補充

有ConstraintLayout實踐經驗的朋友應該知道margin設定負值在ConstraintLayout是沒有效果的。例如下面佈局：TextView B的layout_marginLeft和layout_marginTop屬性是不會生效的。

<?xml version="1.0" encoding="utf-8"?>    

「效果：」

可以通過輕量級的Space來間接實現這種效果。

<?xml version="1.0" encoding="utf-8"?>    

「效果：」

2.0還增加了ConstraintProperties類用於通過api(程式碼)更新ConstraintLayout子檢視；其他一些可以參考官方文件，估計也差不多了。