您的位置:首页 > 产品设计 > UI/UE

iOS 使用 Interface Builder 兼容 iOS6 和iOS7

2014-09-07 22:33 561 查看
当你在更新你的App到iOS7的平台时遇到最大的挑战之一就是确保不要遗忘那些还在使用iOS6平台的用户,在此我们提供一些建议使你的App应用在iOS6和iOS7上同时保留视觉吸引力和技术功能.



此图为InterfaceBuilder中顶部和底部布局指南

设置正确的InterfaceBuilderStoryboard或者正确设置XIBs文件,对于iOS6和iOS7的开发大有帮助,使得开发更加容易。我们的第一个建议是为全部的UIViewController创建Storyboard,UIViewControl是合成的或者是跨越整个屏幕高度的控制试图(ControlViews).如果你正在做的项目是使用XIBs文件开发的,而没有使用Storyboards,那么Storyboards可以尽可能的简化为带有视图容器(ViewContainer)的“UIViewController",将来你可以从NIB文件加载。我们这样建议的主要原因是这样操作你可以获得访问在Interface
Builder中顶部和底部布局指南的权限。



InterfaceBuilder中”Viewas“配置,这个设置是每个文件(NIB或者Storyboard)的基础设置。

另外,我们还建议您把所有的XIBs和Storyboard中的Viewas设置为iOS7andLater,这种设置方式将更加容易降低未来的iOS6的支持,此外,如果您没有使用自动布局,那么就会更加容易更加直观的使用iOS
6/7Delta。

AdjustingfortheStatusBar

IniOS7,theareabehindthestatusbarbecomes
useablescreenspace.Asaresult,thewindowiniOS7is20pointstallerthanitisiniOS6.ThiscancausecontentatthetopofthescreentoappearunderneaththestatusbariniOS7.AdjustingviewstomakeuseoforavoidthisextraspaceiniOS7
frequentlycausesviewstobemisplacediniOS6.

ContentundertheStatusBariniOS7.

ContentbeingpushedoffofthebottomofthescreeniniOS6.
Ifyourprojectdoesn’tuseAutoLayout,issuescaused
bythestatusbardifferencesbetweeniOS6andiOS7canberesolvedbyusingSprings,Struts,andiOS6/7Deltas.Inordertopreventthecontentfrombeingplacedunderthestatusbar,simplymovethecontentdown,howevermanypointsarenecessary,to
getthecontentoutfromunderthestatusbar.However,thiscausesthecontenttobemoveddowniniOS6aswell,whichwedidn’twant,sincethecontentwasn’tunderthestatusbariniOS6.Toremedythis,useiOS6/7DeltastosetanegativeYDeltaequal
tothenumberofpointsthatwemovedthecontentdownforiOS7.Forexample,ifwemovedcontentdown20pointsforiOS7,thenwesetaYDeltaof-20points.Forcontentnearthebottomofthescreen,itisofteneasierandmorerobusttosimplyusecorrectly
configuredstrutsandsprings,insteadofiOS6/7Deltas,topositionthecontentrelativetothebottomofthescreen.Averysimilartacticcanbeusedwhenadjustingviewsthatspantheentireheightofthescreen.Adjusttheheightand/ororigininyour
StoryboardorXIBtoachievethesizeandpositionyouwouldlikeiniOS7,andthenuseYand/orHeightDeltas,incombinationwithSpringsandStruts,toresolvethesizeand/orpositioniniOS6.Below,Ihaveprovidedasimpleexample,usingtwoimage
views(oneatthetopofthescreenandoneatthebottomofthescreen).

InterfaceBuildersettingsforthetopUIImageViewtokeepitdirectlyundertheStatusBariniOS7andiOS6.

InterfaceBuildersettingsforthebottomUIImageViewtopreventitfrombeingpushedoffofthebottomofthe
screen.
AutoLayoutmakessolvingissuescausedbythestatusbardifferencessimpler,assumingyouareusingStoryboards,asmentionedbefore.SimplyusetheTopandBottomLayoutGuidesprovidedbyInterfaceBuilder.Ifyoumakeyourtopandbottom
NSLayoutConstraint
s
relativetotheTopandBottomLayoutGuides(insteadofthetopandbottomoftherootview),theniOSwillautomaticallymaketheadjustmentsnecessarytohaveeverythinglaidoutonscreenandoutfromunderthestatusbar,inbothiOS6andiOS7.Ifyou
aren’tabletouseStoryboards,youwilllikelyneedtousecodetoaccesstheTopandBottomLayoutGuides.Belowisthesameexampleasbefore,butresolvedusingAutoLayoutand
NSLayoutConstraint
s
thatarerelativetotheTopandBottomLayoutGuides.


ThetopUIImageView’stopconstraintsetrelativetoTopLayoutGuide.

ThebottomUIImageView’sbottomconstraintsetrelativetoBottomLayoutGuide.
Andnow,regardlessofwhetherStruts,Springs,andiOS6/7DeltasorAutoLayoutwithTopandBottomLayoutGuidesareused,everythingislaidoutcorrectlyiniOS6andiOS7.

iOS7aftermakingtheadjustmentsinInterfaceBuilder.

iOS6aftermakingtheadjustmentsinInterfaceBuilder.
AdjustingforaUINavigationControllerwithiOS7′sTranslucentUINavigationBar


Translucent
settingforUINavigationBarinInterfaceBuilder.

OneofthemorecommonchallengeswhensimultaneouslysupportingiOS6andiOS7withInterfaceBuilderissettinga
UINavigationController
’s
UINavigationBar
to
translucentforiOS7.Makingthe
UINavigationBar
translucentcanhaveafairlylargeimpactonyourviewsandwilllikelyrequireyoutomakesomechanges.


Extend
EdgessettinginInterfaceBuilder.

If
ExtendEdges
issetto
UnderTopBars
foraUIViewController,youwillnotice
thattogglingthe
Translucent
settingonthe
UINavigationBar
inInterface
Builderwillcausetheviewstomoveupanddown.Settingthe
UINavigationBar
totranslucentcausesviewstomoveupunderthe
UINavigationBar
in
iOS7.IniOS6nothingchanges;theviewsstaybelowthe
UINavigationBar
.Thisisduetotranslucent
UINavigationBar
s
deprecationiniOS6.Youwillnoticethatthe
BlackTranslucent
UIBarStyle
is
nowmarkedasdeprecated,andtheother
UIBarStyle
screateopaque
UINavigationBar
s
iniOS6.Thiscausesasituationverysimilartothenewstatusbarthatwediscussedintheprevioussection,wheretheuseablescreenspaceistalleriniOS7thanitisiniOS6.

Mostoftheissuesthatadjustingthetranslucencyofthe
UINavigationBar
createscanbefixedusingthesamemethodologyasdiscussedintheprevioussection.However,
anextrastepmaybenecessaryifoneormoreoftheviewsthatgetsmovedupunderthe
UINavigationBar
isa
UIScrollView
(or
asubclassof
UIScrollView
,suchas
UITableView
).IfyouareusingaStoryboard
tobuildoutthe
UIScrollView
(orsubclass)thatgetsmovedupunderthe
UINavigationBar
,
thenthecontentinsetswilllikelygetsetautomatically.Theautomaticallyadjustedcontentinsetsensurethatthecontentwithinthe
UIScrollView
willhaveaninitial
offsetthatputsitbelowthe
UINavigationBar
,and,thus,immediatelyvisibletotheuser.However,ifthe
UIScrollView
(or
subclass)thatgetsmovedupunderthe
UINavigationBar
ishandledinalessdirectway(forexampleifitisbuiltinaXIBandlaterloadedintoacontainerview),
thenyoumayneedtosetthecontentinsetsyourself.

ItispossibletosetcontentinsetsinInterfaceBuilder,but,inthiscase,Iwouldsuggestdoingsoincode,foracoupleofreasons.First,weonlywanttosettheinsetsforiOS7andnotiOS6,whichisnotpossibleinInterfaceBuilder.Second,since
weonlywanttosetthecontentinsetswhenrunninginiOS7,wecanusetheTopLayoutGuidetohelpussetthecontentinsets(evenifyourStoryboardorXIBdoesn’tuseAutoLayout).Belowisanexampleofhowthiscanbeaccomplished.Intheexample,I
useda
UITableView
insteadofa
UIScrollView
sincethatisamorecommoncase.
BesureyouareoniOS7orlaterbeforeaccessingthe
topLayoutGuide
propertyof
UIViewController
.

1
if
([[[UIDevicecurrentDevice]systemVersion]floatValue]>=7.0f){
2
CGFloattopInset=self.tableView.contentInset.top+[self.topLayoutGuidelength];
3
CGFloatleftInset=self.tableView.contentInset.left;
4
CGFloatbottomInset=self.tableView.contentInset.bottom;
5
CGFloatrightInset=self.tableView.contentInset.right;
6
7
self.tableView.contentInset=UIEdgeInsetsMake(topInset,leftInset,bottomInset,rightInset);
8
}
MakingyourappvisuallyappealingandfullyfunctionalonbothiOS6and7canbequitethechallenge,particularlysinceeveryappisuniquelyconstructed.AnticipatingandcoveringeverypossiblesituationthatdeveloperswillrunintowhensupportingiOS
6andiOS7simultaneouslyisnearlyimpossible;hopefully,thisarticlewillhelpwithsomecommoncasesandputyouontherighttrackforhandlingtherareorcomplexcases.
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: