Android中shape的自定義藝術(shù)效果使用

更新時(shí)間：2022年01月28日 14:38:01 作者：xiyangyang8110

大家好，本篇文章主要講的是Android中shape的自定義藝術(shù)效果使用，感興趣的同學(xué)趕快來看一看吧，對(duì)你有幫助的話記得收藏一下

shape形狀之意，可自定義各種形狀，如背景橢圓，圓角等等

創(chuàng)建目錄：drawable–右鍵–new–drawable resourse file–鍵入文件名my_shape–ok–修改selector標(biāo)簽為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 單獨(dú)控制某個(gè)圓角，如左上，右下。

<?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 描邊效果
注意此時(shí)用textview引用，botton無效
solid：實(shí)體，可設(shè)置主體顏色
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：傾斜度，標(biāo)簽實(shí)現(xiàn)
紅綠藍(lán)

<?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標(biāo)簽?zāi)J(rèn)類型是線性的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確定逆時(shí)針旋轉(zhuǎn)的角度angle屬性，如android:angle="90"表示逆時(shí)針轉(zhuǎn)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>

在這里插入圖片描述

最后來一個(gè)好叼的樣子

<?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>

在這里插入圖片描述