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

这一篇记录的是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：源码下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。