具有点击效果的3d按钮

时间:2019-02-14 08:16:15

标签: android button click effect

我正在尝试创建一个具有3D效果的平面按钮,当您单击该按钮时会按下 flatbutton

我已经用可显示未按下版本和按下版本的选择器设置了可点击文本视图的样式。麻烦的是我不知道如何使文本看起来像背景一样移动,即看起来应该像是按下物理键一样,因此按下文本时会向下移动一点,释放文本时会返回。这是我的代码。

我要设置样式的TextView /按钮:

<TextView
    android:id="@+id/chip_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:paddingLeft="15dp"
    android:paddingRight="15dp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:ellipsize="end"
    android:singleLine="true"
    android:scrollHorizontally="false"
    android:textColor="@color/speedDialText"
    android:background="@drawable/chip_view_selector"
/>

chip_view_selector.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="false">
            <layer-list>
                <item android:drawable="@drawable/chip_view_shadow" android:top="4dp"/>
                <item android:drawable="@drawable/chip_view_btn_face" android:bottom="4dp"/>
            </layer-list>
        </item>

        <item android:state_pressed="true">
            <layer-list>
                <item android:drawable="@drawable/chip_view_shadow" android:top="4dp"/>
                <item android:drawable="@drawable/chip_view_btn_face" android:top="4dp" android:bottom="1dp" />
            </layer-list>
        </item>
    </selector>

chip_view_btn_face.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
    <!-- Button foreground -->
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <solid android:color="@color/speedDialButtonBackground" />
        <padding
            android:left="1dp"
            android:right="1dp"
            android:bottom="1dp"
            android:top="1dp" />
        <corners android:radius="6dp" />
    </shape>
    </item>
</selector>

chip_view_shadow.xml(不是阴影,而是使其具有3d外观的底层):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <!-- 3d effect part of button (not the button face) -->
        <shape>
            <solid android:color="#D3D3D3" />
            <corners android:radius="6dp" />
        </shape>
</item>
</selector>

1 个答案:

答案 0 :(得分:1)

创建一个名为:VariableGravityButton的类,如下所示:

public class VariableGravityButton extends Button {
public VariableGravityButton(Context context) {
    super(context);
}

public VariableGravityButton(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public VariableGravityButton(Context context, AttributeSet attrs,
        int defStyle) {
    super(context, attrs, defStyle);
}

@Override
public void setPressed(boolean pressed) {
    if (pressed != isPressed()) {
        setGravity(pressed ? Gravity.CENTER_HORIZONTAL |
                Gravity.BOTTOM : Gravity.CENTER);
    }
    super.setPressed(pressed);
}}

有时,请扩展Buttons-可能会出错,不要害怕,请继续前进。然后使用按钮:您的软件包名称+上面的类名称,如下所示:

<android.learning.learning.VariableGravityButton
android:id="@+id/chip_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:textColor="@color/speedDialText"
android:background="@drawable/chip_view_selector"/>

按下此按钮文本将跳到底部。