时间戳

首页 > 解决方案 > 我怎样才能创建这个布局？

android - 我怎样才能创建这个布局？

问题描述

我正在开发需要如下所述布局的应用程序。

在此处输入图像描述

布局中有四个部分，比如说布局 A、B、C 和 D。

  1. 布局 A是 AppBar 并固定在顶部。

  2. 布局 D被隐藏并在向上滚动时出现，并带有一些附加效果。

    • 向上滚动时，Layout-D从底部出现，而Layout-C开始褪色。
    • 一切都保持原样，直到Layout-D与Layout-C完全重叠。
    • 在Layout-D与Layout-C完全重叠后，进一步向上滚动Layout B开始向上滚动。

  3. 同样在向下滚动时，首先Layout-D向下滚动，然后Layout-B出现。进一步向下滚动时，Layout-D隐藏在下方，并且Layout-C再次出现并带有淡出效果。

我已经花了两天时间尝试将 BottomSheet 与 Coordinator 布局一起使用，但无法实现 Exact 效果。此外，BottomSheet 滚动效果不是那么平滑，即如果突然出现和隐藏。

我正在考虑使用的另一件事是使用协调器布局的自定义行为，但不确定如何继续。

查看.

标签： androidandroid-layout

解决方案

使用具有来自父活动或片段的底部工作表行为的片段：

<android.support.design.widget.CoordinatorLayout
        android:id="@+id/bottomsheetfragmenCoordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorBlackOpacity"
        android:clickable="true"
        >
        <android.support.constraint.ConstraintLayout
            android:id="@+id/bottomsheetfragmentLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:behavior_hideable="true"
            app:behavior_peekHeight="50dp"
            app:elevation="4dp"
            app:layout_behavior="@string/bottom_sheet_behavior">

            <fragment
                android:id="@+id/bottomsheetfragment"
                android:name="com.example.inslem.it.BottomSheet"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="parent" />
       </android.support.constraint.ConstraintLayout>
</android.support.design.widget.CoordinatorLayout>

底片片段：

public class BottomSheet extends Fragment {

    public BottomSheet() {
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_bottom_sheet, container, false);

        return view;
    }

    @Override
    public void onViewCreated(@NonNull final View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

    }
}

并从父活动或父片段中获取底部表

@Override
public void onViewCreated(@NonNull final View view, @Nullable Bundle savedInstanceState) {
    bottomsheetfragmenCoordinatorLayout = view.findViewById(R.id.bottomsheetfragmenCoordinatorLayout);
            behavior = BottomSheetBehavior.from(bottomsheetfragmentLayout);
            behavior.setPeekHeight(250);
            behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
                @Override
                public void onStateChanged(@NonNull View bottomSheet, int newState) {
                    switch (newState) {
                        case BottomSheetBehavior.STATE_DRAGGING:
                            break;
                        case BottomSheetBehavior.STATE_SETTLING:
                            break;
                        case BottomSheetBehavior.STATE_EXPANDED:
                            break;
                        case BottomSheetBehavior.STATE_COLLAPSED:
                            break;
                        case BottomSheetBehavior.STATE_HIDDEN:
                            break;
                    }
                }

                @Override
                public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                    Log.i("BottomSheetCallback", "slideOffset: " + slideOffset);
                }
            });
}

推荐阅读