安卓 - 滑动面板（库）圆角

Question

我正在开发一个应用程序，该应用程序应使用导航抽屉作为菜单，但为了获得更好的用户体验，我决定将导航抽屉替换为向上滑动面板。

---

我的视图在这张图片中

---

---

现在我想要制作带有圆角的菜单，我使用了CardView并设置cornerRadius属性，但它没有正常工作。

---

这是我的向上滑动面板的XML代码

   <com.sothree.slidinguppanel.SlidingUpPanelLayout
        xmlns:sothree="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        sothree:umanoPanelHeight="0dp"
        sothree:umanoShadowHeight="0dp"
        android:id="@+id/SlidingUpPanel">

   
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

同样的设计可以在Facebook Messenger应用程序中看到：

---

---

任何想法都将受到欢迎，提前致谢...

附注：我使用的库链接：Github library

那些想要所有布局的人：

    <LinearLayout 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:orientation="vertical">

<include
    android:id="@+id/toolbar"
    layout="@layout/toolbar" />


<com.sothree.slidinguppanel.SlidingUpPanelLayout xmlns:sothree="http://schemas.android.com/apk/res-auto"
    android:id="@+id/SlidingUpPanel"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom"
    sothree:umanoPanelHeight="0dp"
    sothree:umanoShadowHeight="0dp">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#345D7D" />


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


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5"
            android:orientation="horizontal">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.33333">

                <ImageButton
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_centerInParent="true"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:scaleType="fitXY"
                    android:src="@drawable/quran_icon" />

            </RelativeLayout>


            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.33333">

                <ImageButton
                    android:layout_width="125dp"
                    android:layout_height="125dp"
                    android:layout_centerInParent="true"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:scaleType="fitXY"
                    android:src="@drawable/qibla_compass_icon" />

            </RelativeLayout>


            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.33333">

                <ImageButton
                    android:id="@+id/findMyLocation"
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_centerInParent="true"
                    android:background="?attr/selectableItemBackgroundBorderless"
                    android:scaleType="fitXY"
                    android:src="@drawable/location_icon" />


            </RelativeLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5"
            android:orientation="horizontal">


            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.33333">

                <ImageButton
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_centerInParent="true" />

            </RelativeLayout>


            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.33333">

                <ImageButton
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_centerInParent="true" />

            </RelativeLayout>


            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.33333">

                <ImageButton
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_centerInParent="true" />

            </RelativeLayout>
        </LinearLayout>


    </LinearLayout>


</com.sothree.slidinguppanel.SlidingUpPanelLayout>


</LinearLayout>

- Tərlan Əhəd

Answer 1

滑动面板需要使用属性：slide-up-panel。

sothree:umanoOverlay="true"

为了叠加布局。

通过此属性，我们不仅可以使面板 圆角化（使用CardView），还可以为滑动面板设置 透明背景。 参考：Github 透明背景（问题）。

- Tərlan Əhəd

Answer 2

Create a new drawable resource like

drawable_round_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:topLeftRadius="16dp"
        android:topRightRadius="16dp"/>
    <solid android:color="#FFFFFF" />
</shape>

并将 drawable_round_background.xml 设置为您的滑动布局的背景，如下所示：

<com.sothree.slidinguppanel.SlidingUpPanelLayout
    xmlns:sothree="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="bottom"
    sothree:umanoPanelHeight="0dp"
    sothree:umanoShadowHeight="0dp"
    android:id="@+id/SlidingUpPanel">

   <!-- SLIDING LAYOUT -->
   <LinearLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/drawable_round_background">
   </LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>

希望这能有所帮助。

- dotGitignore

---

@TarlanAhadli，我能看一下你的整个layout.xml吗？因为我的工作正常。 - dotGitignore

你是否尝试为RecyclerView项布局设置背景？因为你的RecyclerView是SlidingLayoutPanel的标题。 - dotGitignore

不，我只想让我的应用程序菜单带有圆角。 - Tərlan Əhəd

是的，我的RecyclerView拥有自己的背景颜色，十六进制代码为#345D7D，这会影响到我的滑动面板布局吗？ - Tərlan Əhəd

您还必须在SlidingUpPanelLayout视图中使用app:umanoShadowHeight="0dp"和sothree:umanoOverlay="true"。 - Homayoon Ahmadi

@dotGitignore，非常感谢。你帮我节省了时间！ - Yury Matatov