如何删除具有圆形背景的`AppBarLayout`角落中的空白

Posted 2023-02-24

技术标签:

【中文标题】如何删除具有圆形背景的`AppBarLayout`角落中的空白【英文标题】：how to remove white space in corners of `AppBarLayout` with rounded background 【发布时间】：2020-09-15 09:24:50 【问题描述】：

我希望toolbar 在底部边缘具有圆角半径。我为此 perpous 创建了一个 drawable 背景。但是有一个问题。工具栏的下角，显示有空格。我为布局的根设置了相同的背景颜色和AppBarLayout，但是当滚动屏幕时仍然显示空白。我尝试了不同的解决方案，例如为AppBarLayout 设置此样式，但不起作用。

  <!-- style appbar home -->
<style name="appbar_style" parent="ThemeOverlay.AppCompat.ActionBar">
    <item name="windowActionBarOverlay">true</item>
    <item name="android:windowActionBarOverlay">true</item>
</style>

这是工具栏背景的drawable：

 <shape android:shape="rectangle">
        <gradient
            android:type="linear"
            android:angle="0"
            android:startColor="#EA4D13"
            android:endColor="#FD7920" />

        <corners
            android:bottomLeftRadius="15dp"
            android:bottomRightRadius="15dp"/>
    </shape>

这是我的片段布局：

  <?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    android:layoutDirection="rtl">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_
        android:layout_
        android:background="@color/grey8"
        android:fitsSystemWindows="true">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            android:background="@drawable/drw_bg_toolbar_orange"
            app:contentInsetEnd="0dp"
            app:contentInsetStart="0dp"
            app:layout_collapseMode="pin"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <RelativeLayout
                android:layout_
                android:layout_>

                <ImageView
                    android:id="@+id/img_search"
                    android:layout_
                    android:layout_
                    android:layout_alignParentLeft="true"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="20dp"
                    android:src="@drawable/ic_search" />

                <ImageView
                    android:id="@+id/img_instagram"
                    android:layout_
                    android:layout_
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="20dp"
                    android:src="@drawable/ic_instagram" />

                <TextView
                    android:id="@+id/txt_title"
                    android:layout_
                    android:layout_
                    android:layout_centerVertical="true"
                    android:layout_toLeftOf="@+id/img_instagram"
                    android:layout_toRightOf="@+id/img_search"
                    android:gravity="center"
                    android:text="@string/home_title"
                    android:textColor="@color/white" />
            </RelativeLayout>
        </androidx.appcompat.widget.Toolbar>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/swipe_container"
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_
            android:layout_
            android:background="@color/grey8">

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/rcy_hot_post"
                android:layout_
                android:layout_
                app:layout_constraintBottom_toTopOf="@+id/img_retry"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <ImageView
                android:id="@+id/img_retry"
                android:layout_
                android:layout_
                android:background="?attr/selectableItemBackgroundBorderless"
                android:clickable="true"
                android:focusable="true"
                android:src="@drawable/ic_refresh"
                android:visibility="gone"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintVertical_bias="0.0" />

            <ProgressBar
                android:id="@+id/progressbar"
                style="@style/Widget.MaterialComponents.ProgressIndicator.Circular.Indeterminate"
                android:layout_
                android:layout_
                android:visibility="gone"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

【问题讨论】：

【参考方案1】：

尝试将 AppBarLayout 的背景设置为@android:color/transparent

【讨论】：

【参考方案2】：

您应该将android:layout_marginTop="-15" 添加到SwipeRefreshLayout，然后添加一个空视图，其值Height 与您在android:layout_marginTop="15" 中指定的一样多（正值）您的RecyclerView

类似这样的：

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_
android:layoutDirection="rtl">

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_
    android:layout_
    android:background="@color/grey8"
    android:fitsSystemWindows="true">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_
        android:layout_
        android:background="@drawable/drw_bg_toolbar_orange"
        app:contentInsetEnd="0dp"
        app:contentInsetStart="0dp"
        app:layout_collapseMode="pin"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <RelativeLayout
            android:layout_
            android:layout_>

            <ImageView
                android:id="@+id/img_search"
                android:layout_
                android:layout_
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:src="@drawable/ic_search" />

            <ImageView
                android:id="@+id/img_instagram"
                android:layout_
                android:layout_
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="20dp"
                android:src="@drawable/ic_instagram" />

            <TextView
                android:id="@+id/txt_title"
                android:layout_
                android:layout_
                android:layout_centerVertical="true"
                android:layout_toLeftOf="@+id/img_instagram"
                android:layout_toRightOf="@+id/img_search"
                android:gravity="center"
                android:text="@string/home_title"
                android:textColor="@color/white" />
        </RelativeLayout>
    </androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:id="@+id/swipe_container"
    android:layout_
    android:layout_
    android:layout_marginTop="-15dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_
        android:layout_
        android:background="@color/grey8">

        <View
           android:id="@+id/emptySpace"
           android:layout_
           android:layout_/>
           
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rcy_hot_post"
            android:layout_
            android:layout_
            app:layout_constraintBottom_toTopOf="@+id/img_retry"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/emptySpace" />

        <ImageView
            android:id="@+id/img_retry"
            android:layout_
            android:layout_
            android:background="?attr/selectableItemBackgroundBorderless"
            android:clickable="true"
            android:focusable="true"
            android:src="@drawable/ic_refresh"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintVertical_bias="0.0" />

        <ProgressBar
            android:id="@+id/progressbar"
            style="@style/Widget.MaterialComponents.ProgressIndicator.Circular.Indeterminate"
            android:layout_
            android:layout_
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

【讨论】：

【参考方案3】：

改进@mohammad 的回答。您必须更改 CoordinatorLayout 组件的顺序。

检查一下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    android:layoutDirection="rtl">


    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/swipe_container"
        android:layout_
        android:layout_
        android:layout_marginTop="-30dp"    // it's better to set the same value as the corner radius used in the header shape.
        android:paddingTop="30dp" // same here, use the identical values to maintain the same height.
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

     // other code.. 

    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>


    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_
        android:layout_
        android:background="@color/grey8"
        android:fitsSystemWindows="true">

     // other code.. 

    </com.google.android.material.appbar.AppBarLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

【讨论】：

以上是关于如何删除具有圆形背景的`AppBarLayout`角落中的空白的主要内容，如果未能解决你的问题，请参考以下文章

如何使 TextView 具有完整的圆形背景，无论它显示多长的文本

如何从网络摄像头 OpenCV 裁剪圆形图像并删除背景

如何在 Swift 中使按钮具有圆形边框？

Flutter 中带有描边圆形背景的对话框

如何删除 jQuery Mobile 导航图标的圆形容器？

javascript 更改div的样式以删除阴影文本并显示带有圆形边框的新背景颜色。