Android 繪圖和shape圓形

奮鬥年輕人發表於2016-11-19

        最近一直忙適配方面的工作,還有的奇葩的事就是不同機型對於顯示的時候顏色有時會變其它顏色,所以乾脆不在佈局直接新增自定義的,而是直接在網上找了篇直接繪圖的,shape圓形,自己的需求是判斷文章未讀時顯示小紅點,讀過的則消失。

網上找的這篇shape圓的部落格不錯,好久沒接觸過了,所以一時也沒回想得起來做,所以網上找到了這篇,直接用直接上手。

Android繪圖主要涉及到android.graphics.* 包裡面一些類:

  • Canvas
  • Bitmap及其相關的類
  • Xfermode及其子類
  • Paint及其相關類和內部類
  • Shader及其子類
  • Rect,Color,Point,Path等基礎類

NewImage

實現:

shape可以繪製矩形環形以及橢圓,所以只需要用橢圓即可,在使用的時候將控制元件比如imageview或textview的高寬設定成一樣就是正圓,solid表示遠的填充色,stroke則代表遠的邊框線,所以兩者結合可以實現帶邊緣的圓,當然也可以直接加上size控制高寬,下面的程式碼實現效果是一個帶白邊的紅圓。

<?xml version="1.0" encoding="utf-8"?>

<shape

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="oval"

    android:useLevel="false">

 

    <solidandroid:color="@color/red"/>

    <stroke

        android:width="1dp"

        android:color="@color/white"/>

    <sizeandroid:width="20dp"

          android:height="20dp"/>

</shape>



  UI控制元件不滿足我們的需求的時候,就需要自定義View。自定義view的一個重點就是實現就是去重寫他的繪製過程,也就是View.onDraw(Canvas canvas)方法,它裡面就是繪製圖形的過程了,比如說一個Button,繪製按鈕和按鈕上的文字都是在它自己的onDraw方法中完成的。如果你想給ImageView加個蒙版,可以繼承ImageView並且重寫他的onDraw方法,呼叫完父類的onDraw之後,再自己Canvas來畫一個黑色的半透明矩形,這樣就可以對現有的控制元件進行加工了。

Canvas是畫布,你繪製東西的時候就是繪到了這個畫布上,給使用者顯示的東西也是這個畫布上的東西。通常來說,當你呼叫到onDraw方法的時候對應的View已經確定了他的寬度和高度(關於View的measure和layout過程以後再詳述)。那麼在Canvas上,你畫的範圍就只有View對應的大小了。我們用程式碼來描述下:

1 protected void onDraw(Canvas canvas) {
2     super.onDraw(canvas);
3     int verticalCenter    =  getHeight() / 2;
4     int horizontalCenter  =  getWidth() / 2;
5     int circleRadius      = 200;
6     Paint paint = new Paint();
7     paint.setAntiAlias(false);
8     paint.setColor(Color.RED);
9     canvas.drawCircle( horizontalCenter, verticalCenter-250, circleRadius, paint);
10  
11     paint.setAntiAlias(true);
12     paint.setStyle(Paint.Style.STROKE);
13     paint.setStrokeWidth(20);
14     canvas.drawCircle( horizontalCenter, verticalCenter+250, circleRadius, paint);
15 }

這個View的大小可以通過getHeight()和getWidth()來獲得。我們準備畫兩個圓圈,半徑都是200。我們主要用到的方法是drawCircle()方法,引數的意義分別是圓心的x,y座標,半徑和所使用的畫筆Paint。

Paint是畫筆,Canvas是畫布,畫筆控制了所畫東西的顏色大小字型等等。在畫第一個圓的時候,我們通過Paint.setAntiAlias方法設定抗鋸齒屬性為false,並設定顏色為紅色。

在畫第二個圓的時候,我們開啟了抗鋸齒。將Paint的風格設為STROKE,也就是隻畫邊框。然後設定邊框寬度為20.

你可以將上面的程式碼執行一下(Demo的github地址:https://github.com/fookwood/AndroidGraphicsDemo

1410763868_full.png

所畫出來的東西是符合我們預期的。上面的圓是實心,下面的是空心,而且上面的圓邊緣會有鋸齒感,而下面的沒有。在用Canvas繪製一些向量圖形的時候,比如矩形,圓形,文字的時候我們通常會通過Paint開啟抗鋸齒。

以上為網上找的部落格,下邊的為自己專案修改的:
1、設定小圓點
<?xml version="1.0"encoding="utf-8"?>
<shapexmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="oval"
      android:useLevel="false">
      <solidandroid:color="@color/red"/>
      <sizeandroid:width="7dp"
         android:height="7dp"/>
</shape>

佈局呼叫:
                <TextView
                        android:id="@+id/iv_read"
                        android:layout_width="7dp"
                        android:layout_height="7dp"
                        android:adjustViewBounds="true"
                        android:scaleType="fitXY"
                        android:layout_marginRight="3dp"
                        android:layout_marginTop="5dp"
                        android:background="@drawable/diary_red_dot" //呼叫方可
                        />




相關文章