设置背景时按钮会变大 - 如何使其变小

时间:2018-02-23 06:29:18

标签: android xamarin button xamarin.android

我希望在设置背景之前使我的按钮缩小或恢复正常。

我知道使用背景色调将使用相同的背景颜色,但我的问题是我在背景上使用选择器。当选择器设置为按钮背景时,它变得更宽。当我将背景切换到backgroundtint时,颜色变得不同(例如,对我来说是紫色的)并且它在按下时不会改变颜色。填充不能通过设置负值或正值来解决问题。我还可以做些什么 ?我的目标是点击时我的按钮会改变颜色,但它的高度是窄的/默认大小,就像换行内容一样。

以下是按钮的示例代码

<Button
    android:text="Add"
    android:fontFamily="@string/fontFamily"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:id="@+id/btnInformantsAdd"
    android:gravity="center"
    android:textColor="@color/white"
    android:textSize="@dimen/textSizeCommon"
    android:background="@drawable/ButtonSelectorBlue"
    android:paddingTop="-10dp"
    android:paddingBottom="-10dp"
    android:layout_gravity="center"
    android:layout_marginTop="@dimen/marginTop1"
    android:layout_marginBottom="@dimen/marginTop1" />

选择器XML代码

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <layer-list>
      <item>
        <shape android:shape="rectangle">
          <solid android:color="@color/bluegreendark_light" />
          <padding android:left="10dp"
             android:top="@dimen/paddingSide1"
             android:right="10dp"
             android:bottom="@dimen/paddingSide1"/>
          <corners android:radius="5dp" />
        </shape>
      </item>
    </layer-list>
  </item>

  <item android:state_pressed="false">
    <layer-list>
      <item>
        <shape android:shape="rectangle">
          <solid android:color="@color/bluegreendark"/>
          <padding android:left="0dp"
             android:top="0dp"
             android:right="0dp"
             android:bottom="0dp"/>
          <corners android:radius="5dp" />
        </shape>
      </item>
    </layer-list>
  </item>
</selector>

1 个答案:

答案 0 :(得分:3)

  

设置背景时按钮会变大

按钮不会变大。

这是按钮的默认背景,您可以看到它周围是透明色。

enter image description here

但是当您将按钮的背景更改为ButtonSelectorBlue文件时,没有透明色,因此它会让您认为它变得更大。

您可以看到以下代码:

<Button
    android:text="Add"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:id="@+id/btnInformantsAdd"
    android:gravity="center"
    android:textColor="#e7dbdb"
    android:textSize="20dp"
    android:background="@drawable/button_selector_blue"
    android:paddingTop="-10dp"
    android:paddingBottom="-10dp"
    android:layout_gravity="center"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp" />

<Button
    android:text="Add"
    android:id="@+id/bt"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:gravity="center"
    android:textColor="#282828"
    android:textSize="20dp"
    android:onClick="OnClick"
    android:layout_gravity="center" />

两个按钮,第一个背景是你的ButtonSelectorBlue文件,第二个是默认的,看到这张图片:

enter image description here

它们的大小相同。

因此,您需要在选择器文件的外围添加透明色,如下所示:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <layer-list>
      <item>
        <shape android:shape="rectangle">
          <solid android:color="@color/bluegreendark_light" />
          <stroke android:color="#00000000"
                  android:width="10dp"/>
          <padding android:left="10dp"
             android:top="@dimen/paddingSide1"
             android:right="10dp"
             android:bottom="@dimen/paddingSide1"/>
          <corners android:radius="5dp" />
        </shape>
      </item>
    </layer-list>
  </item>

  <item android:state_pressed="false">
    <layer-list>
      <item>
        <shape android:shape="rectangle">
          <solid android:color="@color/bluegreendark"/>
          <stroke android:color="#00000000"
                  android:width="10dp"/>
          <padding android:left="0dp"
             android:top="0dp"
             android:right="0dp"
             android:bottom="0dp"/>
          <corners android:radius="5dp" />
        </shape>
      </item>
    </layer-list>
  </item>
</selector>

最后,预览:

enter image description here

结果:

enter image description here