Shape

红太狼 2021-01-07 04:43 475阅读 0赞

## 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扫描线渐变

#### 首先看线性的shape ####

在drawable文件夹下新建line\_shape.xml

![NETGjy4LoaSPtZs.png][]

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

然后在主界面中添加一个按钮，指定背景为我们刚刚新建的布局：

指定其背景为红色线段，如果是android 4.0以下的机器需要关闭图形硬件加速，当然，这里我们只关闭指定View的加速

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

效果图：

![4inasACdhUwX31p.png][]

#### 然后试试矩形的shape ####

在drawable文件夹下新建rect\_shape.xml

<?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中再添加一个按钮，设置背景为刚刚的布局：

效果图：

![6jvM7tPz8ylgn3L.png][]

这时将其背景色去掉，改为线性渐变：

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

效果图：

![N2grkhPcaGeFLXD.png][]

改为径向渐变：

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

效果图：

![pCnZkboK93auO51.png][]

改为扫描线渐变：

<gradient
        android:type="sweep"
        android:startColor="#f00"
        android:centerColor="#0f0"
        android:endColor="#00f"
        android:angle="270"/>

效果图：

![2njHzZIfVvyqlcK.png][]

[NETGjy4LoaSPtZs.png]: /images/1609994602092.png
[4inasACdhUwX31p.png]: /images/1609994566054.png
[6jvM7tPz8ylgn3L.png]: /images/1609994554517.png
[N2grkhPcaGeFLXD.png]: /images/1609994528597.png
[pCnZkboK93auO51.png]: /images/1609994515780.png
[2njHzZIfVvyqlcK.png]: /images/1609994483687.png