博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
shape 填充 圆角矩形 圆形 环形
阅读量:5916 次
发布时间:2019-06-19

本文共 5454 字,大约阅读时间需要 18 分钟。

属性
 
 
 

使用中可能出现的问题:

如果在某些手机中使用 shape 出现黑色填充背景,设置
<
solid android:color="@color/transparent"
/>
即可。

Android中shape用于设定形状,可以在selector,layout等里面使用

最常用属性

  • shape 形状,取值有:rectangle矩形(默认),oval椭圆、圆
  • corners  圆角
  • solid 内部填充
  • stroke 边框

形状类型 shape
  • 定义shape的形状,默认为矩形,可以设置为矩形(rectangle)、椭圆形(oval)、线性形状(line)、环形(ring)

圆角半径 corners
  • android:radius   整型 半径
  • android:topLeftRadius   整型 左上角半径
  • android:topRightRadius   整型 右上角半径
  • android:bottomLeftRadius 整型 左下角半径
  • android:bottomRightRadius 整型 右下角半径

填充颜色 solid
,不能与gradient一起使用,他代表固定的颜色
  • android:color 颜色值 填充颜色

描边、边框 stroke
  • android:width 整型 描边的宽度;实线的宽度
  • android:color 颜色值 描边的颜色;实线的颜色
  • android:dashWidth  整型 表示描边的样式是虚线的宽度, 值为0时,表示为实线。值大于0则为虚线;实线的长度
  • android:dashGap  整型 表示描边为虚线时,虚线之间的间隔 即“ - - - - ”;实线与实线之间间隙宽度

渐变色 gradient
  • android:startColor  颜色值 起始颜色
  • android:endColor    颜色值 结束颜色
  • android:centerColor  整型   渐变中间颜色,即开始颜色与结束颜色之间的颜色
  • android:angle   整型  渐变角度  值为45的整数倍。当=0时,渐变色是从左向右,然后逆时针方向转;当=90时,从下往上。默认是 0。该属性只有在type=linear情况下起作用,默认的type为linear。
  • android:type   渐变类型,取值有三个: linear 线性渐变,默认;  radial 放射性渐变,以开始色为中心; sweep 扫描线式的渐变。
  • android:useLevel   ["true" | "false"] 如果要使用LevelListDrawable对象,就要设置为true。设置为true无渐变。false有渐变色
  • android:gradientRadius 整型 渐变色半径。当 android:type="radial" 时【必须】使用,否则会报错。
  • android:centerX     整型   渐变中心X点坐标的相对位置
  • android:centerY   整型   渐变中心Y点坐标的相对位置

内边距大小 padding
  • android:left   整型 左内边距
  • android:top   整型 上内边距
  • android:right   整型 右内边距
  • android:bottom 整型 下内边距

图形大小 size ,指定图形的宽高,只有控件指定的是wrap_content时,这个属性才会起作用
  • android:width 整型 宽度
  • android:height 整型 高度

下面的属性只有在android:shape="ring时可用:
  • android:innerRadius 尺寸,内环的半径。
  • android:innerRadiusRatio 浮点型,以环的宽度比率来表示内环的半径
  • android:thickness 尺寸,环的厚度
  • android:thicknessRatio 浮点型,以环的宽度比率来表示环的厚度,不完整的圆环
  • android:useLevel boolean值,如果当做是LevelListDrawable使用时值为true,否则为false
实例--圆形与矩形
 
 
 
 
 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >
    <solid android:color="@color/green" />
    <stroke
        android:width="1dip"
        android:color="@color/red" />
    <padding
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"
        android:top="5dp" />
</shape>
 
 
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 默认为rectangle,矩形 -->
    <solid android:color="@color/yellow" />
    <corners android:radius="0dp" />
    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp" />
</shape>
 
 
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- 默认为rectangle,矩形 -->
    <solid android:color="@color/write" />
    <corners android:radius="5dp" />
    <stroke
        android:width="1dp"
        android:color="@color/red" />
    <padding
        android:bottom="2dp"
        android:left="5dp"
        android:right="5dp"
        android:top="2dp" />
</shape>
实例--圆形描边
 
 
 

思路:

  • 设置shape形状为圆形oval,边框大小为1dp,填充颜色为透明
  • 为保证整体大小不变,需将图片宽高-2,并设置padding为1;为保证居中,设置margin值为1;
  • 将上述的shape作为背景,在代码中将src裁剪成圆形。

        <ImageView
            android:id="@+id/iv_52"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="1dp"
            android:layout_marginTop="1dp"
            android:background="@drawable/bg_selector"
            android:clickable="true"
            android:padding="1dp"
            android:scaleType="centerCrop"
            android:src="@drawable/img_user_icon" />  

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"><shape android:shape="oval">
            <stroke android:width="1dp" android:color="@color/yellow" />
            <solid android:color="@color/translate" />
        </shape></item>
    <item><shape android:shape="oval">
            <stroke android:width="1dp" android:color="@color/red" />
            <solid android:color="@color/translate" />
        </shape></item>
</selector>  
实例--环形
 
 
 
 
 
 
        
<RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="2dp" >
            <TextView
                android:id="@+id/tv_43"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_centerInParent="true"
                android:layout_centerVertical="true"
                android:background="@drawable/shape_ring3"
                android:gravity="center"
                android:text="圆环" />
            <ImageView
                android:id="@+id/iv_44"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_centerInParent="true"
                android:background="@drawable/shape_oval3"
                android:src="#0000" />
        </RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="5dp"
    android:shape="ring"
    android:thickness="12dp"
    android:useLevel="false" >
    <!-- android:innerRadius 内环的半径。android:thickness环的厚度 -->
    <solid android:color="@color/yellow" />
    <!-- 【内环半径+环的厚度】*2+【描边的宽度】=【12+5】*2+【6】=40,因为40=android:layout_width="40dp" ,所以边缘不会被切割 -->
    <stroke
        android:width="6dp"
        android:color="@color/red" />
</shape>
 
 
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="15dp"
    android:shape="ring"
    android:thickness="4.5dp"
    android:useLevel="false" >
    <!-- android:innerRadius 内环的半径。android:thickness环的厚度 -->
    <solid android:color="@color/yellow" />
    <!-- 【内环半径+环的厚度】*2+【描边的宽度】=【15+5】*2+【1】=41,因为41>android:layout_width="40dp" ,所以边缘会被切割 -->
    <stroke
        android:width="1dp"
        android:color="@color/red" />
</shape>
 
 
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="15dp"
    android:shape="ring"
    android:thickness="4.5dp"
    android:useLevel="false" >
    <solid android:color="@color/write" />
    <stroke
        android:width="1dp"
        android:color="@color/red" />
</shape>

附件列表

 

转载地址:http://iggpx.baihongyu.com/

你可能感兴趣的文章
问答项目---用户注册的那些事儿(JS验证)
查看>>
Android进阶篇-百度地图获取地理信息
查看>>
返回前一页并刷新页面方法
查看>>
2.3 InnoDB 体系架构
查看>>
不定宽高垂直居中分析
查看>>
项目管理学习笔记之二.工作分解
查看>>
C# PPT 为形状设置三维效果
查看>>
js数组实现不重复插入数据
查看>>
aidl跨进程通讯
查看>>
如何确定所运行的 SQL Server 2005 的版本?
查看>>
我的友情链接
查看>>
老李分享:qtp自动化测试框架赏析-关键字自动化测试框架 2
查看>>
忙里偷闲 -- 工作随笔
查看>>
springboot报编译失败 Compilation failure
查看>>
mysqld error(一)
查看>>
Javascript延时函数
查看>>
UML类图关系大全
查看>>
Ant编译Hadoop 1.0.3的eclipse-plugin插件包
查看>>
tensorflow开发环境搭建
查看>>
JDBCRealm Http Digest
查看>>