Android点击ImageButton时如何突出显示图片按钮

Question

我正在使用一个 ImageButton。但是当被点击时，它没有高亮显示。我通过谷歌搜索发现许多人建议使用选择器（Selector），在其中显示另一张图片。是否有其他方法，只使用一张图片并突出显示或产生光晕效果，以便用户知道按钮已被单击。

- Droidme

---

你能展示一下你用来创建图像按钮的代码吗？ - Cristian

Answer 1

其实做这件事不是很难。你甚至不需要创建2个不同的.png文件之类的东西。例如，如果你想要一个有渐变效果的按钮，并且在按下按钮时更改它：

步骤1： 创建默认的按钮渐变（drawable/default_button.xml）：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
    <corners android:radius="3dp" />
    <gradient android:endColor="#8ba0bb" android:startColor="#43708f" android:angle="90" />
    <stroke android:width="1dp" android:color="#33364252" />
</shape>

步骤2：创建默认按钮按下的渐变效果（drawable/default_button_pressed.xml）：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
    <corners android:radius="3dp" />
    <gradient android:endColor="#43708f" android:startColor="#8ba0bb" android:angle="90" />
    <stroke android:width="1dp" android:color="#33364252" />
</shape>

步骤3：创建选择器（drawable/default_button_selector.xml）：

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" android:drawable="@drawable/default_button_pressed" /> 
    <item android:drawable="@drawable/default_button" /> 
</selector>

第四步 (可选)：为按钮创建样式（values/style.xml）：

<resources>
    <style name="DefaultButton">
        <item name="android:layout_width">wrap_content</item>   
        <item name="android:layout_height">wrap_content</item>
        <item name="android:background">@drawable/default_button_selector</item>
    </style>
</resources>

步骤五：使用按钮（layout/main.xml）：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="fill_parent" android:layout_height="fill_parent">

    <button style="@style/DefaultButton" />

</RelativeLayout>

就像您所看到的，这并不特别困难。

- Zack Marrapese

---

哈哈，@Zack，正如你所看到的，这并不是特别困难的事情。 - Will Tate

这很好，因为您可以使用相同的样式轻松添加多个按钮。 - Matthew

如果我们需要不同背景图片的按钮，怎么办？ - Kishore

Answer 2

使用setOnTouchListener而不是setOnClickListener，无需创建多个图像（按下、正常等），甚至不必创建选择器。以下代码将在单击项目时给您灰色叠加层。

 ((ImageButton)findViewById(R.id.myImageBtn)).setOnTouchListener(new OnTouchListener() {

      @Override
        public boolean onTouch(View v, MotionEvent event) {
          switch (event.getAction()) {
          case MotionEvent.ACTION_DOWN: {
              ImageButton view = (ImageButton ) v;
              view.getBackground().setColorFilter(0x77000000, PorterDuff.Mode.SRC_ATOP);
              v.invalidate();
              break;
          }
          case MotionEvent.ACTION_UP:

              // Your action here on button click

          case MotionEvent.ACTION_CANCEL: {
              ImageButton view = (ImageButton) v;
              view.getBackground().clearColorFilter();
              view.invalidate();
              break;
          }
          }
          return true;
        }
    });

- Vinayak Bevinakatti

---

这对我有用。确保在 ACTION_UP 上清除颜色过滤器。 - Adam Johns

我的ADT不知道什么是'PorterDuff'，所以在代码提示中加上后缀'android.graphics'（android.graphics.PorterDuff.Mode.SRC_ATOP）。 - 1owk3y

帮了我很多，谢谢！ - Idan Magled

@AdamJohns，在ACTION_UP的情况下，没有break;，所以它会清除它 :) - dragi

这会生成一个a11y警告。 - Leonardo Rick

Answer 3

您可以简单地使用 android:foreground 属性为您的 View 实现可点击效果：

android:foreground="?android:attr/selectableItemBackground"

如果要与暗色主题一起使用，请将 theme 添加到您的layout中（以使可点击效果更加清晰）：

android:theme="@android:style/ThemeOverlay.Material.Dark"

- Francis

---

适用于API级别> 23 - dipakbari4

Answer 4

为了不必为每个按钮设置多个drawable，我在触摸监听器中设置了图像按钮的颜色过滤器属性。

请查看这篇帖子中的代码： https://dev59.com/Jm855IYBdhLWcg3wz33o#14278790

- L. G.

Answer 5

我成功完成了这个任务！首先在drawable文件夹中声明buttonStyle.xml。

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

  <item
      android:state_focused="false"
      android:state_pressed="true"
      android:drawable="@drawable/button_pressed" />

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

然后在 drawable 文件夹中创建 button_pressed.xml 文件。

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
  <solid android:color="@color/semiTransparentGnfrBlueColor" />
  <stroke android:width="10dp" android:color="@android:color/transparent" />
</shape>

在此之后，您需要在drawable文件夹中创建button_normal.xml文件。

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:innerRadiusRatio="3"
  android:shape="rectangle">
  <solid android:color="@color/gnfrBlueColor"/>
  <stroke android:width="10dp" android:color="@android:color/transparent" />
</shape>

您可以使用默认颜色，但如果想像我一样自定义，需要在values文件夹中拥有一个名为colors.xml的文件，并在其中添加以下内容：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<item name="gnfrBlueColor" type="color">#2A3748</item>
  <item name="semiTransparentGnfrBlueColor" type="color">#602A3748</item>
<integer-array name="androidcolors">
<item>@color/gnfrBlueColor</item>
    <item>@color/semiTransparentGnfrBlueColor</item>
  </integer-array>
</resources>

最后，将此设置为您的按钮或其他控件：

savedAccountLoginButton.SetBackgroundResource(Resource.Drawable.buttonStyle);

注意：我设置了一个透明的颜色描边，因为当你设置背景资源时，按钮会变得更大，这个技巧可以保持原始大小。

这是我能以编程方式实现此目标的唯一方式。

如果您想通过XML完成此操作：

<Button
            android:text="ENTRAR"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@drawable/buttonstyle"
            android:textColor="@color/white"
            android:textSize="18sp"
            android:id="@+id/button1" />

- Dayo