Android NavigationView圆角 [英] Android NavigationView vith rounded corners

问题描述

我正在设计 Android 上的自定义抽屉，它的顶部和底部必须有圆角，我首先自定义顶部，然后发现了形状的背景不透明.

我有:

我需要构建:

我还需要一些关于如何将其四舍五入的帮助

nav_header_main.xml

 <?xml version ="1.0" encoding ="utf-8"?>< 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 ="@ dimen/nav_header_height"android:background ="@ drawable/side_nav_bar"android:gravity ="bottom"android:orientation ="vertical"android:paddingLeft ="@ dimen/activity_horizo​​ntal_margin"android:paddingTop ="@ dimen/activity_vertical_margin"android:paddingRight ="@ dimen/activity_horizo​​ntal_margin"android:paddingBottom ="@ dimen/activity_vertical_margin"android:theme ="@ style/ThemeOverlay.AppCompat.Dark">< LinearLayoutandroid:layout_width ="match_parent"android:layout_height ="match_parent"android:orientation ="horizo​​ntal">< ImageViewandroid:id ="@ + id/imageView"android:layout_width ="0dp"android:layout_weight ="4"android:layout_height ="wrap_content"android:contentDescription ="@ string/nav_header_desc"android:paddingTop ="@ dimen/nav_header_vertical_spacing"app:srcCompat ="@ mipmap/ic_launcher_round"/>< LinearLayoutandroid:layout_width ="0dp"android:layout_weight ="5"android:layout_height ="wrap_content"android:orientation ="vertical">< TextViewandroid:layout_width ="match_parent"android:layout_height ="wrap_content"android:paddingTop ="@ dimen/nav_header_vertical_spacing"android:text ="@ string/nav_header_title"android:textColor ="@ color/colorWhite"android:textAppearance ="@ style/TextAppearance.AppCompat.Headline"/>< TextViewandroid:id ="@ + id/textView"android:layout_width ="wrap_content"android:layout_height ="wrap_content"android:textColor ="@ color/colorWhite"android:text ="@ string/nav_header_subtitle"/></LinearLayout></LinearLayout></LinearLayout> 

side_nav_bar.xml

 < shape xmlns:android ="http://schemas.android.com/apk/res/android"android:shape ="rectangle">< solid android:width ="3dp"android:color ="@ color/colorPrimary"/>< corners android:radius ="1dp"android:bottomRightRadius ="0dp" android:bottomLeftRadius ="0dp"android:topLeftRadius ="30dp" android:topRightRadius ="0dp"/></形状> 

解决方案

如果您使用的是

ShapeAppearanceModel 需要版本1.1.0的材质组件(当前为'com.google.android.material:material:1.1.0-alpha10')

I am designing a custom Drawer on Android, it must have rounded corners in top and bottom, I am first customizing top side and I find the problem that the background of the shape is not transparent.

I have:

I need to build:

I would also like some help on how to round it on the bottom

nav_header_main.xml

<?xml version="1.0" encoding="utf-8"?>
<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="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_weight="4"
            android:layout_height="wrap_content"
            android:contentDescription="@string/nav_header_desc"
            android:paddingTop="@dimen/nav_header_vertical_spacing"
            app:srcCompat="@mipmap/ic_launcher_round" />
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="5"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingTop="@dimen/nav_header_vertical_spacing"
                android:text="@string/nav_header_title"
                android:textColor="@color/colorWhite"
android:textAppearance="@style/TextAppearance.AppCompat.Headline" />
            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/colorWhite"
                android:text="@string/nav_header_subtitle" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

side_nav_bar.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<solid android:width="3dp"
    android:color="@color/colorPrimary"
    />
<corners android:radius="1dp"
    android:bottomRightRadius="0dp" android:bottomLeftRadius="0dp"
    android:topLeftRadius="30dp" android:topRightRadius="0dp"/>
</shape>

解决方案

If you are using the NavigationView in the Material Components library, you can apply a custom ShapeAppearanceModel to the corner of the your NavigationView.

Something like:

float radius = getResources().getDimension(R.dimen.roundcorner);
NavigationView navigationView = findViewById(R.id.nav_view);
MaterialShapeDrawable navViewBackground = (MaterialShapeDrawable) navigationView.getBackground();
    navViewBackground.setShapeAppearanceModel(
        navViewBackground.getShapeAppearanceModel()
            .toBuilder()
            .setTopRightCorner(CornerFamily.ROUNDED,radius)
            .setBottomRightCorner(CornerFamily.ROUNDED,radius)
            .build());

In this way the NavigationView has rounded corners.
Now you have to pay attention to the header layout to build a rounded corner on the top. You have to use as background for the header view, something like:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/side_nav_bar" 
    ...>

where the side_nav_bar is

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
     ....
     <corners android:topRightRadius="32dp" />
</shape>

Don't use a rounded corner on the bottom, because it is only the view used on the header of the NavigationView.

The ShapeAppearanceModel requires the version 1.1.0 of material components (currently 'com.google.android.material:material:1.1.0-alpha10')

这篇关于Android NavigationView圆角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！