iOS开发iOS9界面适配利器:详解UIStackView,看这里就够了

来源:互联网 发布:skb平面设计方案优化 编辑:程序博客网 时间:2024/05/21 11:00

2015年apple推出了UIStackView,适配更加简单了。UIStackView,补充了相比安卓开发一直缺少的线性布局
UIStackView继承自UIView,但是不是普通的UIView,后面会做介绍。
UIStackView主要包括了四大属性:axis、alignment、distribution、spacing。
一、axis
主要设置UIStackView布局的方向:水平方向或垂直方向。
typedef NS_ENUM(NSIntegerUILayoutConstraintAxis) {
UILayoutConstraintAxisHorizontal =0,//水平方向分布
UILayoutConstraintAxisVertical =1//垂直方向分布
};
二、alignment
主要设置非轴方向子视图的对齐方式。
typedef NS_ENUM(NSIntegerUIStackViewAlignment) {
UIStackViewAlignmentFill,//子视图填充StackView
UIStackViewAlignmentLeading,//子视图左对齐(垂直方向)
UIStackViewAlignmentTop =UIStackViewAlignmentLeading,//子视图顶部对齐(水平方向)
UIStackViewAlignmentFirstBaseline,// 按照第一个子视图的文字的第一行对齐,同时保证高度最大的子视图底部对齐(水平方向)
UIStackViewAlignmentCenter,//子视图居中对齐
UIStackViewAlignmentTrailing,//子视图右对齐(垂直方向)
UIStackViewAlignmentBottom =UIStackViewAlignmentTrailing,//子视图底部对齐(水平方向)
UIStackViewAlignmentLastBaseline,// 按照最后一个子视图的文字的最后一行对齐,同时保证高度最大的子视图顶部对齐(水平方向)
NS_ENUM_AVAILABLE_IOS(9_0);
三、distribution设置子视图的分布比例。
四、spacing 控制子视图之间的间隔大小。
废话不多说,直接上实例。


如上图,第三方分享的平台,如果设备没安装微信客户端,需要去掉微信和朋友圈的两个按钮,另外三个按钮仍然居中显示,代码来写会比较麻烦(相比UIStackView)。
1.找到uistackview拖到xib中。

stackview相当于一个容器,在视图上是显示不了的,虽然继承自UIView,但是设置backgroundColor等属性是无效的。
容器里的uiview或者其子类,是不需要添加约束的,即使添加了约束,在放入uistackview中后,约束也会被自动删除,那么约束到底怎么加,很简单,给容器加,如图,我们给该stackview添加了约束,使其位于屏幕下方。

设置右侧属性如图,选择distribution为fill equally

添加一个uibutton,不用添加约束,拖进去就会发现,button自动居中显示了。

然后按住ALT键,复制该button,两个button,居中平均分布了,我们要的效果完成了。

那么如何使用代码根据是否安装客户端来进行按钮的添加和删除呢?

uistackview里面有这两个方法
- (void)addArrangedSubview:(UIView *)view; //添加
- (void)removeArrangedSubview:(UIView *)view;//删除

@property (weak, nonatomic) IBOutlet UIStackView *stackView;@property (weak, nonatomic) IBOutlet UIButton *weixin;@property (weak, nonatomic) IBOutlet UIButton *weiZone;@property (weak, nonatomic) IBOutlet UIButton *weibo;@property (weak, nonatomic) IBOutlet UIButton *QQ;@property (weak, nonatomic) IBOutlet UIButton *QQZone;@end@implementation ShareVC- (void)viewDidLoad {    [super viewDidLoad];    if ([WXApi isWXAppInstalled]) {        [self.weixin removeFromSuperview];        [self.weiZone removeFromSuperview];    }    if ([QQApiInterface isQQInstalled]) {        [self.QQ removeFromSuperview];        [self.QQZone removeFromSuperview];    }    if ([WeiboSDK isWeiboAppInstalled]) {        [self.weibo removeFromSuperview];    }    }


这两个方法就实现了按钮的添加和删除。但是这里的删除和添加仅仅是添加到容器中,特别注意的是删除的实现,如果该按钮的位置仍处于屏幕中,该按钮还会按原来的位置显示,只是不再该容器中了,所以删除操作最好实用removeFromSuperView才能彻底从屏幕中移除。

附:点击容器中得一个uiview,选择小尺子,我们看到了下面两个重要属性


Content Hugging Priority是水平、垂直方向的拉伸优先级.Content Compression Resistance Priority是水平、垂直方向的压缩优先级.
数值越小越容易被拉伸。
除了从右下角直接拖动添加uistackview之外,还可以直接在xib中先添加几个uibutton,然后按住command选择所有uibutton,点击右下角四个按钮中第一个按钮。如图,第一个按钮。


这时候就会将按钮放进了一个stackview中,再进行后续操作。


2 0
原创粉丝点击