具有点击效果的3d按钮

Question

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

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

我要设置样式的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>

Answer 1

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);
}}

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

<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"/>

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