初识 swift app 首页常用模块之分类

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 移动开发›Swift 教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

一、介绍

　　上一篇《初识 swift 封装轮播图》介绍的是首页常用模块-图片轮播效果。

　　在这一篇将介绍另外一个常用的模块分类、常用app 你就会发现 58、美团、淘宝、京东都回有这样一个模块。接下来以美团为例子

二、知识点

　　相比较上一篇这里主要用到泛型、二维数组，

实现的只是一个定义好的两行四列的数组、对于有其他要求的改动可以直接修改代码来实现

三、功能实现

先上效果图：

下面还是直接上代码：定义了一个自定义类 MType 包含三个属性{init(title:String,imageName:String,type:String)}

protocol HomeTypeDelegate:NSCoding{
    
}

class HomeType: UIView,UIScrollViewDelegate {
    
    private var arrayData:Array<Array<MType>>?;
    private var mainScroll:UIScrollView?;
    private var pageControl:UIPageControl?;
    
    private var _itemSize:CGSize=CGSizeMake(screen_width/4, 80.0);
    private var titleHeight:CGFloat=15.0;
    private var _hiddenPageControl:Bool=false;
    private var _contentHorizontalAlignment:UIControlContentHorizontalAlignment=UIControlContentHorizontalAlignment.Center
    
    
    override init(frame: CGRect) {
        super.init(frame: frame);
        self.arrayData = [[MType]]()
        self.queryData();
        
        self.mainScroll = UIScrollView(frame: CGRectMake(0, 0, screen_width, frame.size.height));
        self.pageControl = UIPageControl();
        
        self.layoutUI();
    }
    
    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder);
    }
    
    //MARK: ======================================================== 试图布局
    private func layoutUI(){
        self.mainScroll?.showsHorizontalScrollIndicator = false;
        self.mainScroll?.showsVerticalScrollIndicator = false;
        self.mainScroll?.scrollsToTop = false;
        self.mainScroll?.pagingEnabled = true;
        self.mainScroll?.delegate = self;
        
        for(var i:Int=0;i<self.arrayData!.count;i++){
            let arrayEmpty=self.arrayData![i]
            let emptyViewFrame:CGRect = CGRectMake(screen_width*CGFloat(i), 0, screen_width, self.frame.size.height);
            let emptyView:UIView = UIView(frame: emptyViewFrame)
            self.mainScroll?.addSubview(emptyView)
            let row:Int = Int(self.bounds.size.height / _itemSize.height)
            for(var y:Int=0;y<row;y++){
                let column:Int = Int(screen_width/_itemSize.width);
                for(var x:Int=0;(x < column && (y*column+x)<arrayEmpty.count );x++){
                    let itemRect = CGRectMake(screen_width * CGFloat(x)/CGFloat(column), self.bounds.size.height * CGFloat(y)/CGFloat(row), screen_width / CGFloat(column), self.bounds.size.height / CGFloat(row))
                    let btn:UIButton = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
                    btn.frame=itemRect;
                    btn.setTitleColor(UIColor.clearColor(), forState: UIControlState.Normal)
                    btn.setTitle(arrayEmpty[y*column+x].title, forState: UIControlState.Normal)
                    btn.addTarget(self, action: Selector("homTypeTouch:"), forControlEvents: UIControlEvents.TouchUpInside)
                    
                    let ico = UIImageView(frame: CGRectMake((itemRect.size.width-50)/2, (itemRect.height-20-50)/2, 50, 50))
                    ico.image=UIImage(named: arrayEmpty[y*column+x].imageName)
                    btn.addSubview(ico)
                    
                    let label = UILabel(frame: CGRectMake(0, 55, itemRect.size.width, 20))
                    label.text = arrayEmpty[y*column+x].title
                    label.textAlignment=NSTextAlignment.Center
                    label.contentMode = UIViewContentMode.Bottom
                    label.font = UIFont.boldSystemFontOfSize(14.0)
                    label.textColor = UIColor(red: 86/255.0, green: 86/255.0, blue: 86/255.0, alpha: 1.0)
                    btn.addSubview(label)
                    emptyView.addSubview(btn)
                }
            }
        }
        self.mainScroll?.contentSize = CGSizeMake(screen_width*CGFloat(self.arrayData!.count), self.frame.size.height);
        self.addSubview(self.mainScroll!);
        self.contentHorizontalAlignment = _contentHorizontalAlignment;
        self.pageControl!.currentPage=0;
        self.pageControl!.pageIndicatorTintColor = UIColor(red: 155/255.0, green:  155/255.0, blue:  155/255.0, alpha: 1.0);
        self.pageControl!.currentPageIndicatorTintColor=UIColor.blueColor();
        self.pageControl!.userInteractionEnabled = false;
        self.pageControl?.hidden=self.hiddenPageControl;
        self.pageControl?.numberOfPages = self.arrayData!.count;
        self.addSubview(self.pageControl!);
        
    }
    
    //MARK: ======================================================== 数据源
    private func queryData(){
        var arrayEmpty:Array<MType>=[MType]();
        arrayEmpty.append(MType(title: "新闻", imageName: "ico_type_news", type: "News"));
        arrayEmpty.append(MType(title: "微视频", imageName: "ico_type_video", type: "MicroVideo"));
        arrayEmpty.append(MType(title: "商家", imageName: "ico_type_store", type: "Store"));
        arrayEmpty.append(MType(title: "旅游", imageName: "ico_type_tourism", type: "Tourism"));
        arrayEmpty.append(MType(title: "影院", imageName: "ico_type_film", type: "Film"));
        arrayEmpty.append(MType(title: "公交", imageName: "ico_type_bus", type: "Bus"));
        arrayEmpty.append(MType(title: "查违章", imageName: "ico_type_break", type: "Break"));
        arrayEmpty.append(MType(title: "水电燃", imageName: "ico_type_fire", type: "Water"));
        arrayData?.append(arrayEmpty);
        arrayEmpty = [MType]();
        arrayEmpty.append(MType(title: "新闻", imageName: "ico_type_news", type: "News"));
        arrayEmpty.append(MType(title: "微视频", imageName: "ico_type_video", type: "MicroVideo"));
        arrayEmpty.append(MType(title: "商家", imageName: "ico_type_store", type: "Store"));
        arrayEmpty.append(MType(title: "旅游", imageName: "ico_type_tourism", type: "Tourism"));
        arrayEmpty.append(MType(title: "影院", imageName: "ico_type_film", type: "Film"));
        arrayEmpty.append(MType(title: "公交", imageName: "ico_type_bus", type: "Bus"));
        arrayEmpty.append(MType(title: "查违章", imageName: "ico_type_break", type: "Break"));
        arrayEmpty.append(MType(title: "水电燃", imageName: "ico_type_fire", type: "Water"));
        arrayData?.append(arrayEmpty);
    }
    
    
    //MARK: ======================================================== UIScrollView 协议实现
    func scrollViewDidScroll(scrollView: UIScrollView) {
        var pageWidth:CGFloat = scrollView.frame.size.width;
        var page:Int = Int(((scrollView.contentOffset.x - pageWidth/2 ) / pageWidth)+1);
        pageControl!.currentPage=page;
        
    }
    
    func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
        var page:Int = self.pageControl!.currentPage;
        self.mainScroll?.scrollRectToVisible(CGRectMake(CGFloat(self.frame.size.width*CGFloat(page)),0,self.frame.size.width,self.frame.size.height), animated: false);
    }
    
    //MARK: ======================================================== Selector
    @objc private func homTypeTouch(sender:UIButton){
         //点击事件
    }
    
    //MARK: ======================================================== 属性封装
    var hiddenPageControl:Bool{
        get{return _hiddenPageControl}
        set{
            _hiddenPageControl = newValue;
            if pageControl != nil {
                self.pageControl?.hidden=_hiddenPageControl;
            }
        }
    }
    
    var contentHorizontalAlignment:UIControlContentHorizontalAlignment{
        get{ return _contentHorizontalAlignment }
        set{
            _contentHorizontalAlignment = newValue;
            let size:CGSize =   self.pageControl!.sizeForNumberOfPages(self.arrayData!.count)
            switch _contentHorizontalAlignment {
            case   UIControlContentHorizontalAlignment.Center :
                self.pageControl?.center=CGPointMake(self.center.x, self.frame.size.height-self.titleHeight+self.titleHeight/2)
                break;
            case UIControlContentHorizontalAlignment.Left :
                self.pageControl?.frame.origin.x=size.width/2;
                break;
            case UIControlContentHorizontalAlignment.Right :
                self.pageControl?.frame.origin.x=self.frame.size.width-size.width/2
                break;
            default:
                break;
            }
        }
    }
    var itemSize:CGSize{
        get{ return _itemSize}
        set {
            _itemSize = newValue;
        }
    }
    
}

四、总结

　相比上一篇<初识 swift 封装轮播图>用到了自定类、泛型、二维数组。还有就是在 scrollview+pagecontrol 控制分页上有些许区别。