InsetDrawable

仕事で調べる機会があったのでInsetDrawableの覚え書き。

InsetDrawableはViewのBackgroundに表示する背景画像が実際のViewの大きさよりも小さい場合に有効ということです。Viewにセットする画像が小さいけど、タッチエリアは大きく取りたい。しかも、その画像を左寄せで表示したい。わざわざそのような画像をデザイナさんにお願いするのもという問題があって、調べて見ましたが、結局使いどころが分かりませんでした。。。

Drawableのリソースを定義

XMLでInsetDrawableを定義します。android:inset~でViewのboundaryからのインセット値を定義します。

inset_logo.xml

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

<inset
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_launcher"
    android:insetRight="72px"
    android:insetLeft="-72px"/>

hdpi用で72pxの画像を使用しています。insetRightに正の値を指定するとその分、もとの画像がつぶされたような表示になってしまいました。右にインセット値を挿入し左寄せに表示したいということを実現する場合、insetLeftで同じ絶対値の負の値を指定する必要がありました。

LayoutでDrawableを指定

activity_main.xml

    <ImageView
        android:layout_width="216px"
        android:layout_height="wrap_content"
        android:src="@drawable/inset_logo"
        android:background="#000000"/>

この指定によって、下記のようにアイコンが左寄せになりました。

その他

ただ、Viewのheightを使用する画像より大きくした場合、上手く表示されませんでした。。。ImageViewのscaleTypeにfitStartを指定したものと比較・実装したもの、その結果を載せておきます。

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.example.insetdrawable.app.MainActivity">

    <TextView
        android:text="View width 216px height 72px\nInsetDrawableを使用"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:layout_width="216px"
        android:layout_height="wrap_content"
        android:src="@drawable/inset_logo"
        android:background="#000000"/>

    <TextView
        android:text="scaleType(fitStart)を使用"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:layout_width="216px"
        android:layout_height="wrap_content"
        android:scaleType="fitStart"
        android:src="@drawable/ic_launcher"
        android:background="#000000"/>

    <TextView
        android:text="View width 216px height 216px\nInsetDrawableを使用"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:layout_width="216px"
        android:layout_height="216px"
        android:src="@drawable/inset_logo"
        android:background="#000000"/>

    <TextView
        android:text="scaleTypeを使用"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:layout_width="216px"
        android:layout_height="216px"
        android:scaleType="fitStart"
        android:src="@drawable/ic_launcher"
        android:background="#000000"/>

</LinearLayout>

んー、よく分からない。