iOS开发--新闻首页效果WMPageController的使用

这一篇记录的是iOS开发中第三方库WMPageController控件的使用方法,主要是用来分页显示内容的,可以通过手势滑动来切换页面,也可以通过点击标题部分来切换页面,如下图所示:

ScreenShot.gif

使用方法:

新建工程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;

WMPageController


随手点个喜欢吧~

关注我

QQ--iOS 交流群:107548668

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容