Android中Button Selector未应用形状

Question

Android中Button Selector未应用形状

3

XML中定义的形状半径未应用于按钮的聚焦和按下状态。

我有以下instagram_button_style.xml：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/instagram_button_shape" android:state_focused="true" android:textColor="@color/colorAccent" />
    <item android:drawable="@drawable/instagram_button_shape" android:state_pressed="true" android:textColor="@color/colorAccent" />
    <item android:drawable="@color/colorButton" />

</selector>

我的 instagram_button_shape.xml 文件如下：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <corners android:radius="30dp" />
            <solid android:color="@color/colorButton" />
        </shape>
    </item>

    <item android:drawable="@drawable/instagram_gradient" >
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <corners android:radius="30dp" />

        </shape>
    </item>

</layer-list>

其中instagram_gradient是一张jpg图片

我将其用于按钮中，如下所示：

android:background="@drawable/instagram_button_style"

我的初始按钮状态：

我的按下按钮状态

期望：我希望按下状态有椭圆形按钮，但是半径并没有被应用。

最终更新：

最后，在进行了大量的调研之后，我改变了我的.jpg渐变文件为android_gradient形状文件。

- Kushal Bhalaik

你的@drawable/instagram_gradient图层在实色图层之上，实色图层具有圆角，但自身没有设置圆角。 - Cruceo

@Cruceo：我在问题中更新了我的shape.xml，现在我可以看到初始形状为椭圆形，但仍然无法看到按下状态的椭圆形状。 - Kushal Bhalaik

只需将您的按钮放入CardView中，并应用cardCornerRadius为30dp即可。 - Rahul Khurana

@RahulKhurana：难道没有更简单的方式吗？可以采用传统的方法。 - Kushal Bhalaik

@kushal.8 我一个都不认识。根据你的要求，这是我能想到的最简单的方法。 - Rahul Khurana

显示剩余2条评论

5个回答

2

尝试更改instagram_button_shape.xml来解决问题。

最初的回答

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="30dp" />
            <solid android:color="@color/colorButton" />
        </shape>
    </item>

    <item
        android:bottom="30dp"
        android:drawable="@drawable/instagram_gradient"
        android:left="30dp"
        android:right="30dp"
        android:top="30dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorButton" />
            <corners android:radius="30dp" />
        </shape>
    </item>

</layer-list>

- Priyanka

我会尝试并让您知道，谢谢！ - Kushal Bhalaik

2

“<layer-list>” 中有项，您定义了此项不正确：”

<item android:drawable="@drawable/instagram_gradient">
    <shape android:shape="rectangle">
        <corners android:radius="30dp" />
    </shape>
</item>

实际上，android:drawable定义了用于渲染图层的Drawable。嵌套的形状被忽略了。

您有三个选项可以实现您的目标：

使用带有渐变的形状，并删除android:drawable="@drawable/instagram_gradient"
使用带有透明度和圆角的PNG文件作为@drawable/instagram_gradient
当然，还可以实现自定义的Drawable

- rds

0

最简单的方法是使用CardView包装您的按钮。它有一个名为CornerRadius的属性。这样，您就可以将按钮变成自定义圆角形状。

- Rahul Khurana

-1

尝试这个更新的版本，

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/instagram_button_shape" 
    android:state_selected="true" />
<item android:drawable="@drawable/instagram_button_shape"  />
<item android:drawable="@color/colorButton" />

 </selector>

现在，当您点击此按钮时

buttonId.setSelected(true);

- Mayur Dabhi

谢谢“天才” ;) - Kushal Bhalaik

天才，它不起作用！ - Kushal Bhalaik

请删除以下代码：<item android:drawable="@color/colorButton" />。以上代码已经生效！ - Mayur Dabhi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AskNilesh · Accepted Answer

您需要在@drawable/instagram_gradient中设置android:radius="30dp"。

尝试以下方法。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/tvKioskMode"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:background="@drawable/instagram_button_style"
        android:padding="10dp"
        android:text="OPEN IN"
        android:textColor="@android:color/white"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

drawable/instagram_button_style

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/instagram_button_shape" android:state_selected="true" android:textColor="@color/colorAccent" />
    <item android:drawable="@drawable/instagram_button_shape" android:state_pressed="true" android:textColor="@color/colorAccent" />
    <item android:drawable="@drawable/normal_button" />
</selector>

最初的回答： @drawable/instagram_button_shape 是一个在Android应用程序中使用的可绘制图形资源。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <corners android:radius="30dp" />
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>

    <item android:drawable="@drawable/instagram_gradient" >
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <corners android:radius="30dp" />

        </shape>
    </item>

</layer-list>

@drawable/normal_button

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="30dp" />
    <solid android:color="@color/colorAccent" />
</shape>

最初的回答：

@drawable/instagram_gradient

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

    <gradient
        android:angle="90"
        android:centerColor="#00E5FF"
        android:endColor="#FF1744"
        android:startColor="#3D5AFE"
        android:type="linear" />

    <corners
        android:radius="30dp"/>

</shape>

输出

更新

@drawable/instagram_button_style

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/instagram_button_shape" android:state_selected="true" android:textColor="@color/colorAccent" />
    <item android:drawable="@drawable/instagram_button_shape" android:state_pressed="true" android:textColor="@color/colorAccent" />
    <item android:drawable="@drawable/normal_button" />
</selector>

@drawable/instagram_button_shape

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

    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <corners android:radius="30dp" />
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>

    <item android:drawable="@drawable/my_gradient"/>

</layer-list>

@drawable/my_gradient

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <corners android:radius="30dp" />

        </shape>
    </item>


    <!--add here your instagram image-->
    <item
        android:drawable="@drawable/insta_gradient_image"
        android:bottom="30dp"
        android:left="30dp"
        android:right="30dp"
        android:top="30dp"/>

</layer-list>

"最初的回答"：@drawable/normal_button 是指普通按钮的图片资源。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="30dp" />
    <solid android:color="@color/colorAccent" />
</shape>