iOS開發(fā)--新聞首頁效果WMPageController的使用

這一篇記錄的是iOS開發(fā)中第三方庫WMPageController控件的使用方法敌蜂,主要是用來分頁顯示內(nèi)容的箩兽,可以通過手勢滑動來切換頁面,也可以通過點擊標題部分來切換頁面紊册,如下圖所示:

ScreenShot.gif

使用方法:

新建工程DemoTest1比肄,然后通過cocoapods引入WMPageController到項目中,Podfile文件的內(nèi)容如下:

platform :ios,'7.0'

target 'DemoTest1' do

 pod 'WMPageController', '~> 1.6.4'

end

方法一:

(1)創(chuàng)建幾個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中包含的頁面數(shù)組
    NSArray *controllers = [NSArray arrayWithObjects:[ViewController class], [OneViewController class],[TwoViewController class], nil];
    //WMPageController控件的標題數(shù)組
    NSArray *titles = [NSArray arrayWithObjects:@"體育新聞", @"娛樂新聞",@"直播新聞", nil];
    //用上面兩個數(shù)組初始化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)]; // 這里可以設(shè)置不同的寬度
    
    //設(shè)置WMPageController每個標題的寬度
    pageController.menuItemWidth = 375/3;
    //設(shè)置WMPageController標題欄的高度
    pageController.menuHeight = 35;
    //設(shè)置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)創(chuàng)建個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 標題數(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 返回子頁面的個數(shù)
- (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];
}



相關(guān)設(shè)置:

/**
 *  Values and keys can set properties when initialize child controlelr (it's KVC)
 *  values keys 屬性可以用于初始化控制器的時候為控制器傳值(利用 KVC 來設(shè)置)
    使用時請確保 key 與控制器的屬性名字一致!撞反!(例如:控制器有需要設(shè)置的屬性 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;

/**
 *  設(shè)置選中幾號 item
 *  To select item at index
 */
@property (nonatomic, assign) int selectIndex;

/**
 *  點擊相鄰的 MenuItem 是否觸發(fā)翻頁動畫 (當當前選中與點擊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;

/**
 *  選中時的標題尺寸
 *  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 的寬度嘹害,可不等,數(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;

/**
 *  導航欄背景色
 *  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;

/// 定制進度條髓需,若每個進度條長度相同许师,可設(shè)置該屬性
@property (nonatomic, assign) CGFloat progressWidth;

/// 調(diào)皮效果,用于實現(xiàn)騰訊視頻新效果僚匆,請設(shè)置一個較小的 progressWidth
@property (nonatomic, assign) BOOL progressViewIsNaughty;

/**
 *  是否發(fā)送在創(chuàng)建控制器或者視圖完全展現(xiàn)在用戶眼前時通知觀察者微渠,默認為不開啟,如需利用通知請開啟
 *  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 (若當前緩存中存在不會觸發(fā))
 *  Whether to remember controller's positon if it's a kind of scrollView controller,like UITableViewController,The default value is NO.
 *  比如 `UITabelViewController`, 當然你也可以在自己的控制器中自行設(shè)置, 如果將 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.");

/** 緩存的機制,默認為無限制 (如果收到內(nèi)存警告, 會自動切換) */
@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;

/**
 *  用代碼設(shè)置 contentView 的 contentOffset 之前俯逾,請設(shè)置 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 的間隙,因為包括頭尾兩端焕数,所以確保它的數(shù)量等于控制器數(shù)量 + 1, 默認間隙為 0
 */
@property (nonatomic, copy) NSArray<NSNumber *> *itemsMargins;

/**
 *  set itemMargin if all margins are the same, default is 0
    如果各個間隙都想同纱昧,設(shè)置該屬性刨啸,默認為 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;

/** 內(nèi)部容器 */
@property (nonatomic, weak) WMScrollView *scrollView;

/** MenuView 內(nèi)部視圖與左右的間距 */
@property (nonatomic, assign) CGFloat menuViewContentMargin;

/**
 *  左滑時同時啟用其他手勢堡赔,比如系統(tǒng)左滑牢酵、sidemenu左滑沮稚。默認 NO
    (會引起一個小問題敦第,第一個和最后一個控制器會變得可以斜滑, 還未解決)
 */
@property (assign, nonatomic) BOOL otherGestureRecognizerSimultaneously;
/**
 *  構(gòu)造方法荤牍,請使用該方法創(chuàng)建控制器. 或者實現(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  各個子控制器的標題把还,用 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` 屬性宫蛆,請確保在調(diào)用 reload 之前也同時更新了這些屬性艘包。并且,最最最重要的耀盗,注意數(shù)組的個數(shù)以防止溢出想虎。
 */
- (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;

WMPageController


隨手點個喜歡吧~

關(guān)注我

QQ--iOS 交流群:107548668

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市叛拷,隨后出現(xiàn)的幾起案子舌厨,更是在濱河造成了極大的恐慌,老刑警劉巖忿薇,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件裙椭,死亡現(xiàn)場離奇詭異,居然都是意外死亡署浩,警方通過查閱死者的電腦和手機揉燃,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來筋栋,“玉大人炊汤,你說我怎么就攤上這事《矗” “怎么了婿崭?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵,是天一觀的道長肴颊。 經(jīng)常有香客問我氓栈,道長,這世上最難降的妖魔是什么婿着? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任授瘦,我火速辦了婚禮醋界,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘提完。我一直安慰自己形纺,他們只是感情好,可當我...
    茶點故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布徒欣。 她就那樣靜靜地躺著逐样,像睡著了一般。 火紅的嫁衣襯著肌膚如雪打肝。 梳的紋絲不亂的頭發(fā)上脂新,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天,我揣著相機與錄音粗梭,去河邊找鬼争便。 笑死,一個胖子當著我的面吹牛断医,可吹牛的內(nèi)容都是我干的滞乙。 我是一名探鬼主播,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼鉴嗤,長吁一口氣:“原來是場噩夢啊……” “哼斩启!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起躬窜,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤浇垦,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后荣挨,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體男韧,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年默垄,在試婚紗的時候發(fā)現(xiàn)自己被綠了此虑。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡口锭,死狀恐怖朦前,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情鹃操,我是刑警寧澤韭寸,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站荆隘,受9級特大地震影響恩伺,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜椰拒,卻給世界環(huán)境...
    茶點故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一晶渠、第九天 我趴在偏房一處隱蔽的房頂上張望凰荚。 院中可真熱鬧,春花似錦褒脯、人聲如沸便瑟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽到涂。三九已至,卻和暖如春爽彤,著一層夾襖步出監(jiān)牢的瞬間养盗,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工适篙, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人箫爷。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓嚷节,卻偏偏與公主長得像,于是被迫代替她去往敵國和親虎锚。 傳聞我的和親對象是個殘疾皇子硫痰,可洞房花燭夜當晚...
    茶點故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容