美文网首页
ios高仿某视频app菜单导航

ios高仿某视频app菜单导航

作者: lizhi_boy | 来源:发表于2019-01-30 15:11 被阅读78次

看效果图吧:


Untitled2222.gif

主要结构原理:

WX20190130-140240.png
1、顶部菜单:

(1) UICollectionView(考虑用这个控件主要是它有item居中的属性)
(2) 使用Palette类库对内容图片进行主色调提取,设置菜单栏颜色

2、内容视图:

UIScrollView(这个就不多说了)

注意点

  • DWPageTitleView类为标题菜单类 (使用reloadData刷新数据时,要重新设置titles数组,然后执行刷新操作)
/**标题名数组数据*/
@property (nonatomic,strong) NSArray *titles;

/**点击事件block*/
@property (nonatomic,copy) SelectedBlock selectBlock;

/**默认选中的下标*/
@property (nonatomic,assign) NSInteger defaultIndex;

/**默认选中的title的颜色,不设置默认是白色*/
@property (nonatomic,strong) UIColor *defaultSelectedColor;

/**默认未选中的title的颜色,不设置默认是lightGrayColor*/
@property (nonatomic,strong) UIColor *defaultDeselectedColor;

-(instancetype)initWithTitles:(NSArray <NSString *> *)titles;


/**
 选中某个item
 @param index item下标
 */
-(void)selectedTitleForIndex:(NSInteger) index;

/**刷新数据*/
-(void)reloadData; 
  • DWPageScrollView为内容视图(使用reloadData刷新数据时,做法和 DWPageTitleView相似)
#import <UIKit/UIKit.h>

@class DWPageScrollView;

@protocol DWPageScrollViewDelegate <NSObject>

@required
-(void)pageScrollView:(DWPageScrollView *)pageScrollView selectedIndex:(NSInteger)index;

@end


@interface DWPageScrollView : UIScrollView


@property (nonatomic,weak) id<DWPageScrollViewDelegate> dataSelected;

/**子视图所在的控制器*/
@property (nonatomic,strong) NSArray *controllers;
/**初始化方法*/
-(instancetype)initWithControllers:(NSArray <UIViewController *>*)controllers;

/**
 选中某一页
 @param index 页的下标
 */
-(void)selectedPageIndex:(NSInteger)index;

/**
 重新刷新数据
 */
-(void)reloadData;

在demo的Controller执行刷新视图的方法

    //设置加载数据
    self.childControllers = [dataArray copy];
    [self dw_addChildControllers:self.childControllers];
    self.mainView.controllers = self.childControllers;
    self.titleView.titles = [dataArray2 copy];
    
    //视图刷新
    [self.titleView reloadData];
    [self.mainView reloadData];

总结:

视图控件并没有过度的进行封装,当然过度封装也没有错,但对于它的应用性却很局限。所以我写这个视图的出发点是让读者尽量看得懂(代码逻辑结构不存在特别难的),然后能根据自身的项目需求做对应的修改。同时也在代码逻辑上有错误的或不好的地方也欢迎读者指出。

最后附上demo代码链接

相关文章

网友评论

      本文标题:ios高仿某视频app菜单导航

      本文链接:https://www.haomeiwen.com/subject/xpgqsqtx.html