ios 仿优酷app主页分类滑动页面及流媒体视频播放

1 篇文章 0 订阅

简述

仿照优酷app主页写的一个分类滑动页面控件,实现了包括字体缩放,下标缩进,主题颜色切换,渐变色,菜单编辑,流媒体播放等功能。git项目地址

演示图:演示图总览.gif

使用方式

1.具有编辑菜单的分类滑动页

演示图1:演示图1.gif

初始化和需要实现的协议

override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.

        //CFPageScrollView()是个viewcontroller,每个页面是childController,便于解耦
        pageView = CFPageScrollView()
        pageView.dataSource = self
        pageView.delegate = self
        addChild(pageView)
        pageView.didMove(toParent: self)
        pageView.view.frame = CGRect(x: 0, y: 0, width: SCREEN_WIDTH, height: SCREEN_HEIGHT)
        view.addSubview(pageView.view)
        
    }

// MARK: - PageScrollViewDelegate
extension CFHomePageController: PageScrollViewDelegate {

  //编辑完成时,这个代理会把数据传递出来
    func editFinishWith(_ completionData: Array<Any>) {
        
        if pageData == completionData as? Array<PageDataModel> {
            
            print("相等时不作操作")
        }
        else
        {
            //数据改变时,需要重载显示页面,这里我用coredata模拟了一个存取数据的逻辑,如果是网络请求,这部分逻辑提交给后台处理,你只用上传数据,然后reload。
         }
    }

}

// MARK: - PageScrollviewViewDataSource
extension CFHomePageController: PageScrollViewDataSource {
    
//是否需要显示编辑菜单
    func isDisplayMenu() -> Bool {
        return true
    }
    
//编辑菜单数组
    func getMenuData() -> Array<Any> {
        return menuDataSource
    }
    
//编辑菜单分组title
    func getMenuSectionTitle() -> Array<String> {
        return ["显示频道","未显示频道"]
    }
 
//分类滑动页面数据
    func getScrollViewData() -> Array<Any> {
        return pageData
    }
    
//分类滑动页面颜色主题
    func getNavHeaderThemeColorWith(_ index: Int) -> Dictionary<String, UIColor>         {
         return [backgroundColorKey: ThemeBlackColor,
                norTextColorKey: ThemeGrayWhiteColor,
                selTextColorKey: ThemeBlueColor]
  
    }
   
//分类滑动页面搜索栏,SearchView为动态创建,identifier为重用标识
    func getSearchViewWith(_ index: Int) -> BaseSearchView {
        
       let view: BaseSearchView = pageView.reuseSearchViewWith(classString: "SearchView", identifier: "view1") as! BaseSearchView
       view.searchButtonTransitionAnimation(preWidth: preWidth)
       view.searchButton.addTarget(self, action: #selector(displaySearchController), for: .touchUpInside)
       preWidth = view.searchButton.mj_w

       return view
    }
}

2.普通分类滑动页

效果图:演示图2.gif

普通分类滑动页面实现的协议:

// MARK: - PageScrollviewViewDataSource
extension CFHotspotController: PageScrollViewDataSource {
    
    func getScrollViewData() -> Array<Any> {
        return pageData
    }
    
    func getNavHeaderThemeColorWith(_ index: Int) -> Dictionary<String, UIColor> {

        return [backgroundColorKey: ThemeBlackColor,
                norTextColorKey: ThemeGrayWhiteColor,
                selTextColorKey: ThemeBlueColor]
  
    }
    
    func getSearchViewWith(_ index: Int) -> BaseSearchView {
        
        let view: BaseSearchView = pageView.reuseSearchViewWith(classString: "HotspotSearchView", identifier: "view") as! BaseSearchView
        view.searchButton.setTitle(pageData[index].title, for: .normal)
        view.searchButton.addTarget(self, action: #selector(displaySearchController), for: .touchUpInside)
        return view
    }
    
}

3.使用AVFoundation实现了一个简单流媒体播放器

效果图:演示图3.gif

实现了播放,暂停,滑动快进,横竖屏切换等功能。 对该播放器的操作页面进行了简单封装,详情见工程。

初始化:

    func initPlayer()
    {
        playerView = PlayerView.init(frame: CGRect(x: 0, y: STATUSBAR_HEIGHT, width: view.frame.width, height: view.frame.width/16*9))
        playerView.delegate = self
        playerView.backgroundColor = ThemeBlackColor
        view.addSubview(playerView)
        
        let url = URL(string: "https://vd4.bdstatic.com/mda-igqy5ny4sn8uyby6/sc/mda-igqy5ny4sn8uyby6.mp4?auth_key=1564739152-0-0-7c8a2761260c09a1fab436cb2b53e9cc&bcevod_channel=searchbox_feed&pd=bjh&abtest=all")

        playerItem = AVPlayerItem(url: url!)
        //缓冲进度,其他属性可去AVPlayerItem类里面查看
        playerItem.addObserver(self, forKeyPath: "loadedTimeRanges", options: .new, context: nil)
        //播放状态
        playerItem.addObserver(self, forKeyPath: "status", options: .new, context: nil)
        
        avplayer = AVPlayer(playerItem: playerItem)
        
        (playerView.layer as! AVPlayerLayer).player = avplayer
        (playerView.layer as! AVPlayerLayer).videoGravity = .resizeAspect
        (playerView.layer as! AVPlayerLayer).contentsScale = UIScreen.main.scale
    }

总结

断断续续写个多月,预想中的第一个版本完成了,中途遇到了些奇怪的问题,不过都解决了,感兴趣可以去我项目地址看看。git项目地址

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
use it like [[ScrollviewModel sharedInstance] initWithChannels:@[@{@"channelID" : @"channelId_toutiao", @"channelName": @"头条", @"type" : @"normal"}, @{@"channelID" : @"channelId_local", @"channelName": @"北京", @"type" : @"web"}, @{@"channelID" : @"channelId_yule", @"channelName": @"娱乐", @"type" : @"normal"}, @{@"channelID" : @"channelId_junshi", @"channelName": @"军事", @"type" : @"normal"}, @{@"channelID" : @"channelId_video", @"channelName": @"视频", @"type" : @"normal"}, @{@"channelID" : @"channelId_meinv", @"channelName": @"美女", @"type" : @"normal"}, @{@"channelID" : @"channelId_duanzi", @"channelName": @"段子", @"type" : @"web"}, @{@"channelID" : @"channelId_keji", @"channelName": @"科技", @"type" : @"normal"}, @{@"channelID" : @"channelId_fang", @"channelName": @"房产", @"type" : @"normal"}, @{@"channelID" : @"channelId_zhibo", @"channelName": @"直播", @"type" : @"normal"}, ]]; self.topScrollview = [TopScrollview.alloc initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, 41)]; _topScrollview.contentInset = UIEdgeInsetsMake(0, 0, 0, IFScreenFit2s(45.f)); _topScrollview.scrollsToTop = NO; [self.view addSubview:_topScrollview]; _topScrollview.model = [ScrollviewModel sharedInstance]; self.controllerScrollview = [ControllerScrollView.alloc initWithFrame:CGRectMake(0, self.topScrollview.frame.origin.y self.topScrollview.frame.size.height, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)]; [self.view addSubview:_controllerScrollview]; self.controllerScrollview.model = [ScrollviewModel sharedInstance];
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值