web-dev-qa-db-de.com

Implementieren von Bottom Sheets mit der neuen Design Support Library 23.2

Google hat das neue Update veröffentlicht, um die Bibliothek 23.2 zu unterstützen. Kann jemand sagen, wie man das untere Blatt mit dieser Bibliothek implementiert.

32
Kamalanathan

enter image description here

enter image description here

verwenden Sie das Layout wie unten

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

in Aktivität

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
Dhaval Parmar

Sie können einfach den hier angegebenen Anweisungen folgen: http://Android-developers.blogspot.com/2016/02/Android-support-library-232.html

" Durch Anhängen eines BottomSheetBehavior an eine untergeordnete Ansicht eines CoordinatorLayout (dh Hinzufügen der App layout_behavior =" Android.support.design.widget.BottomSheetBehavior ") erhalten Sie automatisch die entsprechende Note Erkennung zum Übergang zwischen fünf Zuständen ... "

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

Dann von Ihrer Tätigkeit:

View bottomSheet = findViewById(R.id.bottom_sheet);
BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
bottomSheetBehavior.setState(<desired state>);
9
Igor Bubelov

gradle: benutze zuerst compile 'com.Android.support:design:23.2.0'

in Ihrem Layout

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

in 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
meunicorn

Sie können dem Tutorial auf tutsplus.com folgen 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>

Wenn Sie möchten, dass das Wischen nicht mehr möglich ist, müssen Sie dem Tag app:behavior_hideable="true" Hinzufügen.

in deiner Aktivität kannst du sagen:

  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
Irshu