Android ConstraintLayout 2.0:ConstraintLayoutStates

image

原文www.zhangman523.cn/383.htmlphp

隨着ConstraintLayout 2.0的推出,有一個名爲ConstraintLayoutStates的有趣新功能。 ConstraintLayoutStates容許您建立具備不一樣狀態的佈局,並輕鬆地在它們之間切換。 一般,大多數佈局包含加載狀態,初始狀態,結束狀態和錯誤狀態。 使用ConstraintLayoutStates,能夠在這些不一樣的狀態之間切換。html

你如何使用這個新功能?java

第一步 添加依賴

dependencies {
    implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha2'
}
複製代碼

或者用androidX變種android

implementation 'androidx.constraintlayout:constraintlayout:2.0.0-alpha2'
複製代碼

第二步 在layout 的文件下建立不一樣狀態的佈局文件

image

第三步 建立ConstraintLayoutStatesXML文件

xml資源文件夾中,建立包含狀態的xml文件。 在此示例中,咱們將其稱爲constraint_layout_states_example.xml 。 在此文件中放置佈局的全部不一樣表示。 給他們有意義的id,如start , loading等,而後將它們連接到相關的約束文件。git

<?xml version="1.0" encoding="utf-8"?>
<ConstraintLayoutStates xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">

    <State android:id="@+id/start" app:constraints="@layout/activity_constraint_layout_states_start" />

    <State android:id="@+id/loading" app:constraints="@layout/activity_constraint_layout_states_loading" />

    <State android:id="@+id/end" app:constraints="@layout/activity_constraint_layout_states_end" />

</ConstraintLayoutStates>
複製代碼

第四步 在狀態之間切換

在您的Activity/Fragment中,您如今能夠根據不一樣的條件輕鬆切換這些狀態。 首先須要在ConstraintLayout對象上使用loadLayoutDescription()加載狀態描述。 完成後,能夠使用先前狀態文件中定義的任何狀態調用constraintLayout.setState()github

在下面的示例中,咱們將狀態設置爲loading狀態。 而後過了一段時間(在這個例子中我只是post了一個延遲的runnable,模仿網絡調用),咱們將它設置爲end狀態。網絡

class ConstraintLayoutStateTest : AppCompatActivity() {
    val handler = Handler()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_constraint_layout_states_start)
        stateConstraintLayout.loadLayoutDescription(R.xml.constraintlayout_states_exmaple)
        var change = false

        button.setOnClickListener {
            stateConstraintLayout.setState(R.id.loading, 0, 0)
            HandlerCompat.postDelayed(handler, {
                stateConstraintLayout.setState(if (change) R.id.start else R.id.end, 0, 0)
                change = !change
            }, null, 3000)
        }
    }
}
複製代碼

效果圖app

image

您如今應該能夠在本身的應用程序中使用ConstraintLayoutStates 。 這個例子能夠在GITHUB上找到 。ide

原文www.zhangman523.cn/383.html佈局

相關文章
相關標籤/搜索