Android学好Shape不再依赖美工
原创 2014年03月27日 15:33:41
- 标签:
- Android Shape用法
- 20427
先上图
其实以上效果没有让美工提供任何图片 只要学会Shape你就能实现 想怎么样就怎么样
下面介绍Shape的用法:
<shape> android:shape=["rectangle" | "oval" | "line" | "ring"]
其中rectagle矩形,oval椭圆,line水平直线,ring环形
<shape>中子节点的常用属性:
<gradient> 渐变
android:startColor 起始颜色
android:endColor 结束颜色
android:angle 渐变角度,0从上到下,90表示从左到右,数值为45的整数倍默认为0;
android:type 渐变的样式 liner线性渐变 radial环形渐变 sweep
<solid > 填充
android:color 填充的颜色
<stroke > 描边
android:width 描边的宽度
android:color 描边的颜色
android:dashWidth 表示'-'横线的宽度
android:dashGap 表示'-'横线之间的距离
<corners > 圆角
android:radius 圆角的半径 值越大角越圆
android:topRightRadius 右上圆角半径
android:bottomLeftRadius 右下圆角角半径
android:topLeftRadius 左上圆角半径
android:bottomRightRadius 左下圆角半径
2.用selector添加shape
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape>
<gradient android:angle="270" android:endColor="#99BD4C"
android:startColor="#A5D245" />
<size android:height="60dp" android:width="320dp" />
<corners android:radius="8dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape>
<gradient android:angle="270" android:endColor="#99BD4C"
android:startColor="#A5D245"/>
<size android:height="60dp" android:width="320dp" />
<corners android:radius="8dp" />
</shape>
</item>
<item>
<shape>
<gradient android:angle="270" android:endColor="#A8C3B0"
android:startColor="#C6CFCE"/>
<size android:height="60dp" android:width="320dp" />
<corners android:radius="8dp" />
</shape>
</item>
</selector>
android 用shape oval属性画圆环变成黑圆形解决办法
前言
使用Shape 的oval 属性画圆环图形在api15及api16 上会变成黑圆形
如下图所示
xml 如下
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="oval">
- <size android:width="235dp"
- android:height="235dp" />
- <stroke android:width="1dp"
- android:color="@color/tr_white1" />
- </shape>
解决办法
经过研究 发现 需要填充背景色为透明即可
- <solid android:color="#00ffffff" />
如下图
xml 如下
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="oval">
- <size android:width="235dp"
- android:height="235dp" />
- <stroke android:width="1dp"
- android:color="@color/tr_white1" />
- <solid android:color="#00ffffff" />
- </shape>
Shape继承体系:
Shape (android.graphics.drawable.shapes)
----PathShape (android.graphics.drawable.shapes)
----RectShape (android.graphics.drawable.shapes)
--------ArcShape (android.graphics.drawable.shapes)
--------OvalShape (android.graphics.drawable.shapes)
--------RoundRectShape (android.graphics.drawable.shapes)
RectShape
- RectShape rectShape = new RectShape();
- ShapeDrawable drawable = new ShapeDrawable(rectShape);
- drawable.getPaint().setColor(Color.RED);
- drawable.getPaint().setStyle(Paint.Style.FILL); //填充
- view.setBackgroundDrawable(drawable);
RectShape rectShape = new RectShape();
ShapeDrawable drawable = new ShapeDrawable(rectShape);
drawable.getPaint().setColor(Color.RED);
drawable.getPaint().setStyle(Paint.Style.FILL); //填充
view.setBackgroundDrawable(drawable);
矩形
RoundRectShape
- float[] outerRadii = {20, 20, 40, 40, 60, 60, 80, 80};//外矩形 左上、右上、右下、左下 圆角半径
- //float[] outerRadii = {20, 20, 20, 20, 20, 20, 20, 20};//外矩形 左上、右上、右下、左下 圆角半径
- RectF inset = new RectF(100, 100, 200, 200);//内矩形距外矩形,左上角x,y距离, 右下角x,y距离
- float[] innerRadii = {20, 20, 20, 20, 20, 20, 20, 20};//内矩形 圆角半径
- //RoundRectShape roundRectShape = new RoundRectShape(outerRadii, inset, innerRadii);
- RoundRectShape roundRectShape = new RoundRectShape(outerRadii, null, innerRadii); //无内矩形
- ShapeDrawable drawable = new ShapeDrawable(roundRectShape);
- drawable.getPaint().setColor(Color.MAGENTA);
- drawable.getPaint().setAntiAlias(true);
- drawable.getPaint().setStyle(Paint.Style.STROKE);//描边
- view.setBackground(drawable);
float[] outerRadii = {20, 20, 40, 40, 60, 60, 80, 80};//外矩形 左上、右上、右下、左下 圆角半径
//float[] outerRadii = {20, 20, 20, 20, 20, 20, 20, 20};//外矩形 左上、右上、右下、左下 圆角半径
RectF inset = new RectF(100, 100, 200, 200);//内矩形距外矩形,左上角x,y距离, 右下角x,y距离
float[] innerRadii = {20, 20, 20, 20, 20, 20, 20, 20};//内矩形 圆角半径
//RoundRectShape roundRectShape = new RoundRectShape(outerRadii, inset, innerRadii);
RoundRectShape roundRectShape = new RoundRectShape(outerRadii, null, innerRadii); //无内矩形 ShapeDrawable drawable = new ShapeDrawable(roundRectShape);
drawable.getPaint().setColor(Color.MAGENTA);
drawable.getPaint().setAntiAlias(true);
drawable.getPaint().setStyle(Paint.Style.STROKE);//描边
view.setBackground(drawable);
无内矩形的圆角矩形 带内矩形的圆角矩形
OvalShape
- OvalShape ovalShape = new OvalShape();
- ShapeDrawable drawable = new ShapeDrawable(ovalShape);
- drawable.getPaint().setColor(Color.RED);
- drawable.getPaint().setStyle(Paint.Style.FILL_AND_STROKE);
- view.setBackgroundDrawable(drawable);
OvalShape ovalShape = new OvalShape();
ShapeDrawable drawable = new ShapeDrawable(ovalShape);
drawable.getPaint().setColor(Color.RED);
drawable.getPaint().setStyle(Paint.Style.FILL_AND_STROKE);
view.setBackgroundDrawable(drawable);
椭圆。 而当View的宽高相等时,就绘出了圆
ArcShape
- ArcShape arcShape = new ArcShape(45, 270); //顺时针 开始角度45, 扫描的角度270 扇形
- ShapeDrawable drawable = new ShapeDrawable(arcShape);
- drawable.getPaint().setColor(Color.RED);
- drawable.getPaint().setStyle(Paint.Style.FILL);
- // Bitmap bitmap = ((BitmapDrawable)getResources().getDrawable(R.drawable.aa)).getBitmap();
- // BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader
- // .TileMode.REPEAT);
- // Matrix matrix = new Matrix();
- // matrix.preScale(600.00f / bitmap.getWidth(), 600.00f / bitmap.getHeight());//view:w=600,h=600
- // bitmapShader.setLocalMatrix(matrix);
- // drawable.getPaint().setShader(bitmapShader);
- view.setBackgroundDrawable(drawable);
ArcShape arcShape = new ArcShape(45, 270); //顺时针 开始角度45, 扫描的角度270 扇形
ShapeDrawable drawable = new ShapeDrawable(arcShape);
drawable.getPaint().setColor(Color.RED);
drawable.getPaint().setStyle(Paint.Style.FILL); // Bitmap bitmap = ((BitmapDrawable)getResources().getDrawable(R.drawable.aa)).getBitmap();
// BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader
// .TileMode.REPEAT);
// Matrix matrix = new Matrix();
// matrix.preScale(600.00f / bitmap.getWidth(), 600.00f / bitmap.getHeight());//view:w=600,h=600
// bitmapShader.setLocalMatrix(matrix);
// drawable.getPaint().setShader(bitmapShader); view.setBackgroundDrawable(drawable);
扇形图
结合BitmapShader
PathShape
- Path path = new Path();
- path.moveTo(50, 0);
- path.lineTo(0, 50);
- path.lineTo(50, 100);
- path.lineTo(100, 50);
- path.lineTo(50, 0);
- PathShape pathShape = new PathShape(path, 200, 100);
- ShapeDrawable drawable = new ShapeDrawable(pathShape);
- drawable.getPaint().setColor(Color.RED);
- drawable.getPaint().setStyle(Paint.Style.FILL);
- imageView.setBackgroundDrawable(drawable);
Path path = new Path();
path.moveTo(50, 0);
path.lineTo(0, 50);
path.lineTo(50, 100);
path.lineTo(100, 50);
path.lineTo(50, 0);
PathShape pathShape = new PathShape(path, 200, 100);
ShapeDrawable drawable = new ShapeDrawable(pathShape);
drawable.getPaint().setColor(Color.RED);
drawable.getPaint().setStyle(Paint.Style.FILL);
imageView.setBackgroundDrawable(drawable);
以Path路径对象,来设定图形。
PathShape的构造函数:PathShape(path, stdWidth, stdHeight);
stdWidth:标准宽度
stdHeight:标准高度
在构造PathShape对象时,设置了宽高的标准。内部函数
- protected void onResize(float width, float height) {
- mScaleX = width / mStdWidth;
- mScaleY = height / mStdHeight;
- }
- public void draw(Canvas canvas, Paint paint) {
- canvas.save();
- canvas.scale(mScaleX, mScaleY);
- canvas.drawPath(mPath, paint);
- canvas.restore();
- }
protected void onResize(float width, float height) {
mScaleX = width / mStdWidth;
mScaleY = height / mStdHeight;
} public void draw(Canvas canvas, Paint paint) {
canvas.save();
canvas.scale(mScaleX, mScaleY);
canvas.drawPath(mPath, paint);
canvas.restore();
}
Shape基类中有函数 resize(),其中调用了onResize();ShapeDrawable中会调用resize()。
有了设定的标准宽高,再算出实际宽高与标准宽高的比率,最后在绘制时,画布canvas缩放。
造成的效果: path中的(x,y)坐标值 乘以 比率值,即是 最终呈现出的坐标值(实际内部是缩放的canvas)
比如,这里view的 w=400, h=400
如果标准宽高都等于400,那么canvas最终不缩放,即1:1。
PathShape pathShape = new PathShape(path, 400, 400);
stdx=400, stdy=400
PathShape pathShape = new PathShape(path, 100, 100);
stdx=100, stdy=100
PathShape pathShape = new PathShape(path, 200, 100);
stdx=200, stdy=100
Android学好Shape不再依赖美工的更多相关文章
- [Android]使用Dagger 2依赖注入 - API(翻译)
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5092525.html 使用Dagger 2依赖注入 - API ...
- [Android]使用Dagger 2依赖注入 - 自定义Scope(翻译)
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5095426.html 使用Dagger 2依赖注入 - 自定义 ...
- Drawable实战解析:Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)
Android XML shape 标签使用详解 一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...
- Android GradientDrawable(shape标签定义) 静态使用和动态使用(圆角,渐变实现)
Android GradientDrawable使用优势: 1. 快速实现一些基本图形(线,矩形,圆,椭圆,圆环) 2. 快速实现一些圆角,渐变,阴影等效果 3. 代替图片设置为View的背景 4. ...
- [Android]使用Dagger 2依赖注入 - DI介绍(翻译)
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5092083.html 使用Dagger 2依赖注入 - DI介 ...
- [Android]使用Dagger 2依赖注入 - 图表创建的性能(翻译)
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5098943.html 使用Dagger 2依赖注入 - 图表创 ...
- 系列篇|编译可在Android上运行的依赖库(一):glib库
前言 这是系列文章,它们由<编译可在Android上运行的glib库>及其他4篇文章组成,这4篇文章在“编译依赖库”一节中列出.由于glib库依赖于其他第三方库,所以需要先将依赖的第三方库 ...
- 简单利用jQuery加tomcat,让前端开发不再依赖于后端的接口
前端开发的过程中,我们免不了和后端进行联调,这时候就会出现以下的尴尬场景: 接口没写好,没法做接下来的功能 功能写好了,接口没写好,没法测这个功能 联调了,除了BUG,不知道锅在谁身上,只得陪后端耗时 ...
- Android中shape属性详解
一.简单使用 刚开始,就先不讲一堆标签的意义及用法,先简单看看shape标签怎么用. 1.新建shape文件 首先在res/drawable文件夹下,新建一个文件,命名为:shape_radius.x ...
随机推荐
- 如何使用多数据源,同时使用jpa和jdbctemplate
spring: datasource: first: type: com.alibaba.druid.pool.DruidDataSource url: jdbc:mysql://xx.xx.xx.x ...
- thinkphp 5.6以上版本出现No input file specified解决办法
打开thinkphp,出现No input file specified. 解决方法:在工程下的.htaccess文件里, 把RewriteRule ^(.*)$ index.php/$1 [QSA, ...
- Permission denied的解决办法
在运行TensorFlow Example的mnist_dataset_intro时出现了Permission denied的问题,这一看就是权限问题. 解决的办法: $ sudo chmod -R ...
- A Boring Problem UVALive - 7676 (二项式定理+前缀和)
题目链接: I - A Boring Problem UVALive - 7676 题目大意:就是求给定的式子. 学习的网址:https://blog.csdn.net/weixin_37517391 ...
- 调试 - Chrome调试
调试 - Chrome调试 打开开发人员工具 Ctrl+Shift+i可以打开开发人员工具. 功能面板 NetWork功能面板 在当前页面打开调试工具,刷新页面后点击NetWork可以查看当前页面的H ...
- 【转】QPainter中坐标系变换问题
转自:http://blog.sina.com.cn/s/blog_67cf08270100ww0p.html 一.坐标系简介. Qt中每一个窗口都有一个坐标系,默认的,窗口左上角为坐标原点,然后水平 ...
- js中split 正则表示式 (/[,+]/)
定义和用法 split() 方法用于把一个字符串分割成字符串数组. 语法 stringObject.split(separator,howmany) separator 作为分隔符,separator ...
- git命令之git remote的用法
git remote git remote -v git init git add xxx git commit -m 'xxx' git remote add origin ssh://softw ...
- Django-ORM多表操作(进阶)
一.创建模型 下面我们通过图书管理系统,来设计出每张表之间的对应关系. 通过上图关系,来定义一下我们的模型类. from django.db import models class Book(mode ...
- Flask简述
Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求进行预处理,然后 ...