Swift横向水平滑动视图(UISegmentedControl+UICollectionView)

看到很多滑动菜单的APP,今天用UISegmentedControl+UICollectionView尝试了一下,当然也有很多其他实现方式,纯UIView+UIScrollView也可以实现,只不过动画效果自己写比较困难。

大概思路:
1.最外边一个UICollectionViewController(不谈APP本身的TabBarController+NavigationController)
2.在UICollectionViewController添加UISegmentedControl和UICollectionView
3.设置UICollectionView水平滑动FlowLayout
4.自定义UICollectionViewCell
5.实现UICollectionViewDelegate,加载CollectionViewCell
6.在UISegmentedControl选择点击后的事件里,切换对于的CollectionViewCell
7.实现UIScrollViewDelegate切换Segmented被选中item

主要代码
UISegmentedControl初期化


    func initSegment() -> Void {
        let main_width:CGFloat = self.view.frame.size.width;
        let padding_top:CGFloat = navHeight();
        let segmentView_height:CGFloat = 180.0;
        let segmentView : UIView = UIView(frame:CGRect(x:0.0,y:padding_top,width:main_width,height:segmentView_height));
        segmentView.backgroundColor = mainBackColor;
        
        let segment_x:CGFloat = 0.0;
        let segment_y:CGFloat = 0.0;
        let segment_width:CGFloat = main_width;
        segment = UISegmentedControl(frame: CGRect(x:segment_x,y:segment_y,width:segment_width,height:segment_height));
        segment.backgroundColor = mainBackColor;
        segment.insertSegment(withTitle: "进行中", at: 0, animated: false);
        segment.insertSegment(withTitle: "已完成", at: 1, animated: false);
        segment.insertSegment(withTitle: "全部", at: 2, animated: false);
        segment.layer.cornerRadius = 0;
        segment.layer.borderWidth = 1;
        segment.layer.borderColor = UIColor.white.cgColor;
        segment.tintColor = UIColor.white;
        segment.setTitleTextAttributes([NSAttributedString.Key.foregroundColor : UIColor.white,NSAttributedString.Key.font:UIFont.systemFont(ofSize: 18.0)], for: UIControl.State.normal);
        segment.setTitleTextAttributes([NSAttributedString.Key.foregroundColor : UIColor.black,NSAttributedString.Key.font:UIFont.systemFont(ofSize: 18.0),NSAttributedString.Key.backgroundColor:UIColor.white], for: UIControl.State.selected);
        segment.selectedSegmentIndex = 0;
        //添加事件
        segment.addTarget(self, action: #selector(segmentedControlChanged), for: UIControl.Event.valueChanged)
        segmentView.addSubview(segment);
        
        self.view.addSubview(segmentView);
    }

UICollectionView初期化,自定义布局

    func initCollectionView() -> Void {
        let padding_top:CGFloat = navHeight()+segment_height;
        let padding_bottom:CGFloat = tabbarHeight();
        let main_width:CGFloat = self.view.frame.size.width;
        let main_height:CGFloat = self.view.frame.size.height;
        let collectionView_width:CGFloat = main_width;
        let collectionView_height:CGFloat = main_height - padding_top - padding_bottom;
        //布局
        let flowLayout : UICollectionViewFlowLayout = UICollectionViewFlowLayout();
        //设置cell的尺寸(宽度和高度)
        flowLayout.itemSize = CGSize(width: collectionView_width, height: collectionView_height);
        //设置水平滚动方向(默认是竖直方向)
        flowLayout.scrollDirection = .horizontal;
        //设置cell与cell之间的行距
        flowLayout.minimumLineSpacing = 0;
        //设置cell与cell之间的列距
        flowLayout.minimumInteritemSpacing = 0;
        
        let collectionView_x:CGFloat = 0.0;
        let collectionView_y:CGFloat = padding_top;
        创建UICollectionView
        collectionView = UICollectionView(frame: CGRect(x: collectionView_x, y: collectionView_y, width: collectionView_width, height: collectionView_height), collectionViewLayout: flowLayout);
        collectionView.backgroundColor = UIColor.clear;
        //开启分页
        collectionView.isPagingEnabled = true;
        //设置代理
        collectionView.delegate = self;
        collectionView.dataSource = self;
        //不显示滚动条
        collectionView.showsHorizontalScrollIndicator = false;
        //弹簧效果设置
        collectionView.bounces = false;
        self.view.addSubview(collectionView);
        //注册cell
        collectionView.register(XxxCollectionViewCell.classForKeyedArchiver(), forCellWithReuseIdentifier: "xxxCollectionViewCell");
    }

实现UICollectionViewDelegate

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return 1;
    }
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 3;
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "xxxCollectionViewCell", for: indexPath) as! XxxCollectionViewCell;
        cell.backgroundColor = UIColor.clear;
        switch indexPath.item {
        case 0:
            cell.setTableHeaderTitle(title: "您当前有3项任务,具体明细如下:");
            break;
        case 1:
            cell.setTableHeaderTitle(title: "您已经完成5项任务,具体明细如下:");
            break;
        case 2:
            cell.setTableHeaderTitle(title: "合计有8项任务,具体明细如下:");
            break;
        default:
            cell.setTableHeaderTitle(title: "");
            break;
        }
        cell.reloadTableViewData(item: indexPath.item);
        return cell;
    }

实现UIScrollViewDelegate

    //当减速结速的时候,会触发
    //触发时机:当手指离开屏幕后,scrollView仍然在自行滚动,停止后,会触发这个方法。
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        let offset_x:CGFloat = collectionView.contentOffset.x;
        let main_width:CGFloat = self.view.frame.size.width;
        let index : Int = Int(offset_x/main_width);
        segment.selectedSegmentIndex = index;
    }

Segmented选择事件

    //UISegmentedControl选择点击后的事件
    @objc func segmentedControlChanged(sender:UISegmentedControl) {
        print(sender.selectedSegmentIndex);
        let itemIndex : Int = sender.selectedSegmentIndex;
        collectionView.scrollToItem(at: IndexPath.init(item: itemIndex, section: 0), at: UICollectionView.ScrollPosition.centeredHorizontally, animated: true);
    }

看一下效果,如下:
效果预览

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值