最终效果图:
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