Android中shape的使用(自定义艺术效果,简单好用)

用textview引用,botton无效

shape形状之意,可自定义各种形状,如背景椭圆,圆角等等

创建目录:drawable–右键–new–drawable resourse file–键入文件名my_shape–ok–修改selector标签为shape
在这里插入图片描述
0边框

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:radius="2dp"/>

    <stroke
        android:width="0.75dp"
        android:color="#FFFF7105"/>

</shape>

在这里插入图片描述

1圆角

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:radius="10dp"/>

</shape>

引用:android:background="@drawable/my_shape"

<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="148dp"
        android:layout_marginTop="102dp"
        android:background="@drawable/my_shape"
        android:text="Button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

在这里插入图片描述
2 单独控制某个圆角,如左上,右下。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:topLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        />

</shape>

在这里插入图片描述
3 圆形背景
前提button宽高一样,圆角大小为button的一半大

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:radius="100dp"/>

</shape>
 <Button
        android:id="@+id/button"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginStart="148dp"
        android:layout_marginTop="102dp"
        android:background="@drawable/my_shape"
        android:text="Button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

在这里插入图片描述
3 描边效果
注意此时用textview引用,botton无效
solid:实体,可设置主体颜色
stroke:描边,dashWidth虚线宽度,dashGap虚线间的距离

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:radius="50dp"/>
    <size
        android:height="100dp"
        android:width="100dp"/>
    <solid
        android:color="#FF4081"/>
    <stroke
        android:width="5dp"
        android:color="#3F51B5"
        android:dashWidth="20dp"
        android:dashGap="10dp"/>

</shape>

引用

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="148dp"
        android:layout_marginTop="102dp"
        android:background="@drawable/my_shape"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述
4渐变色
gradient:倾斜度,标签实现
红绿蓝

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        />

</shape>

引用

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="148dp"
        android:layout_marginTop="102dp"
        android:text="Hello world"
        android:background="@drawable/my_shape_gradient"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

在这里插入图片描述
拓展
1gradient标签默认类型是线性的android:type=“linear”,还有一种炫酷的效果是扫射sweep

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:type="sweep"
        />

</shape>

在这里插入图片描述
2确定逆时针旋转的角度angle属性,如android:angle="90"表示逆时针转90度

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#ff0000"
        android:centerColor="#00ff00"
        android:endColor="#0000ff"
        android:angle="90"
        android:type="linear"
        />

</shape>

在这里插入图片描述
最后来一个好叼的样子

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="@color/black"
        android:endColor="@color/black"
        android:centerColor="#FFFFFF"
        android:type="sweep"/>

</shape>

在这里插入图片描述

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值