Android中协调布局CoordinatorLayout的使用

Android自5.0之后对UI做了较大的提升,一个重大的改进是推出了MaterialDesign库,而该库的基础即为协调布局CoordinatorLayout,几乎所有的design控件都依赖于该布局。今天我们就学习一下CoordinatorLayout的相关知识。

1.依赖

support库依赖

implementation 'com.android.support:design:28.0.0'

AndroidX库依赖

implementation 'com.google.android.material:material:1.0.0-rc01'

2.布局

<androidx.coordinatorlayout.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cl_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- 此处省略内部的视图节点-->
</androidx.coordinatorlayout.widget.CoordinatorLayout>

3.属性

  • 使用layout_gravity属性,指定子视图在CoordinatorLayout内部的对齐方式。
  • 使用app:layout_anchor和app:layout_anchorGravity属性,指定子视图相对于其他子视图的位置。其中app:layout_anchor表示当前以哪个视图作为参照物,app:layout_anchorGravity表示本视图相对于参照物的对齐方式。
  • 使用app:layout_behavior属性,指定子视图相对于其他视图的行为,当对方的位置发生变化时,本视图的位置也要随之相应变化。

4.悬浮按钮FloatingActionButton特点

  • 悬浮按钮会悬浮在其他视图之上,即使布局文件中别的视图在它后面,悬浮按钮也仍然显示在最前面。
  • 在隐藏和显示悬浮按钮之时会播放切换动画,其中隐藏按钮操作调用了hide方法,显示按钮操作调用了show方法。
  • 悬浮按钮默认会随着便签条Snackbar的出现或消失而动态调整位置。

5.悬浮按钮与便签条联动示例

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cl_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/ll_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <Button
            android:id="@+id/btn_snackbar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="30dp"
            android:text="显示简单提示条"
            android:textColor="#000000"
            android:textSize="17sp" />
    </LinearLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:id="@+id/fab_btn"
        android:layout_margin="20dp"
        app:layout_anchor="@id/ll_main"
        app:layout_anchorGravity="bottom|right"
        android:background="@mipmap/float_btn"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private Button btn_snackbar;
    private CoordinatorLayout cl_main;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn_snackbar = findViewById(R.id.btn_snackbar);
        cl_main = findViewById(R.id.cl_main);
        btn_snackbar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Snackbar.make(cl_main,"这是一个提示条",Snackbar.LENGTH_LONG).show();
            }
        });
    }
}

猜你喜欢

转载自blog.csdn.net/weixin_38322371/article/details/114970675