随着ConstraintLayout 2.0的推出,有一个名为ConstraintLayoutStates的有趣新功能。 ConstraintLayoutStates允许您创建具有不同状态的布局,并轻松地在它们之间切换。 通常,大多数布局包含加载状态,初始状态,结束状态和错误状态。 使用ConstraintLayoutStates,可以在这些不同的状态之间切换。
你如何使用这个新功能?
第一步 添加依赖
dependencies {
implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha2'
}
1
2
3
4
5
dependencies{
implementation'com.android.support.constraint:constraint-layout:2.0.0-alpha2'
}
或者用androidX变种
implementation 'androidx.constraintlayout:constraintlayout:2.0.0-alpha2'
1
2
3
implementation'androidx.constraintlayout:constraintlayout:2.0.0-alpha2'
第二步 在layout 的文件下创建不同状态的布局文件
第三步 创建ConstraintLayoutStatesXML文件
在xml资源文件夹中,创建包含状态的xml文件。 在此示例中,我们将其称为constraint_layout_states_example.xml 。 在此文件中放置布局的所有不同表示。 给他们有意义的id,如start , loading等,然后将它们链接到相关的约束文件。
xmlns:app="http://schemas.android.com/apk/res-auto">
android:id="@+id/start"
app:constraints="@layout/activity_constraint_layout_states_start" />
android:id="@+id/loading"
app:constraints="@layout/activity_constraint_layout_states_loading" />
android:id="@+id/end"
app:constraints="@layout/activity_constraint_layout_states_end" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
xmlns:app="http://schemas.android.com/apk/res-auto">
android:id="@+id/start"
app:constraints="@layout/activity_constraint_layout_states_start"/>
android:id="@+id/loading"
app:constraints="@layout/activity_constraint_layout_states_loading"/>
android:id="@+id/end"
app:constraints="@layout/activity_constraint_layout_states_end"/>
第四步 在状态之间切换
在您的Activity/Fragment中,您现在可以根据不同的条件轻松切换这些状态。 首先需要在ConstraintLayout对象上使用loadLayoutDescription()加载状态描述。 完成后,可以使用先前状态文件中定义的任何状态调用constraintLayout.setState() 。
在下面的示例中,我们将状态设置为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)
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
classConstraintLayoutStateTest:AppCompatActivity(){
valhandler=Handler()
overridefunonCreate(savedInstanceState:Bundle?){
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_constraint_layout_states_start)
stateConstraintLayout.loadLayoutDescription(R.xml.constraintlayout_states_exmaple)
varchange=false
button.setOnClickListener{
stateConstraintLayout.setState(R.id.loading,0,0)
HandlerCompat.postDelayed(handler,{
stateConstraintLayout.setState(if(change)R.id.startelseR.id.end,0,0)
change=!change
},null,3000)
}
}
}
效果图
您现在应该可以在自己的应用程序中使用ConstraintLayoutStates 。 这个例子可以在GITHUB上找到 。