电商，筛选条件按钮的动态乱布---AutoBtn

           

     随着现在电商产品的快速发展，使其赢得很好的趋势。App开发中，在商品的分类检索中就会出现，筛选条件按钮的动态乱步。 实现这个功能，很简单，但也有很多知识的考验。下面让我们一起进入 岁月风沙的蓝天。

1、我们首先观看一个关于电商产品的图片

 我们如何实现呢？肯定有好多人，这个不简单吗？等等的话。其实，怎么实现都可以，只要你感觉好就行。

2、我们要进入准备阶段

 我们首先创建一个 继承与  UIView 的子类 XXOO。

//  Created by 周双建 on 15/12/10.

//  Copyright © 2015年周双建. All rights reserved.

//

#import <UIKit/UIKit.h>

@interface AutoBtn_View : UIView

@end

3、重写UIView的一些方法

//  Created by 周双建 on 15/12/10.

//  Copyright © 2015年周双建. All rights reserved.

//

#import "AutoBtn_View.h"

@implementation AutoBtn_View

-(instancetype)initWithFrame:(CGRect)frame{

    if ([superinitWithFrame:frame]) {

        self.layer.masksToBounds =YES;

        self.layer.cornerRadius =5;

        self.layer.borderWidth =1;

        UITapGestureRecognizer * Tap = [[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(TapClick)];

        [selfaddGestureRecognizer:Tap];

    }

    return self;

}

4、我们要声明协议，来处理事件

#import <UIKit/UIKit.h>

@class AutoBtn_View;

@protocol AutoBtn_ViewDelegate <NSObject>

//传递点击事件和对象

-(void)clickobject:(AutoBtn_View*)object;

@end

5、我们要给这个UIView 添加点击手势，完成交互

UITapGestureRecognizer * Tap = [[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(TapClick)];

        [selfaddGestureRecognizer:Tap];

6、通过协议来响应，点击事件

-(void)TapClick{

    if (self.delegate && [selfrespondsToSelector:@selector(TapClick)]) {

        [self.delegateclickobject:self];

    }

 }

7、声明一些，必要的参数，在你的视图控制器里面

//设置文字距离边框的距离

#define WZJBK 15

//设置按钮的高度

#define OBJC_HEIGHT  30

//设置对象最大排列宽度

#define OBJC_BIG_WIDTH  300

//对象间竖直的间隔

#define VERTICAL_HEIGHT  40

//对象水平间的间隔

#define LEVEL_WIDTH      20

//传入数据的个数

#define SOURCECOUNT(Array)  Array.count

@interface ViewController ()<AutoBtn_ViewDelegate>{

    //用来记录对象的X坐标

    CGFloat Objiect_X;

    //用来记录对象排列超过限定的次数

    int LimitCount ;

    //用来记录每一次对象返回的宽度

    CGFloat  Objiect_Width;

    //记录假如排列在一行的已经出现和将要出现的对象的宽度

    CGFloat AlreadyObjiect_Width;

}

8、我们看主要的实现步骤

NSArray * ZSJArray =@[@"成功奋斗",@"努力",@"积极",@"疯",@"冲向电放生命是换",@"黄继光"];

    

    for (int i =0 ; i<SOURCECOUNT(ZSJArray); i++) {

        AutoBtn_View * AutoBtn = [[AutoBtn_Viewalloc]init];

        AutoBtn.delegate = self;

        AutoBtn.tage = 100+i;

        CGSize ZSJ_Size = [selfgetobjiect:AutoBtn content:ZSJArray[i]];

        //每一次返回的宽度

        Objiect_Width= ZSJ_Size.width+LEVEL_WIDTH;

        //计算已经出出现对象的和本次对象的宽度总和

        AlreadyObjiect_Width +=Objiect_Width;

        if (AlreadyObjiect_Width>=OBJC_BIG_WIDTH) {

            Objiect_X=Objiect_Width;

            AlreadyObjiect_Width =Objiect_Width;

            //是否发生超出限制

            ++LimitCount;

            AutoBtn.frame = CGRectMake(0,100+LimitCount*VERTICAL_HEIGHT, ZSJ_Size.width, ZSJ_Size.height);

            Objiect_Width=0;

        }else{

            AutoBtn.frame = CGRectMake(Objiect_X,100+LimitCount*VERTICAL_HEIGHT, ZSJ_Size.width, ZSJ_Size.height);

            // 计算坐标

            Objiect_X +=Objiect_Width;

            Objiect_Width=0;

        }

        [self.viewaddSubview:AutoBtn];

    }

    // Do any additional setup after loading the view, typically from a nib.

}

9、准守代理，并实现代理方法

-(void)clickobject:(AutoBtn_View *)object{

    for (UIView * TempViewin self.view.subviews) {

         //判断是否是同类

        if ([TempView isKindOfClass:[AutoBtn_View class]]) {

            //是否是当前对象

            //设置你当前点击的对象背景色

            if (TempView == object) {

                TempView.backgroundColor = [UIColorredColor];

            }else{

            TempView.backgroundColor = [UIColorclearColor];

            }

        }

    }

    //获取你点击的那个对象

    NSLog(@"%d",object.tage);

}

10、最后效果图

11、 完整项目的下载地址：

http://download.csdn.net/detail/zhoushuangjian511/9347163