7

こんにちは、私は少し混乱していて、誰かが私を正しい方向に向けることができるかどうか疑問に思っています.

Lollipop と pre-lollipop で Google Play ストアにアクセスして使用する

ロリポップでは、選択可能なビューが波及効果を持っていることがわかります。

プレロリポでは、このハイライト効果が得られます。

これはどのように行われますか？

現在、私のアプリには、このセレクターを含む drawable-v21 ディレクトリがあります

それは基本的に私の背景の上に波紋を作ります

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask" android:drawable="@android:color/white"/>
    <item android:drawable="@color/colorAccentWith92PercentOpacity"/>
</ripple>

ただし、他の回答では使用するように言われています

android:background="?attr/selectableItemBackground"

ロリポップ前のハイライト効果を得るために、これは私の背景を上書きします。現在の背景の上にこれを設定するにはどうすればよいですか?

また、アプリのすべての種類のボタンに対して、(drawble-v21 で) リップル ドローアブルを作成する必要がありますか? リサイクラー ビュー アイテムに対してこれを行うにはどうすればよいですか?

この質問がユニークな理由

私はロリポップ前のリップルを望んでいません。開発者がロリポップでボタンを効率的にリップルさせ、プリでハイライト効果を出す方法を尋ねています。

4

2 に答える 2

6

オプション1

テーマで定義colorControlHighlightし、デフォルトの appcompat-v7 ボタンを使用している限り、ハイライトの色はそのまま使用できます。

オプション 2

これは、外部ライブラリを使用せずに、マテリアル ボタン スタイルを少しクロスフェード アニメーションとシャドウでバックポートした方法の例です。道中お役に立てますように。

ボタンが暗い背景に白いテキスト ( @color/control_normal) で、明るいハイライトが表示される場合:

値/themes.xml

ここでは、テーマ全体のデフォルトのボタン スタイルをオーバーライドします。

<style name="AppTheme" parent="Base.AppTheme">
    <item name="buttonStyle">@style/Widget.AppTheme.Button</item>
</style>

値/整数.xml

<!-- Some numbers pulled from material design. -->
<integer name="button_pressed_animation_duration">100</integer>
<integer name="button_pressed_animation_delay">100</integer>

値-v21/styles.xml

テーマ オーバーレイを理解し、デフォルトでリップルを使用する Lollipop のボタン スタイル。適切なペイントで波紋に色を付けましょう。

<style name="Widget.AppTheme.Button" parent="Widget.AppCompat.Button">
    <!-- On Lollipop you can define theme via style. -->
    <item name="android:theme">@style/ThemeOverlay.AppTheme.Button</item>
</style>

<style name="ThemeOverlay.AppTheme.Button" parent="ThemeOverlay.AppCompat.Dark">
    <!-- The magic is done here. -->
    <item name="colorButtonNormal">@color/control_normal</item>
</style>

値/styles.xml

Lollipop の前はややこしいです。

<style name="Widget.AppTheme.Button" parent="Widget.AppCompat.Button">
    <item name="android:background">@drawable/button_normal_background</item>
</style>

drawable/button_normal_background.xml

これは、ボタン全体の複合ドローアブルです。

<inset
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="@dimen/abc_button_inset_horizontal_material"
    android:insetTop="@dimen/abc_button_inset_vertical_material"
    android:insetRight="@dimen/abc_button_inset_horizontal_material"
    android:insetBottom="@dimen/abc_button_inset_vertical_material">
    <layer-list>
        <!-- Shadow. -->
        <item
            android:drawable="@drawable/button_shadow"
            android:top="-0dp"
            android:bottom="-1dp"
            android:left="-0dp"
            android:right="-0dp"/>
        <item
            android:drawable="@drawable/button_shadow_pressable"
            android:top="-0dp"
            android:bottom="-3dp"
            android:left="-1dp"
            android:right="-1dp"/>
        <!-- Background. -->
        <item android:drawable="@drawable/button_shape_normal"/>
        <!-- Highlight. -->
        <item>
            <selector
                android:enterFadeDuration="@integer/button_pressed_animation_duration"
                android:exitFadeDuration="@integer/button_pressed_animation_duration">

                <item
                    android:drawable="@drawable/button_shape_highlight"
                    android:state_focused="true"
                    android:state_enabled="true"/>
                <item
                    android:drawable="@drawable/button_shape_highlight"
                    android:state_pressed="true"
                    android:state_enabled="true"/>
                <item
                    android:drawable="@drawable/button_shape_highlight"
                    android:state_selected="true"
                    android:state_enabled="true"/>
                <item android:drawable="@android:color/transparent"/>
            </selector>
        </item>
        <!-- Inner padding. -->
        <item android:drawable="@drawable/button_padding"/>
    </layer-list>
</inset>

drawable/button_shadow.xml

押されていないときの影です。

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomLeftRadius="3dp"
        android:bottomRightRadius="3dp"
        android:topLeftRadius="2dp"
        android:topRightRadius="2dp"/>
  <solid android:color="#2000"/>
</shape>

drawable/button_shadow_pressable.xml

押された状態で伸びた影です。近くで見ると結果の効果は粗雑に見えますが、遠くから見ると十分です。

<selector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="UnusedAttribute"
    android:enterFadeDuration="@integer/button_pressed_animation_duration"
    android:exitFadeDuration="@integer/button_pressed_animation_duration">
    <item
        android:state_pressed="true"
        android:state_enabled="true">
        <shape
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <corners
                android:bottomLeftRadius="5dp"
                android:bottomRightRadius="5dp"
                android:topLeftRadius="3dp"
                android:topRightRadius="3dp"/>
            <solid android:color="#20000000"/>
        </shape>
    </item>
    <item android:drawable="@android:color/transparent"/>
</selector>

drawable/button_shape_normal.xml

これがメインのボタン形状です。

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="@dimen/abc_control_corner_material"/>
    <solid android:color="@color/control_normal"/>
</shape>

drawable/button_padding.xml

マテリアルボタンと完全に一致するように追加のパディング。

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/transparent"/>
    <padding
        android:left="@dimen/abc_button_padding_horizontal_material"
        android:top="@dimen/abc_button_padding_vertical_material"
        android:right="@dimen/abc_button_padding_horizontal_material"
        android:bottom="@dimen/abc_button_padding_vertical_material"/>
</shape>

drawable/button_shape_highlight.xml

これは、通常のボタンの形状の上に描画されたハイライト ボタンの形状です。

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="@dimen/abc_control_corner_material"/>
    <solid android:color="@color/control_highlight"/>
</shape>

@color/control_highlightを指すことができます

  • @color/ripple_material_dark- 半透明の白、暗い背景で使用
  • @color/ripple_material_light- 半透明の黒、明るい背景に使用
  • あなたが定義する他の色。
于 2015-09-15T14:07:41.110 に答える
6

次の方法で、ビューの背景を設定できます。

android:background="@drawable/touch_selector"

ロリポップ前のリップルなしのバージョンを作成します: drawable/touch_selector.xml

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <!-- State when a row is being pressed, but hasn't yet been activated (finger down) -->
    <item android:state_pressed="true"
        android:drawable="@color/grey"
        />

    <!-- For ListView in SINGLE_CHOICE_MODE, it flags the active row -->
    <item android:state_activated="true"
          android:drawable="@color/light_green" />

    <!-- Default, "just hangin' out" state. -->
    <item android:drawable="@android:color/transparent" />
</selector>

ロリポップ以上でも同じことを行いますが、波及効果があります:
crete drawable-v21/touch_selector.xml

次のようになります。

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

    <!-- State when a row is being pressed, but hasn't yet been activated (finger down) -->
    <item android:state_pressed="true">
        <ripple android:color="@color/grey" />
    </item>

    <!-- For ListView, when the view is "activated".  In SINGLE_CHOICE_MODE, it flags the active row -->
    <item android:state_activated="true"
          android:drawable="@color/light_green" />

    <!-- Default, "just hangin' out" state. -->
    <item android:drawable="@android:color/transparent" />
</selector>

それでおしまい。
これで、ロリポップ以上のデバイスで波及効果が得られ、ロリポップ前でハイライトされます。

編集:
ListView で使用する場合 - 上で作成したものを ListView アイテムの背景として使用する

于 2016-04-05T12:48:10.833 に答える