Android学好Shape不再依赖美工

原创 2014年03月27日 15:33:41

  • 20427

先上图

Android学好Shape不再依赖美工_第1张图片

其实以上效果没有让美工提供任何图片 只要学会Shape你就能实现 想怎么样就怎么样

下面介绍Shape的用法:

  android:shape=["rectangle" | "oval" | "line" | "ring"]

其中rectagle矩形,oval椭圆,line水平直线,ring环形

中子节点的常用属性:

  渐变

android:startColor  起始颜色

android:endColor  结束颜色            

android:angle  渐变角度,0从上到下,90表示从左到右,数值为45的整数倍默认为0;

android:type  渐变的样式 liner线性渐变 radial环形渐变 sweep

  填充

android:color  填充的颜色

描边

android:width 描边的宽度

android:color 描边的颜色

android:dashWidth 表示'-'横线的宽度

android:dashGap 表示'-'横线之间的距离

圆角

android:radius  圆角的半径 值越大角越圆

android:topRightRadius  右上圆角半径
 
android:bottomLeftRadius 右下圆角角半径
 
android:topLeftRadius 左上圆角半径

android:bottomRightRadius 左下圆角半径


2.用selector添加shape

   
    
       
           
                                    android:startColor="#A5D245" />
               
               
           

       

       
           
                                    android:startColor="#A5D245"/>
               
               
           

       

       
           
                                    android:startColor="#C6CFCE"/>
               
               
           

       

   

android 用shape oval属性画圆环变成黑圆形解决办法

原创 2015年09月06日 10:12:59
  • 2900

前言

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

如下图所示

Android学好Shape不再依赖美工_第2张图片

xml 如下

 

[html] view plain copy
 
  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.   
  9. shape>  


 

解决办法

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

 

[html] view plain copy
 
  1. <solid android:color="#00ffffff" />  

如下图

 

Android学好Shape不再依赖美工_第3张图片

xml 如下

 

[html] view plain copy
 
  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

 

[java] view plain copy
 
print?
  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);

Android学好Shape不再依赖美工_第4张图片 矩形

 

 

RoundRectShape

 

[java] view plain copy
 
print?
  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.   
  8. ShapeDrawable drawable = new ShapeDrawable(roundRectShape);  
  9. drawable.getPaint().setColor(Color.MAGENTA);  
  10. drawable.getPaint().setAntiAlias(true);  
  11. drawable.getPaint().setStyle(Paint.Style.STROKE);//描边  
  12. 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);

Android学好Shape不再依赖美工_第5张图片 无内矩形的圆角矩形  Android学好Shape不再依赖美工_第6张图片 带内矩形的圆角矩形

 

 

OvalShape

 

[java] view plain copy
 
print?
  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);

Android学好Shape不再依赖美工_第7张图片 椭圆。 而当View的宽高相等时,就绘出了圆

 

 

ArcShape

 

[java] view plain copy
 
print?
  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.   
  6. // Bitmap bitmap =  ((BitmapDrawable)getResources().getDrawable(R.drawable.aa)).getBitmap();  
  7. // BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.MIRROR, Shader  
  8. //                .TileMode.REPEAT);  
  9. // Matrix matrix = new Matrix();  
  10. // matrix.preScale(600.00f / bitmap.getWidth(), 600.00f / bitmap.getHeight());//view:w=600,h=600  
  11. // bitmapShader.setLocalMatrix(matrix);  
  12. // drawable.getPaint().setShader(bitmapShader);  
  13.   
  14. 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);

Android学好Shape不再依赖美工_第8张图片 扇形图

 

Android学好Shape不再依赖美工_第9张图片 结合BitmapShader

 

PathShape

 

[java] view plain copy
 
print?
  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对象时,设置了宽高的标准。内部函数 

 

[java] view plain copy
 
print?
  1. protected void onResize(float width, float height) {  
  2.     mScaleX = width / mStdWidth;  
  3.     mScaleY = height / mStdHeight;  
  4. }  
  5.   
  6. public void draw(Canvas canvas, Paint paint) {  
  7.     canvas.save();  
  8.     canvas.scale(mScaleX, mScaleY);  
  9.     canvas.drawPath(mPath, paint);  
  10.     canvas.restore();  
  11. }  
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);

  Android学好Shape不再依赖美工_第10张图片  stdx=400, stdy=400

 

PathShape pathShape = new PathShape(path, 100, 100);

Android学好Shape不再依赖美工_第11张图片 stdx=100, stdy=100  

 

 

PathShape pathShape = new PathShape(path, 200, 100);

Android学好Shape不再依赖美工_第12张图片 stdx=200, stdy=100

 
  

 

 

 
阅读全文

 

转载于:https://www.cnblogs.com/totoo/p/ovalshape.html

你可能感兴趣的:(Android学好Shape不再依赖美工)