iOS開發(fā)--仿新聞首頁效果WMPageController的使用詳解
這一篇記錄的是iOS開發(fā)中第三方庫WMPageController控件的使用方法,主要是用來分頁顯示內(nèi)容的,可以通過手勢滑動(dòng)來切換頁面,也可以通過點(diǎn)擊標(biāo)題部分來切換頁面,如下圖所示:
使用方法:
新建工程DemoTest1,然后通過cocoapods引入WMPageController到項(xiàng)目中,Podfile文件的內(nèi)容如下:
platform :ios,'7.0' target 'DemoTest1' do pod 'WMPageController', '~> 1.6.4' end
方法一:
(1)創(chuàng)建幾個(gè)ViewController繼承自UIViewController測試用:
(2)打開AppDelegate.m文件,在其中加入下面一個(gè)方法:
#import "WMPageController.h" #import "OneViewController.h" #import "ViewController.h" #import "TwoViewController.h" @interface AppDelegate () @property(nonatomic,strong) WMPageController *createPages; @end @implementation AppDelegate - (WMPageController *)createPages { //WMPageController中包含的頁面數(shù)組 NSArray *controllers = [NSArray arrayWithObjects:[ViewController class], [OneViewController class],[TwoViewController class], nil]; //WMPageController控件的標(biāo)題數(shù)組 NSArray *titles = [NSArray arrayWithObjects:@"體育新聞", @"娛樂新聞",@"直播新聞", nil]; //用上面兩個(gè)數(shù)組初始化WMPageController對(duì)象 WMPageController *pageController = [[WMPageController alloc] initWithViewControllerClasses:controllers andTheirTitles:titles]; pageController.menuViewStyle = WMMenuViewStyleLine; pageController.titleColorSelected = [UIColor whiteColor]; pageController.titleColorNormal = [UIColor colorWithRed:168.0/255.0 green:20.0/255.0 blue:4/255.0 alpha:1]; pageController.progressColor = [UIColor colorWithRed:168.0/255.0 green:20.0/255.0 blue:4/255.0 alpha:1]; // pageController.itemsWidths = @[@(70),@(100),@(70)]; // 這里可以設(shè)置不同的寬度 //設(shè)置WMPageController每個(gè)標(biāo)題的寬度 pageController.menuItemWidth = 375/3; //設(shè)置WMPageController標(biāo)題欄的高度 pageController.menuHeight = 35; //設(shè)置WMPageController選中的標(biāo)題的顏色 pageController.titleColorSelected = [UIColor colorWithRed:200 green:0 blue:0 alpha:1]; return pageController; } - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; WMPageController *page = [self createPages]; UINavigationController *na = [[UINavigationController alloc] initWithRootViewController:page]; self.window.rootViewController = na; [self.window makeKeyAndVisible]; return YES; }
方法二:
(1)創(chuàng)建個(gè)ViewController繼承自WMPageController
(2)編輯ViewController.m文件,代碼如下:
初始化設(shè)置:
#import "TwoViewController.h" #import "OneViewController.h" #import "TableViewController.h" #import "ThreeViewController.h" @interface ThreeViewController () @property (nonatomic, strong) NSArray *titleData; @end @implementation ThreeViewController #pragma mark 標(biāo)題數(shù)組 - (NSArray *)titleData { if (!_titleData) { _titleData = @[@"單曲", @"詳情", @"歌詞",@"歌詞"]; } return _titleData; } #pragma mark 初始化代碼 - (instancetype)init { if (self = [super init]) { self.titleSizeNormal = 15; self.titleSizeSelected = 15; self.menuViewStyle = WMMenuViewStyleLine; self.menuItemWidth = [UIScreen mainScreen].bounds.size.width / self.titleData.count; self.menuHeight = 50; } return self; }
WMPageController --Datasource & Delegate
#pragma mark - Datasource & Delegate #pragma mark 返回子頁面的個(gè)數(shù) - (NSInteger)numbersOfChildControllersInPageController:(WMPageController *)pageController { return self.titleData.count; } #pragma mark 返回某個(gè)index對(duì)應(yīng)的頁面 - (UIViewController *)pageController:(WMPageController *)pageController viewControllerAtIndex:(NSInteger)index { switch (index) { case 0:{ TwoViewController *vcClass = [[TwoViewController alloc] init]; vcClass.title = @"1"; return vcClass; } break; case 1:{ OneViewController *vcClass = [OneViewController new]; vcClass.title = @"2"; return vcClass; } break; case 2:{ TableViewController *vcClass = [TableViewController new]; vcClass.title = @"3"; return vcClass; } break; default:{ OneViewController *vcClass = [OneViewController new]; vcClass.title = @"4"; return vcClass; } break; } } #pragma mark 返回index對(duì)應(yīng)的標(biāo)題 - (NSString *)pageController:(WMPageController *)pageController titleAtIndex:(NSInteger)index { return self.titleData[index]; }
相關(guān)設(shè)置:
/** * Values and keys can set properties when initialize child controlelr (it's KVC) * values keys 屬性可以用于初始化控制器的時(shí)候?yàn)榭刂破鱾髦?利用 KVC 來設(shè)置) 使用時(shí)請(qǐng)確保 key 與控制器的屬性名字一致??!(例如:控制器有需要設(shè)置的屬性 type,那么 keys 所放的就是字符串 @"type") */ @property (nonatomic, strong) NSMutableArray<id> *values; @property (nonatomic, strong) NSMutableArray<NSString *> *keys; /** * 各個(gè)控制器的 class, 例如:[UITableViewController class] * Each controller's class, example:[UITableViewController class] */ @property (nonatomic, copy) NSArray<Class> *viewControllerClasses; /** * 各個(gè)控制器標(biāo)題 * Titles of view controllers in page controller. */ @property (nonatomic, copy) NSArray<NSString *> *titles; @property (nonatomic, strong, readonly) UIViewController *currentViewController; /** * 設(shè)置選中幾號(hào) item * To select item at index */ @property (nonatomic, assign) int selectIndex; /** * 點(diǎn)擊相鄰的 MenuItem 是否觸發(fā)翻頁動(dòng)畫 (當(dāng)當(dāng)前選中與點(diǎn)擊Item相差大于1是不觸發(fā)) * Whether to animate when press the MenuItem, if distant between the selected and the pressed is larger than 1,never animate. */ @property (nonatomic, assign) BOOL pageAnimatable; /** * 選中時(shí)的標(biāo)題尺寸 * The title size when selected (animatable) */ @property (nonatomic, assign) CGFloat titleSizeSelected; /** * 非選中時(shí)的標(biāo)題尺寸 * The normal title size (animatable) */ @property (nonatomic, assign) CGFloat titleSizeNormal; /** * 標(biāo)題選中時(shí)的顏色, 顏色是可動(dòng)畫的. * The title color when selected, the color is animatable. */ @property (nonatomic, strong) UIColor *titleColorSelected; /** * 標(biāo)題非選擇時(shí)的顏色, 顏色是可動(dòng)畫的. * The title's normal color, the color is animatable. */ @property (nonatomic, strong) UIColor *titleColorNormal; /** * 標(biāo)題的字體名字 * The name of title's font */ @property (nonatomic, copy) NSString *titleFontName; /** * 導(dǎo)航欄高度 * The menu view's height */ @property (nonatomic, assign) CGFloat menuHeight; // 當(dāng)所有item的寬度加起來小于屏幕寬時(shí),PageController會(huì)自動(dòng)幫助排版,添加每個(gè)item之間的間隙以填充整個(gè)寬度 // When the sum of all the item's width is smaller than the screen's width, pageController will add gap to each item automatically, in order to fill the width. /** * 每個(gè) MenuItem 的寬度 * The item width,when all are same,use this property */ @property (nonatomic, assign) CGFloat menuItemWidth; /** * 各個(gè) MenuItem 的寬度,可不等,數(shù)組內(nèi)為 NSNumber. * Each item's width, when they are not all the same, use this property, Put `NSNumber` in this array. */ @property (nonatomic, copy) NSArray<NSNumber *> *itemsWidths; /** * 導(dǎo)航欄背景色 * The background color of menu view */ @property (nonatomic, strong) UIColor *menuBGColor; /** * Menu view 的樣式,默認(rèn)為無下劃線 * Menu view's style, now has two different styles, 'Line','default' */ @property (nonatomic, assign) WMMenuViewStyle menuViewStyle; @property (nonatomic, assign) WMMenuViewLayoutMode menuViewLayoutMode; /** * 進(jìn)度條的顏色,默認(rèn)和選中顏色一致(如果 style 為 Default,則該屬性無用) * The progress's color,the default color is same with `titleColorSelected`.If you want to have a different color, set this property. */ @property (nonatomic, strong) UIColor *progressColor; /** * 定制進(jìn)度條在各個(gè) item 下的寬度 */ @property (nonatomic, strong) NSArray *progressViewWidths; /// 定制進(jìn)度條,若每個(gè)進(jìn)度條長度相同,可設(shè)置該屬性 @property (nonatomic, assign) CGFloat progressWidth; /// 調(diào)皮效果,用于實(shí)現(xiàn)騰訊視頻新效果,請(qǐng)?jiān)O(shè)置一個(gè)較小的 progressWidth @property (nonatomic, assign) BOOL progressViewIsNaughty; /** * 是否發(fā)送在創(chuàng)建控制器或者視圖完全展現(xiàn)在用戶眼前時(shí)通知觀察者,默認(rèn)為不開啟,如需利用通知請(qǐng)開啟 * Whether notify observer when finish init or fully displayed to user, the default is NO. * See `WMPageConst.h` for more information. */ @property (nonatomic, assign) BOOL postNotification; /** * 是否記錄 Controller 的位置,并在下次回來的時(shí)候回到相應(yīng)位置,默認(rèn)為 NO (若當(dāng)前緩存中存在不會(huì)觸發(fā)) * Whether to remember controller's positon if it's a kind of scrollView controller,like UITableViewController,The default value is NO. * 比如 `UITabelViewController`, 當(dāng)然你也可以在自己的控制器中自行設(shè)置, 如果將 Controller.view 替換為 scrollView 或者在Controller.view 上添加了一個(gè)和自身 bounds 一樣的 scrollView 也是OK的 */ @property (nonatomic, assign) BOOL rememberLocation __deprecated_msg("Because of the cache policy,this property can abondon now."); /** 緩存的機(jī)制,默認(rèn)為無限制 (如果收到內(nèi)存警告, 會(huì)自動(dòng)切換) */ @property (nonatomic, assign) WMPageControllerCachePolicy cachePolicy; /** 預(yù)加載機(jī)制,在停止滑動(dòng)的時(shí)候預(yù)加載 n 頁 */ @property (nonatomic, assign) WMPageControllerPreloadPolicy preloadPolicy; /** Whether ContentView bounces */ @property (nonatomic, assign) BOOL bounces; /** * 是否作為 NavigationBar 的 titleView 展示,默認(rèn) NO * Whether to show on navigation bar, the default value is `NO` */ @property (assign, nonatomic) BOOL showOnNavigationBar; /** * 用代碼設(shè)置 contentView 的 contentOffset 之前,請(qǐng)?jiān)O(shè)置 startDragging = YES * Set startDragging = YES before set contentView.contentOffset = xxx; */ @property (nonatomic, assign) BOOL startDragging; /** 下劃線進(jìn)度條的高度 */ @property (nonatomic, assign) CGFloat progressHeight; /** WMPageController View' frame */ @property (nonatomic, assign) CGRect viewFrame; /** * Menu view items' margin / make sure it's count is equal to (controllers' count + 1),default is 0 頂部菜單欄各個(gè) item 的間隙,因?yàn)榘^尾兩端,所以確保它的數(shù)量等于控制器數(shù)量 + 1, 默認(rèn)間隙為 0 */ @property (nonatomic, copy) NSArray<NSNumber *> *itemsMargins; /** * set itemMargin if all margins are the same, default is 0 如果各個(gè)間隙都想同,設(shè)置該屬性,默認(rèn)為 0 */ @property (nonatomic, assign) CGFloat itemMargin; /** 頂部 menuView 和 scrollView 之間的間隙 */ @property (nonatomic, assign) CGFloat menuViewBottomSpace; /** progressView 到 menuView 底部的距離 */ @property (nonatomic, assign) CGFloat progressViewBottomSpace; /** progressView's cornerRadius */ @property (nonatomic, assign) CGFloat progressViewCornerRadius; /** 頂部導(dǎo)航欄 */ @property (nonatomic, weak) WMMenuView *menuView; /** 內(nèi)部容器 */ @property (nonatomic, weak) WMScrollView *scrollView; /** MenuView 內(nèi)部視圖與左右的間距 */ @property (nonatomic, assign) CGFloat menuViewContentMargin; /** * 左滑時(shí)同時(shí)啟用其他手勢,比如系統(tǒng)左滑、sidemenu左滑。默認(rèn) NO (會(huì)引起一個(gè)小問題,第一個(gè)和最后一個(gè)控制器會(huì)變得可以斜滑, 還未解決) */ @property (assign, nonatomic) BOOL otherGestureRecognizerSimultaneously; /** * 構(gòu)造方法,請(qǐng)使用該方法創(chuàng)建控制器. 或者實(shí)現(xiàn)數(shù)據(jù)源方法. / * Init method,recommend to use this instead of `-init`. Or you can implement datasource by yourself. * * @param classes 子控制器的 class,確保數(shù)量與 titles 的數(shù)量相等 * @param titles 各個(gè)子控制器的標(biāo)題,用 NSString 描述 * * @return instancetype */ - (instancetype)initWithViewControllerClasses:(NSArray<Class> *)classes andTheirTitles:(NSArray<NSString *> *)titles; /** * A method in order to reload MenuView and child view controllers. If you had set `itemsMargins` or `itemsWidths` `values` and `keys` before, make sure you have update them also before you call this method. And most important, PAY ATTENTION TO THE COUNT OF THOSE ARRAY. 該方法用于重置刷新父控制器,該刷新包括頂部 MenuView 和 childViewControllers.如果之前設(shè)置過 `itemsMargins` 和 `itemsWidths` `values` 以及 `keys` 屬性,請(qǐng)確保在調(diào)用 reload 之前也同時(shí)更新了這些屬性。并且,最最最重要的,注意數(shù)組的個(gè)數(shù)以防止溢出。 */ - (void)reloadData; /** * Update designated item's title 更新指定序號(hào)的控制器的標(biāo)題 * * @param title 新的標(biāo)題 * @param index 目標(biāo)序號(hào) */ - (void)updateTitle:(NSString *)title atIndex:(NSInteger)index; /** * Update designated item's title and width 更新指定序號(hào)的控制器的標(biāo)題以及他的寬度 * * @param title 新的標(biāo)題 * @param index 目標(biāo)序號(hào) * @param width 對(duì)應(yīng)item的新寬度 */ - (void)updateTitle:(NSString *)title andWidth:(CGFloat)width atIndex:(NSInteger)index; /** 當(dāng) app 即將進(jìn)入后臺(tái)接收到的通知 */ - (void)willResignActive:(NSNotification *)notification; /** 當(dāng) app 即將回到前臺(tái)接收到的通知 */ - (void)willEnterForeground:(NSNotification *)notification;
源碼demo:源碼下載
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
ios 實(shí)現(xiàn)倒計(jì)時(shí)的兩種方式
這篇文章主要介紹了ios實(shí)現(xiàn)倒計(jì)時(shí)的兩種方式,第一種方式使用NSTimer來實(shí)現(xiàn),第二種方式使用GCD來實(shí)現(xiàn)。具體內(nèi)容詳情大家參考下本文2017-01-01IOS設(shè)置QQ小紅點(diǎn)消除的方法(一鍵退朝)
這篇文章主要介紹了IOS設(shè)置QQ小紅點(diǎn)消除的方法(一鍵退朝),對(duì)ios設(shè)置小紅點(diǎn)消除相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01