「みんなのコミック」は2018年10月31日を持ちまして更新を終了いたしました。

「みんコミ Advent Calendar」３日目を担当する有山圭二です。 ３日目はアプリに表示する画像素材についてです。

本記事で話題にする「みんコミ」のAndroidアプリは、「Google Play Store」からインストールできます。さっそくインストールしてみましょう。

en_generic_rgb_wo_60（公開終了しています）

※ なお、本記事は「バージョン1.0.1」を元に執筆しています。

トップ画面を開いてまず目に入るのは、一番上のViewPagerを利用したサムネイルです。

そして、その下方に配置されているページ・インジケータ（iOSで言えばUIPageControlといえばわかりやすいのでしょうか）が、画像の解像度が足りていないのでしょうか、円形ではなく菱形に表示され、ジャギーが見えているのが気になりました。

page_control

このような単純な素材であれば、画像ではなくShape Drawableで作成してしまうのが良いと思います。

例えば、res/drawableに「page_indicator_normal.xml」を作り、内容を次のようにします。

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <size
        android:width="10dp"
        android:height="10dp"/>

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

</shape>

もう一つ「page_indicator_selected.xml」を作ります。「page_indicator_normal.xml」との違いは色が赤色と言うことです。

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <size
        android:width="10dp"
        android:height="10dp"/>

    <solid
        android:color="#ff0000"/>

</shape>

最後に、この二つのDrawableを状態に応じて切り替えるセレクターとして「page_indicator.xml」を作成します。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/page_indicator_selected" android:state_selected="true"/>
    <item android:drawable="@drawable/page_indicator_normal"/>
</selector>

あとは、「page_indicator.xml」をDrawableとしてImageViewに読み込ませれば、ImageViewの状態（selected）に応じて色が変わります。

このように、簡単な画像素材であればXMLとして作成することができます。また、Lolipop（Android 5.0）以上であればVectorDrawableに対応しているので、SVGに近い形式で記述すれば複雑な形も描画できますが、こちらはまだ少し使い勝手が悪いと感じているので、あまりお勧めはしません。

サンプルプロジェクトをGitHubに置いておきます。

https://github.com/keiji/adventcalendar_2015_mincomi

device-2015-12-01-154732

「有山圭二」は「みんなのコミック」及び運営の「株式会社イーブックイニシアティブジャパン」とは一切関係がありません。
また、本アドベントカレンダーの内容はあくまで参加者個人の見解です。
「みんなのコミック」の評価を目的とするものではありませんので、あらかじめご了承下さい。

蛇足になりますが、みんコミといえば、僕が普段からお世話になっている根雪れい（@neyuki_rei）さんも連載陣に名を連ねていますね。

そろそろ次の話が更新されてくれないと書くことも少なくなってきました。

早く第２話を読みたいものです……！！

それでは明日、４日の担当は「有山圭二」さんです。

よろしくお願いします。