Android 圆角边框和渐变

最新推荐文章于 2025-05-18 09:19:13 发布

淡然行走

最新推荐文章于 2025-05-18 09:19:13 发布

阅读量5.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Android

本文链接：https://blog.youkuaiyun.com/hua93/article/details/81184283

Android 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何在Android中创建带有圆角和渐变效果的UI元素。通过在drawable资源文件中定义shapeCorner.xml实现圆角边框，设置不同角的半径以实现圆润效果。同时，通过shapeGradient.xml定义渐变色，调整angle属性来改变颜色过渡方向，并设置startColor、endColor以确定颜色变化范围。最后，将两者结合，为按钮等组件设置这种复合背景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在res文件夹下的drawable里新建一个文件shape_corner.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/blue" />
    <corners android:topLeftRadius="20dp"
        android:topRightRadius="20dp"
        android:bottomRightRadius="20dp"
        android:bottomLeftRadius="20dp"/>
    <stroke android:width="1dp" android:color="@color/black" />
</shape>

<solidandroid:color>设置了背景颜色。android:topLeftRadius、android:topRightRadius、android:bottomLeftRadius、android:bottomRightRadius分别是左上角、右上角、左下角、右下角的半径值，设置了半径值，相应的角就是圆角，半径值越大，圆角就越大。<stroke>设置边界属性，如边界的宽度、颜色等。

将按钮的背景设置为shape_corner,

android:background="@drawable/shape_corner"

如图：

再来说说渐变，在res的drawable里新建一个文件shape_gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:endColor="@color/colorPrimary"
        android:centerColor="@color/blue"
        android:startColor="@color/colorAccent" />
</shape>

[android:angle]渐变色的角度，举例来说，0代表从上至下颜色渐变；45代表从左至右颜色渐变；90代表从下至上颜色渐变…
[android:startColor] 渐变开始的颜色

[android:endColor] 渐变结束时的颜色

[android:centerColor] 渐变中间的颜色(可有可无)

如果要将圆角和渐变结合起来，只要将<solidandroid:color>替换成<gradient...>就行了

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:topLeftRadius="20dp"
        android:topRightRadius="20dp"
        android:bottomRightRadius="20dp"
        android:bottomLeftRadius="20dp"/>
    <stroke android:width="1dp" android:color="@color/black" />
    <gradient
        android:angle="180"
        android:endColor="@color/colorPrimary"
        android:centerColor="@color/blue"
        android:startColor="@color/colorAccent" />
</shape>

如图：