Helpex - Trao đổi & giúp đỡ Đăng nhập
32

Google phát hành bản cập nhật mới để hỗ trợ thư viện 23.2 trong đó họ đã thêm tính năng trang tính dưới cùng. Bất kỳ ai có thể cho biết làm thế nào để thực hiện trang tính dưới cùng bằng cách sử dụng thư viện đó.

32 hữu ích 1 bình luận 39k xem chia sẻ
37

Cách triển khai Bottom Sheets bằng thư viện hỗ trợ thiết kế mới 23.2

Cách triển khai Bottom Sheets bằng thư viện hỗ trợ thiết kế mới 23.2

sử dụng bố cục như dưới đây

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout>

        <android.support.design.widget.CollapsingToolbarLayout>

            <ImageView/>

            <android.support.v7.widget.Toolbar/>

        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout>

            //.....

        </LinearLayout>


    </android.support.v4.widget.NestedScrollView>

    <FrameLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:behavior_hideable="true"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        //your bottom sheet layout

        </LinearLayout>
    </FrameLayout>


    <android.support.design.widget.FloatingActionButton/>

</android.support.design.widget.CoordinatorLayout>

trong Hoạt động

CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.main_content);
// The View with the BottomSheetBehavior
View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet);
final BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);
behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
    @Override
    public void onStateChanged(@NonNull View bottomSheet, int newState) {
        // React to state change
        Log.e("onStateChanged", "onStateChanged:" + newState);
        if (newState == BottomSheetBehavior.STATE_EXPANDED) {
                fab.setVisibility(View.GONE);
            } else {
                fab.setVisibility(View.VISIBLE);
            }
    }

    @Override
    public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        // React to dragging events
        Log.e("onSlide", "onSlide");
    }
});

behavior.setPeekHeight(100);
37 hữu ích 5 bình luận chia sẻ
9

Bạn chỉ có thể làm theo hướng dẫn được cung cấp tại đây: http://android-developers.blogspot.com/2016/02/android-support-library-232.html

" Bằng cách đính kèm BottomSheetBehavior vào Chế độ xem CoordinatorLayout của trẻ (tức là thêm ứng dụng: layout_behavior =" android.support.design.widget.BottomSheetBehavior "), bạn sẽ tự động nhận được phát hiện cảm ứng thích hợp để chuyển đổi giữa năm trạng thái ... "

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

<android.support.design.widget.CoordinatorLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/white">

    <!-- Your Widgets -->

    <FrameLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ff0000"
        app:behavior_hideable="true"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Test" />

    </FrameLayout>

</android.support.design.widget.CoordinatorLayout>

Sau đó, từ hoạt động của bạn:

View bottomSheet = findViewById(R.id.bottom_sheet);
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
bottomSheetBehavior.setState(<desired state>);
9 hữu ích 2 bình luận chia sẻ
6

gradle: lần đầu tiên sử dụng biên dịch 'com.android.support:design:23.2.0'

trong bố cục của bạn

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

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/bottom_sheet"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
    style="@style/Widget.Design.BottomSheet.Modal">
    <CalendarView
        android:layout_width="match_parent"
        android:layout_height="match_parent"></CalendarView>
</FrameLayout>

trong java

    CoordinatorLayout coordinatorLayout= (CoordinatorLayout) findViewById(R.id.cl_main);
    final View bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet);
    final BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);
    behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {

        }
        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {
            // React to dragging events

        }
    });
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            behavior.setState(BottomSheetBehavior.STATE_EXPANDED );
        }
    });
6 hữu ích 0 bình luận chia sẻ
1

Bạn có thể làm theo hướng dẫn trên tutsplus.com https://code.tutsplus.com/articles/how-to-use-bottom-sheets-with-the-design-support-library--cms-26031

<android.support.design.widget.CoordinatorLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

     <com.google.android.gms.maps.MapView
        android:id="@+id/map_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:uiCompass="true"
        app:uiMapToolbar="false" />


     <android.support.v4.widget.NestedScrollView
            android:id="@+id/bottom_sheet"
            android:layout_width="match_parent"
            app:behavior_peekHeight="100dp"
            app:behavior_hideable="true"
            android:layout_height="350dp"
            android:clipToPadding="true"
            android:background="@android:color/holo_orange_light"
            app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
            >
     
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/ipsum"
                android:padding="16dp"
                android:textSize="16sp"/>
     
        </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

Nếu bạn muốn nó có thể loại bỏ bằng cách vuốt, hãy đảm bảo thêm app:behavior_hideable="true"vào thẻ.

bên trong hoạt động của bạn, bạn có thể nói:

  BottomSheetBehavior mBottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.bottom_sheet));
  mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);

  findViewById(R.id.button).setOnClickListener(p-> mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED));
1 hữu ích 0 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ android android-support-library android-support-design , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading