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");
}
}
});
}
}
Post a Comment
Post a Comment