IOS 实现美图秀秀
以上界面效果是单张图片的编辑 ： 具体实现过程如下：
- 第一个界面要实现两个按钮， 1.1给按钮添加点击事件 ，图片， 1.2.跳转到系统相册。
两个按钮要有tag 跳转到系统相册 的代码：@interface ViewController ()<UINavigationControllerDelegate, UIImagePickerControllerDelegate>
- (IBAction)clicked:(UIButton*)sender {
if (sender.tag==0) {
//单张编辑
self.isEdit = YES; //声明成属性后，点击跳转的时候就可以进行判断是单张还是多张了
}else{//拼接
self.isEdit = NO;
self.selectedImageViews = [NSMutableArray array];
}
// self.isEdit = sender.tag==0?YES:NO;
// self.isEdit = sender.tag==0;
//获取系统相册：
UIImagePickerController *ipc = [[UIImagePickerController alloc]init];
[ipc setSourceType:UIImagePickerControllerSourceTypePhotoLibrary];
ipc.delegate = self;
[self presentViewController:ipc animated:YES completion:nil];
}//判断第几个navigationcontroller然后具体跳转到哪个界面
-(void)navigationController:(UINavigationController *)navigationControllerwillShowViewController:(UIViewController*)viewController animated:(BOOL)animated{
self.navi= navigationController;
//判断是编辑还是拼接
if (!self.isEdit&&navigationController.viewControllers.count==2) {//拼接
//这里做的就是先区分，要是第二个拼接的话 里面有相关代码；
UIView *v = [[UIView alloc]initWithFrame:CGRectMake(0, self.view.bounds.size.height-100, 320, 100)];
v.backgroundColor = [UIColor redColor];
[viewController.view addSubview:v];
self.sv = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 20, 320, 80)];
[v addSubview:self.sv];
UIButton *doneBtn = [[UIButton alloc]initWithFrame:CGRectMake(260, 0, 60, 20)];
[doneBtn addTarget:self action:@selector(doneAction) forControlEvents:UIControlEventTouchUpInside];
[doneBtn setTitle:@"Done" forState:UIControlStateNormal];
[v addSubview:doneBtn];
}
}
//因为点击跳转后，需要将点击的系统相册的地址传到下一个界面， 因为系统相册界面是调用的，是navigation的所以在跳转的时候不能连线，只能通过，self.storyboard;
- (void)imagePickerController:(UIImagePickerController *)pickerdidFinishPickingMediaWithInfo:(NSDictionary*)info{
UIImage *image = info[UIImagePickerControllerOriginalImage];//原始图片的地址给uiimage;
//判断是编辑还是拼接
if (self.isEdit) { 编辑： 因为self.isEdit是Bool是真值，所以：
//跳转页面
EditViewController *vc = [self.storyboard instantiateViewControllerWithIdentifier:@"EditViewController"];
vc.editImage = image;//创建一个新的 编辑页面 然后进行跳转
[self.navi pushViewController:vc animated:YES];
}else{//拼接
UIImageView *imageView= [[UIImageView alloc]initWithFrame:CGRectMake(80*self.selectedImageViews.count,0, 80, 80)];
imageView.image =image;
[self.sv addSubview:imageView];
[self.selectedImageViews addObject:imageView];
//设置滚动
self.sv.contentSize= CGSizeMake(self.selectedImageViews.count*80, 0);
}
}
3.边框界面，以及绘图页面了： 先来说下页面控件的情况： 视图中： 最底下是个VIEW 上面放了个uiimageview 然后放了个 边框的 一个绘制的；
下面的选项按钮 背景是个图片， 3个按钮 3个按钮有选中状态下的高亮图片，如果在代码中实现 这个按钮的selected的话 就会将图片显示出来
1实现步骤： 实现从系统相册中选择图片 显示到editviewcontroller里 然后实现 下面的scollView 将边框添加进去。
- 实现点击按钮不同的展示风格；
按钮显示：
- (IBAction)mainPadClicked:(UIButton*)sender {
//把之前显示的隐藏掉
switch (sender.tag) {
case 0://边框
//隐藏其它
self.effectSV.hidden= YES;
self.effectBtn.selected= NO;
self.painBtn.selected= NO;
self.painView.hidden= YES;
self.painBtn.selected= NO;
self.drawView.userInteractionEnabled =NO;
self.frameSV.hidden= !self.frameSV.hidden;
sender.selected= !self.frameSV.hidden;
break;
case 1://特效
//隐藏其它
self.frameSV.hidden= YES;
self.frameBtn.selected= NO;
self.painBtn.selected= NO;
self.painView.hidden= YES;
self.painBtn.selected= NO;
self.drawView.userInteractionEnabled =NO;
self.effectSV.hidden= !self.effectSV.hidden;
sender.selected= !self.effectSV.hidden;
break;
case 2://绘制
//隐藏其它
self.effectSV.hidden= YES;
self.effectBtn.selected= NO;
self.frameSV.hidden= YES;
self.frameBtn.selected= NO;
self.painView.hidden= !self.painView.hidden;
sender.selected= !self.painView.hidden;
self.drawView.userInteractionEnabled =self.painBtn.selected;
break;
}
}
然后再程序的入口出把点击的图片传过来， B页面需要声明变量接收
- (void)viewDidLoad {
[super viewDidLoad];
self.currentColor= [UIColor blackColor];
self.currentWidth = 1;
self.drawView.delegate = self;
//把传递过来的图片显示
self.editImageView.image = self.editImage;
// 把边框的SV初始化
[self initFrameSV];
//初始化特效的SV里面的内容
[self initEffectSV];
//添加保存按钮
UIBarButtonItem *saveItem = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemSave target:self action:@selector(saveAction)];
self.navigationItem.rightBarButtonItem = saveItem;
}
给滑动控件中添加边框图片：
-(void)initFrameSV{
for (inti=0; i<23;i++) {
UIButton *frameBtn = [[UIButton alloc]initWithFrame:CGRectMake(50*i, 0, 50, 70)];
frameBtn.tag = i;
NSString *imageName = [NSString stringWithFormat:@"i-%02d.png",i];
//如果不是设置背景图片的话
[frameBtn setBackgroundImage:[UIImage imageNamed:imageName] forState:UIControlStateNormal];
//代码的点击事件，没有实现。 相框中添加按钮：
[frameBtn setImage:[UIImage imageNamed:@"icon_frame_select.png"] forState:UIControlStateSelected];
[frameBtn addTarget:self action:@selector(clickedFrame:)forControlEvents:UIControlEventTouchUpInside];
[self.frameSV addSubview:frameBtn];
}
self.frameSV.contentSize = CGSizeMake(50*23, 0);
}
接下来的工作就是当点击一个边框按钮的时候 右下角标的选中状态只有一个 点击任何一个 其他的都不显示那个角标
-(void)clickedFrame:(UIButton*)btn{
//拿到所有的边框按钮让每一个都不选中
for (UIView*subView in self.frameSV.subviews){
if ([subView isMemberOfClass:[UIButtonclass]]) {
UIButton*button = (UIButton*)subView;
button.selected= NO;
}
//以上的代码是实现在加边框的时候 那个按钮的图片 下面有个对勾。 下面的代码是真正实现加边框
}
btn.selected = YES;
NSString *imageName = [NSString stringWithFormat:@"%02d.png",btn.tag];//这里一个很重要的地方是 btn.tag= I;
self.frameIV.image = [UIImageimageNamed:imageName];
}
//到上面的位置的话 加边框的效果就实现完了；
4下面的代码是实现特效