iOS_4_表情排列

最终效果图:

BeyondViewController.h

////  BeyondViewController.h//  04_表情排列////  Created by beyond on 14-7-22.//  Copyright (c) 2014年 com.beyond. All rights reserved.//#import <UIKit/UIKit.h>@interface BeyondViewController : UIViewController@property (weak, nonatomic) IBOutlet UISegmentedControl *segment;- (IBAction)segmentValueChanged:(UISegmentedControl *)sender;@end

BeyondViewController.m

////  BeyondViewController.m//  04_表情排列////  Created by beyond on 14-7-22.//  Copyright (c) 2014年 com.beyond. All rights reserved.//#import "BeyondViewController.h"// 添加按钮的tag,因为segment值改变时,要将按钮置于数组最后面#define kAddButton_Tag 99@interface BeyondViewController ()@end@implementation BeyondViewController- (void)viewDidLoad{    [super viewDidLoad];    NSLog(@"view did load");            int colsNum = _segment.selectedSegmentIndex + 2;    // 调用自定义方法  添加images    [self alinmentWithCols:colsNum];    // 添加一个 按钮放到最后面,目的是:点击按钮就可以添加一个imageView到最后    [self addBtn];}// 添加一个 按钮放到最后面,目的是:点击按钮就可以添加一个imageView到最后- (void)addBtn{    // sg_btn 代码生成按钮 1,实例化    UIButton *btn = [[UIButton alloc]init];    // 2,设定详情    // 正常状态    btn.tag = kAddButton_Tag;    [btn setTitle:@"normal" forState:UIControlStateNormal];    [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];        [btn setBackgroundImage:[UIImage imageNamed:@"sub_black_add.png"] forState:UIControlStateNormal];    // 点击时高亮状态    [btn setTitle:@"highlighted" forState:UIControlStateHighlighted];    [btn setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];        [btn setBackgroundImage:[UIImage imageNamed:@"sub_blue_add.png"] forState:UIControlStateHighlighted];    // 为按钮添加点击事件    [btn addTarget:self action:@selector(addBtnClick:) forControlEvents:UIControlEventTouchUpInside];    #warning 下面全是通过i 计算i的排列坐标    NSArray *array = self.view.subviews;    // 按钮的排号为i,通过 i 算出行号,列号,坐标x y    int i = array.count-1;    // 调用自定义的方法,通过控件在格子中的索引即排号,算出其应该在哪一行,哪一列,从而得到其坐标    CGPoint btn_pos = [self getPositionByIndexInCell:i];    btn.frame = CGRectMake(btn_pos.x, btn_pos.y, 60, 60);        // 3,添加按钮到self.view    [self.view addSubview:btn];}// 通过控件位于格子里面的i,即排号,得到它位于哪一行哪一列,从而返回其x,y- (CGPoint)getPositionByIndexInCell:(int)i{    int colsNum = _segment.selectedSegmentIndex + 2;    //NSLog(@"在格子里面的排号i为 %d",i);    // 第0个即排头的表情的y    int firstImgY = 60;    // 表情之间的净间距    int imgMargin = (self.view.frame.size.width-60*colsNum)/(colsNum+1);    // 第0个即排头的表情的x    int firstImgX = imgMargin;        // 第i个表情(这儿是按钮) 所在的行号    int row = i/colsNum;    // 第i个表情(这儿是按钮) 所在的列号    int cols = i%colsNum;    int x = cols * (60+imgMargin)+firstImgX;    int y = row * (60+imgMargin)+firstImgY;    return CGPointMake(x, y);}// 当点击 + 号按钮的时候,创建 一个随机的imgView,并添加到self.view里面,注意imgView位置,以及btn的位置- (void)addBtnClick:(UIButton *)sender{    // 1,类方法创建控件    UIImageView *imgView = [[UIImageView alloc]init];    // 2,控件细节    int rand = arc4random_uniform(9);    NSString *imgName = [NSString stringWithFormat:@"01%d.png",rand];    imgView.image = [UIImage imageNamed:imgName];    // 屏幕宽高    CGSize winSize = self.view.bounds.size;    int orgin_x = arc4random_uniform(winSize.width);    int orgin_y = arc4random_uniform(winSize.height);    imgView.frame = CGRectMake(orgin_x, orgin_y, 0, 0);    // 3,将控件添加到当前控制器的view    [self.view addSubview:imgView];    [UIView animateWithDuration:1 animations:^{        // 动画实现2个要求:1,为新添加的imgView设置x y 2,为按钮重新设置x y        NSArray *array = [self.view subviews];        // 排号为i,通过 i 算出行号,列号,坐标x y        int imgView_i = array.count-3;        int sender_i = array.count-2;        // 调用自定义的方法,通过控件在格子中的索引即排号,算出其应该在哪一行,哪一列,从而得到其坐标        CGPoint imgView_pos = [self getPositionByIndexInCell:imgView_i];        CGPoint sender_pos = [self getPositionByIndexInCell:sender_i];                        // 重新设置新添加的imgview的位置 以及 添加按钮的位置        imgView.frame = CGRectMake(imgView_pos.x, imgView_pos.y, 60, 60);        sender.frame = CGRectMake(sender_pos.x, sender_pos.y, 60, 60);    }];}// 自定义方法,参数:图片名 010.png ~ 018.png x坐标 y坐标- (void) addImg:(NSString *)imgName x:(CGFloat)x y:(CGFloat)y{    // 1,实例化    UIImageView *imgView = [[UIImageView alloc]init];    // 2,设置细节    UIImage *img = [UIImage imageNamed:imgName];    imgView.image = img;    imgView.frame = CGRectMake(x, y, 60, 60);    // 3,添加到self的view里面,以便显示    [self.view addSubview:imgView];    }- (IBAction)segmentValueChanged:(UISegmentedControl *)sender {    // 索引的值为0 1 2 3 -------2列 3列 4列 5列    // NSLog(@"%d",sender.selectedSegmentIndex);    int segmentIndex = sender.selectedSegmentIndex;    int colsNum = segmentIndex + 2;        // 在调整位置之前,先要在self.view.subViews数组里面,将添加按钮放到最一个位置    // 通过tag取到addButton    UIButton *addBtn = [self.view viewWithTag:kAddButton_Tag];    // 为了能够始终让addBtn在self.view的最后一个,先将其移出父控件,再加到父控件    [addBtn removeFromSuperview];    [self.view addSubview:addBtn];    // 调用自定义方法  调整原来的位置    [self alinmentWithCols:colsNum];           }// 抽取出来的方法,分为添加和取出重新调整2种处理方式,判断方法是 view中的子控件数目是否只有一个segmentControl- (void) alinmentWithCols:(int)colsNum{    // 如果子控件个数为 1 即只有 segmentControl这一个控件,那么添加,否则,重新调整位置    int subViewsCount = [[self.view subviews] count];    //NSLog(@"子控件个数:%d---",subViewsCount);    // 抽取出来的共同代码        int n = subViewsCount - 1;    // 如果 n = 0,说明只有一个segment,此时要添加3个imageView    // 否则,取出所有的子控件,重新 设置位置    for (int i=0; i<=(n==0?3:n-1); i++) {                // 调用自定义的方法,通过控件在格子中的索引即排号,算出其应该在哪一行,哪一列,从而得到其坐标        CGPoint pos = [self getPositionByIndexInCell:i];                        // 不同处理方式        if (subViewsCount == 1) {            NSString *imgName = [NSString stringWithFormat:@"01%d.png",i];            [self addImg:imgName x:pos.x y:pos.y];        } else {            // 当点击 segment的时候,不应该再次添加imageView,而是应该取出,重新设置xy            // [self addImg:imgName x:x y:y];            NSArray *array = [self.view subviews];            NSLog(@"正在重新设置%@的位置",[array[i+1] class]);            UIView *view = array[i+1];            [UIView animateWithDuration:1 animations:^{                // 以下三步为OC标准代码,因为OC中不允许直接修该对象中结构体属性的成员的值,要通过中间的临时结构体变量                CGRect frame = view.frame;                frame.origin = CGPointMake(pos.x, pos.y);                view.frame=frame;            }];        } // end of if else  } // end  of  for 循环    } // end of function@end

效果图1

效果图2