web-dev-qa-db-ja.com

selectableItemBackgroundを背景にしたシェイプドローアブル

楕円形の境界線が必要なボタンがいくつかあります。

だから私はcapsule_border.xmlにこれを持っています

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <corners Android:radius="9999dp"/>
    <stroke
        Android:width="1px"
        Android:color="@color/border_gray" />
</shape>

そして、必要な場所でAndroid:background="@drawable/capsule_border.xmlを使用します。

ここで、この楕円形の境界線を持つボタンと、視覚的なフィードバック用のAndroid:background="?selectableItemBackground"が必要です。

SelectableItembackgroundで親レイアウトを使用し、capsule_borderでボタンを使用しようとしました。しかし、強調表示されるクリック可能な領域は正方形全体のようです。カプセルの境界内の領域だけではなく。

enter image description here

SelectableItemBackgroundがビューの長方形全体ではなく、描画した境界内でのみ表示されるようにする方法はありますか？

androidandroid-layoutandroid-viewandroid-drawableandroid-selector
18
Zhen Liu

round_corners.xmlを持つ：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
       Android:shape="rectangle">
    <solid Android:color="@Android:color/transparent"/>
    <corners Android:radius="15dp" />
    <stroke
        Android:width="1px"
        Android:color="#000000" />
</shape>

そしてmy_ripple.xml：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:color="?android:attr/colorControlHighlight">
    <item Android:id="@Android:id/mask">
        <shape Android:shape="rectangle">
            <solid Android:color="#000000" />
            <corners Android:radius="15dp" />
        </shape>
    </item>
    <item Android:drawable="@drawable/round_corners" />
</ripple>

そしてボタン：

<Button
    Android:background="@drawable/my_ripple"
    ... />

結果は次のようになります。

enter image description here

this の記事を参照してください。

23
azizbekian

私は最初の答えのより単純なバージョンを持っています：

<ripple
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="?colorControlHighlight"> <!-- default ripple color -->

    <item>
        <!-- the background shape when it's not being clicked -->
        <shape Android:shape="rectangle">
            <solid Android:color="@color/colorPrimary" />
            <corners Android:radius="32dp" />
        </shape>
    </item>
</ripple>

背景として適用するだけですが、Buttonに適用する場合は、影を削除することを忘れないでください。

style="?borderlessButtonStyle"

幸運を！

enter image description here

0
Sam Chen

これが2020年のより簡単な解決策です（?attr構文を使用しているためAPI> = 21）：

<ripple
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="?colorControlHighlight">
    <!-- ???? the ripple's color (1) -->

    <!-- ???? no `id` so our <shape> will be drawn and not just used as mask -->
    <item>
        <shape>
            <corners Android:radius="9dp" />
            <solid Android:color="@color/white" />
        </shape>
    </item>

</ripple>

(1)テーマでcolorControlHighlightをオーバーライドしない場合、波紋の色はAndroidのデフォルトになります。 doオーバーライドしても、Androidのデフォルトを使用したい場合は、代わりに?android:colorControlHighlightを使用してください

0
flawyte