初识 swift app 首页常用模块之 分类
一、介绍
上一篇《初识 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 控制分页上有些许区别。
