侧边栏壁纸
  • 累计撰写 416 篇文章
  • 累计创建 65 个标签
  • 累计收到 150 条评论

目 录CONTENT

文章目录

Android 布局文档中:Shape,Selector ,bitmap通用方法集-包括属性介绍

Z同学
2022-02-25 / 0 评论 / 1 点赞 / 731 阅读 / 7,656 字
温馨提示:
本文最后更新于 2022-02-25,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

前言

本篇主要是介绍如何在drawable 文件夹中,通过xml代码的模式,定义各种形状图像。

同时也介绍一下相关的标签。结合实际情况进行介绍

1.绘制 只显示上,下,左,右 边框线条的方式

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 边框线颜色 -->
    <item>
        <shape>
            <solid android:color="#ff0000" />
        </shape>
    </item>
    <!-- 主体背景颜色值   需要显示哪条边,就让哪个方向偏移1px
    android:left="1px" android:top="1px" android:right="1px"-->
    <item android:bottom="2dp">
        <shape>
            <solid android:color="@android:color/white" />
        </shape>
    </item>
</layer-list>

效果:
image-20220225162312571

示例只是给了底部的一条横向的绘制方法。如果要其他的或调整绘制线段的高度,可以根据需要自己进行修改。

2. 设置图片平铺

<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ico_bg"
android:tileMode="repeat"<!--平铺模式:repeat 单纯重复,mirror镜面反射,clamp图片四周像素扩散-->
android:mipMap = "false"  <!-- 纹理映射 默认false 关闭状态-->
android:antialias="true" <!--开启图片抗锯齿, 清晰度会降低-->
android:dither="true"<!--开启抖动效果, 用于高质量图片在低质量屏幕上优化显示效果(不会失真)-->
android:filter="true" <!--开启过滤,在图片尺寸拉屎和压缩时保持较稳定的显示效果-->
android:gravity="center"<!-- 图片小于容器尺寸时,对图片进行定位-->
 />

其中的 android:src 就是我们需要平铺的图片素材。

3. 绘制虚线框

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp">
        <shape>
            <stroke
                    android:dashGap="4dp"
                    android:dashWidth="4dp"
                    android:width="1.5dp"
                    android:color="#1E90FF" />
            <solid android:color="#00000000" />
            <corners android:radius="1dp" />
        </shape>
    </item>
</layer-list>

效果图:

image-20220225162624800

4. 设置RadioBtn按钮的选中和未选中

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ico_rb_not" android:state_checked="false" /> //没有选中时
    <item android:drawable="@drawable/ico_rb_select" /> //选中时
</selector>

5. 设置按钮图片的点击与未点击

有图片资源的时候:

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ico_xxx_pressed" android:state_pressed="true"/> //按下时的图片
    <item android:drawable="@drawable/ico_xxx_normal" /> //没有操作时的图片
</selector>

需要重新绘制图片资源的时候:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <shape>
            <solid android:color="@color/dialog_btn_bg_pressed" />
            <corners android:radius="4dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/dialog_btn_bg" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</selector>

6. 绘制半圆矩形

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:useLevel="true">
    <size
        android:width="50dp"
        android:height="30dp" />
    <stroke android:color="#ff0000"
        android:width="1dp"/>
    <solid android:color="#fffff8" />
    <!-- 圆角半径是高度的一般就是一个圆弧了 -->
    <corners android:radius="100dp" />
</shape>

效果图:

image-20220225163117624

7. 绘制正圆形图案

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">
    <size android:height="30dp"
        android:width="30dp"/>
    <solid android:color="#ff0000" />
</shape>

效果图:

image-20220225163217480

8. 绘制圆角矩形边框线

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--圆角矩形-->
    <corners android:radius="1dp" />  
    <!--大小-->
    <size
        android:width="20dp"
        android:height="20dp" />
    <stroke
        android:width="1dp"
        android:color="#fff" />
</shape>

效果图:

image-20220225163317667

我们如果想要直角的矩形,可以去掉 <corners android:radius="1dp" /> 就可以得到一个直角的矩形了。

9. 绘制 自定义矩形背景框,决定指定角有弧度。

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

    <solid android:color="@android:color/white" />

    <!--边框线段-->
    <stroke
        android:width="1dp"
        android:color="#ff0000" />
<!-- 如果需要哪个角度 不要圆角,去掉该角度的配置,就会是直角了-->
    <corners
        android:bottomLeftRadius="4dp"
    android:bottomRightRadius="4dp"
    android:topLeftRadius="4dp"
    android:topRightRadius="4dp" />
</shape>

全绘制的效果:

image-20220225163851814

总结

selector 的基本属性:

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_checkable=""></item>   //是否可以选择 
     <item android:state_checked=""></item>    // 是否被选中
     <item android:state_selected=""></item>   //Spinner的item是否被选中
     <item android:state_pressed=""></item>     //是否被按下
     <item android:state_focused="false></item>"        //是否获取了焦点
     <item android:state_window_focused=""></item>  //窗体是否处于最前端
 </selector>

shape 的基本属性:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"]  //shape的形状,默认为矩形,可以设置为矩形(rectangle)、椭圆形(oval)、线性形状(line)、环形(ring)   
     android:innerRadius="integer" //  内环的半径; 
  android:innerRadiusRatio="integer"  // 浮点型,以环的宽度比率来表示内环的半径;   
  android:thickness="integer"   // 环的厚度;   
  android:thicknessRatio="integer" //  浮点型,以环的宽度比率来表示环的厚度;  
  android:useLevel="boolean"> //  如果当做是LevelListDrawable使用时值为true,否则为false。
    >
  
    <corners //圆角属性
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient //渐变属性
        android:angle="integer" //渐变角度,必须为45的倍数,0为从左到右,90为从上到下;
        android:centerX="integer"//渐变中心X的相当位置,范围为0~1;
        android:centerY="integer"//渐变中心Y的相当位置,范围为0~1;
         android:startColor="color" //渐变开始点的  
        android:centerColor="integer" //渐变中间点的颜色,在开始与结束点之间;
        android:endColor="color"//渐变结束点的颜色
        android:gradientRadius="integer" //渐变的半径,只有当渐变类型为radial时才能使用;   
       
        android:type=["linear" | "radial" | "sweep"] //共有3中渐变类型,线性渐变(默认)/放射渐变/扫描式渐变;
        android:useLevel=["true" | "false"] />//使用LevelListDrawable时就要设置为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"//虚线的宽度,值为0时是实线   
        android:dashGap="integer" />//虚线的间隔
</shape>
1

评论区