iOS開發--仿新聞首頁效果WMPageController的使用詳解_IOS

這一篇記錄的是iOS開發中第三方庫WMPageController控制項的使用方法，主要是用來分頁顯示內容的，可以通過手勢滑動來切換頁面，也可以通過點擊標題部分來切換頁面，如下圖所示：

使用方法:

建立工程DemoTest1，然後通過cocoapods引入WMPageController到項目中，Podfile檔案的內容如下：

platform :ios,'7.0'target 'DemoTest1' do pod 'WMPageController', '~> 1.6.4'end

方法一：

（1）建立幾個ViewController繼承自UIViewController測試用：

（2）開啟AppDelegate.m檔案，在其中加入下面一個方法：

#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中包含的頁面數組  NSArray *controllers = [NSArray arrayWithObjects:[ViewController class], [OneViewController class],[TwoViewController class], nil];  //WMPageController控制項的標題數組  NSArray *titles = [NSArray arrayWithObjects:@"體育新聞", @"娛樂新聞",@"直播新聞", nil];  //用上面兩個數組初始化WMPageController對象  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)]; // 這裡可以設定不同的寬度  //設定WMPageController每個標題的寬度  pageController.menuItemWidth = 375/3;  //設定WMPageController標題列的高度  pageController.menuHeight = 35;  //設定WMPageController選中的標題的顏色  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）建立個ViewController繼承自WMPageController

（2）編輯ViewController.m檔案，代碼如下：

初始化設定：

#import "TwoViewController.h"#import "OneViewController.h"#import "TableViewController.h"#import "ThreeViewController.h"@interface ThreeViewController () @property (nonatomic, strong) NSArray *titleData;@end@implementation ThreeViewController#pragma mark 標題數組- (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 返回子頁面的個數- (NSInteger)numbersOfChildControllersInPageController:(WMPageController *)pageController {  return self.titleData.count;}#pragma mark 返回某個index對應的頁面- (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對應的標題- (NSString *)pageController:(WMPageController *)pageController titleAtIndex:(NSInteger)index {  return self.titleData[index];}

相關設定：

/** * Values and keys can set properties when initialize child controlelr (it's KVC) * values keys 屬性可以用於初始化控制器的時候為控制器傳值(利用 KVC 來設定)  使用時請確保 key 與控制器的屬性名稱字一致！！(例如：控制器有需要設定的屬性 type，那麼 keys 所放的就是字串 @"type") */@property (nonatomic, strong) NSMutableArray<id> *values;@property (nonatomic, strong) NSMutableArray<NSString *> *keys;/** * 各個控制器的 class, 例如:[UITableViewController class] * Each controller's class, example:[UITableViewController class] */@property (nonatomic, copy) NSArray<Class> *viewControllerClasses;/** * 各個控制器標題 * Titles of view controllers in page controller. */@property (nonatomic, copy) NSArray<NSString *> *titles;@property (nonatomic, strong, readonly) UIViewController *currentViewController;/** * 設定選中幾號 item * To select item at index */@property (nonatomic, assign) int selectIndex;/** * 點擊相鄰的 MenuItem 是否觸發翻頁動畫 (噹噹前選中與點擊Item相差大於1是不觸發) * 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;/** * 選中時的標題尺寸 * The title size when selected (animatable) */@property (nonatomic, assign) CGFloat titleSizeSelected;/** * 非選中時的標題尺寸 * The normal title size (animatable) */@property (nonatomic, assign) CGFloat titleSizeNormal;/** * 標題選中時的顏色, 顏色是可動畫的. * The title color when selected, the color is animatable. */@property (nonatomic, strong) UIColor *titleColorSelected;/** * 標題非選擇時的顏色, 顏色是可動畫的. * The title's normal color, the color is animatable. */@property (nonatomic, strong) UIColor *titleColorNormal;/** * 標題的字型名字 * The name of title's font */@property (nonatomic, copy) NSString *titleFontName;/** * 導覽列高度 * The menu view's height */@property (nonatomic, assign) CGFloat menuHeight;// 當所有item的寬度加起來小於螢幕寬時，PageController會自動協助排版，添加每個item之間的間隙以填充整個寬度// 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./** * 每個 MenuItem 的寬度 * The item width,when all are same,use this property */@property (nonatomic, assign) CGFloat menuItemWidth;/** * 各個 MenuItem 的寬度，可不等，數組內為 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;/** * 導覽列背景色 * The background color of menu view */@property (nonatomic, strong) UIColor *menuBGColor;/** * Menu view 的樣式，預設為無底線 * Menu view's style, now has two different styles, 'Line','default' */@property (nonatomic, assign) WMMenuViewStyle menuViewStyle;@property (nonatomic, assign) WMMenuViewLayoutMode menuViewLayoutMode;/** * 進度條的顏色，預設和選中顏色一致(如果 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;/** * 定製進度條在各個 item 下的寬度 */@property (nonatomic, strong) NSArray *progressViewWidths;/// 定製進度條，若每個進度條長度相同，可設定該屬性@property (nonatomic, assign) CGFloat progressWidth;/// 調皮效果，用於實現騰訊視頻新效果，請設定一個較小的 progressWidth@property (nonatomic, assign) BOOL progressViewIsNaughty;/** * 是否發送在建立控制器或者視圖完全展現在使用者眼前時通知觀察者，預設為不開啟，如需利用通知請開啟 * 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 的位置，並在下次回來的時候回到相應位置，預設為 NO (若當前緩衝中存在不會觸發) * Whether to remember controller's positon if it's a kind of scrollView controller,like UITableViewController,The default value is NO. * 比如 `UITabelViewController`, 當然你也可以在自己的控制器中自行設定, 如果將 Controller.view 替換為 scrollView 或者在Controller.view 上添加了一個和自身 bounds 一樣的 scrollView 也是OK的 */@property (nonatomic, assign) BOOL rememberLocation __deprecated_msg("Because of the cache policy,this property can abondon now.");/** 緩衝的機制，預設為無限制 (如果收到記憶體警告, 會自動切換) */@property (nonatomic, assign) WMPageControllerCachePolicy cachePolicy;/** 預先載入機制，在停止滑動的時候預先載入 n 頁 */@property (nonatomic, assign) WMPageControllerPreloadPolicy preloadPolicy;/** Whether ContentView bounces */@property (nonatomic, assign) BOOL bounces;/** * 是否作為 NavigationBar 的 titleView 展示，預設 NO * Whether to show on navigation bar, the default value is `NO` */@property (assign, nonatomic) BOOL showOnNavigationBar;/** * 用代碼設定 contentView 的 contentOffset 之前，請設定 startDragging = YES * Set startDragging = YES before set contentView.contentOffset = xxx; */@property (nonatomic, assign) BOOL startDragging;/** 底線進度條的高度 */@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  頂部功能表列各個 item 的間隙，因為包括頭尾兩端，所以確保它的數量等於控制器數量 + 1, 預設間隙為 0 */@property (nonatomic, copy) NSArray<NSNumber *> *itemsMargins;/** * set itemMargin if all margins are the same, default is 0  如果各個間隙都想同，設定該屬性，預設為 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;/** 頂部導覽列 */@property (nonatomic, weak) WMMenuView *menuView;/** 內部容器 */@property (nonatomic, weak) WMScrollView *scrollView;/** MenuView 內部視圖與左右的間距 */@property (nonatomic, assign) CGFloat menuViewContentMargin;/** * 左滑時同時啟用其他手勢，比如系統左滑、sidemenu左滑。預設 NO  (會引起一個小問題，第一個和最後一個控制器會變得可以斜滑, 還未解決) */@property (assign, nonatomic) BOOL otherGestureRecognizerSimultaneously;/** * 構造方法，請使用該方法建立控制器. 或者實現資料來源方法. / * Init method，recommend to use this instead of `-init`. Or you can implement datasource by yourself. * * @param classes 子控制器的 class，確保數量與 titles 的數量相等 * @param titles 各個子控制器的標題，用 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.如果之前設定過 `itemsMargins` 和 `itemsWidths` `values` 以及 `keys` 屬性，請確保在調用 reload 之前也同時更新了這些屬性。並且，最最最重要的，注意數組的個數以防止溢出。 */- (void)reloadData;/** * Update designated item's title  更新指定序號的控制器的標題 * * @param title 新的標題 * @param index 目標序號 */- (void)updateTitle:(NSString *)title atIndex:(NSInteger)index;/** * Update designated item's title and width  更新指定序號的控制器的標題以及他的寬度 * * @param title 新的標題 * @param index 目標序號 * @param width 對應item的新寬度 */- (void)updateTitle:(NSString *)title andWidth:(CGFloat)width atIndex:(NSInteger)index;/** 當 app 即將進入後台接收到的通知 */- (void)willResignActive:(NSNotification *)notification;/** 當 app 即將回到前台接收到的通知 */- (void)willEnterForeground:(NSNotification *)notification;

源碼demo：源碼下載

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。