如何使用背景颜色设置圆形按钮并在按下时更改颜色

Posted 2023-05-09

【中文标题】如何使用背景颜色设置圆形按钮并在按下时更改颜色

【英文标题】：How to set rounded buttons with background color and change color on pressed

【发布时间】：2014-08-15 14:57:49

【问题描述】：

在我的 android 应用程序中有一个带有绿色背景的圆角矩形按钮。 我使用 .xml 文件完成了这项工作

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

<solid android:color="#B5D397" />

<corners
    android:bottomLeftRadius="10dp"
    android:bottomRightRadius="10dp"
    android:topLeftRadius="10dp"
    android:topRightRadius="10dp" />


</shape>

和

 android:background="@drawable/rounded_btn"

在布局文件中

但是当我按下按钮时没有显示任何效果（颜色没有变化）所以我使用了

@Override
        public void onClick(View v) 
            // TODO Auto-generated method stub
            Button view = (Button) v;
             view.getBackground().setColorFilter(0x77000000, PorterDuff.Mode.SRC_ATOP);

按下后按钮颜色变为深绿色。到这里一切正常，但问题是释放按钮后颜色仍然是深绿色。我希望它像按下之前一样。我提到了几个例子，说在 .xml 文件中使用 selector 即

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:color="#c0c0c0"
        android:state_selected="true"/>
    <item
        android:color="#ffffff"
        android:state_pressed="true"/>
    <item
        android:color="#9A9A9A"
        android:state_focused="false"
        android:state_pressed="false"
        android:state_selected="false"/>
</selector>

这还需要android:background="@drawable/btn_state" 但我已经用过android:background=@drawable/rounded_btn

那么如何同时发挥这两种效果

我也尝试过使用 OnTouchListener

button.setOnTouchListener(new OnTouchListener() 
@Override
public boolean onTouch(View v, MotionEvent event) 
 // show interest in events resulting from ACTION_DOWN
 if(event.getAction()==MotionEvent.ACTION_DOWN) return true;
 // don't handle event unless its ACTION_UP so "doSomething()" only runs once.
 if(event.getAction()!=MotionEvent.ACTION_UP) return false;
 doSomething();
  button.setPressed(true);                   
  return true;

);

但这会禁用我的 OnclickListener() 方法，我不想使用 OnTouchListener()

我知道这很愚蠢，但我是 android 新手 非常感谢

【参考方案1】：

制作两个不同形状的xml。一个用绿色，另一个用另一种颜色..

并在 selector.xml 中使用它们

 <item android:drawable="@drawable/rounded_btn_green" android:state_selected="true"/>

<item android:drawable="@drawable/rounded_btn_green" android:state_pressed="true"/>

<item android:drawable="@drawable/rounded_btn_green" android:state_focused="true"/>

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

【参考方案2】：

您必须为此创建 3 个 xml 文件...

Drawable Shapes 为 2，Drawable Selector 为 1

见下面的代码..

button_normal.xml

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:left="2dp" android:top="2dp">
        <shape>
            <corners android:radius="10dp" />
            <solid android:color="#22151515" />
        </shape>
    </item>

    <item android:bottom="3dp" android:right="3dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
            <corners android:radius="10dp" />
            <padding android:left="10dp"
                android:right="10dp"/>
            <stroke android: 
                android:color="@color/border_pink" />
        </shape>
    </item>

</layer-list>

button_selected.xml

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

    <item android:left="2dp" android:top="2dp">
        <shape>
            <corners android:radius="10dp" />
            <solid android:color="#22151515" />
        </shape>
    </item>

    <item android:bottom="3dp" android:right="3dp">
        <shape android:shape="rectangle">
            <solid android:color="#55fff000"/>
            <corners android:radius="10dp" />
            <padding android:left="10dp"
                android:right="10dp"/>
            <stroke android: 
                android:color="@color/border_pink" />
        </shape>
    </item>

</layer-list>

button_bg.xml

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

    <item 
        android:state_focused="true"
        android:drawable="@drawable/button_selected"/>

    <item
        android:state_pressed="true"
        android:drawable="@drawable/button_selected"/>

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

</selector>

最后……

android:background="@drawable/button_bg"

根据需要更改drawable shapes 的代码..

这可能对你有帮助

【讨论】：

感谢 prag，但这会使按钮变黑并且在加载布局时不会改变颜色

它的行为很奇怪。首先它完全是黑色的（我改变了所有颜色然后也改变了）然后在切换到下一个屏幕并返回后改变原始颜色，然后点击没有改变

不要改变所有的颜色...你实现这个代码是怎么回事..？？使用“#4F334E”而不是@color/border_pink 并尝试此代码...

【参考方案3】：

按照以下步骤-

像这样在你的主 xml 中定义 Button 视图-

<Button
android:id="@+id/search_bt"
android:layout_
android:layout_
android:background="@drawable/button_selector_green"
android:text="Search"
android:textColor="@drawable/button_text_color_green"
/>

像这样在你的drawable文件夹中创建button_selector_green xml文件-

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/rounded_corner_transparent" android:state_pressed="true"/>
<!-- pressed -->
<item android:drawable="@drawable/rounded_corner_green"/>
<!-- default -->
</selector>

像这样在你的drawable文件夹中创建button_text_color_green xml文件-

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
   android:color="#48b28a" /> <!-- pressed -->
<item android:state_focused="true"
   android:color="#FFFFFF" /> <!-- focused -->
<item android:color="#FFFFFF" /> <!-- default -->
</selector>

像这样在你的drawable文件夹中创建rounded_corner_transparent xml文件-

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

 <solid 
  android:color="@android:color/transparent" >
 </solid>

 <!-- view border color and width -->
 <stroke
   android:
   android:color="#2b8c68" ></stroke>

 <!-- If you want to add some padding -->
 <padding
   android:left="4dp"
   android:top="4dp"
   android:right="4dp"
   android:bottom="4dp"    >
 </padding>

 <!-- Here is the corner radius -->
 <corners android:radius="10dp"   >
 </corners>
 </shape>

像这样在你的drawable文件夹中创建rounded_corner_green xml文件-

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

<solid
android:color="#48b28a" >
</solid>

<!-- view border color and width -->
<stroke
android:
android:color="#2b8c68" >
</stroke>

<!-- If you want to add some padding -->
<padding
android:left="4dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp"    >
</padding>

<!-- Here is the corner radius -->
<corners
android:radius="10dp"   >
</corners>
</shape>

希望这对你有用。快乐编码:)

【参考方案4】：

Adding a click-effect on a custom button with padded corners

请参考我在上述链接中的回答。

我们可以通过在可绘制文件夹中仅添加一个文件并将其作为按钮的背景来实现。

希望这会对某人有所帮助。当担心性能问题时，可以使用我的解决方案并减少对象数。