标签: bottom-sheet

我基本上遇到了与这篇文章相同的问题，只不过我使用的是 Jetpack Compose，而不是旧的 View 模型。任何类型的内容都会发生这种情况 - 我用一个简单的Text可组合项对其进行了测试。重现方法如下：

1. 设置Text可组合项以显示最终使其高 6 行的字符串
2. 将文本更改为仅 1 行高（同时底部工作表保持展开状态）。在我的测试用例中，我只是这样做，以便单击文本会更改它
3. 可组合项的顶部Text保持在先前的水平，底部瞬间“跳”起来以弥补高度差。然后整个可组合项下降，最终到达屏幕底部，它本来应该在的地方

仅当新内容的高度比原始内容短时才会发生这种情况（这就是为什么我用 6 行文本更改为 1 行来测试它）。我引用的原始帖子说解决方案是 set android:animateLayoutChanges = "false"，但是，我在 Compose 中没有看到任何等效的内容。有一个修饰符animateContentSize，但它仅用于启用动画。我没有看到任何禁用它的选项。

这是我的示例代码：

ModalBottomSheetLayout(
        sheetContent = {
            var text by remember{ mutableStateOf("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled …

我BottomSheet在android支持中尝试了新功能.在里面BottomSheet我放了一个TextView和一个ScrollView.该BottomSheet表现得很好,我发现的唯一的问题是,ScrollView在BottomSheet没有滚动.每次我尝试滚动时,滚动的主要活动中的布局或BottomSheet从折叠到展开的更改状态.

这是我的Activity类代码的片段:

private BottomSheetBehavior behavior;
View bottomSheet;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    setTextViewOnClickListener(this, findViewById(R.id.parentLayout));

    CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.main_content);

    // The View with the BottomSheetBehavior
    bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet);
    behavior = BottomSheetBehavior.from(bottomSheet);
    behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {
            // React to state change

        }


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

我正在使用非常天真的代码来显示底部对话框片段:

class LogoutBottomSheetFragment : BottomSheetDialogFragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        val view = inflater.inflate(R.layout.view_image_source_chooser, container, false)
        return view
    }
}

这就是我调用此对话框的方式:

LogoutBottomSheetFragment().show(supportFragmentManager, "logout")

但是我在下面的图片中看到了这个可怕的东西.如何将导航栏保持为白色(背面/主页软件按钮所在的底栏)？

我正在使用的应用主题:

 <!-- Base application theme. -->
<style name="BaseAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize your theme here. -->
</style

<style name="AppTheme" parent="BaseAppTheme">
    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>

    <!-- Main theme colors -->
    <!--   your app branding color for the app bar -->
    <item name="android:colorPrimary">@color/colorPrimary</item>
    <!--   darker variant for the status bar and contextual app …

介绍

我有一个活动,它实现使用具有视差的标题图片和滚动内容的共用图案CoordinatorLayout,AppBarLayout和CollapsingToolbarLayout.我的xml布局如下所示:

<android.support.design.widget.CoordinatorLayout
    android:fitsSystemWindows="true"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <android.support.design.widget.AppBarLayout
        android:fitsSystemWindows="true"
        android:id="@+id/appbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:fitsSystemWindows="true"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <TextView
                android:background="@color/colorAccent"
                android:gravity="center"
                android:layout_height="250dp"
                android:layout_width="match_parent"
                android:text="ParallaxImage"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>

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

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

        <TextView
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/text_margin"
            android:layout_width="wrap_content"
            android:text="@string/large_text"/>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

正如您在下面的gif动画中看到的,一切正常.您可以从内容NestedScrollView以及Toolbar视差或视差中滚动整个屏幕View.

问题

谷歌推出了一个BottomSheetBehavior类(Android设计支持库23.2),以帮助开发人员实现Bottom表.我的带有Bottom工作表的xml布局如下所示:

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">
        <!-- ommited …

我BottomSheet参与了我的活动.

我behavior.setState(BottomSheetBehavior.STATE_EXPANDED);打算显示底页并且它工作正常,但我onClick遇到的问题是我可以以某种方式点击我的底部工作表的空白区域来触发底部工作表后面的视图事件.有没有办法防止这种情况发生？

我想重新创建Google地图应用中提供的底部表格行为:

链接到预期的行为.

我已经尝试过使用BottomSheetBehavior和其他一些第三方库,比如umano AndroidSlidingUpPanel,但我无法避免的问题是它们都在状态之间捕捉底层(折叠和扩展).

我希望有一个底板,可以通过向上滑动平滑地展开,而不会卡到最近的状态,而是保持用户停止滑动的位置.

我在底部片段中有一个编辑文本.当焦点出现在编辑文本上时,布局就会上升.我试过了

 android:windowSoftInputMode="adjustNothing"

它的工作是父活动,但不是对话框片段.

这是我的底层课程:

public class CustomBottomSheetDialogFragment extends BottomSheetDialogFragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.content_dialog_bottom_sheet, container, false);
        getDialog().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
        return v;
    }
}

初始状态

当键盘出现时

我希望布局始终保持在底部,键盘应位于布局上方.

检查布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/bottomSheetLayout"
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="@android:color/holo_blue_light"
android:padding="@dimen/activity_vertical_margin"
app:behavior_hideable="true"
app:behavior_peekHeight="60dp"
app:layout_behavior="@string/bottom_sheet_behavior">


<EditText
    android:id="@+id/edt"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="@android:color/white"
    android:padding="10dp" />

<TextView

    android:layout_width="wrap_content"
    android:layout_height="250dp"
    android:layout_below="@+id/edt" />

我正在开发一个Material Design应用程序.我想实现的一个功能是某种民意调查.当用户单击列表的元素时,应显示如下所示的持久性底部工作表对话框.然后,当用户单击任何按钮时,此对话框应该消失,并且应显示模式底部工作表对话框,为用户提供有关在开头单击的列表项的更多信息.看起来像这样.

我找不到有关BottomSheetDialog和BottomSheetDialogFragment的任何明确解释,以及如何正确使用它们,即使在阅读有关AppCompat对话框的一些信息之后也是如此.所以,我的问题是:

1. 它们以什么方式不同,我应该为每个案例使用哪一个？
2. 如何获取关于在对话框中按下哪个按钮的活动中的数据？
3. 有关使用它们的实现代码或教程的任何链接？

截至目前,随着Android设计库的官方底层组件实现,顶部边缘不显示阴影.但是对于我在各种模型和材料设计规范中看到的内容,底页包含某种离散的阴影.

我认为阴影可以帮助远离主要布局的底层,特别是如果设置了一个peek值和/或底部的页面始终可见.否则它只会与主要布局及其项目混合在一起.

我已经尝试过两种方法ViewCompat.setElevation(bottomSheet, 5);并android:elevation="5dp"在XML中设置视图,但没有成功.

我有以下测试底页实现.

当我将peekHeight设置为小于500的值时,它可以工作.经过一定的价值后,偷看高度的任何增加都不会改变底部纸张的展开方式.它只是留在那里只能手动拖动.我们如何以编程方式设置peekHeight以确保底部工作表自动扩展到查看高度.

bottom_sheet_dialog_main

<?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"
    android:id="@+id/locUXCoordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:id="@+id/locUXView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:orientation="vertical"
        app:behavior_hideable="false"
        app:behavior_peekHeight="0dp"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="1 Value" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="2 Value" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="3 Value" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="4 Value" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="5 Value" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="6 Value" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="7 Value" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="8 Value" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="9 Value" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text="First Value" …