Shape

Shape:

分類:

rectangle矩形、oval橢圓、line橫線、ring圓環
Solid純色填充
經過android:color便可指定填充色、Stroke描邊
android:width 描邊寬度
android:color 描邊的顏色
android:dashWidth 虛線的線段的寬度
android:dashGap 虛線線段之間的間隔
corners 表示shape四個角的角度
gradient 表示漸變效果
android:type linear線性漸變、radial徑向漸變、sweep掃描線漸變android

首先看線性的shape

在drawable文件夾下新建line_shape.xmlapp

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

    <stroke
        android:width="1px"
        android:color="#E61818"
        android:dashWidth="10dp"
        android:dashGap="5dp"/>
</shape>

而後在主界面中添加一個按鈕,指定背景爲咱們剛剛新建的佈局:佈局

<Button
    android:id="@+id/btn"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginTop="8dp"
    android:background="@drawable/line_shape"
    android:text="登陸"
    app:layout_constraintTop_toTopOf="parent" />

指定其背景爲紅色線段,若是是android 4.0如下的機器須要關閉圖形硬件加速,固然,這裏咱們只關閉指定View的加速code

Button button = findViewById(R.id.btn);
button.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

效果圖:xml

而後試試矩形的shape

在drawable文件夾下新建rect_shape.xmlblog

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

    <!-- 填充色 -->
    <solid
        android:color="@android:color/holo_red_light"/>

    <!-- 邊角設置半徑 -->
    <corners
        android:radius="10dp"/>

    <!-- 描邊 -->
    <stroke
        android:color="@android:color/holo_blue_light"
        android:width="1dp"/>
</shape>

指定背景爲淡紅色,設置爲圓角矩形,有淡藍色的描邊,厚度是1dp
在activity_main.xml中再添加一個按鈕,設置背景爲剛剛的佈局:utf-8

<Button
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginTop="8dp"
    android:text="註冊"
    android:background="@drawable/rect_shape"
    app:layout_constraintTop_toBottomOf="@+id/btn" />

效果圖:it

這時將其背景色去掉,改成線性漸變:io

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

    <!-- 邊角設置半徑 -->
    <corners
        android:radius="10dp"/>

    <!-- 描邊 -->
    <stroke
        android:color="@android:color/holo_blue_light"
        android:width="1dp"/>

    <!-- 線性漸變 -->
    <gradient
        android:type="linear"
        android:startColor="#f00"
        android:centerColor="#0f0"
        android:endColor="#00f"
        android:angle="270"/>
</shape>

效果圖:
登錄

改成徑向漸變:

<!-- 徑向漸變 -->
<gradient
    android:type="radial"
    android:startColor="#f00"
    android:centerColor="#0f0"
    android:gradientRadius="200dp"
    android:endColor="#00f"
    android:angle="270"/>

效果圖:

改成掃描線漸變:

<!-- 掃描線漸變 -->
<gradient
    android:type="sweep"
    android:startColor="#f00"
    android:centerColor="#0f0"
    android:endColor="#00f"
    android:angle="270"/>

效果圖:

相關文章
相關標籤/搜索