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