如何在axml中仅为平板电脑设置按钮的高度?



如何在axml中仅为平板电脑设置按钮的高度?

<Button     android:id="@+id/logout_button"
android:background="@drawable/bordered_button"
android:textColor="@color/primary"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="10"
android:textSize="18sp"
android:layout_marginLeft="0.0dp"
android:layout_marginTop="0.0dp" />

由于您似乎正在使用本机Xamarin.Android,因此我建议完成这项工作的最佳方法是检查本机Android文档是否支持屏幕尺寸。

当您这样做时,您将根据您的用例提供多种解决方案:

  • 使用约束布局
  • 创建替代布局

如果您有任何疑问,请随时回复我。

你应该使用 XAML 元素OnIdiom

<Button>
<Button.Height>
<OnIdiom x:TypeArguments="x:Double" Tablet="[tablet height e.g. 30]" />
</Button.Height>
</Button>

OnIdiom将允许您为不同的习语设置不同的值。您只需要为要设置的属性创建一个新元素(此处为<Button>元素的Height属性(。由于Height属性的类型为double,因此需要为TypeArguments设置x:Double

使用 Device.Idiom

您可能听说过 Xamarin.Forms.Device 类,该类为您提供的信息可帮助您基于每个平台自定义布局和功能。它为您提供有关应用是在 Windows、iOS 还是 Android 上运行的信息,您可能已经在许多示例中看到过此功能(最常见的用法是在 iOS 中仅在页面顶部添加额外的填充以避免状态栏(。在此类中,还有 Idiom 枚举,它讲述有关设备类型的信息,例如手机、平板电脑,或者在 UWP 的情况下,有时是桌面应用。可以使用此类提供特定于设备类型的逻辑。代码如下所示:

if (Xamarin.Forms.Device.Idiom == TargetIdiom.Phone)  
{  
// apply phone only code  
mainGrid.Padding = new Thickness(10, 10, 10, 10);  
}  
else if (Xamarin.Forms.Device.Idiom == TargetIdiom.Tablet)  
{  
// apply tablet only code  
mainGrid.Padding = new Thickness(100, 10, 100, 10);  
}

此代码为平板电脑设备向名为"mainGrid"的网格添加更多左右填充。

在 XAML 中使用 Device.Idiom

现在,如果您熟悉 XAML,您可能会问一个问题是,我们如何在 XAML 中设置相同的逻辑?实际上,有一种方法可以在 XAML 中完全设置此逻辑。

<Grid x:Name="mainGrid">  
<Grid.Padding>  
<OnIdiom x:TypeArguments="Thickness" Tablet="100, 10, 100, 10" Phone="10, 10, 10, 10" />  
</Grid.Padding>  
...  
</Grid> 

使用带有样式的设备成语

在 XAML 中使用 Device.Idiom 或代码有时可能会变得重复且效率低下,一旦你开始在整个应用中应用类似的更改。样式允许你重用 XAML 的任何部分,包括 Device.Idiom。例如,假设您要为页面创建"手机样式"和"平板电脑样式",该页面仅针对每种设备大小适当设置填充。您可以简单地为每个样式定义一个样式,并在每个页面上进行设置。然后,当您想更改任一样式的某些方面时,可以在一个地方更改它。样式是 XAML 的一项功能,允许你将属性设置封装在一个位置,并在整个应用中重复使用它们。可以创建应用于某个类型的所有控件的隐式样式,也可以创建具有唯一键并分配给特定控件的显式样式。样式的范围限定为单个页面或全局,具体取决于定义样式的位置。我不打算更深入地解释样式的工作原理,因此请查看 Xamarin.Forms 文档了解更多信息。让我们看看如何将样式与 Device.Idiom 一起使用。按照我上面提到的所有页面的手机样式和平板电脑样式的示例,在这里,我使用键在我的 app.xaml 文件中定义了我的两种样式(这将创建一个显式的全局样式(。

<Application.Resources>  
<ResourceDictionary>  
<Style x:Key="PhoneGridStyle" TargetType="Grid">  
<Setter Property="Padding" Value="10, 10, 10, 10" />  
</Style>  
<Style x:Key="TabletGridStyle" TargetType="Grid">  
<Setter Property="Padding" Value="100, 10, 100, 10" />  
</Style>  
</ResourceDictionary>  
</Application.Resources>  

请注意,我的样式实际上针对网格而不是页面,但我认为您也可以针对 Page 对象,假设它具有您需要修改的所有属性。然后,在每个具有网格的页面上,我想将其样式设置为我的全局样式,并且可以使用Device.Idiom相应地设置它们。

<Grid>  
<Grid.Style>  
<OnIdiom x:TypeArguments="Style" Tablet="{StaticResource TabletGridStyle}" Phone="{StaticResource PhoneGridStyle}" />  
</Grid.Style>  
...  
</Grid>  

参考:构建自适应应用程序

在另一篇文章中,您将找到另一种以不同类型的分辨率处理应用程序布局的方法。

现在,如果你只能在Android上处理这个问题,我建议你看看这个谷歌Android文档,你可以为不同的屏幕尺寸指定不同的样式,并创建单独的布局文件。

最新更新