###开篇 上篇文章中简单了说了下APP的基本框架和布局,今天我们就来说一下在软件中常用到的控件以及实现他们的方法。上篇文章:iOS走近商城APP(一)(今天值班整座大楼静悄悄,好恐怖-_-、)。 ####购物车相关 #####控件一
- 商品加入购物车前的规格选择界面
如上图中红色框内的内容,是可以显示商品的规格内容,进行单选,要设置他的默认颜色,选中字体颜色和选中边框颜色,整个模块是根据商品的实际内容来决定的布局,底部是一个可以滚动的tableview。那么我们怎么实现它呢,方法1.自己封装一个控件,不过在处理数据和自适应布局上对经验有一定要求。方法2.使用第三方控件。这里推荐一个DKFilterView
//颜色的设置self.buttonNormalColor = DK_NORMALTITLE_COLOR; //未选中标题颜色self.buttonHighlightColor = DK_SELECTTITLE_COLOR; //选中标题颜色self.buttonNormalBorderColor =DK_NORMALBORDER_COLOR; //未选中边框颜色self.buttonSelectBorderColor = DK_SELECTBORDER_COLOR; //选中边框颜色
复制代码
然后在这个方法的选中逻辑里进行颜色的变换(注意逻辑)
- (void)buttonSelected:(UIButton *)button;
复制代码
然后关于标题和划线,因为试图是一个tableview ,我们处理的地方就在他的组头试图和组尾试图的协议方法里。
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section;
复制代码
-(UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section;
复制代码
在尾试图的那条虚线,处理两种方法,1:找UI要一张虚线的图,创建试图放上去,简单粗暴,缺点是以后如果需要改变颜色样式需要重新要图。 2:自己绘制虚线。
UIView *foot = [[UIView alloc] initWithFrame:CGRectMake(0, 0, width, 20)];foot.backgroundColor = [UIColor whiteColor];//layerCAShapeLayer *shapeLayer = [CAShapeLayer layer];[shapeLayer setFillColor:[[UIColor lightGrayColor] CGColor]];//设置虚线的颜色 - 颜色请必须设置[shapeLayer setStrokeColor:[UIColor lightGrayColor].CGColor];//设置虚线的高度[shapeLayer setLineWidth:1.0f];//设置类型[shapeLayer setLineJoin:kCALineJoinRound];/*2.f=每条虚线的长度2.f=每两条线的之间的间距*/[shapeLayer setLineDashPattern:[NSArray arrayWithObjects:[NSNumber numberWithInt:2.f],[NSNumber numberWithInt:2.f],nil]];// Setup the pathCGMutablePathRef path1 = CGPathCreateMutable();/*代表初始坐标的x,yy:要和下面的y一样。*/CGPathMoveToPoint(path1, NULL,10, 10);/*代表坐标的x,y要与上面的y大小一样,才能使平行的线,不然会画出斜线*/CGPathAddLineToPoint(path1, NULL, width-20,10);//赋值给shapeLayer[shapeLayer setPath:path1];//清除CGPathRelease(path1);//可以把self改成任何你想要的UIView.[[foot layer] addSublayer:shapeLayer];复制代码
注释已经加的很清楚了,但是如果觉得仍然复杂呢,这里放上一个封装好的方法,一句话实现页面切换加载的动画效果和线的绘制,一句话实现了虚线的绘制(关于各种线的绘制会继续封装加入新的东西,欢迎star)。
//调用绘制虚线[[GS_DrawLineManager manager]GS_DrawImaginaryLineWithStartPoint:CGPointMake(20, 100) EndPoint:CGPointMake(300, 100) LineColor:[UIColor blackColor] LineHeight:1.0f InView:view];
复制代码
- 商品数量增加控件
- 页面缓冲加载动画 比如美团和饿了么,在切换页面数据加载出现之前会有缓冲动画出现,那么我们怎么在我们的软件中实现呢,根据网上资料和图片以及自己的整理封装,实现一句话调用加载,一句话消失,类似于SVProgressHUD的用法。
view = [[UIView alloc]initWithFrame:[UIScreen mainScreen].bounds];[self.view addSubview:view];//加载转场动画[[GS_SVPmanager manager]GS_SVPshowGif:self];dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(4 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{//调用绘制虚线[[GS_DrawLineManager manager]GS_DrawImaginaryLineWithStartPoint:CGPointMake(20, 100) EndPoint:CGPointMake(300, 100) LineColor:[UIColor blackColor] LineHeight:1.0f InView:view];//动画加载结束[[GS_SVPmanager manager]GS_SVPhidGif:self];NSLog(@"结束了");});复制代码
如下图所示,我们创建一个单利用来控制GIF显示和消失,单例文件的位置如下图: