【问题标题】:Where can you get this scrollable/expandable bar View/Resrouce?你在哪里可以得到这个可滚动/可扩展的栏视图/资源?
【发布时间】:2020-12-22 20:45:51
【问题描述】:

在哪里可以找到此视图/资源?我已经在几个应用程序上看到了它。它应该暴露一些隐藏的布局。

这是我谈到的视图/资源:

在这里,在灰色背景上,您还可以看到隐藏的布局:

【问题讨论】:

    标签: android user-interface material-design android-resources


    【解决方案1】:

    CoordinatorLayout 的子视图可以通过使用BottomSheetBehavior 启用标准底页特征。这样做时,我们会处理底部锚定、向上/向下拖动手势支持和动画状态转换等。

    属性:

    behavior_hideable:确定在使用向下拖动手势时是否可以隐藏工作表(请记住,它始终可以通过编程方式隐藏)。标准底页的默认值为 false,模态底页的默认值为 true。

    behavior_draggable:确定在使用拖动手势时是否可以折叠/展开工作表(请记住,需要实现展开/折叠工作表的自定义方式)。默认值为 true。

    behavior_skipCollapsed:确定在隐藏工作表时是否应忽略折叠状态。如果 behavior_hideable 未设置为 true,这不会影响。默认值为 false。

    behavior_fitToContents:确定展开后工作表的高度是否包含其内容。或者,它分两个阶段扩展:父容器的一半高度,父容器的全高。默认值为 true。

    behavior_halfExpandedRatio:确定半展开状态下工作表的高度(作为父容器高度的比率)。如果 behavior_fitToContents 未设置为 false 并且应该大于窥视高度,这不会影响。默认值为 0.5(材料指南中推荐的比例)。

    behavior_expandedOffset:确定处于展开状态时工作表相对于父容器顶部的偏移量。如果 behavior_fitToContents 未设置为 false 并且应大于处于半展开状态时的偏移量,这不会影响。默认值为 0dp(工作表顶部与父容器顶部匹配)。

    behavior_peekHeight:工作表的初始“窥视”(折叠状态)高度。默认值为 auto,它在父容器的 16:9 比例关键线上设置窥视高度。可以另外使用尺寸(或像素值,以编程方式)。

    现在实现:

    layout_main.xml

                <?xml version="1.0" encoding="utf-8"?>
                <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    xmlns:app="http://schemas.android.com/apk/res-auto">
                
                
                    <com.google.android.material.appbar.AppBarLayout
                        app:elevation="0dp"
                        android:layout_width="match_parent"
                        android:fitsSystemWindows="true"
                
                        android:background="@android:color/transparent"
                        android:layout_height="wrap_content">
                
                        <androidx.appcompat.widget.Toolbar
                            android:id="@+id/toolbar"
                            android:layout_width="match_parent"
                            android:layout_height="?android:attr/actionBarSize"
                            />
                    </com.google.android.material.appbar.AppBarLayout>
                
                
                
                
                
                
                    <!-- Adding bottom sheet after main content -->
                    <include
                        layout="@layout/bottomsheet_layout" />
                
                </androidx.coordinatorlayout.widget.CoordinatorLayout>
    

    bottomsheet_layout.xml

                <?xml version="1.0" encoding="utf-8"?>
                
                <androidx.core.widget.NestedScrollView 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="wrap_content"
                    android:orientation="vertical"
                    app:behavior_hideable="false"
                    app:behavior_peekHeight="115dp"
                    app:layout_behavior="@string/bottom_sheet_behavior">
                
                
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical">
                
                
                        <FrameLayout
                            android:layout_width="match_parent"
                            android:layout_height="110dp"
                            android:background="@android:color/transparent"
                            app:layout_constraintBottom_toBottomOf="parent"
                            app:layout_constraintEnd_toEndOf="parent"
                            app:layout_constraintStart_toStartOf="parent">
                
                            <ImageView
                                android:layout_width="match_parent"
                                android:layout_height="30dp"
                                android:scaleType="fitXY"
                                android:src="@drawable/frame_curved_border_top" />
                
                            <androidx.constraintlayout.widget.ConstraintLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_marginTop="30dp"
                                android:background="@color/white">
                
                
                
                
                                <TextView
                                    android:id="@+id/textView2"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginStart="32dp"
                                    android:layout_marginTop="3dp"
                                    android:fontFamily="@font/opensans_semibold"
                                    android:text=" Siliguri - Gangtok   (6123)"
                                    android:textSize="16sp"
                                    app:layout_constraintStart_toStartOf="parent"
                                    app:layout_constraintTop_toTopOf="parent" />
                
                                <TextView
                                    android:id="@+id/textView14"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginStart="23dp"
                                    android:layout_marginBottom="4dp"
                                    android:fontFamily="@font/opensans_bold"
                                    android:text="8:00 AM  - 6:00 AM"
                                    android:textSize="14sp"
                                    app:layout_constraintBottom_toBottomOf="parent"
                                    app:layout_constraintStart_toStartOf="parent" />
                
                                <TextView
                                    android:id="@+id/textView15"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:layout_marginStart="23dp"
                                    android:fontFamily="@font/opensans_semibold"
                                    android:text="STNM Government"
                                    android:textSize="13sp"
                                    app:layout_constraintBottom_toTopOf="@+id/textView14"
                                    app:layout_constraintStart_toStartOf="parent" />
                
                
                
                
                            </androidx.constraintlayout.widget.ConstraintLayout>
                        </FrameLayout>
                
                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:background="@color/white"
                            android:orientation="vertical">
                
                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="16dp"
                                android:fontFamily="@font/opensans_bold"
                                android:text="Journey Updates"
                                android:textSize="16sp" />
                
                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginStart="24dp"
                                android:layout_marginTop="16dp"
                                android:drawablePadding="8dp"
                                android:drawableTint="@color/light_grey"
                                android:fontFamily="@font/opensans_regular"
                                android:text="Driver started the journey"
                                android:textAlignment="center"
                                android:textSize="16sp" />
                
                            <View
                                android:layout_width="2dp"
                                android:layout_height="30dp"
                                android:layout_gravity="center"
                                android:layout_marginTop="8dp"
                                android:background="#ddd" />
                
                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginStart="24dp"
                                android:layout_marginTop="16dp"
                                android:drawablePadding="8dp"
                                android:drawableTint="@color/light_grey"
                                android:fontFamily="@font/opensans_regular"
                                android:text="Driver has left the bus stop (SNT)"
                                android:textAlignment="center"
                                android:textSize="16sp" />
                
                            <View
                                android:layout_width="2dp"
                                android:layout_height="30dp"
                                android:layout_gravity="center"
                                android:layout_marginTop="8dp"
                                android:background="#ddd" />
                
                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginStart="24dp"
                                android:layout_marginTop="16dp"
                                android:drawablePadding="8dp"
                                android:drawableTint="@color/light_grey"
                                android:fontFamily="@font/opensans_regular"
                                android:text="Driver is on the way"
                                android:textAlignment="center"
                                android:textSize="16sp" />
                
                            <View
                                android:layout_width="2dp"
                                android:layout_height="30dp"
                                android:layout_gravity="center"
                                android:layout_marginTop="8dp"
                                android:background="#ddd" />
                
                
                        </LinearLayout>
                
                    </LinearLayout>
                
                
                </androidx.core.widget.NestedScrollView>
                
                
    

    您可以将其用作 frame_curved_border_top.png

    现在您可以使用其他选项(例如 MotionLayout)在 Android 中实现相同的结果,由您决定。如果您只想要一个没有拖动效果的简单FragmentDialog 实现,我也会用它来更新答案。如果有帮助,请选择它作为答案。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-07-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多