Android - 向上滑动面板(库)圆角

Tər*_*həd 5 user-interface android slideup

我正在开发应该使用导航抽屉作为菜单 bur 以获得更好的用户体验的应用程序我决定用滑动面板替换导航抽屉。


我的观点在这张图片中


在此处输入图片说明


现在我想用圆角制作这个菜单,我使用了带有cornerRadius 属性的CardView,但没有正常工作。


这是我的向上滑动面板的 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>
Run Code Online (Sandbox Code Playgroud)

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


在此处输入图片说明


欢迎任何想法,提前致谢...

PS:我使用的库链接: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>
Run Code Online (Sandbox Code Playgroud)

Tər*_*həd 7

向上滑动面板需要属性:

sothree:umanoOverlay="true"
Run Code Online (Sandbox Code Playgroud)

为了覆盖布局。


通过这个属性,我们不仅可以使面板变(使用CardView),还可以为 slideuppanel设置透明背景

参考Github 透明背景(问题)


dot*_*ore 5

创建一个新的可绘制资源,如

drawable_round_background.xml:
Run Code Online (Sandbox Code Playgroud)
<?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>
Run Code Online (Sandbox Code Playgroud)

并将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>
Run Code Online (Sandbox Code Playgroud)

希望这会有所帮助。