1

ボックスにいくつかの装飾を追加するカスタムbox_background.xmlドローアブルがあります (例: RelativeLayout):

  • 小さな境界線 (2 dp)
  • 影 (8 dp)、左と下

押すと、ビューが少し変わります。

  • 影が小さい（たとえば、4 dp）
  • ボックスの内容が左下にわずかに移動します (つまり、「影に向かって」)。
  • (2dp 境界は同じままですが、もちろん、移動したコンテンツを適切にラップする必要があります。)

単独で、box_background_normal意図したとおりに動作します (box_background_state_pressedセレクターからコメント アウトされている場合)。理解できないこと:box_background_state_pressedパディング付きのアイテムが含まれている場合 (以下の XML を参照)、そのパディングは、ボックスが押されていなくてもボックスに影響します。

たぶん<padding>、この種の「押された状態」機能を実現するために使用することはできません...?

私の具体的な質問:

  • パディングが押されていないbox_background_state_pressedときにビューに影響を与えるのはなぜですか?
  • 上記で説明したような「押された状態」の効果をどのように達成できますか?


例 1:がまったく使用されていない場合の押されていない状態box_background_state_pressed(セレクターからコメント アウト): 境界線、影、およびコンテンツは問題ありません。


例 2:使用中は押されていない状態box_background_state_pressed。これは壊れています; box_background_state_pressedボックスが押されていなくても、大きなパディングはコンテンツに影響します。

Android API レベル 18。テスト デバイス: Nexus 7 (2013)。

box_background.xml:

<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/box_background_state_pressed" />
    <item android:drawable="@drawable/box_background_normal" />
</selector>

box_background_normal.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:top="8dp" android:right="8dp">
        <shape android:shape="rectangle">
            <solid android:color="#33000000" />
        </shape>
    </item>

    <item android:bottom="8dp" android:left="8dp">
        <shape android:shape="rectangle">    
            <stroke android:width="2dp" android:color="#FF22BB00" />    
            <padding
                android:left="10dp"
                android:bottom="10dp"
                android:right="2dp"
                android:top="2dp"
                />
        </shape>
    </item>

</layer-list>

box_background_state_pressed.xml（おそらく3層未満でこれを行うことができます;私は実験中です）：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:top="4dp" android:right="4dp">
        <shape android:shape="rectangle">
            <solid android:color="#33000000" />
        </shape>
    </item>

    <item android:bottom="4dp" android:left="4dp">
        <shape android:shape="rectangle">
            <stroke android:width="2dp" android:color="#FFFF6677" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#00FFFFFF" />
            <padding
                android:left="2dp"
                android:bottom="2dp"
                android:right="10dp"
                android:top="10dp"
                />
        </shape>
    </item>

</layer-list>

(緑とピンクの境界線はデバッグ上の理由によるものです。通常は黒です。)

4

1 に答える 1