Shape--使用介绍 4 :椭圆形

(1)椭圆形效果1 –普通椭圆

1)效果图 
这里写图片描述 
2)shape中的代码

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

    <solid android:color="#00ff00"/>
</shape>
  • 将shape定义为oval,并给一个填充色

(2)椭圆效果2 –正圆

1)效果图 
这里写图片描述 
2)shape中的代码:

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

    <solid android:color="#00ff00"/>

    <size android:width="50dp"
          android:height="50dp"/>
</shape>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 通过定义size,将椭圆变成正圆

3)代码中引用

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:background="@drawable/shape_test"
        android:gravity="center"
        android:text="正圆"/>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 代码中引用的时候,通过gravity控制文字居中

正圆的实现方式2 : 
1)shape中的代码:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <solid android:color="#00ff00"/>
</shape>
  • 1
  • 2
  • 3
  • 4
  • 5
  • shape中只是定义一个椭圆,给出填充色

2)xml代码中引用shape

 <TextView
        android:layout_width="60dp"
        android:layout_height="60dp" 
        android:background="@drawable/shape_test"
        android:gravity="center"
        android:text="正圆"/>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 通过控制tv的宽高,也可以实现tv的背景为正圆

(3)椭圆效果3–放射渐变的正圆

1)效果图 
这里写图片描述 
2)shape中的代码:

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

    <!--渐变色-->
    <gradient
        android:endColor="#000"
        android:gradientRadius="50dp"
        android:startColor="#fff"
        android:type="radial"/>

    <size android:width="50dp"
          android:height="50dp"/>
</shape>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 其他诸如加边线之类的用法,同矩形,这里不再赘述

(4) 线行效果–1 虚线

shape的取值line线型一半使用较少,只给出一个虚线的示例代码. 
1)效果图 
这里写图片描述

2)shape中的代码

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

    <stroke
        android:width="5dp"
        android:color="#00ff00"
        android:dashGap="5dp"
        android:dashWidth="15dp"/>
</shape>
  • 线的高度由width控制

3)xml文件中引用虚线

<TextView
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:textSize="20sp"
        android:background="@drawable/shape_test"
        android:gravity="center"
        android:layerType="software"
        android:text="背景引用了shape虚线"/>
  • 从xml布局文件中引用通过shape画出来的虚线时,必须添加layerType 属性,并取值software ,否则无法显示虚线;如果将layerType的属性值设置为hardware或者none,那么显示的将是实线

需要注意,通过shape画出来的图形,不能作为TextView中的drawableLeft 等的取值,否则会导致不显示shape图形

猜你喜欢

转载自blog.csdn.net/suyimin2010/article/details/81256603