Android组件背景设置

发表于 更新于 分类于
Android组件背景设置

前言

Android使用XML的时候，实现圆角和边框都是使用背景实现的。

如果需要剪裁成圆角，则可以使用CardView实现。

CardView

设置圆角

1
2
3
4
5
6
7
<androidx.cardview.widget.CardView
    android:layout_width="330dp"
    android:layout_height="166dp"
    android:layout_centerInParent="true"
    android:visibility="@{viewModel.zIsShowMsg ? View.VISIBLE : View.GONE}"
    app:cardCornerRadius="10dp">
</androidx.cardview.widget.CardView>

取消阴影

要取消或移除 CardView 的阴影，你可以调整 CardView 的 cardElevation 属性，并将其设置为 0dp。

此外，你还可以调整 cardUseCompatPadding 属性以确保没有额外的内边距用于显示阴影。

下面是如何设置 CardView 以取消阴影的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<androidx.cardview.widget.CardView
    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="wrap_content"
    app:cardElevation="0dp"
    app:cardUseCompatPadding="false">
    
    <!-- CardView的内容 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="这是一个没有阴影的CardView"
        android:gravity="center"
        android:padding="16dp" />

</androidx.cardview.widget.CardView>

在这个例子中，CardView 的 cardElevation 设置为 0dp，以确保没有阴影。

此外，将 cardUseCompatPadding 设置为 false 可以消除由于阴影而产生的额外内边距，使 CardView 边缘更加紧凑。

内部剪裁

设置clipChildren即可

1
android:clipChildren="true"

背景圆角和边框

rounded_border_background.xml

1
2
3
4
5
6
7
8
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#aaFFFFFF" /> <!-- 背景颜色 -->
    <corners android:radius="10dp" /> <!-- 圆角半径 -->
    <stroke
        android:width="2dp"
        android:color="#FFFFFFff" /> <!-- 边框颜色 -->
</shape>

按钮背景

按钮可以使用selector设置点击和非点击使用不同的背景

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false" android:drawable="@drawable/rounded_border_backgroundt"/>
    <item android:state_pressed="true" android:drawable="@drawable/rounded_border_background2"/>
</selector>

涟漪效果

兼容不支持涟漪的XML

z_bg_ripple.xml

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false" android:drawable="@drawable/rounded_border_backgroundt"/>
    <item android:state_pressed="true" android:drawable="@drawable/rounded_border_background2"/>
</selector>

添加drawable-v21文件夹 只有21版本之后才支持涟漪效果

z_bg_ripple.xml

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?><!-- ripple 是5.0才出现的新标签-->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/text99">
    <item android:drawable="@drawable/rounded_border_background" />
</ripple>

背景多层渐变，点击涟漪

实现方式

  • 底层纯色背景。

  • 中层设置渐变，注意XML的渐变效果最多只支持3个颜色。

  • 顶层设置涟漪效果。

bg_gradient_btn.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 底层：纯色背景 -->
    <item android:top="6dp">
        <shape android:shape="rectangle">
            <solid android:color="#2B89E0" />
            <corners android:radius="6dp" />
        </shape>
    </item>
    <!-- 中间层：渐变背景 -->
    <item android:bottom="3dp" >
        <shape android:shape="rectangle">
            <gradient
                android:angle="-90"
                android:centerColor="#32C8FD"
                android:endColor="#36B3FE"
                android:startColor="#8AEFFD"
                android:type="linear" />
            <corners android:radius="6dp" />
        </shape>
    </item>
    <!-- 顶层 -->
    <item android:drawable="@drawable/bg_gradient_ripple_effect"/>
</layer-list>

添加一个涟漪效果的XML

bg_gradient_ripple_effect.xml

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#000000">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#33FFFFFF"/>
            <corners android:radius="6dp"/>
        </shape>
    </item>
</ripple>

注意

涟漪效果的背景不能是全透明的，如果全透明就不会出现涟漪效果，所以这里设置为白色的半透明，涟漪覆盖色就设置的纯黑色，这样才会出现较好的效果。