时间戳

首页 > 解决方案 > 具有点击效果的 3d 按钮

android - 具有点击效果的 3d 按钮

问题描述

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

我使用显示未按下版本和按下版本的选择器设置了可点击文本视图的样式。问题是我不知道如何让文本以与背景相同的方式移动，即它应该看起来像一个被按下的物理键，所以当它被按下时文本会向下移动并在它被释放时返回. 这是我的代码。

我要设置样式的 TextView/button：

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

芯片视图选择器.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>

标签： androidbuttonclickeffect

解决方案

创建一个名为：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);
}}

有时，扩展按钮 - 可能会出错，不要害怕，继续前进。然后使用按钮：你的Packagename+上面的Class名，如下：

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

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

推荐阅读