Chinaunix首页 | 论坛 | 博客
  • 博客访问: 6661914
  • 博文数量: 915
  • 博客积分: 17977
  • 博客等级: 上将
  • 技术积分: 8846
  • 用 户 组: 普通用户
  • 注册时间: 2005-08-26 09:59
个人简介

一个好老好老的老程序员了。

文章分类

全部博文(915)

文章存档

2022年(9)

2021年(13)

2020年(10)

2019年(40)

2018年(88)

2017年(130)

2015年(5)

2014年(12)

2013年(41)

2012年(36)

2011年(272)

2010年(1)

2009年(53)

2008年(65)

2007年(47)

2006年(81)

2005年(12)

分类: Android平台

2018-09-02 21:40:24

叠加

在AbsoluteLayout中重叠子项的能力有一些有趣且有用的应用程序,其中包括用有时称为叠加层的东西掩盖整个用户界面的能力。也许您的页面正在执行冗长的工作,并且您不希望用户在作业完成之前与页面进行交互。您可以在页面上放置半透明叠加层,也可以显示ActivityIndicator或ProgressBar。
这是一个名为SimpleOverlay的程序,它演示了这种技术。 XAML文件以填充整个页面的AbsoluteLayout开头。 AbsoluteLayout的第一个子节点是Stack?Layout,您也想要填充页面。但是,StackLayout上填充的默认HorizontalOptions和VerticalOptions设置不适用于AbsoluteLayout的子项。相反,StackLayout通过使用AbsoluteLayout.LayoutBounds和AbsoluteLayout.LayoutFlags附加的可绑定属性来填充AbsoluteLayout:

点击(此处)折叠或打开

  1. <ContentPage xmlns=""
  2.              xmlns:x=""
  3.              x:Class="SimpleOverlay.SimpleOverlayPage">
  4.     <AbsoluteLayout>
  5.         <StackLayout AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
  6.                      AbsoluteLayout.LayoutFlags="All">
  7.             <Label Text=
  8. "This might be a page full of user-interface objects except
  9. that the only functional user-interface object on the page
  10. is a Button."
  11.                    FontSize="Medium"
  12.                    VerticalOptions="CenterAndExpand"
  13.                    HorizontalTextAlignment="Center" />
  14.             <Button Text="Run 5-Second Job"
  15.                     FontSize="Large"
  16.                     VerticalOptions="CenterAndExpand"
  17.                     HorizontalOptions="Center"
  18.                     Clicked="OnButtonClicked" />
  19.             <Button Text="A Do-Nothing Button"
  20.                     FontSize="Large"
  21.                     VerticalOptions="CenterAndExpand"
  22.                     HorizontalOptions="Center" />
  23.             <Label Text=
  24. "This continues the page full of user-interface objects except
  25. that the only functional user-interface object on the page
  26. is the Button."
  27.                    FontSize="Medium"
  28.                    VerticalOptions="CenterAndExpand"
  29.                    HorizontalTextAlignment="Center" />
  30.         </StackLayout>
  31.  
  32.         <!-- Overlay -->
  33.         <ContentView x:Name="overlay"
  34.                      AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
  35.                      AbsoluteLayout.LayoutFlags="All"
  36.                      IsVisible="False"
  37.                      BackgroundColor="#C0808080"
  38.                      Padding="10, 0">
  39.             <ProgressBar x:Name="progressBar"
  40.                          VerticalOptions="Center" />
  41.  
  42.         </ContentView>
  43.     </AbsoluteLayout>
  44. </ContentPage>
AbsoluteLayout的第二个子项是ContentView,它也填充AbsoluteLayout并且基本上位于StackLayout之上。但是,请注意IsVisible属性设置为False,这意味着此ContentView及其子项不参与布局。 Con?tentView仍然是AbsoluteLayout的子代,但是当布局系统调整大小并渲染页面的所有元素时,它就会被跳过。
此ContentView是叠加层。当IsVisible设置为True时,它会阻止用户对其下方视图的输入。 BackgroundColor设置为半透明灰色,ProgressBar在其中垂直居中。
ProgressBar类似于没有拇指的滑块。 ProgressBar始终是水平定向的。除非您还设置了WidthRequest属性,否则不要将ProgressBar的HorizontalOptions属性设置为Start,Center或End。
程序可以通过将ProgressBar的Progress属性设置为0到1之间的值来指示进度。这在程序中唯一功能Button的Clicked处理程序中进行了演示。此处理程序模拟在代码中执行的冗长作业,该计时器确定何时经过五秒:

点击(此处)折叠或打开

  1. public partial class SimpleOverlayPage : ContentPage
  2. {
  3.     public SimpleOverlayPage()
  4.     {
  5.         InitializeComponent();
  6.     }
  7.     void OnButtonClicked(object sender, EventArgs args)
  8.     {
  9.         // Show overlay with ProgressBar.
  10.         overlay.IsVisible = true;
  11.         TimeSpan duration = TimeSpan.FromSeconds(5);
  12.         DateTime startTime = DateTime.Now;
  13.         // Start timer.
  14.         Device.StartTimer(TimeSpan.FromSeconds(0.1), () =>
  15.         {
  16.             double progress = (DateTime.Now - startTime).TotalMilliseconds /
  17.             duration.TotalMilliseconds;
  18.             progressBar.Progress = progress;
  19.             bool continueTimer = progress < 1;
  20.             if (!continueTimer)
  21.             {
  22.                 // Hide overlay.
  23.                 overlay.IsVisible = false;
  24.             }
  25.             return continueTimer;
  26.         });
  27.     }
  28. }
Clicked处理程序首先将overlay的IsVisible属性设置为true,从而重现覆盖及其子ProgressBar,并防止与下面的用户界面进一步交互。 计时器设置为十分之一秒,并根据已用时间计算ProgressBar的新Progress属性。 当五秒钟结束时,再次隐藏覆盖并且计时器回调返回false。
这是覆盖页面的覆盖层和正在进行的漫长工作的样子:

覆盖不必限于ProgressBar或ActivityIndicator。 您可以包含“取消”按钮或其他视图。
阅读(3441) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~