DrawerLayout 側滑欄

一、DrawerLayout側滑欄

常見的客戶端中左右側滑欄一般都使用此控件,首先在項目Modle.gradle 中添加依賴包

implementation 'com.android.support:design:28.0.0'
implementation 'com.android.support:palette-v7:28.0.0'

簡單示例如下:
(1)界面佈局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">    
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/id_dl_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:android = "http://schemas.android.com/apk/res/android">
        
        <!--普通佈局-->
        <LinearLayout
            android:id="@+id/ll_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <Button
                android:id="@+id/open_left"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="打開左邊"/>
            <Button
                android:id="@+id/open_right"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="打開右邊"/>
            <TextView
                android:id="@+id/ll_text"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:textSize="30sp"
                android:text="內容佈局"/>
        </LinearLayout>

        <!--左側滑佈局-->
        <LinearLayout
            android:id="@+id/id_ll_left"
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@color/colorAccent"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="左側滑欄"/>

            <Button
                android:id="@+id/lf_but"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="關閉"/>
        </LinearLayout>

        <!--右側滑佈局-->
        <LinearLayout
            android:id="@+id/id_ll_right"
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:background="@color/colorPrimary"
            android:orientation="vertical">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="右側滑欄"/>
        </LinearLayout>
    </android.support.v4.widget.DrawerLayout>    
</android.support.constraint.ConstraintLayout>

(2)MainActivity.java

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;
    private TextView ll_content;
    private LinearLayout id_ll_left;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        drawerLayout = findViewById(R.id.id_dl_root);
        ll_content = findViewById(R.id.ll_text);
        id_ll_left = findViewById(R.id.id_ll_left);

        drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {   //監聽drawerLayout
            @Override
            public void onDrawerSlide(@NonNull View view, float v) {
                id_ll_left.setRotation(360 * v);    //360°旋轉
                ll_content.setScaleX(2 * v);     //放大2倍
                ll_content.setScaleY(2 * v);
            }

            @Override
            public void onDrawerOpened(@NonNull View view) {

            }

            @Override
            public void onDrawerClosed(@NonNull View view) {

            }

            @Override
            public void onDrawerStateChanged(int i) {

            }
        });

        findViewById(R.id.lf_but).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                drawerLayout.closeDrawer(Gravity.START);
                ll_content.setText("左側欄被點擊了");
            }
        });

        findViewById(R.id.open_left).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                drawerLayout.openDrawer(Gravity.START);
            }
        });

        findViewById(R.id.open_right).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                drawerLayout.openDrawer(Gravity.END);
            }
        });
    }
}

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章