IOS 实现美图秀秀

以上界面效果是单张图片的编辑 ：  具体实现过程如下：

 

1. 第一个界面要实现两个按钮，  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  将边框添加进去。

2. 实现点击按钮不同的展示风格；

 

 

按钮显示：

- (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下面的代码是实现特效