GeekBand~iOS~实战入门~第四周

界面布局 - View 的定位

UIView 表示屏幕上一块矩形区域;负责提供相应区域的现实内容,也处理相应区域的事件响应。

iOS界面.png

iOS界面由一个树状的 UIView层次结构组成。

树形构建层次图.png
各对象间关系.png

上级:parent,superview
下级:child,subview
应用界面起点:window.rootViewController.view
*末端显示在上面

坐标系

CGPoint {x, y}

struct CGPoint{
    CGFloat x;
    CGFloat y;
};

CGPointMake(x,y)
CGPointEqualToPoint(p1,p2)

CGSize {width, height}

struct CGSize{
    CGFloat width;
    CGFloat height;
};

CGSizeMake(w, h)
CGSizeEqualToSize(sz1, sz2)

CGRect {origin, size}

struct CGRect {
    CGPoint origin;
    CGSize size;
};

CGRectMake(o, s)
CGRectEqualToRect(r1, r2)
CGRectInset(r, dx, dy)

CoreGraphics 坐标系原点在左下角,y轴方向相反


坐标系.png
View 定位- Frame

frame = { origin:{40, 160}, size:{400, 400}}
-[UIView initWithFrame:(CGRect)frame]
view.frame:CGRect
-[UIView addSubView:(UIView*)]
frame是在superview的坐标系内描述所占区域

View 定位- Bounds

->上级视图提供放置子视图的区域
view.bounds:CGRect
bounds 是在 view 自己的坐标系内描述所占区域
该view在本地坐标系统中的位置和大小。(参照点是,本地坐标系统,就相当于ViewB自己的坐标系统,以0,0点为起点)
通常origin = {0,0}

View 定位- Center

视图的中心点

view.frame.origin == center - size/2;
View.transform

二维图形变换
平移、旋转、缩放
本视图绘制之前施加到图形环境里
子视图总是在上级视图 transform 过的环境里绘制自己

处理界面方向

设备转动
界面需要保持原来的方向(人眼在原位)
界面要反向转相应的角度
App与顶层View Controller共同决定
NSApplication会根据 Info.plist 里的信息确定支持的方向
顶层(可见)View Controller在运行期被询问和通知

界面布局 - Autoresizing

界面布局过程

->super view
-->-layoutSubviews
-iOS 5.1 实现是空的
-后续的版本则实现了 autolayout支持
-->-setNeedsLayout
-下次绘制之前需要重新推算布局
-->-layoutIfNeeded
-立即重新推算布局
最后手段:总是可以自定义一个UIView子类重载该方法来实现自定义布局

对布局的需求的分析

->主要工作是确定界面元素之间的间距
-->固定间距:用柱子(struts)表示
-->根据界面尺寸按比例调整的间距:用弹簧(springs)表示

UIView 的 autoresizingMask

->Fixed vs. Flexible
-->未指定flexible就是fixed
->Size
-->Width, Height
->Margin
-->Left, Right, Top, Bottom

设置

设置autoresizing.png
控制 Autoresizing

->从nib 中定义的view默认都打开autoresizing
->UIView.autoresizesSubviews
-->默认YES,设置成NO即可关闭

自动翻译成autolayout约束
.translatesAutoresizingMaskIntoConstraints

Autolayout

基础

->用约束条件(constraint)描述View定位属性之间的关系
-->Autoresizing只能描述上下级视图之间的关系
-->Autolayout支持更多样的视图关系和定位属性

NSLayoutConstraint
只能表达线性关系
Autolayout是一种Opt-in技术
->可以非常灵活的开关
-->nib有“ Use Auto Layout”选项
-->可以用代码添加constraint从而在涉及的view上启用 Autolayout
-->UIView子类自己决定
-requiresConstraintBasedLayout返回YES

UISwith基本用法

创建 -initWithFrame:
响应 Target-Action模式

[mySwitch addTarget:self action:@selector(myAction:) forControlEvents:UIControlEventValueChanged];

状态读取与控制 .on -setOn:animated:

UISwith 外观定制

on状态
-onTintColor
off状态
-tintColor
thumbTintColor


状态.png
UISlider 外观与用途

通过拖动指示器选择连续的数值。


Slider.png
- (IBAction)sliderValueChange:(id)sender {
    UISlider *slider = (UISlider *)sender;
    int progressAsInt = (int)(slider.value);
    NSString *newText = [[NSString alloc]initWithFormat:@"%d",progressAsInt];
    self.SliderValue.text = newText;
}
UISlider 基本用法

创建 -initWithFrame:
响应 Target-Action模式

[self.mySlider addTarget:self action:@selector(myAction:) forControlEvents:UIControlEventValueChanged];

状态读取与控制
.value
.minimumValue,.maximumValue
-setValue:(float)animated:(BOOL)

UISlider 外观定制
UISlider外观定制.png
UIPageControl 外观与用途

提示有多个页面可动态切换点击可顺序切换
*控件不会自己跟界面上实际显示页面内容的部分同步

UIPageControl.png
UIPageControl 基本用法

创建 -initWithFrame:
响应 Target-Action模式

[self.myPageControl addTarget:self action:@selector(myAction:) forControlEvents:UIControlEventValueChanged];

状态读取与控制
.numberOfPages
.currentPage
.hidesForSinglePage

UISlider 外观定制
UIPageControl外观.png
UITextView 外观与用途
UITextView.png

RichText文本编辑器

UITextView 基本用法

创建 -initWithFrame:(CGRect)textContainer:(NSTextContainer*)
内容来源
.text
.attributedText

交互控制
编辑: .editable; .allowsEditingTextAttributes
选择: .selectable; .selectedRange;
.delegate

UITextView 外观定制
UITextView外观.png
UIWebView 外观与用途
UIWebView.png

嵌入浏览器

UIWebView 基本用法

创建 -initWithFrame:(CGRect)
内容来源
-load方法
-loadRequest:(NSURLRequest
)
-loadData:MIMEType:textEncodingName:baseURL:
-loadHTMLString:baseURL:
交互控制
网络访问: .loading; .request; -stopLoading; -reload;
导航: -goBack; goForward;
JavaScript调用: -stringByEvaluatingJavaScriptFromString:
.delegate

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,233评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,013评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,030评论 0 241
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,827评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,221评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,542评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,814评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,513评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,225评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,497评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,998评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,342评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,986评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,055评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,812评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,560评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,461评论 2 266

推荐阅读更多精彩内容