正文

ios开发布局,iOS开发布局方式

IP云
IP云V管理员/4 阅读
12/06
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

iOS页面布局：edgesForExtendedLayout的使用

从iOS7开始UIViewController添加了新的属性edgesForExtendedLayout，页面默认是全屏布局，使用edgesForExtendedLayout按自己的开发需求控制viewController的view的布局。

如果在页面中使用了UINavigationController和UITabBarController时，在默认的情况下viewController被延伸到UINavigationController、UITabBarController、UIStatusBar的下面，如果我们要让viewController不被延伸到Bar的下方，让显示范围是从navigationBar底部到tabBar的顶部就需要设置edgesForExtendedLayout了。

由于iOS7鼓励全屏布局，所以它的默认值是UIRectEdgeAll，四周边缘均延伸，就是说，如果即使视图中上有navigationBar或tabBar，那么视图仍会延伸覆盖到四周的区域，也就是说控制器的frame的y值是在屏幕的顶端开始的。当设置值为UIRectEdgeNone时ViewController的起始位置为navigationBar的底部，也就是说控制器的frame的y值是在导航条下面开始的。

extendedLayoutIncludesOpaqueBars的默认值是NO,只有再navigationBar是不透明的情况下才起作用。如果需求要求导航条不透明，并且viewController的起始位置在屏幕顶端，这样就需要将其值设置为YES;

注意下面黄色view的位置。

iOS 通俗易懂的热门标签布局

效果图

.h

```

@interfaceVMTagsView :UIView

/**

*根据传入的要布局的总宽度和标题数组返回总高度和封装好的view的字典对应key为height tagsview

*

*@param titleArray标题数组

*@param allWidth需要布局的宽度

*

*@return

*/

+ (NSDictionary*)tagsViewForTitleArray:(NSArray*)titleArray andWidth:(CGFloat)allWidth;

/**

*根据传入的布局的总宽度和标题数组返回总高度和下面的init配合使用和上面效果一样

*

*@param titleArray标题数组

*@param allWidth需要布局的宽度

*

*@return总高度

*/

+ (CGFloat)tagsViewHeightForTitleArray:(NSArray*)titleArray andWidth:(CGFloat)allWidth;

- (instancetype)initWithFrame:(CGRect)frame titleArray:(NSArray*)titleArray;

/**

*view上button被点击的block回调 参数为被点击button的序号

*/

@property(nonatomic,copy)void(^buttonClickedBlock)(NSInteger);

@end

```

.m

```

#import"VMTagsView.h"

#define kButtonHeight28

#define KColorFromRGB(rgbValue) \

[UIColor colorWithRed:((float)((rgbValue 0xFF0000) 16))/255.0\

green:((float)((rgbValue 0xFF00) 8))/255.0\

blue:((float)(rgbValue 0xFF))/255.0alpha:1.0]

#define kMainTextGrayColorKColorFromRGB(0x5d5d5d)

#define Font(FONT)[UIFont systemFontOfSize:FONT]

#define kCommenFont14

@interfaceVMTagsView()

/**

*存放创建的button用于取下标或者找对应的button也可以用tag,但我觉得太low

*/

@property(nonatomic,strong)NSMutableArray*buttonArr;

@property(nonatomic)NSIntegerindex;

@end

@implementationVMTagsView

- (NSMutableArray*)buttonArr {

if(!_buttonArr) {

_buttonArr= [[NSMutableArrayalloc]init];

}

return_buttonArr;

}

- (instancetype)initWithFrame:(CGRect)frame titleArray:(NSArray*)titleArray {

self= [superinitWithFrame:frame];

if(self) {

[selfcreatSubviewsWithWidth:frame.size.widthtitleArray:titleArray];

}

returnself;

}

- (CGFloat)creatSubviewsWithWidth:(CGFloat)allWidth titleArray:(NSArray*)titleArray{

CGFloatx =0;

CGFloatnowWidth =0;

CGFloatnextWidth =0;

intnum_per_line =0;//每行btn的个数

intnum_of_line =0;//行数

for(inti =0; i titleArray.count; i ++) {

UIButton*button = [UIButtonbuttonWithType:UIButtonTypeCustom];

//添加到数组内

[self.buttonArraddObject:button];

[buttonaddTarget:selfaction:@selector(buttonAction:)forControlEvents:UIControlEventTouchUpInside];

[buttonsetTitleColor:kMainTextGrayColorforState:UIControlStateNormal];

button.layer.borderColor=KColorFromRGB(0xE1E1E1).CGColor;

button.layer.borderWidth=1;

button.layer.cornerRadius=kButtonHeight/2;

button.layer.masksToBounds=YES;

button.titleLabel.font=Font(kCommenFont);

[buttonsetTitle:titleArray[i]forState:UIControlStateNormal];

[selfaddSubview:button];

CGFloattitleWidth = [VMTagsViewwidthForText:titleArray[i]andFontSize:kCommenFontheight:10];

titleWidth +=15;//给按钮标题距离左右边框留点间距

nextWidth = nextWidth + titleWidth +10;//将要布局下一个按钮的宽度

if(nextWidth allWidth) {

//如果大于限定的宽度置0另起一行

nextWidth =0;

nextWidth = nextWidth + titleWidth;

num_of_line ++;

nowWidth =0;

nowWidth = nowWidth + titleWidth;

num_per_line =0;

button.frame=CGRectMake(x,5+ (kButtonHeight+10) * num_of_line, titleWidth,kButtonHeight);

}else{

button.frame=CGRectMake(x + nowWidth + num_per_line *10,5+ (kButtonHeight+10) * num_of_line, titleWidth,kButtonHeight);

nowWidth = nowWidth + titleWidth;

}

num_per_line ++;

}

return(kButtonHeight+10) * (num_of_line +1);

}

+ (CGFloat)tagsViewHeightForTitleArray:(NSArray*)titleArray andWidth:(CGFloat)allWidth{

CGFloatnowWidth =0;

CGFloatnextWidth =0;

intnum_per_line =0;//每行btn的个数

intnum_of_line =0;//行数

for(inti =0; i titleArray.count; i ++) {

CGFloattitleWidth = [selfwidthForText:titleArray[i]andFontSize:kCommenFontheight:10];

titleWidth +=15;

nextWidth = nextWidth + titleWidth +10;

if(nextWidth allWidth) {

nextWidth =0;

nextWidth = nextWidth + titleWidth;

num_of_line ++;

nowWidth =0;

nowWidth = nowWidth + titleWidth;

num_per_line =0;

}else{

nowWidth = nowWidth + titleWidth;

}

num_per_line ++;

}

CGFloatallheight = (kButtonHeight+10) * (num_of_line +1);

returnallheight;

}

+ (NSDictionary*)tagsViewForTitleArray:(NSArray*)titleArray andWidth:(CGFloat)allWidth {

VMTagsView*tagsview = [[selfalloc]init];

CGFloatheight = [tagsviewcreatSubviewsWithWidth:allWidthtitleArray:titleArray];

return@{@"height":@(height),@"tagsview":tagsview};

}

/**

*点击事件

*

*@param button

*/

- (void)buttonAction:(UIButton*)button {

UIButton*btn = (UIButton*)[self.buttonArrobjectAtIndex:self.index];

[btnsetTitleColor:kMainTextGrayColorforState:UIControlStateNormal];

btn.layer.borderColor=KColorFromRGB(0xE1E1E1).CGColor;

[buttonsetTitleColor:[UIColorredColor]forState:UIControlStateNormal];

button.layer.borderColor= [UIColorredColor].CGColor;

NSIntegerindex = [self.buttonArrindexOfObject:button];

self.buttonClickedBlock(index);

self.index= index;

}

+ (CGFloat)widthForText:(NSString*)text andFontSize:(CGFloat)fontSize height:(CGFloat)height {

NSDictionary*textDic =@{NSFontAttributeName:Font(fontSize)};

CGSizesize = [textboundingRectWithSize:CGSizeMake(0, height)options:NSStringDrawingUsesLineFragmentOriginattributes:textDiccontext:nil].size;

returnsize.width;

}

```

Git: 传送门

Ios-自动布局

以前做android的时候已经觉得布局方便的不行，几种简单的布局容器，再加上停靠和weight，基本所有需求都能满足，后来接触ios开发，一开始还担心自动布局复杂，学习成本高。接触几天后发现，一旦找到窍门，在布局的自由度上更胜android一筹，简直就是想怎么玩就怎么玩。

一：总

自动布局的核心用一句话表示就是：通过各种方法“确定”控件的位置和大小。这里的各种方法就是约束。

二：约束

（1）位置类约束

以上约束来举例，可以设置本控件的上边距离其它控件位置点（位置点包括：上下左右和中间）的距离。这里的距离是一个等式，可以通过这样的方式来理解：y=ax+b；y是最后设置的效果距离值，x是其他控件位置点的距离值，至于a，b都是你可以设置的参数值。使用时，本控件的位置点可以按需自由的参照其他控件的位置点来设置约束。比如，本控件的水平中间点可以等于父容器控件的水平中间点，这样就实现了水平居中。

（2）大小类约束

印象中就三个：宽，高，宽高比

三：最后

位置类约束和大小约束没必要都使用上，只要现有约束已经确定大小和位置了就没必要加冗余约束，会引起冲突。比如，你设置了一个控件的上下左右约束，这时候不仅位置，大小也都确定了。还有文字类的控件（UILabel类），本身就自带大小，所以可以不指定宽高。

待补充。。

iOS开发之观察任意 App 的 UI 布局 Reveal 篇

本篇还是以 x易x音乐为?

如果没有，那就创建一个 RHRevealLoader 文件夹，然后打开 Reveal ，如下操作

把这两个文件复制到刚才创建的 RHRevealLoader 文件夹下

3，在手机上配置 Reveal Loader 插件 设置 -- Reveal -- Enableded Applications -- 把想查看的 App 开关打开

4，查看目标 App 的 UI 布局

首先确认 OS X 和 iOS 位于同一网段内，然后启动 Reveal ，在启动目标 App（如果App 之前是开着的，需要先管掉，再打开）

在App里切换了界面，可在 Reveal 界面中按 command ＋ r 刷新。

汇报完毕，欢迎讨论！

iOS scrollView自动布局技巧之二 - 纯代码自动布局

目录：

注意：

- 不管以上那种情况，scrollView 本身的大小和位置一定要相对固定！

- 可以使用frame直接设置，也可以使用自动布局设置。

根据排列组合，共有 2*2 = 4 中情况，下面分别分析：

这种情况没什么好说的，直接设置即可。

这种情况相当于是第四种情况的简化版，故请先看[第四种方式]。

我们知道，只要设置 scrollView 的 contentSize，就限定了 scrollView 的可滚动范围。所以这种情况，并不能很好的根据子控件的变化而动态显示完整的内容。

所以子控件bounds变化的情况，需要使用[第四种方式]设置。

首先来做个分析：

第1条，两种设置方式，自己根据实际情况选择一种即可；

第2条，将所有子视图塞进一个容器视图中。即先给scrollView添加一个 唯一直接子视图 。

通俗点说就是创建一个 sizeView 设置其大小（直接设置frame或者使用autolayout设置皆可），然后将其添加到scrollView的子视图，其他七七八八的所有小子视图都添加在这个直接子视图 sizeView 中，这个直接子视图就相当于 contentView。

这样只要设置这个直接子视图 sizeView 的大小和约束就好了。

如果设置好了这个直接子视图 sizeView 的约束，那么这个直接子视图 sizeView 的范围就是 scrollView 的滚动范围喽！

第3条，其实设置子视图布局就2个要点：

如图1、图2

图2为竖直、水平方向皆可滚动，注意观察滚动条位置。

图2为竖直、水平方向皆可滚动，注意观察滚动条位置。

如此设置布局是不是很方便呢？