iPad開(kāi)發(fā)與iPhone開(kāi)發(fā)的異同
簡(jiǎn)介
1. iPad開(kāi)發(fā)與iPhone開(kāi)發(fā)的異同
2. QQ空間的分析
3. 登錄界面的搭建
4. Dock的初始化
5. Dock中BottomMenu的初始化
6. 添加IconButton和添加BottomMenu的子控件
7. 添加Tabbar的子控件
8. IconButton內(nèi)容設(shè)置和BottomMenu子控件點(diǎn)擊
9. tabbar點(diǎn)擊和全部動(dòng)態(tài)的UISegmentControl
Published using GitBook
My Book
一蹬敲、iPad與iPhone搭載的系統(tǒng)
兩者都是搭載的ios系統(tǒng)
二鳞上、屏幕的尺寸與分辨率不同
1.iPhone與iPad有不同的英寸奠滑，像素和點(diǎn)，開(kāi)發(fā)一般只關(guān)心點(diǎn)坐標(biāo)系
2.iPhone有3.5inch党窜，4.0inch，4.7inch，5.5inch 荞胡，分別對(duì)應(yīng)的點(diǎn)坐標(biāo)系為:
320x480,320x568,375x667，414x736
3.iPad的有9.7inch和7.9inch了嚎，對(duì)應(yīng)的點(diǎn)坐標(biāo)系都為768x1024
三泪漂、UI元素的排布和設(shè)計(jì)不同
1.一般情況下iPhone應(yīng)用要求只支持豎屏，iPhone游戲要求只支持橫屏
iPad應(yīng)用一般情況下要求既要支持橫屏歪泳，也要支持豎屏
2.iPad屏幕更大萝勤，他可以容納更多的UI元素，因此排列方式與iPhone不同
四呐伞、iphone鍵盤(pán)與iPad鍵盤(pán)不同
iPad鍵盤(pán)相對(duì)于iPhone鍵盤(pán)多了一個(gè)退出按鈕敌卓，用來(lái)退出鍵盤(pán)
五、在API上的不同
iPad有屬于自己特有的API伶氢，只能用在iPad開(kāi)發(fā)上
分別為：
UIPopVerController
UISplitViewControlleriPhone上的API在iPad上都可以用
-
iPhone上與iPad的共有的API在顯示效果上有差異
比如:
iPhone的UIActionSheet,會(huì)從底部彈出來(lái)進(jìn)行選擇趟径，并默認(rèn)帶取消按鈕
如果相同的代碼運(yùn)行在iPad上會(huì)從中間彈出尊流，并沒(méi)有取消按鈕六棘伴、屏幕方向的支持不同
1.iPhone上面支持3個(gè)方向歇式，不支持HOME鍵朝上方向
2.iPad上面支持4個(gè)方向七奏赘、開(kāi)發(fā)上面的細(xì)節(jié)不同
1.僅僅開(kāi)發(fā)iPad項(xiàng)目，在創(chuàng)建項(xiàng)目的時(shí)候選擇iPad
2.如果是需要iPhone與iPad的一起開(kāi)發(fā)的時(shí)候選擇universal
3.僅僅開(kāi)發(fā)iPhone項(xiàng)目幕屹，在創(chuàng)建項(xiàng)目的時(shí)候選擇iPhone八扇救、設(shè)備支持應(yīng)用程序的不同
1.iPhone上面只能運(yùn)行iPhone應(yīng)用程序
2.iPad上面既可以運(yùn)行iPad程序，也可以運(yùn)行iPhone程序
如果在iPad運(yùn)行iPhone程序會(huì)把程序等比例拉伸香嗓，之后顯示在iPad上
九迅腔、iPhone開(kāi)發(fā)與iPad開(kāi)發(fā)的流程
開(kāi)發(fā)流程都是一致的
QQ空間的分析
一. 登陸界面
1.登陸界面使用AutoLayout搭建,并適配橫豎屏
2.狀態(tài)欄文字顏色為白色
3.當(dāng)帳號(hào)和密碼都為123時(shí)可以登陸成功
4.帳號(hào)或密碼為空提示登陸失敗,并給予抖動(dòng)效果
5.帳號(hào)或密碼錯(cuò)誤提示登陸失敗,并給予抖動(dòng)效果
6.帳號(hào)與密碼輸入框:
1.帳號(hào)輸入框?yàn)槊魑娘@示
2.密碼輸入框?yàn)榘滴娘@示
3.帳號(hào)輸入框return按鈕為next
4.密碼輸入框return按鈕為done
5.當(dāng)輸入框中有內(nèi)容時(shí),return按鈕才可以點(diǎn)擊
6.當(dāng)點(diǎn)擊next按鈕時(shí),切換密碼輸入框?yàn)榈谝豁憫?yīng)者
7.當(dāng)點(diǎn)擊done按鈕時(shí),開(kāi)始登陸
8.取消聯(lián)想輸入
9.當(dāng)輸入框中有內(nèi)容時(shí),顯示刪除按鈕
10.當(dāng)切換到輸入框時(shí),自動(dòng)情況輸入框內(nèi)容
7.記住密碼與自動(dòng)登陸邏輯
1.當(dāng)點(diǎn)擊記住密碼時(shí),記住密碼如果不被選中,自動(dòng)登陸也不被選中
2.當(dāng)點(diǎn)擊自動(dòng)登陸時(shí),自動(dòng)登陸被選中,記住密碼也被選中
二. 詳情界面
? 1.橫屏與豎屏狀態(tài)下,右邊內(nèi)容的寬度相等,高度為控制器的高度
? 2.橫屏狀態(tài)下,左邊工具欄的寬度大于豎屏狀態(tài)下左邊工具欄的寬度
? 3.橫豎屏切換時(shí),左邊工具欄的高度與寬度也跟著切換
4.工具欄被分為上.中.下三大塊
1.最上為頭像:當(dāng)點(diǎn)擊時(shí),會(huì)切換右邊控制器的內(nèi)容,在橫屏?xí)r,顯示文字和圖片,豎屏?xí)r僅顯示圖片
2.中間類(lèi)似tabbar:一個(gè)被選中,另一個(gè)就會(huì)被反選中,會(huì)切換右邊的控制器的內(nèi)容,在橫屏?xí)r顯示文字和圖標(biāo),豎屏?xí)r僅顯示文字
3.底部菜單:當(dāng)點(diǎn)擊某個(gè)會(huì)在控制器的部分控件彈出一個(gè)控制器,橫屏的時(shí)候三個(gè)控件橫著排列,豎屏?xí)r,三個(gè)控件豎著
登錄界面的搭建
? 一.創(chuàng)建項(xiàng)目并導(dǎo)入資源文件
? 二.分文件夾
三.使用Autolayout搭建登陸界面
1.拖入U(xiǎn)IImageView,距離控制器的View的頂部為40,并水平居中顯示,寬高為圖片自身size
2.登陸界面底層交予一個(gè)UIView管理(方便做抖動(dòng)動(dòng)畫(huà)),方便顯示設(shè)置背景顏色,并設(shè)置寬高為300x300,距離圖片為2.0,并兩者中心點(diǎn)對(duì)其
3.拖入輸入框背景圖片致View中,并對(duì)圖片進(jìn)行拉伸,高度為圖片高度,寬度為父控件寬度,頂部為0
4.添加兩個(gè)UILabel到輸入框圖片中,文字顏色為白色,上面為帳號(hào),下面為密碼,寬度為100,高度為45,兩個(gè)UILabel相隔12,并添加約束
5.添加帳號(hào)輸入框與密碼輸入框,改變輸入框的style,設(shè)置位子均為123,顏色為白色,并相對(duì)于UILabel添加約束
6.添加登陸按鈕,改變按鈕類(lèi)型為custom(否則不能顯示高亮圖片),設(shè)置普通與高亮背景圖片,設(shè)置文字為登陸,顏色為白色,寬度為父控件寬度,高度為圖片高度,距離上面的控件為10,并添加約束
7.添加兩個(gè)按鈕,分別占據(jù)父控件的一半,設(shè)置文字左邊為記住密碼,右邊為自動(dòng)登陸,文字大小為14,設(shè)置普通圖片與選擇圖片,并添加約束
四.細(xì)節(jié)處理
1.調(diào)節(jié)登陸View的高度
2.密碼為暗文顯示
3.帳號(hào)輸入框,return按鈕顯示next,沒(méi)有內(nèi)容不可點(diǎn)擊
4.密碼輸入框,return按鈕顯示done,沒(méi)有內(nèi)容不可點(diǎn)擊
5.取消輸入糾錯(cuò)的功能
7.輸入框提供小按鈕,當(dāng)在編輯并有內(nèi)容的時(shí)候顯示,點(diǎn)擊小按鈕刪除輸入框中內(nèi)容
8.提供當(dāng)切換為第一響應(yīng)時(shí),清空輸入框中的內(nèi)容
五.編寫(xiě)代碼
1.創(chuàng)建控制器,并拖線(xiàn)獲得帳號(hào).密碼.自動(dòng)登陸.記住密碼屬性,監(jiān)聽(tīng)三個(gè)按鈕的點(diǎn)擊
2.在登陸點(diǎn)擊按鈕中
2.1 獲取到帳號(hào)和密碼
2.2 判斷帳號(hào)密碼是否為空,如果為空,給予提示,并執(zhí)行抖動(dòng)動(dòng)畫(huà)
2.3 模擬提交服務(wù)器,判斷帳號(hào)密碼是否正確(默認(rèn)帳號(hào)和密碼都為123的時(shí)候正確),如果錯(cuò)誤給予提示,并執(zhí)行抖動(dòng)動(dòng)畫(huà)
3.為錯(cuò)誤提示抽出一個(gè)方法,并添加提示與抖動(dòng)動(dòng)畫(huà)
4.當(dāng)點(diǎn)擊登陸時(shí),退出鍵盤(pán)
5.設(shè)置自動(dòng)登陸與記住密碼邏輯
6.添加activityView在登陸按鈕右邊,并在登陸的時(shí)候轉(zhuǎn)動(dòng)
7.設(shè)置當(dāng)在帳號(hào)輸入框中點(diǎn)擊next,設(shè)置密碼輸入框?yàn)榈谝豁憫?yīng)者
8.設(shè)置當(dāng)在密碼輸入框中點(diǎn)擊done,開(kāi)始登陸
9.設(shè)置登陸界面背景為RGB為3個(gè)55/255.0,并清空其他背景顏色
10.設(shè)置狀態(tài)欄文字顏色為白色
- (void)showError:(NSString *)error {
1.錯(cuò)誤提示
UIAlertController *alertVC = [UIAlertController alertControllerWithTitle:@"登陸失敗" message:error preferredStyle:UIAlertControllerStyleAlert];
UIAlertAction *action = [UIAlertAction actionWithTitle:@"確定" style:UIAlertActionStyleCancel handler:nil];
[alertVC addAction:action];
[self presentViewController:alertVC animated:YES completion:nil];
2.抖動(dòng)動(dòng)畫(huà)
CAKeyframeAnimation *shakeAnim = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation.x"];
shakeAnim.values = @[@-10,@0,@10,@0];
shakeAnim.repeatCount = 3;
shakeAnim.duration = 0.1;
[self.loginView.layer addAnimation:shakeAnim forKey:nil];
}
? 五.圖片拉伸
? 1: 對(duì)圖片進(jìn)行拉伸:
2:在storyboard里進(jìn)行拉伸:
? 3.代碼拉伸:
? 參考:圖片之代碼拉伸
? 4.舉例:
? 拉伸前:
ios9之后(狀態(tài)欄背景顏色由控制器管理)
1.繼承(可以創(chuàng)建一個(gè)類(lèi)繼承UIViewController,其他的類(lèi)繼承這個(gè)UIViewController)
2.創(chuàng)建UIViewController分類(lèi),重寫(xiě)分類(lèi)方法,不過(guò)會(huì)有警告
去除警告
pragma clang diagnostic ignored "-Wobjc-protocol-method-implementation"
Dock的初始化
一.創(chuàng)建詳情界面控制器
二.設(shè)置背景顏色與登陸界面背景顏色
self.view.backgroundColor
= [UIColor colorWithRed:55/255.0 green:55/255.0
blue:55/255.0
alpha:1.0];
三.跳轉(zhuǎn)詳情頁(yè)(當(dāng)帳號(hào)和密碼都為123)
1.以modal的形式進(jìn)入
HomeViewController
*homeVC = [[HomeViewController alloc] init];
[self presentViewController:homeVC animated:YES completion:nil];
2.以切換窗口的根控制的形式進(jìn)入
self.view.window.rootViewController = [[HomeViewController alloc] init];
四.自定義Dock,繼承UIView
五.初始化Dock
- (void)setupDock
{
1.創(chuàng)建Dock
Dock *dock = [[Dock alloc] init];
dock.backgroundColor = [UIColor redColor];
[self.view addSubview:dock];
self.dock = dock;
2.高度隨父控件的拉伸而拉伸
dock.autoresizingMask = UIViewAutoresizingFlexibleHeight;
dock.height = self.view.height;
3.通過(guò)當(dāng)前屏幕方向設(shè)置dock的寬度
BOOL isLandscape =self.view.width == 1024;
dock.width = isLandscape ? 270 : 70;
}
六.監(jiān)聽(tīng)屏幕旋轉(zhuǎn),設(shè)置dock的寬度
ios8 以前
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation
duration:(NSTimeInterval)duration
{
通過(guò)當(dāng)前屏幕方向設(shè)置dock的寬度
BOOL isLandscape =
toInterfaceOrientation == UIInterfaceOrientationLandscapeLeft;
self.dock.width = isLandscape ? 270 :
70;
}
ios8 以后
- (void)viewWillTransitionToSize:(CGSize)size
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator
{
通過(guò)當(dāng)前屏幕方向設(shè)置dock的寬度
BOOL isLandscape = size.width == 1024;
self.dock.width = isLandscape ? 270 :
70;
}
九.關(guān)于UIView的autoresizingMask屬性的研究
enum {
UIViewAutoresizingNone = 0,
UIViewAutoresizingFlexibleLeftMargin = 1 << 0,
UIViewAutoresizingFlexibleWidth = 1 <<
1,
UIViewAutoresizingFlexibleRightMargin = 1 << 2,
UIViewAutoresizingFlexibleTopMargin = 1 << 3,
UIViewAutoresizingFlexibleHeight = 1 << 4,
UIViewAutoresizingFlexibleBottomMargin = 1 << 5
};
UIViewAutoresizingNone就是不自動(dòng)調(diào)整靠娱。
UIViewAutoresizingFlexibleLeftMargin 自動(dòng)調(diào)整與superView左邊的距離，保證與superView右邊的距離不變锌雀。
UIViewAutoresizingFlexibleRightMargin 自動(dòng)調(diào)整與superView的右邊距離，保證與superView左邊的距離不變腋逆。
UIViewAutoresizingFlexibleTopMargin 自動(dòng)調(diào)整與superView頂部的距離侈贷，保證與superView底部的距離不變惩歉。
UIViewAutoresizingFlexibleBottomMargin 自動(dòng)調(diào)整與superView底部的距離，也就是說(shuō)撑蚌，與superView頂部的距離不變争涌。
UIViewAutoresizingFlexibleWidth 自動(dòng)調(diào)整自己的寬度亮垫，保證與superView左邊和右邊的距離不變伟骨。
UIViewAutoresizingFlexibleHeight 自動(dòng)調(diào)整自己的高度底靠，保證與superView頂部和底部的距離不變暑中。
UIViewAutoresizingFlexibleLeftMargin
|UIViewAutoresizingFlexibleRightMargin 自動(dòng)調(diào)整與superView左邊的距離，保證與左邊的距離和右邊的距離和原來(lái)距左邊和右邊的距離的比例不變稻轨。比如原來(lái)距離為20殴俱，30线欲，調(diào)整后的距離應(yīng)為68李丰，102逼泣，即68/20=102/30。
Dock中BottomMenu的初始化
一.在監(jiān)聽(tīng)屏幕方法中拿到屏幕選中的時(shí)間,添加dock改變寬度的動(dòng)畫(huà)效果
ios8 以前
duration 為屏幕旋轉(zhuǎn)的時(shí)間
(void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation
duration:(NSTimeInterval)duration{}
ios8 以后
[coordinator
transitionDuration] 返回屏幕旋轉(zhuǎn)的時(shí)間
(void)viewWillTransitionToSize:(CGSize)size
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator
{
}
(void)viewWillTransitionToSize:(CGSize)size
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator
{
1.通過(guò)當(dāng)前屏幕方向設(shè)置dock的寬度
BOOL isLandscape = size.width ==
1024;
2.獲取屏幕旋轉(zhuǎn)設(shè)置,設(shè)置dock寬度改變的動(dòng)畫(huà)時(shí)間
CGFloat duration = [coordinator transitionDuration];
[UIView animateWithDuration:duration animations:^{
self.dock.width =
isLandscape ? 270 : 70;
}];
}
二.創(chuàng)建Dock子控件->底部菜單(BottomMenu),并設(shè)置BottomMenu的autoresizingMask屬性(當(dāng)旋轉(zhuǎn)屏幕時(shí),高度依舊為旋轉(zhuǎn)前Dock的高度,所以會(huì)導(dǎo)致BottomMenu的Y值不對(duì))
(void)setupBottomMenu
{
BottomMenu *menu = [[BottomMenu alloc] init];
menu.backgroundColor = [UIColor orangeColor];
[self addSubview:menu];
self.menu = menu;
設(shè)置menu與父控件頂部可拉伸,底部不變
menu.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
}
三.Dock中的子控件設(shè)置frame需要知道屏幕方向,Dock對(duì)外提供一個(gè)告知當(dāng)前屏幕方向的方法
(void)rotateToLandscape:(BOOL)isLandscape;
dock中
(void)rotateToLandscape:(BOOL)isLandscape
{
1.設(shè)置自身的frame
self.width = isLandscape ? kDockLandscapeWidth : kDockProtraitWidth;
2.設(shè)置底部菜單的frame,告知底部菜單當(dāng)前屏幕方向
[self.menu rotateToLandscape:isLandscape];
}
底部菜單
- (void)rotateToLandscape:(BOOL)isLandscape
{
1.設(shè)置自身的frame
self.width = self.superview.width;
self.height = isLandscape ? kDockItemHeight : kDockItemHeight * 3;
self.y = self.superview.height - self.height;
}
豎屏效果
添加IconButton和添加BottomMenu的子控件
一.添加中間的子控件Tabbar,并設(shè)置顏色,設(shè)置頂部可拉伸
- (void)setupTabbar
{
Tabbar *tb = [[Tabbar alloc] init];
tb.backgroundColor = [UIColor purpleColor];
[self addSubview:tb];
self.tb = tb;
設(shè)置tabbar與父控件頂部可拉伸,底部不變
tb.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
}
二.在Dock中告訴tabbar當(dāng)前屏幕方向,并設(shè)置Y值(因?yàn)閅值需要用到底部菜單的高度)
- (void)rotateToLandscape:(BOOL)isLandscape
{
1.設(shè)置自身的frame
self.width = isLandscape ?
kDockLandscapeWidth : kDockProtraitWidth;
2.設(shè)置底部菜單的frame,告知底部菜單當(dāng)前屏幕方向
[self.menu
rotateToLandscape:isLandscape];
3.設(shè)置tabbar的frame,告知tabbar當(dāng)前屏幕方向
[self.tb
rotateToLandscape:isLandscape];
3.1設(shè)置tabbar的Y值(當(dāng)tabbar有高度之后再進(jìn)行設(shè)置)
self.tb.y = self.height
- self.menu.height - self.tb.height;
}
三.設(shè)置Tabbar的frame,先設(shè)置寬高,再設(shè)置x,y
-
(void)rotateToLandscape:(BOOL)isLandscape
{設(shè)置自身的frame
self.width = self.superview.width;
self.height = kDockItemHeight * 6;
}
四.添加頂部子控件IconButton
- (void)setupIconButton
{
IconButton *ib = [[IconButton alloc] init];
ib.backgroundColor = [UIColor blueColor];
[self addSubview:ib];
self.ib = ib;
}
IconButton中獲取當(dāng)前屏幕方向,設(shè)置自身frame
- (void)rotateToLandscape:(BOOL)isLandscape
{
設(shè)置自身frame
self.width = isLandscape ?
kIconButtonLandscapeWidth : kIconButtonProtraitWH;
self.height = isLandscape ?
kIconButtonLandscapeHeight : kIconButtonProtraitWH;
self.y = kIconButtonY;
self.x = (self.superview.width
- self.width) * 0.5;
}
五.添加底部菜單子控件
- (void)setupItemsWithImageName:(NSString *)imageName
{
UIButton *item = [[UIButton alloc] init];
1.設(shè)置圖標(biāo)
[item setImage:[UIImage imageNamed:imageName]
forState:UIControlStateNormal];
2.高亮背景顏色
[item setBackgroundImage:[UIImage imageNamed:@"tabbar_separate_selected_bg"]
forState:UIControlStateHighlighted];
[self addSubview:item];
}
- (void)rotateToLandscape:(BOOL)isLandscape
{
0.獲取當(dāng)前子控件的個(gè)數(shù)
NSInteger count = self.subviews.count;
1.設(shè)置自身的frame
self.width = self.superview.width;
self.height = isLandscape ?
kDockItemHeight : kDockItemHeight * count;
self.y = self.superview.height
- self.height;
2.設(shè)置子控件的frame
for (NSInteger i = 0; i < count;
i++) {
2.1取出當(dāng)前的子控件
UIButton *item = self.subviews[i];
2.2設(shè)置子控件的frame
item.width = isLandscape ? self.width
/ count : self.width;
item.height = kDockItemHeight;
item.x = isLandscape ? item.width * i : 0;
item.y = isLandscape ? 0 : item.height * i;
}
}
豎屏效果
添加Tabbar的子控件
一.添加Tabbar子控件,并自定義TabbarItem繼承UIbutton
const CGFloat kRatio = 0.4;
- (void)setupItemsWithImageName:(NSString *)imageName
title:(NSString *)title
{
TabbarItem *item = [[TabbarItem alloc] init];
1.設(shè)置文字
[item setTitle:title forState:UIControlStateNormal];
2.設(shè)置圖標(biāo)
[item setImage:[UIImage imageNamed:imageName]
forState:UIControlStateNormal];
3.選中背景圖片
[item setBackgroundImage:[UIImage imageNamed:@"tabbar_separate_selected_bg"]
forState:UIControlStateSelected];
4.設(shè)置tag
item.tag = self.subviews.count;
[self addSubview:item];
5.監(jiān)聽(tīng)點(diǎn)擊
[item addTarget:self action:@selector(itemClick:)
forControlEvents:UIControlEventTouchDown];
}
pragma mark - 事件點(diǎn)擊
- (void)itemClick:(UIButton *)item
{
self.seletedBtn.selected =NO;
self.seletedBtn = item;
self.seletedBtn.selected =YES;
}
- (void)rotateToLandscape:(BOOL)isLandscape
{
0.獲取當(dāng)前子控件的個(gè)數(shù)
NSInteger count = self.subviews.count;
1.設(shè)置自身的frame
self.width = self.superview.width;
self.height = kDockItemHeight *
count;
2.設(shè)置子控件的frame
for (NSInteger i = 0; i < count;
i++) {
2.1取出子控件
UIButton *item = self.subviews[i];
2.2設(shè)置子控件的frame
item.width = self.width;
item.height = kDockItemHeight;
item.y = i * item.height;
}
}
@implementation
TabbarItem
- (instancetype)initWithFrame:(CGRect)frame
{
if (self
= [super initWithFrame:frame]) {
設(shè)置圖標(biāo)內(nèi)容模式
self.imageView.contentMode
= UIViewContentModeCenter;
}
return
self;
}
返回UIButton圖片的frame
(CGRect)imageRectForContentRect:(CGRect)contentRect
{
1.判斷當(dāng)前屏幕方向
if (self.width == self.height) { // 豎屏
return self.bounds;
} else { 橫屏
CGFloat width = self.width
- kRatio;
CGFloat height = self.height;
CGFloat x = 0;
CGFloat y = 0;
return CGRectMake(x, y,
width, height);
}
}
返回UIButton文字的frame
(CGRect)titleRectForContentRect:(CGRect)contentRect
{
1.判斷當(dāng)前屏幕方向
if (self.width == self.height) { 豎屏
return CGRectZero;
} else { 橫屏
CGFloat width = self.width
- (1 - kRatio);
CGFloat height = self.height;
CGFloat x = self.width
- kRatio;
CGFloat y = 0;
return CGRectMake(x, y,
width, height);
}
}
@end
豎屏效果
IconButton內(nèi)容設(shè)置和BottomMenu子控件點(diǎn)擊
一.IconButton設(shè)置文字與圖標(biāo)
- (instancetype)initWithFrame:(CGRect)frame
{
if (self
= [super initWithFrame:frame]) {
1.設(shè)置圖片
[self setImage:[UIImage
imageNamed:@"Easy"]
forState:UIControlStateNormal];
2.設(shè)置文字
[self setTitle:@"哈哈" forState:UIControlStateNormal];
self.titleLabel.textAlignment
= NSTextAlignmentCenter;
}
return
self;
}
返回UIButton中圖片frame
(CGRect)imageRectForContentRect:(CGRect)contentRect
{
1.判斷當(dāng)前屏幕方向
if (self.width == self.height) { 豎屏
return self.bounds;
} else { 橫屏
CGFloat width = self.width;
CGFloat height = width;
CGFloat x = 0;
CGFloat y = 0;
return CGRectMake(x, y,
width, height);
}
}
返回UIButton中文字frame
(CGRect)titleRectForContentRect:(CGRect)contentRect
{
1.判斷當(dāng)前屏幕方向
if (self.width == self.height) { 豎屏
return CGRectZero;
} else { 橫屏
CGFloat width = self.width;
CGFloat height = kIconButtonLandscapeTitleH;
CGFloat x = 0;
CGFloat y = width;
return CGRectMake(x, y,
width, height);
}
}
二.監(jiān)聽(tīng)BottomMenu的點(diǎn)擊,使用代理,并設(shè)置按鈕枚舉類(lèi)型
typedef enum {
BottomMenuTypeMood, 發(fā)表心情
BottomMenuTypePhoto, 發(fā)表相冊(cè)
BottomMenuTypeBlog, 發(fā)表日志
}
BottomMenuType;
- (instancetype)initWithFrame:(CGRect)frame
{
if (self
= [super initWithFrame:frame]) {
初始化子控件
[self
setupItemsWithImageName:@"tabbar_mood"
type:BottomMenuTypeMood];
[self
setupItemsWithImageName:@"tabbar_photo"
type:BottomMenuTypePhoto];
[self
setupItemsWithImageName:@"tabbar_blog"
type:BottomMenuTypeBlog];
}
return
self;
}
pragma mark - 初始化子控件
- (void)setupItemsWithImageName:(NSString *)imageName
type:(BottomMenuType)type
{
UIButton *item = [[UIButton alloc] init];
1.設(shè)置圖標(biāo)
[item setImage:[UIImage imageNamed:imageName]
forState:UIControlStateNormal];
2.高亮背景顏色
[item setBackgroundImage:[UIImage imageNamed:@"tabbar_separate_selected_bg"]
forState:UIControlStateHighlighted];
[self addSubview:item];
3.設(shè)置tag
item.tag = type;
4.監(jiān)聽(tīng)事件點(diǎn)擊
[item addTarget:self action:@selector(itemClick:)
forControlEvents:UIControlEventTouchUpInside];
}
pragma mark - 事件點(diǎn)擊
- (void)itemClick:(UIButton *)item
{
if ([self.delegate
respondsToSelector:@selector(menu:didClickBottomMenuType:)])
{
[self.delegate menu:self didClickBottomMenuType:(int)item.tag];
}
}
三.讓控制器成為BottomMenu的代理,講BottomMenu屬性允許訪(fǎng)問(wèn),并設(shè)置只讀模式
/** 底部菜單*/
@property (nonatomic, weak, readonly) BottomMenu
*menu;
四.實(shí)現(xiàn)代理方法,并創(chuàng)建mood控制器,以modal的形式彈出
- (void)menu:(BottomMenu *)menu
didClickBottomMenuType:(BottomMenuType)type
{
switch (type) {
case
BottomMenuTypeMood:
{
MoodViewController *moodVC =
[[MoodViewController alloc] init];
CustomNavigationController *moodNav =
[[CustomNavigationController alloc] initWithRootViewController:moodVC];
moodNav.modalPresentationStyle =
UIModalPresentationFormSheet;
[self
presentViewController:moodNav animated:YES
completion:nil];
}
break;
case
BottomMenuTypePhoto:
NSLog(@"點(diǎn)擊了發(fā)表圖片");
break;
case
BottomMenuTypeBlog:
NSLog(@"點(diǎn)擊了發(fā)表日志");
break;
default:
break;
}
}
豎屏效果
五
modal的介紹
1.呈現(xiàn)樣式 :Modal出來(lái)的控制器滋早，最終顯示出來(lái)的樣子
Modal常見(jiàn)有4種呈現(xiàn)樣式
UIModalPresentationFullScreen ：全屏顯示（默認(rèn)）
UIModalPresentationPageSheet
寬度：豎屏?xí)r的寬度（768）
高度：當(dāng)前屏幕的高度（填充整個(gè)高度）
UIModalPresentationFormSheet ：占據(jù)屏幕中間的一小塊
UIModalPresentationCurrentContext ：跟隨父控制器的呈現(xiàn)樣式
1.過(guò)渡樣式
:Modal出來(lái)的控制器杆麸，是以怎樣的動(dòng)畫(huà)呈現(xiàn)出來(lái)
Modal一共4種過(guò)渡樣式
UIModalTransitionStyleCoverVertical ：從底部往上鉆（默認(rèn)）
UIModalTransitionStyleFlipHorizontal ：三維翻轉(zhuǎn)
UIModalTransitionStyleCrossDissolve ：淡入淡出
UIModalTransitionStylePartialCurl ：翻頁(yè)（只顯示部分昔头，使用前提：呈現(xiàn)樣式必須是UIModalPresentationFullScreen）
tabbar點(diǎn)擊和全部動(dòng)態(tài)的UISegmentControl
1.tabbar代理監(jiān)聽(tīng)點(diǎn)擊
@class Tabbar;
@protocol TabbarDelegate <NSObject>
@optional
(void)tabbar:(Tabbar *)tabbar
from:(NSInteger)from to:(NSInteger)to;
@end
pragma mark - 事件點(diǎn)擊
(void)itemClick:(UIButton *)item
{
1.調(diào)用代理方法
if ([self.delegate
respondsToSelector:@selector(tabbar:from:to:)])
{
[self.delegate tabbar:self from:self.seletedBtn.tag
to:item.tag];
}
2.點(diǎn)擊反選
self.seletedBtn.selected =NO;
self.seletedBtn = item;
self.seletedBtn.selected =YES;
}
pragma mark Tabbar代理
(void)tabbar:(Tabbar *)tabbar
from:(NSInteger)from to:(NSInteger)to
{
1.獲取上一個(gè)下標(biāo)控制器的View,并從self.view中移除
UIViewController *previousVC = self.childViewControllers[from];
[previousVC.view removeFromSuperview];
2.獲取當(dāng)前小標(biāo)控制器的View,并添加到self.view中
UIViewController *currentVC = self.childViewControllers[to];
[self.contentView
addSubview:currentVC.view];
3.設(shè)置當(dāng)前內(nèi)容View的frame
currentVC.view.frame = self.contentView.bounds;
4.記錄當(dāng)前控制器下標(biāo)
self.currentIndex = to;
}
二.IconButton點(diǎn)擊
初始化Dock中監(jiān)聽(tīng)I(yíng)conButton點(diǎn)擊
pragma mark IconButton點(diǎn)擊
(void)iconButtonClick
{
1.切換內(nèi)容控制器
[self tabbar:nil
from:self.currentIndex to:self.childViewControllers.count - 1];
2.取消其他選中
[self.dock.tb unSeleted];
}
三.創(chuàng)建全部動(dòng)態(tài)控制器,設(shè)置導(dǎo)航條textView為UISegmentController
(void)viewDidLoad {
[super viewDidLoad];
1.設(shè)置背景顏色
self.view.backgroundColor = [UIColor
whiteColor];
2.設(shè)置中間segmentController
UISegmentedControl *segControl =
[[UISegmentedControl alloc] initWithItems:@[@"全部", @"特別關(guān)心", @"好友動(dòng)態(tài)", @"認(rèn)證空間"]];
self.navigationItem.titleView =
segControl;
segControl.selectedSegmentIndex = 0;
3.設(shè)置UISegmentedControl顏色
segControl.tintColor = [UIColor lightGrayColor];
NSDictionary *attrDict = @{NSForegroundColorAttributeName: [UIColor
blackColor]};
[segControl setTitleTextAttributes:attrDict
forState:UIControlStateNormal];
4.監(jiān)聽(tīng)UISegmentedControl點(diǎn)擊
[segControl addTarget:self action:@selector(segControlClick:)
forControlEvents:UIControlEventValueChanged];
}
(void)segControlClick:(UISegmentedControl
*)segControl
{
NSLog(@"%ld",segControl.selectedSegmentIndex);
}
四:去除背景色
豎屏效果
橫屏效果
