onboard主要用於引導頁製作,原始碼寫的相當規範,值得參考.
設定背景或者背景movie,然後在它們之上生成數個viewcontroller,預設是頂部一張,下面是標題和詳細介紹,最下面是按鈕和page
pod 'onboard'
蒙板控制器生成方法onboardingcontentviewcontroller *firstpage = [onboardingcontentviewcontroller contentwithtitle:@"what a beautiful photo" body:@"this city background image is so beautiful." image:[uiimage imagenamed:@"blue"] buttontext:@"enable location services" action:^];
onboardingcontentviewcontroller *secondpage = [onboardingcontentviewcontroller contentwithtitle:@"i'm so sorry" body:@"i can't get over the nice blurry background photo." image:[uiimage imagenamed:@"red"] buttontext:@"connect with facebook" action:^];
secondpage.movestonextviewcontroller = yes;
};
onboardingcontentviewcontroller *thirdpage = [onboardingcontentviewcontroller contentwithtitle:@"seriously though" body:@"kudos to the photographer." image:[uiimage imagenamed:@"yellow"] buttontext:@"get started" action:^];
底部控制器onboardin**iewcontroller *onboardin**c = [onboardin**iewcontroller onboardwithbackgroundimage:[uiimage imagenamed:@"milky_way.jpg"] contents:@[firstpage, secondpage, thirdpage]];
底部video控制器nsbundle *bundle = [nsbundle mainbundle];
nsstring *moviepath = [bundle pathforresource:@"yourvid" oftype:@"mp4"];
nsurl *movieurl = [nsurl fileurlwithpath:moviepath];
onboardin**iewcontroller *onboardin**c = [onboardin**iewcontroller onboardwithbackgroundvideourl:movieurl contents:@[firstpage, secondpage, thirdpage]];
onboardin**c.shouldfadetransitions = yes;
onboardin**c.shouldblurbackground = yes;
onboardin**c.shouldfadetransitions = yes;
注: 文章由我們 ios122 的小夥伴@酌晨茗整理,喜歡就一起參與: ios122 任務池 實現引導頁 APP介面設計中的引導頁!
文 張麗 引導頁即是使用者在首次使用軟體時進行產品推介和引導的說明書,使使用者在最短的時間內了解這個軟體的主要功能 操作方式,以便於迅速上手。引導頁具有指引使用者了解和掌握軟體應用的功能 特性操作方法等作用,根據軟體應用的安裝情況,從位置上一般將引導頁分為前置引導和中間引導。前置引導。所謂前置引導即...
IOS引導頁的編寫
新建乙個類,繼承uiview,假設名為guide。在initwithframe方法裡 cgfloat screenheight uiscreen mainscreen bounds.size.height uiscrollview scrollview uiscrollview alloc init...
html引導頁的實現
使用無限大的陰影 使用js禁用body的touchmove事件 使用乙個透明層遮住 使用transition過渡即可 步驟1div div class step class step address 步驟2div div class step class step address 步驟3div di...