PaintCodeを使い、SVG画像をAndroidで表示させる方法

AndroidのSVG画像というと、VectorDrawableを使うのが一般的？？？な気がしますが...

最近、PaintCodeがアップデートされ、
なんと[Android(Java)に対応](https://www.paintcodeapp.com/news/paintcode-3)したので、使い方や使ってみた感想を書こうと思います。
ちなみに、PaintCodeは、iOSでSVG画像を使う時によく使ってます＼(^o^)／

PaintCodeの詳細については、[こちら](https://www.paintcodeapp.com/)を見てください。
簡単に言うと、SVG画像やPaintCode上で作った画像を、**SwiftやJSやJavaのコードに変換してくる**アプリケーションです。
**有料**です。お値段は約1万２千円くらい...**（お試し版もあります）**

# PaintCodeを使ってみる

こちらのSVG画像を使います。
![スクリーンショット 2016-11-03 23.42.42.png](https://qiita-image-store.s3.amazonaws.com/0/53996/bcab6e83-a287-ed91-9797-e3ce87d49f0b.png)

## ① SVG画像の読み込み

PaintCodeを開いて`File`の`Import...`からSVG画像を取り込みます。(ドラッグ・アンド・ドロップでもOK)
![スクリーンショット 2016-11-03 23.43.55.png](https://qiita-image-store.s3.amazonaws.com/0/53996/b24baf35-acb6-4196-6cd4-3af292ea668c.png)

取り込みが完了すると、こんな感じに表示されます。
下のほうに、変換されたコードが出ています。(最初は、Javaではなく他の言語が表示されているときがあります)
![スクリーンショット 2016-11-03 23.44.50.png](https://qiita-image-store.s3.amazonaws.com/0/53996/9efb72cf-33d1-b5ea-4d7d-0c4737bf56cd.png)

ちなみに`Android > Java`と表示しているところを選択すると、他の言語を選べます( *• ̀ω•́ )b

![スクリーンショット 2016-11-03 23.50.39.png](https://qiita-image-store.s3.amazonaws.com/0/53996/f69b53fa-dfc5-a664-ff87-dc21741bdb7b.png)

## ② コードを書き出す

一番左の`StyleKit`を選び、`Export`を押します。
※`Export`を押す前に、下に表示されているコードがJavaになっていることを確認してください。

![スクリーンショット 2016-11-03 23.45.25.png](https://qiita-image-store.s3.amazonaws.com/0/53996/39ab04cd-54c6-930e-4dd3-3ab2e5eab79f.png)

すると、このような確認画面がでるので、Nameなどを入力して、`Export`を押します。

![スクリーンショット 2016-11-03 23.45.33.png](https://qiita-image-store.s3.amazonaws.com/0/53996/efd2812a-ac75-9d79-e061-5a4e96168d5a.png)

Javaファイルが作られているので、それをプロジェクトに入れてください。

![スクリーンショット 2016-11-03 23.45.45.png](https://qiita-image-store.s3.amazonaws.com/0/53996/f965dfa3-1d3a-5c9e-005a-ed12f9e48fd5.png)

## ③ 表示

実際に使うには`Custom View`でやります。
とりあえず表示するだけなら、こんな感じで十分です。

```DroidoView.java
public class DroidoView extends View {

    public DroidoView(Context context) {
        super(context);
        init(null, 0);
    }

    public DroidoView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, 0);
    }

    public DroidoView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs, defStyle);
    }

    private void init(AttributeSet attrs, int defStyle) {
        final TypedArray a = getContext().obtainStyledAttributes(
                attrs, R.styleable.DroidoView, defStyle, 0);

        a.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        DroidoStyleKit.drawDroido(canvas);

    }

}
```

後は、こんな感じに使用するだけです！！

```xml
<gupuru.paintcodesample.DroidoView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
```

![スクリーンショット 2016-11-04 0.03.43.png](https://qiita-image-store.s3.amazonaws.com/0/53996/9cc87fbd-0304-cb81-7355-ca39acaa2b54.png)

ちなみに、`Custom View`ですが、New -> UI Component -> Custom Viewとすると、必要なファイルが自動で作成されます。
![スクリーンショット 2016-11-04 3.42.22.png](https://qiita-image-store.s3.amazonaws.com/0/53996/890ce0ff-f90c-2a92-4aab-d410a915397b.png)



# 補足

## 大きさとかの調整

大きさを変更しようとしてこんな感じにやると...

```xml
<gupuru.paintcodesample.DroidoView
  android:layout_width="wrap_content"
  android:layout_height="100dp"/>
```

こういう風になるので...

![スクリーンショット 2016-11-04 0.08.18.png](https://qiita-image-store.s3.amazonaws.com/0/53996/37b878dc-1f54-d460-9ead-ef279aa88117.png)

こんな感じにしてあげると、うまくいきます(•̀ᴗ•́)و 

```java
DroidoStyleKit.drawDroido(canvas, new RectF(0, 0, getWidth(), getHeight()), DroidoStyleKit.ResizingBehavior.AspectFit);

```

![スクリーンショット 2016-11-04 0.09.02.png](https://qiita-image-store.s3.amazonaws.com/0/53996/36af02e6-2766-79b4-54a1-4f3283a83088.png)


## Bitmap　

PaintCodeの右下辺りにある`Code Export`で...

![スクリーンショット 2016-11-04 0.17.07.png](https://qiita-image-store.s3.amazonaws.com/0/53996/adca0182-53a4-7eb6-af2d-a7448683f754.png)

`StyleKit Image Method`または`StyleKit Drawing & Image Method`のどちらかを選び、Exportします。

`![スクリーンショット 2016-11-04 0.10.29.png](https://qiita-image-store.s3.amazonaws.com/0/53996/fe72a34d-c8ae-f64f-3968-47448b10fcf3.png)

あとは、このように`imageOf...`で、Bitmapが使えます。

```java
ImageView imageView = (ImageView) findViewById(R.id.image);
imageView.setImageBitmap(DroidoStyleKit.imageOfAndroidLogo());
```

## 色や角度を動的に変更する

後で、色とかを変更したい場合は...

左に`Colors`という所があるので、紫色の丸の部分を選択します。
![スクリーンショット 2016-11-04 0.23.19.png](https://qiita-image-store.s3.amazonaws.com/0/53996/55761245-219a-b7d7-dbc5-75a6054a4339.png)

こんな画面がでるので、歯車マークを選択し`Parameter`を選びます。
![スクリーンショット 2016-11-04 0.23.32.png](https://qiita-image-store.s3.amazonaws.com/0/53996/c36a8ca5-ecd0-6fbb-fbc2-90353b9fc2dc.png)

すると、下のコードの部分にcolorの引数が追加されているはずです。

````java
void drawDoroidoCanvas(Canvas canvas, int color) {
```

次に、角度とかを後で変更したい場合は...

`Variables`の`＋`を選択します。

![スクリーンショット 2016-11-04 0.40.27.png](https://qiita-image-store.s3.amazonaws.com/0/53996/e020de00-d7e3-1c69-2195-01463fcd4190.png)

`Angle`を選びます。

![スクリーンショット 2016-11-04 0.25.08.png](https://qiita-image-store.s3.amazonaws.com/0/53996/b899edb3-7163-71f6-fd02-5c12d4b4f978.png)
こんな感じのやつができるので、右の`●`を長押ししながら...
![スクリーンショット 2016-11-04 0.42.30.png](https://qiita-image-store.s3.amazonaws.com/0/53996/5f240f21-b444-20e8-ce4c-feb8d374d795.png)

角度をつけたい部分に線を持っていき、`Rotaion`を選びます。

![スクリーンショット 2016-11-04 0.25.34.png](https://qiita-image-store.s3.amazonaws.com/0/53996/1b724ce4-aa4a-fe74-1711-b667c3d1b250.png)

すると、下のコードの部分にangleの引数が追加されているはずです。

```java
void drawDoroidoCanvas(Canvas canvas, int color, float angle) {
```

最後に`Export`します！

で、`Custom View`には、こんな感じに書きます。

```java
public class DroronView extends View {

    private int mColor;
    private float mAngle;

    public DroronView(Context context) {
        super(context);
        init(null, 0);
    }

    public DroronView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, 0);
    }

    public DroronView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(attrs, defStyle);
    }

    private void init(AttributeSet attrs, int defStyle) {
        final TypedArray a = getContext().obtainStyledAttributes(
                attrs, R.styleable.DroronView, defStyle, 0);

        mColor = a.getColor(R.styleable.DroronView_color, 0xFFFFFFFF);
        mAngle = a.getFloat(R.styleable.DroronView_angle, 0);

        a.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        DroidoStyleKit.drawDroron(canvas,
                new RectF(0, 0, getWidth(), getHeight()),
                DroidoStyleKit.ResizingBehavior.AspectFit,
                mColor,
                mAngle);

    }

    public void setmAngle(float mAngle) {
        this.mAngle = mAngle;
        invalidate();
    }

    public void setmColor(int mColor) {
        this.mColor = mColor;
        invalidate();
    }

}
```

```xml
<resources>
    <declare-styleable name="DroronView">
        <attr name="color" format="color" />
        <attr name="angle" format="float" />
    </declare-styleable>
</resources>
```

これで、こんな感じに動的に変更できるようになっています。

```xml
  <gupuru.paintcodesample.DroronView
        android:id="@+id/view_droron"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:color="#ff0000"
        app:angle="230"/>

```

もちろんjavaのコードからでも可能です。

```java
DroronView droronView = (DroronView) findViewById(R.id.view_droron);
droronView.setmColor(20);
```

# まとめ

PaintCodeがいろいろ進化していて驚き＼(^o^)／
Java以外にも、HTML5のCanvasやCSSとかにも対応しているみたいです。
でも、Androidの場合、VectorDrawableがあるので、どういうふうに利用するか迷う...