zoukankan      html  css  js  c++  java
  • UWP开发入门(九)——简单界面的布局技巧及屏幕适应

      嘿嘿嘿,题目比较绕哈。本篇主要讨论一般情况下,页面的布局技巧,怎么将元素的展现尽量做到分辨率无关。基本的思路仍然是尽量少的标定具体的数字,而是用比列来标注各元素占据的空间。

      这里我打算用易信的名片页来举例:

      

      Phone的界面看起来不错,大致以纵向排列。最上方是标题栏,头像部分居中,下面的文字以列表形式靠左对齐,最下部为留白。考虑到标题栏需要锚定在顶部,不参与比例分配。头像,文字和留白的占比大致为2.543XAML中的Grid定义如下:

            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
                <RowDefinition Height="2.5*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="3*"></RowDefinition>
            </Grid.RowDefinitions>

      按比例而不是写死每一行的高度,好处在于屏幕大小变化时,甚至屏幕的纵横比变化时,各元素能按相对位置来布局,减少了因为屏幕空间不够而截断或互相遮盖的问题。

      看过了总体的纵向比例,再确认第0行的标题栏的横向布局。三个元素要以左左右的顺序排列。这里给出一种方案: 

            <Grid Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                    <ColumnDefinition Width="*"></ColumnDefinition>
                    <ColumnDefinition Width="Auto"></ColumnDefinition>
                </Grid.ColumnDefinitions>
                <FontIcon Grid.Column="0" Glyph="&#xE00E;" />
                <TextBlock Grid.Column="1" Style="{StaticResource SubtitleTextBlockStyle}" HorizontalAlignment="Left">个人名片</TextBlock>
                <TextBlock Grid.Column="2" Style="{StaticResource CaptionTextBlockStyle}" VerticalAlignment="Center" >编辑</TextBlock>
            </Grid>

      再来是头像部分,共分四行,最上留白(不用Margin是因为考虑横屏的时候,Margin写死数字会相对占用很大的空间),头像,姓名和易信号。 

            <Grid Grid.Row="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <Ellipse Grid.Row="1" Width="60" Height="60"  >
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="Assets/xingzheng.jpg" ></ImageBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center">
                    <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" VerticalAlignment="Center">邢政</TextBlock>
                    <FontIcon Glyph="&#xE1D1;"></FontIcon>
                </StackPanel>
                <StackPanel Grid.Row="3" Orientation="Horizontal" HorizontalAlignment="Center">
                    <TextBlock Style="{StaticResource BodyTextBlockStyle}" Foreground="LightGray">易信号:</TextBlock>
                    <TextBlock Style="{StaticResource BodyTextBlockStyle}"  Foreground="LightGray">manupstairs</TextBlock>
                </StackPanel>
            </Grid>

      这里可以看到头像ImageWidthHeight写死了。这是考虑到头像应该和文字一样保持大小不变,而不是头像根据屏幕缩放,在整个页面字号不改变的情况下,单独变头像感觉会比较奇怪。

      再往下的列表和留白比较简单,不多做介绍,直接放出Phone页面的效果图和原版对比:   

        

      看小图几乎一模一样了,当然易信的图标俺没有,俺用的系统自带的。

      既然要Adaptive UI,自然要能无缝切换到PC模式,还是先看原版截图。

      PC的部分依然是同样的布局,但因为纵横比例反过来了,所以横向自适应的部分将右边整个画面拉宽了。截图是窗口模式,如果放到全屏,右边会越发的宽。

      

      这种保持元素尺寸及相对位置不变,将背景进行横向或纵向的拉伸实现的自适应布局是最为常见的。

      我们之前的代码基本不存在写死的数值,都是按比例布局。所以无需修改直接将窗口拖大看看效果吧。

      

      平移上去比对可以看到效果基本是类似的。那是不是本文到这里就结束了呢?曾经我以为是,感觉Adaptive UI一般做到这种程度就可以了。最多只是细节上调一调,整体布局是不会动的。

      但是美术不是这样的想的啊,她们突发其想说PC上我要下面这种效果,系统自带的哟……

      

      PC我要靠左对齐……靠左……靠左……当时感觉头要炸了。介于平时我的宣传口径是“没有不能做的”。这尼玛硬着头皮也要上啊。仔细想想也很简单啊,加一层VisualState就可以了啊:

            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup>
                    <VisualState >
                        <VisualState.StateTriggers>
                            <AdaptiveTrigger MinWindowWidth="769" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Target="GridRootLayout.HorizontalAlignment" Value="Left"></Setter>
                            <Setter Target="GridRootLayout.VerticalAlignment" Value="Top"></Setter>
                            <Setter Target="GridRootLayout.Width" Value="320"></Setter>
                            <Setter Target="GridRootLayout.Height" Value="640"></Setter>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

      这里的769是针对1520这样的1080p 6寸机器。目前常见的机型中就1520 Width最大达到了768这个数值。769就成了区分手机和PCTablet的分界值。效果图如下,相当于把720p机型的屏幕复制过来贴靠到左上角显示:

        

      至于有没有比刚才更好看么,美术说了算。

      大体上就是这样吧,最后必须得总结一下XAML UI布局的技巧:

    1. 尽量不要使用具体的数字
    2. 使用Grid来划分行列,通过行列之间的比例来控制整体的布局
    3. 需要保持大小不变的元素,可以使用数值,比如上文的头像
    4. Margin这种不存在相对位置的,仅表示固定间距,大可以写死数值(特别是最外层的Margin
    5. 总体呈纵向排列的页面,横向可以考虑写数值(因为横向没几个元素,也就没有相对位置的概念),反之亦然。
    6. 暂时就这么多吧,等我想到再补充。

      最后是惯例的彩蛋:俺这个写法支持手机横屏哦,原版就不行的啦。

      GayHub地址:

      https://github.com/manupstairs/UWPSamples

     

     

  • 相关阅读:
    react-native 点击按钮进行交互
    常用类
    js里面 undefined 和 null
    ajax 提交数据
    通过Unicode判断一个字符是不是汉字
    git commit 后的对话框
    vue-cli 使用less的方法
    node创建服务器简单测试接口
    bootstrap3 模态框js的控制
    鱼眼镜头的坐标变换
  • 原文地址:https://www.cnblogs.com/manupstairs/p/5267418.html
Copyright © 2011-2022 走看看