正文

Android学好Shape不再依赖美工

IP云
IP云V管理员/1 阅读
11/29
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

原创 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属性画圆环变成黑圆形解决办法
原创 2015年09月06日 10:12:59
  • 标签：
  • android /
  • shape
  • 2900

前言

使用Shape 的oval 属性画圆环图形在api15及api16 上会变成黑圆形

如下图所示

xml 如下

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="oval">
  4. <size android:width="235dp"
  5. android:height="235dp" />
  6. <stroke android:width="1dp"
  7. android:color="@color/tr_white1" />
  8. </shape>

解决办法

经过研究 发现 需要填充背景色为透明即可

  1. <solid android:color="#00ffffff" />

如下图

xml 如下

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="oval">
  4. <size android:width="235dp"
  5. android:height="235dp" />
  6. <stroke android:width="1dp"
  7. android:color="@color/tr_white1" />
  8. <solid android:color="#00ffffff" />
  9. </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
  1. RectShape rectShape = new RectShape();
  2. ShapeDrawable drawable = new ShapeDrawable(rectShape);
  3. drawable.getPaint().setColor(Color.RED);
  4. drawable.getPaint().setStyle(Paint.Style.FILL); //填充
  5. 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
  1. float[] outerRadii = {20, 20, 40, 40, 60, 60, 80, 80};//外矩形 左上、右上、右下、左下 圆角半径
  2. //float[] outerRadii = {20, 20, 20, 20, 20, 20, 20, 20};//外矩形 左上、右上、右下、左下 圆角半径
  3. RectF inset = new RectF(100, 100, 200, 200);//内矩形距外矩形，左上角x,y距离， 右下角x,y距离
  4. float[] innerRadii = {20, 20, 20, 20, 20, 20, 20, 20};//内矩形 圆角半径
  5. //RoundRectShape roundRectShape = new RoundRectShape(outerRadii, inset, innerRadii);
  6. RoundRectShape roundRectShape = new RoundRectShape(outerRadii, null, innerRadii); //无内矩形
  7. ShapeDrawable drawable = new ShapeDrawable(roundRectShape);
  8. drawable.getPaint().setColor(Color.MAGENTA);
  9. drawable.getPaint().setAntiAlias(true);
  10. drawable.getPaint().setStyle(Paint.Style.STROKE);//描边
  11. 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
  1. OvalShape ovalShape = new OvalShape();
  2. ShapeDrawable drawable = new ShapeDrawable(ovalShape);
  3. drawable.getPaint().setColor(Color.RED);
  4. drawable.getPaint().setStyle(Paint.Style.FILL_AND_STROKE);
  5. 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
  1. ArcShape arcShape = new ArcShape(45, 270); //顺时针  开始角度45， 扫描的角度270   扇形
  2. ShapeDrawable drawable = new ShapeDrawable(arcShape);
  3. drawable.getPaint().setColor(Color.RED);
  4. drawable.getPaint().setStyle(Paint.Style.FILL);
  5. // Bitmap bitmap =  ((BitmapDrawable)getResources().getDrawable(R.drawable.aa)).getBitmap();
  6. // BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader
  7. //                .TileMode.REPEAT);
  8. // Matrix matrix = new Matrix();
  9. // matrix.preScale(600.00f / bitmap.getWidth(), 600.00f / bitmap.getHeight());//view:w=600,h=600
  10. // bitmapShader.setLocalMatrix(matrix);
  11. // drawable.getPaint().setShader(bitmapShader);
  12. 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
  1. Path path = new Path();
  2. path.moveTo(50, 0);
  3. path.lineTo(0, 50);
  4. path.lineTo(50, 100);
  5. path.lineTo(100, 50);
  6. path.lineTo(50, 0);
  7. PathShape pathShape = new PathShape(path, 200, 100);
  8. ShapeDrawable drawable = new ShapeDrawable(pathShape);
  9. drawable.getPaint().setColor(Color.RED);
  10. drawable.getPaint().setStyle(Paint.Style.FILL);
  11. 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对象时，设置了宽高的标准。内部函数

  1. protected void onResize(float width, float height) {
  2. mScaleX = width / mStdWidth;
  3. mScaleY = height / mStdHeight;
  4. }
  5. public void draw(Canvas canvas, Paint paint) {
  6. canvas.save();
  7. canvas.scale(mScaleX, mScaleY);
  8. canvas.drawPath(mPath, paint);
  9. canvas.restore();
  10. } 
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 Shader 颜色、图像渲染 paint.setXfermode
  • 下一篇 Java 希尔排序

相关阅读

目录[+]