美文网首页
Android Shape使用 改变样式

Android Shape使用 改变样式

作者: xiesen | 来源:发表于2019-07-16 10:41 被阅读0次

    使用

    drawable 新建 一个 xml 文件

    <?xml version="1.0" encoding="utf-8"?>
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape=["rectangle" | "oval" | "line" | "ring"] >
        <corners
            android:radius="integer"
            android:topLeftRadius="integer"
            android:topRightRadius="integer"
            android:bottomLeftRadius="integer"
            android:bottomRightRadius="integer" />
        <gradient
            android:angle="integer"
            android:centerX="integer"
            android:centerY="integer"
            android:centerColor="integer"
            android:endColor="color"
            android:gradientRadius="integer"
            android:startColor="color"
            android:type=["linear" | "radial" | "sweep"]
            android:useLevel=["true" | "false"] />
        <padding
            android:left="integer"
            android:top="integer"
            android:right="integer"
            android:bottom="integer" />
        <size
            android:width="integer"
            android:height="integer" />
        <solid
            android:color="color" />
        <stroke
            android:width="integer"
            android:color="color"
            android:dashWidth="integer"
            android:dashGap="integer" />
    </shape>
    

    这里面已经列出了所有的shape属性。

    android:shape=["rectangle" | "oval" | "line" | "ring"]
    这里可以看出,shape可以画四种图形,分别是:矩形(rectangle)、椭圆(oval)、线(line)、圆环(ring)。

    先上效果图: Shape效果图.png

    矩形(rectangle)

    直角矩形:

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

    圆角矩形:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <corners android:radius="10dp"></corners>
    
        <solid android:color="@color/colorPrimary"></solid>
    
        <padding android:bottom="12dp"
            android:left="12dp"
            android:right="12dp"
            android:top="12dp"></padding>
        
    </shape>
    

    corners:圆角大小。

            android:radius="integer"
            android:topLeftRadius="integer"
            android:topRightRadius="integer"
            android:bottomLeftRadius="integer"
            android:bottomRightRadius="integer"
    

    android:radius:表示4个角的圆角大小;
    还可以分别设置四个角的,使用下面四个属性:android:topLeftRadius、android:topRightRadius、android:bottomLeftRadius、android:bottomRightRadius分别表示:左上、右上、左下、右下。

    <padding android:bottom="12dp"
            android:left="12dp"
            android:right="12dp"
            android:top="12dp"></padding>
    

    padding:设置内边距。

    无填充带边框:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <corners android:radius="10dp"></corners>
    
    
        <padding android:bottom="12dp"
            android:left="12dp"
            android:right="12dp"
            android:top="12dp"></padding>
    
        <stroke android:width="5dp"
             android:color="@color/colorAccent"></stroke>
    
    
    </shape>
    

    stroke
    android:width:边框大小
    android:color:边框颜色

    渐变:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <solid android:color="@color/colorPrimary"></solid>
    
        <padding android:bottom="12dp"
            android:left="12dp"
            android:right="12dp"
            android:top="12dp"></padding>
    
        <!--angle 渐变角度,0:左到右;90:下到上;180:右到左;270:上到下-->
        <gradient android:startColor="@android:color/white"
            android:endColor="@android:color/black"
            android:angle="0"></gradient>
    </shape>
    

    gradient:
    android:startColor:渐变起始颜色
    android:endColor:渐变结束颜色
    android:angle:渐变角度:0:左到右;90:下到上;180:右到左;270:上到下

    椭圆(oval)

    一般用来画圆。

    纯色的圆:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
    
        <solid android:color="@color/colorPrimary"></solid>
    
        <size android:height="100dp"
            android:width="100dp"></size>
    
    </shape>
    

    size的height和width设置为一样大小就是一个圆了。
    然后直接使用solid填充颜色即可。

    渐变效果:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
    
        <size android:height="100dp"
            android:width="100dp"></size>
    
        <gradient android:centerX="0.5"
            android:centerY="0.5"
            android:type="sweep"
            android:startColor="@color/colorPrimary"
            android:endColor="@color/colorAccent"></gradient>
    </shape>
    

    android:centerX:表示渐变的X轴起始位置,范围0-1,0.5表示圆心。
    android:centerY:表示渐变的Y轴起始位置,范围0-1,0.5表示圆心。
    android:type:渐变类型,有三种
    分别是:
    linear 线性渐变,默认的渐变类型
    radial 放射渐变,设置该项时,android:gradientRadius也必须设置
    sweep 扫描性渐变

    线(line)

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="line">
    
        <stroke
            android:width="1dp"
             android:color="@color/colorAccent"
             android:dashGap="3dp"
             android:dashWidth="4dp"></stroke>
    
        <size android:height="3dp"></size>
    </shape>
    

    线是居中显示的。
    android:width:填充颜色的高度
    android:dashGap:虚线间距宽度
    android:dashWidth:虚线宽度
    <size android:height="3dp"></size>:line的高度,size大小必须大于android:width

    圆环(ring)

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="ring"
        android:useLevel="false"
        android:thickness="10dp">
        <!--useLevel需要设置为false-->
    
        <solid android:color="@color/colorAccent"></solid>
    
    
    </shape>
    

    android:thickness:圆环宽度

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="ring"
        android:useLevel="false"
        android:thickness="10dp">
        <!--useLevel需要设置为false-->
    
        <solid android:color="@color/colorAccent"></solid>
    
        <gradient android:startColor="@color/colorAccent"
            android:endColor="@color/colorPrimary"
            android:type="sweep"></gradient>
    
    </shape>
    

    以上只是简单的介绍了一下shape的用户,里面有很多属性还没有用到,需要大家自己去实践一下,写出来看到效果才能更好的理解。

    引用

    <!--注意 android:background="@drawable/btn_selector"样式位置-->
        <Button
            android:id="@+id/Button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:background="@drawable/btn_selector" 
            android:text="@string/hello_world" />
    
    

    Button点击实现另一种背景

    ​ drawable目录下新建一个selector文件btn_selector.xml,大家应该秒懂这个文件的内容和意思吧!当按钮正常没有被按下的时候显示一个背景,按下的时候则显示另外一个颜色的背景,这样可以使用户得知按钮被按下了。

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        
     <!-- Button正常状态下的背景 -->
     <!-- android:drawable="@drawable/btn_bg_normal"在 drawable 新建 一个 xml 文件自定义样式 -->
        <item android:drawable="@drawable/btn_bg_normal" android:state_pressed="false"/>
     
     <!-- Button按下时的背景 -->
     <!-- android:drawable="@drawable/btn_bg_pressed"在 drawable 新建 一个 xml 文件自定义样式 -->
        <item android:drawable="@drawable/btn_bg_pressed" android:state_pressed="true"/>
    </selector>
    

    相关文章

      网友评论

          本文标题:Android Shape使用 改变样式

          本文链接:https://www.haomeiwen.com/subject/nmrzkctx.html