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布局

相关文章
相关标签/搜索