• Android学好Shape不再依赖美工

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

    先上图

    其实以上效果没有让美工提供任何图片 只要学会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

    前言

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

    如下图所示


    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" />  

    如下图


    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);

     矩形

    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);

     无内矩形的圆角矩形  带内矩形的圆角矩形

    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);

     椭圆。 而当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);

     扇形图

     结合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);

        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

     
      
     
    阅读全文
  • 相关阅读:
    Windows Azure 社区新闻综述（#64 版）
    Eclipse下配置C/C++开发环境
    有你同行，我不会寂寞物联网操作系统Hello China后续开发计划及开发者征集
    ObjectiveC新手推荐《ObjectiveC开发范例代码大全》
    虚拟网络添加跨界连接的新功能
    WebMatrix 3发布了!
    Windows Live最值得期待的功能 FolderShare
    ASP.NET 2.0 两种模式website和web application到底那个好？
    Sonata 1.2.1 发布
    DB2 9 使用拓荒（733 测验）认证指南，第 9 部分: 用户定义的例程(4)
  • 原文地址：https://www.cnblogs.com/totoo/p/ovalshape.html
Copyright © 2020-2023  润新知