眠るシーラカンスと水底のプログラマー

結論からいうと、思いっきり勘違いでしたが、過程で色々入門者の役に立ちそうなTipsがあったので残しておきます。

問題は、以下のXMLで透過PNGが意図通りに表示されない。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:minWidth="25px"
    android:minHeight="25px">
    <LinearLayout
        android:orientation="vertical"
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.7"
        android:id="@+id/linearLayout1">
        <ImageView
            android:src="@drawable/blackKey"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/blackKey" />
        <ImageView
            android:src="@drawable/whiteKey"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/whiteKey" />
    </LinearLayout>

以下の画像のようにしたいのだが・・・

こうなる・・・。

一番外側のXMLがLinearLayoutじゃなくてAbsoluteLayoutにするのが正解なんですが、そこに辿り着くまでにいろいろ試してみました。

仮説:ImageViewに黒色の背景色が塗られているのでは？

ImageViewに透過PNGを充てて、その下に塗りつぶしの色を設定する方法を知ることができましたｗ

        <ImageView
            android:src="@drawable/blackKey"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/blackKey"
            android:background="#ff0000" />

android:backgroundを指定すると以下のように塗り潰すことができます。

（いつか何かの役に立つといいな）

このせいでしばらく、上に重なっている方に黒い背景色がデフォルトでかかっているんじゃないかとしばらく疑いましたが、これは間違い。

不便だったこと

ストアアプリやWindows PhoneのXAMLならドキュメントアウトラインでコントロールの構成が確認できるのですが、Xamarin.Androidのデフォルトだと非表示になっています。ここで「Xamarin.Androidはドキュメントアウトラインないのかぁ、不便だなぁ」と無いと思いこんでしまいました・・・が、ちゃんとあります。

上部メニューバーの「表示」→「その他ウィンドウ」→「ドキュメントアウトライン」をクリックで表示されます。

ドキュメントアウトラインで確認すると一発なんですが、重ねているつもりのImageViewが上下にスタックされていたのが透過していないように見える原因でした。

積み重ねられている高さの設定がwrap_contentなので、最初のImageViewが拡張できる限界の高さで表示され、下になっていると思いこんでいたImageViewが高さ0になっていたという・・・（minHeightで最少幅を指定していれば、またヒントになったんですけどね・・・）。

とまぁ、わかってみれば何でもない凡ミスなんですが、何かの参考になれば幸いです。

Tweet