如何在同一个Activity中使用折叠工具栏和底部工作表视图?

时间:2017-04-01 11:05:23

标签: android bottom-sheet android-collapsingtoolbarlayout

在我的活动中,我正在使用折叠工具栏,它工作正常。菜单中有一个图标,单击该图标将触发底部工作表视图,并显示底部工作表。再次单击时,底部工作表将再次折叠。

这是xml。

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

<android.support.design.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"
android:fitsSystemWindows="true"
tools:context="com.example.aadesh.khabriuncle.ArticleScreenActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBar"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="#7fff"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:title="">

        <FrameLayout
            android:id="@+id/tags_article"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:background="#7000"
            android:visibility="visible">

            <ImageView
                android:id="@+id/toolbarImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <LinearLayout
                android:id="@+id/tags"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:background="@drawable/shape_chips"
                android:orientation="horizontal"
                android:visibility="gone" />


        </FrameLayout>


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbarArticleScreen"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:navigationIcon="@drawable/ic_chevron_left_black_24dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        </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="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/titletext"
            style="@style/Article.title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/author"
                style="@style/Article.date"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true" />

            <TextView
                android:id="@+id/datetext"
                style="@style/Article.date"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true" />

        </RelativeLayout>

        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />


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

<android.support.v4.widget.NestedScrollView
    android:id="@+id/comments_bottomSheet"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:background="@color/colorAccent"
    android:clipToPadding="true"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/titlebottom"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="16dp"
            android:textAllCaps="true"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/textbottom"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="16dp"
            android:textAllCaps="true"
            android:textSize="12sp" />

    </LinearLayout>


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

这就是我在java中设置它的方式

public boolean onOptionsItemSelected(MenuItem item) {

    if (item.getItemId() == R.id.comments) {
        Log.i(TAG, "selected item is " + item);
        if (bottomSheetBehavior.getState() != BottomSheetBehavior.STATE_EXPANDED) {
            Log.i(TAG, "the state is " + bottomSheetBehavior.getState());
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
        } else {
            Log.i(TAG, "the state is " + bottomSheetBehavior.getState());
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
        }
    }
    return super.onOptionsItemSelected(item);

}

问题是,只要活动开始,就会显示底部工作表视图。当我点击菜单图标时没有任何反应。 即使我打印的日志正在显示。

可能是什么原因?

1 个答案:

答案 0 :(得分:0)

有一些事情需要做 我将在这里举一个例子来指导你正确的方向。

第1步: 通过添加

编辑清单文件
android:windowSoftInputMode="stateHidden|stateAlwaysHidden" 

第2步: 将底部工作表布局放在xml文件中以进行活动。

  <RelativeLayout
            android:id="@+id/bottom_sheet"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:behavior_hideable="true"
            app:behavior_peekHeight="0dp"
          app:layout_behavior="com.package.ui.utils.BottomSheetBehaviorStiff">

第3步:     将BottomSheetBehaviorStiff添加到utils:

public class BottomSheetBehaviorStiff<V extends View> extends BottomSheetBehavior<V> {
    private boolean mAllowUserDragging = true;

    /**
     * Default constructor for instantiating BottomSheetBehaviors.
     */
    public BottomSheetBehaviorStiff() {
        super();
    }


    public BottomSheetBehaviorStiff(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setAllowUserDragging(boolean allowUserDragging) {
        mAllowUserDragging = allowUserDragging;
    }

    @Override
    public boolean onInterceptTouchEvent(CoordinatorLayout parent, V child, MotionEvent event) {
        if (!mAllowUserDragging) {
            return false;
        }
        return super.onInterceptTouchEvent(parent, child, event);
    }
}

第4步: 现在在您的活动中初始化它:

      RelativeLayout bottomSheetLayout = (RelativeLayout) 
         findViewById(R.id.bottom_sheet);
                bottomSheetBehaviorStiff = (BottomSheetBehaviorStiff)

     BottomSheetBehaviorStiff.from(bottomSheetLayout);
            bottomSheetBehaviorStiff.setAllowUserDragging(false);
            bottomSheetBehaviorStiff.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
                @Override
                public void onStateChanged(@NonNull View bottomSheet, int newState) {
                    if (newState == BottomSheetBehavior.STATE_HIDDEN) {
                        hideKeyBoard();
                    }
                }

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