Android:cropToPaddingについて

#ご挨拶無銭知的労働を強いられている大学生です。こんばんは。

ミープレブログに移行して、知的労働で食っていけるように研鑽したく、そのためにはとにかくアウトプット必要だな、というわけで頑張る。

#本題： android:cropToPadding さて、ImageViewをわさわさしていて、俺は思った。

バラバラのアスペクト比の画像を
~~比率を変えることなく~~ 画像のアス比を維持したまま拡縮して
縦横の大きさは同じ（正方形）にして
描画できない部分は切り落として
つまるところ、できるだけ情報量を削らずに矩形に切り抜いて

表示したい、ってニーズありますよね。というかそう表示したかったんですね。（本当は別件でわさわさしてたのですが。。。）

そんな時は、以下のようなスタイルを作って・・・

<?xml version="1.0" encoding="utf-8"?>
    <resources>
    
    <style name="ultraHyperBeautifulImageView">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:scaleType">centerCrop</item>
        <item name="android:padding">5dp</item>
        <item name="android:cropToPadding">true</item>
    </style>

</resources>

以下のようなlayoutに読ませてあげると良さげです。

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

    <TableRow>

        <FrameLayout style="@style/CellStyle" >

            <ImageView
                android:id="@+id/imageView_select_one"
                style="@style/ultraHyperBeautifulImageView"
                android:contentDescription="1st Quiz choices"
                android:src="@drawable/hoshi" />

            <ImageView
                style="@android:color/transparent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </FrameLayout>

        <FrameLayout style="@style/CellStyle" >

            <ImageView
                android:id="@+id/imageView_select_two"
                style="@style/ultraHyperBeautifulImageView"
                android:contentDescription="2nd Quiz choices"
                android:src="@drawable/kawa" />

            <ImageView
                style="@android:color/transparent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </FrameLayout>
    </TableRow>

    <TableRow>

        <FrameLayout style="@style/CellStyle" >

            <ImageView
                android:id="@+id/imageView_select_three"
                style="@style/ultraHyperBeautifulImageView"
                android:contentDescription="3rd Quiz choices"
                android:src="@drawable/umi" />

            <ImageView
                style="@android:color/transparent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </FrameLayout>

        <FrameLayout style="@style/CellStyle" >

            <ImageView
                android:id="@+id/imageView_select_four"
                style="@style/ultraHyperBeautifulImageView"
                android:contentDescription="4th Quiz choices"
                android:src="@drawable/yama" />

            <ImageView
                style="@android:color/transparent"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </FrameLayout>
    </TableRow>

</TableLayout>

（ちょっと今作業している内容そのままペタリしてるので恥ずかしい///）

すると以下のような感じにデザインされます。 http://www.flickr.com/photos/79508270@N03/7286426988/

(画像って直接参照できるんでしたっけ、帰ったら調べる)

#考察で、‘cropToPadding’についてですが、bool値をとります。

true : はみ出した部分は表示されなくなる
false : はみだした部分も表示されるように調整する

けれど、こいつが役立つのは’android:scaleType’が’centerCrop’の時くらいだと思います。試した限りでは、centerCropではない時にcropToPaddingの値をいじっても、そこまで変化なかった。うーむ、うまく説明できないですね、ちょっとガラッと例えを変えましょうか。

ImageViewという窓があります。 paddingで窓枠の大きさを変更できますが、まぁ窓枠なくたって家の壁があるんでどっちでもいいです。 scaleTypeで、窓にうつる風景がどのように伸縮引き伸ばしするか決まります。えっ実際の窓にそんな機能はない？そこは想像力を働かせるのです。

scaleTypeは以下の属性値を与えることができます。

fitXY : ImageViewの縦横の幅めいっぱいに拡大。アス比無視。
fitStart : ImageViewの幅高さに画像をアス比維持して拡縮。で、基本、左上に画像配置。
fitCenter : fitStartの中央寄せ。割とよく使う
fitEnd : fitStartの右下寄せ。
center : 中央に寄せるだけ。ほぼドットバイドットで描画？詳しく調べてない。でもImageViewより大きな画像だと、虫眼鏡で拡大したかのように映る。
centerInside : fitCenterとどう違うんだろ・・・。余白を
centerCrop : cropToPadingで挙動が変化します。上記をご覧ください。

だいたい上記のように挙動するのですが、僕達の要求に叶うような処理は先程示したとおりとなります。

そんなわけで、迷える子羊に幸あれ。

#余談おなかすいた。