使用 UIStackView 构建动态的 iOS 布局

iOS上的视图布局向来都比较复杂。在iPad和不同尺寸的iPhone诞生之前,开发者习惯硬编码视图布局。随着不同尺寸的iOS设备出现,这种方式已然不可取。为了解决这个问题,Apple提供了AutoLayout,它利用基于约束的布局系统根据设备规格动态调整你的用户界面。AutoLayout解决了很多问题,但是它不易于掌握、不容易适应变化以及调整起来耗时耗力。举个例子,如果我想在两个控件中间添加另外一个,那么我必须重写很多约束来保证它正确的插入。

那么我们能既简单又可以动态的布局视图吗?我最喜欢的iOS9的变化就是,它带来了一个全新的控件UIStackView,UIStackView可以简化我们对视图布局的处理,它不像我们以前使用过的其它控件。在这篇博客,我将会详尽的介绍如何使用UIStackView来构建动态、漂亮的用户界面。

UIStackView sample

UIStackView简介

Apple注意到了我们使用AutoLayout痛楚,于是提供了一个工具使我们的生活更加轻松。 UIStackView通过设置一些简单的属性在运行时创建约束来消除我们手动创建这些约束的痛苦,这意味着我们可以向UIStackView通过简单的拖拽来添加控件,它会自动为我们生成约束。它甚至还允许我们在运行时添加和删除视图(你需要设置它隐藏)。

不需要像AutoLayout那样配置约束,取而代之的是你需要设置一些很有描述性的属性,比如坐标(Axis)、间隔(Spacing)、对齐(Alignment)以及分布(Distribution )等。自然的,你可以在属性设置面板上来配置,这样你就可以通过鼠标轻松的制作出在所有iOS设备上都还不错的用户界面了。

uistack_hero_2x 

UIStackView是我们工具库里的一个很好的补充,同时它也是不需要渲染的UIView的子类。正因为它不做渲染,你不能够设置它的背景色和重构它的Draw方法。相反,它是用来帮助你布局子视图的控件。另一个限制是,它与低于iOS9版本的设备不兼容,也就是说如果你需要向前兼容,还必须继续配置约束(记得在Xamarin Insights上查一下用户数据,看有多少用户仍然使用iOS9以前版本的系统)。

Xamarin Studio UIStackViews

从StackLayout上添加和删除视图

UIStackView有一个添加和删除子视图的API,它可以让你不用去过多考虑你的视图布局。在stack view中的任何视图都需要用ArrangedSubviews属性来添加,而不是SubView。

//Add View
MyUIStackView.AddArrangedSubview(myView);
 
//Remove view
MyUIStackView.RemoveArrangedSubview(myView);

简单扩展一下,利用下面的方法,你可以轻松的为添加和删除视图加上动画效果。
 
// Animate stack
UIView.Animate(0.25, ()=>{
    // Adjust stack view
    MyUIStackView.LayoutIfNeeded();
});

更多

在我们的文档网站上,有很多不错的文档来帮助你使用UIStackViews

UIStackView已经集成在最新版本Xamarin Studio和Visual Studio的Xamarin.iOS中。如果你目标的最低版本是iOS9以上,那么,你就可以利用UIStackView来构建在所有iOS设备上都不错的用户界面了。

英文原文:Building Dynamic Layouts for iOS with UIStackView

猜你喜欢

转载自www.linuxidc.com/Linux/2016-02/128597.htm