Xamarin移动应用中图片与搜索筛选器无法适配所有设备，求解决方案

问题根源 #

你当前代码适配性差的核心原因是使用了大量硬编码的固定像素值定位元素，比如给ImageButton设置Margin="350,10,0,0"、给Picker设置固定宽度340，这类数值只适配特定尺寸的屏幕，换其他尺寸的设备就会出现元素错位、超出屏幕的问题。

推荐方案：替换为Grid布局 #

Grid的弹性宽度规则天然适配不同屏幕尺寸，实现起来比RelativeLayout更简洁不易出错，优化后代码如下：

<Grid Margin="0,10,0,10" BackgroundColor="Transparent" ColumnSpacing="10">
    <Grid.ColumnDefinitions>
        <!-- 第一列占满剩余可用宽度 -->
        <ColumnDefinition Width="*"/>
        <!-- 第二列自动适配刷新按钮的大小 -->
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    
    <!-- 筛选器占满第一列宽度 -->
    <Picker x:Name="navigationPassengerList" 
            Title="选择乘客"
            ItemDisplayBinding="{Binding Name}"
            SelectedIndexChanged="navigationPassengerList_SelectedIndexChanged" 
            BackgroundColor="Transparent"
            HeightRequest="50"
            HorizontalOptions="FillAndExpand"/>
    
    <!-- 下拉箭头固定在筛选器最右侧 -->
    <Image WidthRequest="15" 
           HeightRequest="15" 
           Source="ic_arrow_drop_down" 
           Aspect="AspectFit" 
           x:Name="img"
           HorizontalOptions="End"
           VerticalOptions="Center"
           Margin="0,0,10,0"/>
    
    <!-- 刷新按钮固定在最右侧第二列 -->
    <ImageButton Grid.Column="1"
                 WidthRequest="35" 
                 HeightRequest="33" 
                 Source="refresh_btn" 
                 Clicked="img_Refresh_Clicked" 
                 x:Name="img_Refresh"
                 Margin="0,0,10,0"/>
</Grid>

备选方案：优化RelativeLayout约束 #

如果你一定要使用RelativeLayout，需要把硬编码的定位参数改为基于父布局/相邻元素的相对约束，修改后代码如下：

<RelativeLayout Margin="0,10,0,10" BackgroundColor="Transparent">
    <!-- 刷新按钮约束在父布局最右侧 -->
    <ImageButton WidthRequest="35" 
                 HeightRequest="33" 
                 Source="refresh_btn" 
                 Clicked="img_Refresh_Clicked" 
                 x:Name="img_Refresh"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1, Constant=-45}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=0}"
                 Margin="0"/>

    <!-- 下拉箭头约束在刷新按钮左侧，垂直居中对齐 -->
    <Image WidthRequest="15" 
           HeightRequest="15" 
           Source="ic_arrow_drop_down" 
           Aspect="AspectFit" 
           x:Name="img"
           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView, ElementName=img_Refresh, Property=X, Factor=1, Constant=-25}"
           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView, ElementName=img_Refresh, Property=Y, Factor=1, Constant=9}"
           Margin="0"/>

    <!-- 筛选器从父布局左侧开始，到下拉箭头左侧结束，占满中间所有宽度 -->
    <Picker x:Name="navigationPassengerList" 
            Title="选择乘客"
            ItemDisplayBinding="{Binding Name}"
            SelectedIndexChanged="navigationPassengerList_SelectedIndexChanged" 
            BackgroundColor="Transparent"
            HeightRequest="50"
            RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0, Constant=0}"
            RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0, Constant=0}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToView, ElementName=img, Property=X, Factor=1, Constant=0}"
            Margin="0"/>
</RelativeLayout>

适配注意事项 #

• 禁止使用固定的左侧Margin值定位右侧元素，这类写法在不同宽度设备上必然错位
• 相对布局的约束尽量绑定父布局边缘或者相邻元素的位置，不要硬编码和屏幕宽度相关的常量
• 优先使用Grid、FlexLayout这类弹性布局容器，开发效率和适配效果都优于RelativeLayout

内容的提问来源于stack exchange，提问作者user2897751