Bottom Sheet Behavior in Android - Lập trình Android

Bottom Sheet Behavior in Android

Chào mừng bạn thân! Trong Thủ thuật Android này, chúng ta sẽ tìm hiểu Hành vi dưới cùng của trang tính trong Android. Chúng ta sẽ thấy rằng Hành vi dưới cùng của Trang tính là gì? cách hoạt động và chúng ta sẽ tìm hiểu bước triển khai của Bottom SheetsBehavior. Vậy hãy bắt đầu.

Trang tính dưới cùng là gì

Trang tính dưới cùng là các thành phần bề mặt chứa nội dung bổ sung. Nó chủ yếu cố định dưới cùng của màn hình. Nói một cách dễ hiểu, bạn có thể nói, BottomSheet là một thành phần material design trượt lên từ cuối màn hình để hiển thị nội dung bổ sung.

Sử dụng

Các tấm dưới cùng là bề mặt bổ sung được sử dụng trên thiết bị di động. Có hai loại phù hợp với các trường hợp sử dụng khác nhau:

Trang tính dưới cùng phương thức - thay thế cho hộp thoại nội tuyến trên thiết bị di động và cung cấp chỗ cho các mô tả và hình tượng. Mở từ dưới lên trên tương tác của người dùng. Nếu bạn muốn chia sẻ điều gì đó, tùy chọn sẽ bật lên từ dưới cùng. Đối với trang dưới cùng của mô hình, tôi đã viết một bài báo riêng ở đây.

Trang tính dưới cùng liên tục - cung cấp một bề mặt thu gọn có thể được mở rộng bằng cách tương tác của người dùng (kéo, nhấp vào một số nút) truy cập vào một tính năng chính. Nói một cách dễ hiểu, bạn nói, Trang tính dưới cùng liên tục có thể trượt lên và xuống bất kỳ lúc nào.

Trang dưới cùng liên tục

Nó còn được gọi là BottomSheetBehavior. Nó hoạt động với CoordinatorLayout và hiển thị nội dung trên đầu nội dung chính. Bottom Sheet là thành phần thiết kế material design được viết tốt giúp điều chỉnh hoạt ảnh vào / ra, phản hồi các cử chỉ kéo / vuốt, v.v.

Bước triển khai của BottomSheet liên tục

• Thiết lập dự án và thêm các phụ thuộc thiết kế material io.
• Chuẩn bị bố cục của tờ dưới cùng.
• Bao gồm trang tính dưới cùng với bố cục nội dung chính.
• Init hành vi trang tính dưới cùng trong hoạt động.

Kiểm tra ứng dụng mẫu.

Các bạn ơi, bây giờ mình sẽ tạo một ứng dụng mẫu bằng bước trên. Vậy hãy bắt đầu

1. Thiết lập dự án và thêm các phụ thuộc thiết kế material io

Hãy mở studio android với androidx và thêm phụ thuộc material io

implementation 'androidx.appcompat:appcompat:1.1.0'

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'

1.1 Mở tệp color.xml và thêm các màu bên dưới

<?xml version="1.0" encoding="utf-8"?>

<resources>

  <color name="colorPrimary">#008577</color>

  <color name="colorPrimaryDark">#00574B</color>

  <color name="colorAccent">#6646ee</color>

  <color name="colorWhite">#fff</color>

</resources>

1.2 Add few dimen file

<?xml version="1.0" encoding="utf-8"?>

<resources>

  <dimen name="default_margin">16dp</dimen>

  <dimen name="drawable_padding">24dp</dimen>

  <dimen name="text_size">16sp</dimen>

  <dimen name="normal_padding">16dp</dimen>

</resources>

1.3 In style.xml add one style for bottom sheet button.

  <style name="bottom_sheet_item">

    <item name="android:textSize">@dimen/text_size</item>

    <item name="android:drawablePadding">@dimen/drawable_padding</item>

    <item name="android:layout_width">0dp</item>

    <item name="android:layout_height">wrap_content</item>

    <item name="android:padding">@dimen/normal_padding</item>

  </style>

  2. Prepare the layout of the bottom sheet

  <?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:id="@+id/bottom_sheet"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:background="#fff"

    android:orientation="vertical"

    app:behavior_hideable="false"

    app:behavior_peekHeight="72dp"

    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"

    >

  <androidx.constraintlayout.widget.ConstraintLayout

      android:id="@+id/constraintLayout"

      android:layout_width="0dp"

      android:layout_height="wrap_content"

      android:background="@color/colorAccent"

      app:layout_constraintEnd_toEndOf="parent"

      app:layout_constraintStart_toStartOf="parent"

      app:layout_constraintTop_toTopOf="parent"

      >

    <ImageView

        android:id="@+id/imageView"

        android:layout_width="60dp"

        android:layout_height="60dp"

        android:layout_marginBottom="8dp"

        android:layout_marginLeft="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        app:srcCompat="@drawable/user_image"

        />

    <TextView

        android:id="@+id/textView"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginLeft="16dp"

        android:layout_marginRight="8dp"

        android:layout_marginStart="16dp"

        android:layout_marginTop="8dp"

        android:text="Loren Kushwaha"

        android:textColor="@color/colorWhite"

        android:textSize="18sp"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toEndOf="@+id/imageView"

        app:layout_constraintTop_toTopOf="@+id/imageView"

        />

    <TextView

        android:id="@+id/textView2"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginLeft="16dp"

        android:layout_marginRight="8dp"

        android:layout_marginStart="16dp"

        android:layout_marginTop="2dp"

        android:text="loren.kushwaha@gmail.com"

        android:textColor="@color/colorWhite"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toEndOf="@+id/imageView"

        app:layout_constraintTop_toBottomOf="@+id/textView"

        />

  </androidx.constraintlayout.widget.ConstraintLayout>

  <androidx.appcompat.widget.AppCompatTextView

      android:id="@+id/button"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_marginLeft="8dp"

      android:layout_marginStart="8dp"

      android:drawableTop="@drawable/ic_call"

      android:text="Call"

      android:textColor="@color/colorAccent"

      app:layout_constraintEnd_toStartOf="@+id/button3"

      app:layout_constraintHorizontal_bias="0.5"

      app:layout_constraintStart_toStartOf="parent"

      app:layout_constraintTop_toTopOf="@+id/button3"

      />

  <androidx.appcompat.widget.AppCompatTextView

      android:id="@+id/button2"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_marginEnd="8dp"

      android:layout_marginLeft="8dp"

      android:layout_marginRight="8dp"

      android:layout_marginStart="8dp"

      android:drawableTop="@drawable/ic_save"

      android:text="Save"

      android:textColor="@color/colorAccent"

      app:layout_constraintEnd_toEndOf="parent"

      app:layout_constraintHorizontal_bias="0.5"

      app:layout_constraintStart_toEndOf="@+id/button3"

      app:layout_constraintTop_toTopOf="@+id/button3"

      />

  <androidx.appcompat.widget.AppCompatTextView

      android:id="@+id/button3"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_marginLeft="16dp"

      android:layout_marginStart="16dp"

      android:layout_marginTop="24dp"

      android:background="@android:color/transparent"

      android:drawableTop="@drawable/ic_website"

      android:text="Website"

      android:textColor="@color/colorAccent"

      app:layout_constraintEnd_toStartOf="@+id/button2"

      app:layout_constraintHorizontal_bias="0.5"

      app:layout_constraintStart_toEndOf="@+id/button"

      app:layout_constraintTop_toBottomOf="@+id/constraintLayout"

      />

  <View

      android:id="@+id/textView3"

      android:layout_width="0dp"

      android:layout_height="1dp"

      android:layout_marginTop="24dp"

      android:background="#ededed"

      app:layout_constraintEnd_toEndOf="parent"

      app:layout_constraintStart_toStartOf="parent"

      app:layout_constraintTop_toBottomOf="@+id/button3"

      />

  <TextView

      android:id="@+id/textView4"

      android:layout_width="0dp"

      android:layout_height="wrap_content"

      android:layout_marginEnd="8dp"

      android:layout_marginLeft="8dp"

      android:layout_marginRight="8dp"

      android:layout_marginStart="8dp"

      android:layout_marginTop="8dp"

      android:text="We demonstrate android & iOS app development tutorials for Firebase, Camera2 API, Exo Player, Youtube API, Dagger2, RxJava, MVVM, MVP, Realm, and more."

      android:textSize="16sp"

      app:layout_constraintEnd_toEndOf="parent"

      app:layout_constraintStart_toStartOf="parent"

      app:layout_constraintTop_toBottomOf="@+id/textView3"

      />

  <View

      android:id="@+id/textView5"

      android:layout_width="0dp"

      android:layout_height="1dp"

      android:layout_marginTop="8dp"

      android:background="#ededed"

      app:layout_constraintEnd_toEndOf="parent"

      app:layout_constraintStart_toStartOf="parent"

      app:layout_constraintTop_toBottomOf="@+id/textView4"

      />

  <TextView

      android:id="@+id/textView6"

      android:layout_marginTop="8dp"

      android:text="@string/action_keep"

      app:layout_constraintEnd_toEndOf="parent"

      app:layout_constraintStart_toStartOf="parent"

      app:layout_constraintTop_toBottomOf="@+id/textView5"

      style="@style/bottom_sheet_item"

      />

  <TextView

      android:id="@+id/textView7"

      android:text="@string/action_inbox"

      app:layout_constraintEnd_toEndOf="parent"

      app:layout_constraintStart_toStartOf="parent"

      app:layout_constraintTop_toBottomOf="@+id/textView6"

      style="@style/bottom_sheet_item"

      />

  <TextView

      android:id="@+id/textView8"

      android:text="@string/action_hangout"

      app:layout_constraintEnd_toEndOf="parent"

      app:layout_constraintStart_toStartOf="parent"

      app:layout_constraintTop_toBottomOf="@+id/textView7"

      style="@style/bottom_sheet_item"

      />

</androidx.constraintlayout.widget.ConstraintLayout>

Nếu bạn thấy đoạn mã trên, tôi đã áp dụng một số thẻ bổ sung như layout_behavior, behavior_hidable, behavior_peekHeight, v.v. Đừng lo, tôi sẽ giải thích chi tiết từng thẻ một

Tôi đã áp dụng hành vi bằng cách thêm thuộc tính xml sau

app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"

Bạn có thể đặt các cờ hành vi bên dưới

app: behavior_hidable - cờ boolean của nó, true nghĩa là có thể ẩn trang dưới cùng bằng cách kéo hay không.

app: behavior_peekHeight - chiều cao xem trước cho trạng thái thu gọn.

3. Bao gồm trang tính dưới cùng với bố cục nội dung chính.

Vì vậy, hãy mở tệp tài nguyên mà bạn muốn đưa vào dưới cùng. BottomSheetBehavior hoạt động chỉ với CoordinatorLayout. Điều đó có nghĩa là nó phải là con trực tiếp của CoordinatorLayout. Mở tệp bố cục hoạt động và dán dòng mã bên dưới.

<?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"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity"

    >

  <androidx.constraintlayout.widget.ConstraintLayout

      android:layout_width="match_parent"

      android:layout_height="match_parent"

      app:layout_behavior="@string/appbar_scrolling_view_behavior"

      >

    <TextView

        android:id="@+id/textView10"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:text="This is a sample application of BottomSheet Behaviour Application "

        android:textColor="@color/colorPrimaryDark"

        android:textSize="16sp"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintHorizontal_bias="0.0"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        app:layout_constraintVertical_bias="0.054"

        />

    <Button

        android:id="@+id/buttonToggleBottomSheet"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginLeft="8dp"

        android:layout_marginRight="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="16dp"

        android:text="Toggle Bottom Sheet"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintHorizontal_bias="0.497"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/textViewState"

        />

    <TextView

        android:id="@+id/textViewState"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginEnd="8dp"

        android:layout_marginLeft="8dp"

        android:layout_marginRight="8dp"

        android:layout_marginStart="8dp"

        android:layout_marginTop="16dp"

        android:textColor="@color/colorAccent"

        android:textSize="16sp"

        android:textStyle="bold"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/textView10"

        tools:text="State of BottomSheet Behavior"

        />

  </androidx.constraintlayout.widget.ConstraintLayout>

  <include layout="@layout/bottom_sheet"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

4. Init the bottom sheet behavior in Activity.

public class MainActivity extends AppCompatActivity {

  TextView textViewBottomSheetState;

  Button toggleBottomSheet;

  BottomSheetBehavior bottomSheetBehavior;

  private static final String TAG = "MainActivity";

  @Override

  protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    // bind UI

    toggleBottomSheet = findViewById(R.id.buttonToggleBottomSheet);

    textViewBottomSheetState = findViewById(R.id.textViewState);

    // get the bottom sheet view

    ConstraintLayout bottomSheetLayout = findViewById(R.id.bottom_sheet);

    // init the bottom sheet behavior

    bottomSheetBehavior = BottomSheetBehavior.from(bottomSheetLayout);

    // set callback for changes

    bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {

      @Override public void onStateChanged(@NonNull View bottomSheet, int newState) {

        switch (newState) {

          case BottomSheetBehavior.STATE_HIDDEN:

            textViewBottomSheetState.setText("STATE HIDDEN");

            break;

          case BottomSheetBehavior.STATE_EXPANDED:

            textViewBottomSheetState.setText("STATE EXPANDED");

            // update toggle button text

            toggleBottomSheet.setText("Expand BottomSheet");

            break;

          case BottomSheetBehavior.STATE_COLLAPSED:

            textViewBottomSheetState.setText("STATE COLLAPSED");

            // update collapsed button text

            toggleBottomSheet.setText("Collapse BottomSheet");

            break;

          case BottomSheetBehavior.STATE_DRAGGING:

            textViewBottomSheetState.setText("STATE DRAGGING");

            break;

          case BottomSheetBehavior.STATE_SETTLING:

            textViewBottomSheetState.setText("STATE SETTLING");

            break;

        }

        Log.d(TAG, "onStateChanged: " + newState);

      }

      @Override public void onSlide(@NonNull View bottomSheet, float slideOffset) {

      }

    });

    // set listener on button click

    toggleBottomSheet.setOnClickListener(new View.OnClickListener() {

      @Override public void onClick(View view) {

        if (bottomSheetBehavior.getState() != BottomSheetBehavior.STATE_EXPANDED) {

          bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);

          toggleBottomSheet.setText("Collapse BottomSheet");

        } else {

          bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

          toggleBottomSheet.setText("Expand BottomSheet");

        }

      }

    });

  }

}