如何从 Xamarin Forms for Android 中的按钮视图中删除额外的填充? [英] How to remove extra padding from button views in Xamarin Forms for Android?

问题描述

Xamarin Forms 上的按钮视图在部署到 Android 时似乎应用了额外的填充.我在我的 Android 项目下设置了 Resources/values/styles.xml，默认情况下所有间距、填充和边距都为 0，但仍然应用了额外的填充:

The button views on Xamarin Forms seem to get extra padding applied when deployed to Android. I have set Resources/values/styles.xml under my Android project to have all spacing, padding, and margins be 0 by default, yet there is still extra padding being applied:

<item name="android:radius">0.0px</item>
<item name="android:shadowRadius">0.0</item>
<item name="android:spacing">0.0px</item>
<item name="android:padding">0.0px</item>
<item name="android:layout_margin">0.0px</item>

请看下面的比较以了解我在说什么(左侧为 iOS，右侧为 Android).请注意视图在 iOS 中是如何彼此齐平的(它们应该如此)，而在 Android 中存在不需要的额外间隙.显示由绝对和堆栈布局、多个按钮和一个标签(长标签)的组合组成.不用担心 iOS 示例中的东西没有被调整大小和完美排列；这是故意的.iOS 显示正是我希望它们看起来的样子.

Please look at the following comparison to see what I'm talking about (iOS on the left, Android on the right). Notice how views are flush with one another in iOS (as they should be), while there are unwanted extra gaps in Android. The displays consist of a combination of Absolute and Stack layouts, several buttons, and one label (the long one). Don't worry about things not being sized and lined up perfectly in the iOS example; it was intentional. The iOS display is exactly how I want them both to look.

理想情况下，我想要一个 Android 风格或一个简单的通用代码片段，我可以用它来摆脱 Android 的自以为是的间距.两种设备上的视图都以编程方式设置了相同的边距、间距和填充，因此这不应该是问题的根源.

Ideally, I'd like an Android style or a simple one-size-fits-all code snippet that I can use to get rid of Android's opinionated spacing. Margins, spacing, and padding are being set programmatically on the Views identically on both devices, so that shouldn't be the source of the problem.

请注意，我将 C# 与 Xamarin Forms 一起使用，而不是 XAML.因此，请提供适用于两者的答案，或者至少适用于 Xamarin Forms 的纯编程实现.

这是另一个示例(左侧为 iOS，右侧为 Android).最外面的布局是一个网格，包含六个非布局视图(两个按钮、两个标签和两个条目)以及底部的堆栈布局(再次包含一个按钮、一个标签和一个条目).您可以从颜色的差异中看出，除了按钮之外，所有东西都正确排列.对齐仅设置视图边距；默认间距和内边距都归零(来自 Android 风格，见上文).

Here is another example (iOS on left, Android on right). The outer-most layout is a grid, containing six non-layout views (two buttons, two labels, and two entries) as well as a stack layout at the bottom (which again contains one button, one label, and one entry). You can see from the difference of coloring that everything lines up correctly, except for buttons. The alignment is only being set with view margins; default spacing and padding are all zeroed out (from the Android style, see above).

推荐答案

试试这个:

在你的 Android 项目中打开你的 Styles.xml

In your Android Project open your Styles.xml

在 MyTheme.Base 样式中(我假设基于默认的 Xamarin.Forms 模板这样调用)添加以下行:

Inside the MyTheme.Base style (I am assuming is called like this based on the default Xamarin.Forms template) add the following line:

<item name="android:buttonStyle">@style/MyButton</item>

创建一个名为 MyButton

<style name="MyButton" parent="android:Widget.Material.Button">
  <item name="android:layout_margin">0dip</item>
  <item name="android:background">@drawable/button_ripple</item>
 </style>   

在 Drawable 文件夹中添加一个名为 button_ripple.xml 的新 XML 文件并粘贴以下代码:

In the Drawable folder add a new XML file called button_ripple.xml and paste the following code:

<?xml version="1.0" encoding="utf-8"?>
<!-- in drawable folder-->
<ripple
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">

    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="?android:colorAccent" />
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#ff0000" />
        </shape>
    </item>
</ripple>

这个文件是必要的，因为当 Android 中按钮的背景改变时，涟漪效果(点击它时的效果)会丢失.

This file is necessary because when the background of a button in Android is changed the ripple effect (the effect when tapping on it) is lost.

如果您不关心效果，请返回样式文件，MyButton 样式可以是这样的:

If you don't care about the effect go back to the style file and the MyButton style can be just something like this:

<style name="MyButton" parent="android:Widget.Material.Button">
  <item name="android:layout_margin">0dip</item>
  <item name="android:background">#ff0000</item>
 </style>

这可能会在没有 CustomRenderers 的情况下对您有所帮助.-

This might help you without CustomRenderers.-

这篇关于如何从 Xamarin Forms for Android 中的按钮视图中删除额外的填充?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！