Android绘制(一):来用shape绘出想要的图形吧!
目录
- 前言
- shape绘制
- 矩形
- 椭圆
- 线
- 环
- 用shape绘制SeekBar
- 最后
前言
在没有UI设计师的时候, 或者是想简单看下效果的时候, 用shape进行快速绘制是极好的! 官方文档.
shape绘制
一共有四种shape: rectangle, oval, line, ring.
矩形
我们一个一个来看, 首先是矩形:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><!-- 尺寸 --><sizeandroid:width="160dp"android:height="80dp" /><!-- 颜色 --><!--<solid android:color="@color/colorPrimary" />--><!-- 内间距 --><paddingandroid:bottom="8dp"android:left="8dp"android:right="8dp"android:top="8dp" /><!-- 渐变 --><gradientandroid:angle="45"android:endColor="@color/colorPrimary"android:startColor="@color/colorAccent"android:type="linear" /><!-- 圆角 --><!--<corners android:radius="200dp" />--><!-- 圆角单独设置 --><cornersandroid:bottomLeftRadius="0dp"android:bottomRightRadius="0dp"android:topLeftRadius="40dp"android:topRightRadius="40dp" /><!-- 描边 --><strokeandroid:width="2dp"android:color="#666"android:dashGap="4dp"android:dashWidth="4dp" />
</shape>
复制代码
- 渐变gradient是会覆盖颜色的, 如果你想要纯色, 直接设置颜色值即可, 就是设置solid中的color.
- 顺带一提, solid只有color一个参数.
- 如果你没有渐变gradient, 也不写solid, 那么将会是空心的.
- 渐变gradient的type参数有3个:
- linear 线性渐变
- sweep 扫描渐变
- radial 放射渐变, 需要配合参数gradientRadius
- 圆角corners可以直接设置radius, 也可以一个一个指定.
- 描边stroke的话不写dashGap, dashWidth就会是实线, dashWidth代表虚线宽度, dashGap代表虚线间隔.
- 内间距padding和尺寸size就不提了, 大家都懂的.
椭圆
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><!-- 尺寸 --><sizeandroid:width="160dp"android:height="80dp" /><!-- 颜色 --><!--<solid android:color="@color/colorPrimary" />--><!-- 内间距 --><paddingandroid:bottom="8dp"android:left="8dp"android:right="8dp"android:top="8dp" /><!-- 渐变 --><gradientandroid:centerColor="@color/colorPrimary"android:endColor="@color/colorPrimaryDark"android:startColor="@color/colorAccent"android:type="sweep" /><!-- 描边 --><strokeandroid:width="1dp"android:color="#333" />
</shape>
复制代码
- 渐变是最多可以设置三种颜色, 意思一看便知了:
- startColor
- centerColor
- endColor
- 一般椭圆都会用来绘制实心的小圆点.
线
线就很简单了:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="line"><!-- 描边 --><strokeandroid:width="8dp"android:color="@color/colorPrimary"android:dashGap="8dp"android:dashWidth="6dp" />
</shape>
复制代码
环
最后来看环, 它有些特有属性:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:innerRadiusRatio="4"android:shape="ring"android:thicknessRatio="100"android:useLevel="false"><!-- 尺寸 --><sizeandroid:width="200dp"android:height="200dp" /><!-- 渐变 --><gradientandroid:angle="0"android:centerColor="@color/colorPrimaryDark"android:endColor="@color/colorPrimary"android:startColor="@color/colorAccent"android:type="sweep" /><!-- 描边 --><strokeandroid:width="1dp"android:color="#777"android:dashGap="4dp"android:dashWidth="4dp" />
</shape>
复制代码
- thicknessRatio 指的是环厚度百分比, 默认是9, 比如说这里宽度是200dp, thicknessRatio是100, 环厚度就是200dp / 100 = 2dp. 当然, 你可以直接用thickness设置厚度.
- innerRadiusRatio 是内环百分比, 默认是3, 就是指用宽度 / 百分比得到的值就是内环半径. 同样可以用innerRadius直接设置.
用shape绘制SeekBar
我知道有很多非常好看的自定义进度条, 但是我写这个SeekBar是想补充下shape的使用, 用非常少量的代码实现自定义进度条. 来看看效果图:
- 实现
<SeekBarandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="@dimen/eight_dp"android:max="200"android:maxHeight="@dimen/eight_dp"android:minHeight="@dimen/eight_dp"android:progressDrawable="@drawable/layout_progress"android:thumb="@drawable/shape_circle" />
复制代码
简单解释下几个要点属性:
- max代表进度条最大的值.
- maxHeight, minHeight可以设置进度条宽度, 我喜欢稍微宽一点的.
- thumb设置滑块, 可以是图片, 可以是shape写的设置.
- progressDrawable代表进度条的外观, 可以是图片, 可以是shape写的设置.
再来看看滑块和进度条外观具体代码, 进度条可以设置背景, 进度, 和第二进度. 滑块的话, 你想画成什么样都行.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"><item android:id="@android:id/background"><shape><corners android:radius="@dimen/four_dp" /><solid android:color="@android:color/darker_gray" /></shape></item><item android:id="@android:id/secondaryProgress"><clip><shape><corners android:radius="@dimen/four_dp" /><solid android:color="@color/colorAccent" /></shape></clip></item><item android:id="@android:id/progress"><clip><shape><corners android:radius="@dimen/four_dp" /><solid android:color="@android:color/holo_blue_light" /></shape></clip></item>
</layer-list>
复制代码
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><solid android:color="@android:color/holo_blue_light" /><strokeandroid:width="@dimen/one_dp"android:color="@android:color/holo_blue_light" /><sizeandroid:width="@dimen/sixteen_dp"android:height="@dimen/sixteen_dp" />
</shape>
复制代码
java部分的话, 用Handler实例postDelayed方法让进度条跑起来就可以看到效果了. 这里设定50ms发一次消息.
findViewById(R.id.cv_start).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (mRunnable == null) {mRunnable = new MyRunnable();mHandler.postDelayed(mRunnable, 0);}}
});findViewById(R.id.cv_stop).setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {mHandler.removeCallbacks(mRunnable);mRunnable = null;}
});
复制代码
private class MyRunnable implements Runnable {@Overridepublic void run() {int progress = mSbTest.getProgress();mTvProgress.setText(String.valueOf(progress));mSbTest.setProgress(++progress);mSbTest.setSecondaryProgress(progress + 10);int progress2 = mSbTest2.getProgress();mTvProgress2.setText(String.valueOf(progress2));mSbTest2.setProgress(++progress2);mSbTest2.setSecondaryProgress(progress2 + 20);mHandler.postDelayed(this, 50);}
}
复制代码
最后
我个人还是偏向用shape绘制的, 图片一出理不好就是内存溢出啊, 形变啊, 还要注意分辨率, 真心头大. 喜欢记得点赞哦, 暗中关注我也是可以的~
Android绘制(一):来用shape绘出想要的图形吧!相关推荐
- 使用CAShapeLayer与UIBezierPath画出想要的图形
使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 步骤: 1.新建UIBezierPath对象bezierPath 2.新建CAS ...
- matlab不绘青藏高原区域,已知序列,用MATLAB绘出下列信号的图形:①.x1(n),x(2n);②x1(n)+x2(n);③x1(n)x2(n)。...
读某调水工程图,完成下列问题.小题1:对图中地理事物的判断,正确的是A.A线的数值大于B线B.图中山脉是武夷山C 读香港农业土地利用变化图,回答题.小题1:1975年,香港农业生产的最主要地域类型属于 ...
- Android绘制(三):Path结合属性动画, 让图标动起来!
Android绘制(一):来用shape绘出想要的图形吧! Android绘制(二):来用Path绘出想要的图形吧! 目录 效果图 前言 绘制 属性动画 最后 效果图 不废话, 直接上效果图, 感兴趣 ...
- android 字母path动画,Android绘制(三):Path结合属性动画, 让图标动起来!
目录 效果图 前言 绘制 属性动画 最后 效果图 不废话, 直接上效果图, 感兴趣再看下去. 其实不单单是效果图演示的, 运用熟练的话各种图标之间都是可以切换的. 暂停到终止 暂停到播放 前言 之前的 ...
- android百度地图单点定位_Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡...
一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...
- Android开发画出中国地图,Android 绘制中国地图
最近的版本有这样一个需求: 有 3 个要素: 中国地图 高亮省区 中心显示数字 面对这样一个需求,该如何实现呢? 高德地图 因为项目是基于高德地图来做的,所以很自然而然的想到了高德.但是当查阅高德地图 ...
- Android绘制流程
一.前言 1.1.C++界面库 MFC.WTL.DuiLib.QT.Skia.OpenGL. Android里面的画图分为2D和3D两种: 2D是由Skia 来实现的,3D部分是由OpenGL实现的. ...
- android绘制高亮区域,实现高亮某行的RecyclerView效果
最终效果 全部代码:github 方式有二 组合控件,RecyclerView + View 自定义RecyclerView 1中只需要控制View,但是不好封装. 2中需要重写RecyclerVie ...
- Android 绘制优化
绘制原理 View 的绘制流程有3个步骤,分别是measure .layout 和draw ,它们主要运行在系统的应用框架层,而真正将数据渲染到屏幕上的则是系统Native层的SurfaceFling ...
最新文章
- 【问题】vs IIS破除文件上传限制最全版
- 如何获取mongodb中的最后N条记录?
- 命名实体识别——日期识别
- Java IO5:管道流、对象流
- ElasticSearch——学习笔记
- 案例:无人船测量点位数据+ArcGIS 10.6软件生成三维水下地形的两种方法
- 国家开放大学2021春1044合同法题目
- IOC操作Bean管理XML方式(FactoryBean)
- kdj超卖_【教你一招】KDJ超买超卖指标
- python和java哪个好学-Python和Java对比,全面解读哪个语言最赚钱,前景最好?
- CSS3学习笔记——伪类hover
- HDU 1016 DFS
- python中比较重要的几个函数_python几个重要的内置函数
- 信创好难?ARM应用移植避坑指南请收好
- python循环n次_如何使循环重复n次-Python 3
- Deltix宣布CryptoCortex与MPC钱包提供商Curv整合
- Android 人脸识别拍照demo
- 苹果造车欲用中国电池,前提是在美国建厂?比亚迪、宁德时代正与其谈判
- 【教你区分】TVS二极管和稳压二极管的不同
- 用户态的陷入指令(trap指令,访管指令)
热门文章
- 计算机一级b需要学哪些,希望通过江苏省计算机一级B考试的同学千万要看哦!江苏省计算机一级B理论复习资料(绝密资料)...
- mysql 冷热表_Redis+MySQL冷热数据交换
- Unity中BVH骨骼动画驱动的可视化理论与实现
- UFLDL教程:Exercise:Softmax Regression
- 编程书单:十本Python编程语言的入门书籍
- CodeForces 258D Little Elephant and Broken Sorting(期望)
- CAS单点登录原理简单介绍
- Python10/22--面向对象编程/类与对象/init函数
- 阿里云OSS linux使用备忘录
- SQL Server 数据库维护脚本合集[005]-删除数据库所有用户表