博客> iOS开发之图文混排
iOS开发之图文混排
2018-09-18 12:42 评论:0 阅读:399 hmj
ios 图片 动态布局 文字 增删改

前阵子工作不忙,正好自己又想要做图片和文字的混编,虽然知道类似的软件有很多,但是因为平时只用原生的相机,所以对五花八门的相机也不了解,所以就想着自己来实现这个功能。

这个功能的设计思路版本是: 1.最开始只打算加一张图片和一段文字,所以就很死板,都是固定好的,没什么新意; 2.后来想着一张图片一段文字的固定格式,还是觉得不人性化,就想着任由使用者随意添加图片和文字,并且如果第一个添加的控件是textview,就默认文本居中,类似标题的存在; 3.第2个功能实现后,有一天晚上编辑图片给朋友的时候,发现一旦添加好不想要了就得重新开头做,然后就想着再添加个可以删除imageview和textview的功能,并且imageview可以修改图片; 4.做完第三个功能后,觉得大致实现了,然后突然想到我可以再添加一个拖动textview改变页面布局的功能; 5.增加了添加输入框前先选择文本对齐方式的功能; 6.完成。

最终效果预览

点击此处预览

textview相关

//文本按钮
-(UIButton *)textButton{
    if (_textButton==nil) {
        _textButton=[UIButton buttonWithType:UIButtonTypeCustom];
        [_textButton setImage:[UIImage imageNamed:@"text"] forState:UIControlStateNormal];
        _textButton.layer.cornerRadius=25;
        _textButton.layer.masksToBounds=YES;
        _textButton.backgroundColor=[UIColor whiteColor];
        [_textButton addTarget:self action:@selector(textButtonAction) forControlEvents:UIControlEventTouchUpInside];
    }
    return _textButton;
}
//文本按钮事件
-(void)textButtonAction{
    self.chooseAlignmentView.hidden=NO; 
}
//选择文本对齐方式view
-(UIView *)chooseAlignmentView{
    if (_chooseAlignmentView==nil) {
        _chooseAlignmentView=[[UIView alloc]initWithFrame:CGRectMake([UIScreen mainScreen].bounds.size.width-145, self.textButton.frame.origin.y, 170, 50)];
        _chooseAlignmentView.layer.cornerRadius=25;
        _chooseAlignmentView.layer.masksToBounds=YES;
        _chooseAlignmentView.layer.borderColor=[[UIColor whiteColor] CGColor];
        _chooseAlignmentView.layer.borderWidth=2;
        _chooseAlignmentView.backgroundColor=[UIColor colorWithRed:253/255.0 green:163/255.0 blue:155/255.0 alpha:1];
       //创建文本左对齐textview
        UIButton *leftButton=[UIButton buttonWithType:UIButtonTypeCustom];
        leftButton.backgroundColor=[UIColor colorWithRed:253/255.0 green:163/255.0 blue:155/255.0 alpha:1];
        [leftButton setImage:[UIImage imageNamed:@"left"] forState:UIControlStateNormal];
        leftButton.layer.cornerRadius=20;
        leftButton.layer.masksToBounds=YES;
        leftButton.tag=1000;
        [leftButton addTarget:self action:@selector(alignButtonAction:) forControlEvents:UIControlEventTouchUpInside];
        //创建文本居中对齐的textview
        UIButton *centerButton=[UIButton buttonWithType:UIButtonTypeCustom];
        centerButton.layer.cornerRadius=20;
        centerButton.layer.masksToBounds=YES;
        centerButton.backgroundColor=[UIColor colorWithRed:253/255.0 green:163/255.0 blue:155/255.0 alpha:1];
        [centerButton setImage:[UIImage imageNamed:@"center"] forState:UIControlStateNormal];
        centerButton.tag=2000;
        [centerButton addTarget:self action:@selector(alignButtonAction:) forControlEvents:UIControlEventTouchUpInside];
        //取消创建textview
        UIButton *cancelButton=[UIButton buttonWithType:UIButtonTypeCustom];
        cancelButton.layer.cornerRadius=20;
        cancelButton.layer.masksToBounds=YES;
        cancelButton.backgroundColor=[UIColor colorWithRed:253/255.0 green:163/255.0 blue:155/255.0 alpha:1];
        [cancelButton setImage:[UIImage imageNamed:@"cancel1"] forState:UIControlStateNormal];
        cancelButton.tag=3000;
        [cancelButton addTarget:self action:@selector(cancelButtonAction) forControlEvents:UIControlEventTouchUpInside];

        leftButton.frame=CGRectMake(25, 5, 40, 40);
        [_chooseAlignmentView addSubview:leftButton];
        centerButton.frame=CGRectMake(65, 5, 40, 40);
        [_chooseAlignmentView addSubview:centerButton];
        cancelButton.frame=CGRectMake(105, 5, 40, 40);
        [_chooseAlignmentView addSubview:cancelButton];

        _chooseAlignmentView.hidden=YES;
    }
    return _chooseAlignmentView;
}

-(void)cancelButtonAction{
    self.chooseAlignmentView.hidden=YES;
}

-(void)alignButtonAction:(UIButton *)button{
        UITextView * textview=[UITextView new];
        textview.layer.borderColor=[UIColor redColor].CGColor;
        textview.layer.borderWidth=2;
        textview.delegate=self;
        textview.text=@"";
        textview.backgroundColor=[UIColor clearColor];
        textview.font=[UIFont fontWithName:@"FZJLJW--GB1-0" size:26];
        self.toolBarView.frame=CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, 44);
        textview.inputAccessoryView=self.toolBarView;
    //给textview添加长按手势
        UILongPressGestureRecognizer *longPress=[[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(longTap:)];
        [textview addGestureRecognizer:longPress];
    //给textview添加拖拽手势
        UIPanGestureRecognizer *ges=[[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panAction:)];
        [textview addGestureRecognizer:ges];

        if (self.totalViewsCount==0) {
//如果创建的该textview是创建的第一个控件的布局
            textview.frame=CGRectMake(8, 8, [UIScreen mainScreen].bounds.size.width-16, 80);
            if (button.tag==1000) {
                textview.textAlignment=NSTextAlignmentLeft;
            }else{
                textview.textAlignment=NSTextAlignmentCenter;
            }
        }else{
//如果创建的该textview不是第一个控件的布局,lastview记录的是该页面的最后一个控件
            textview.frame=CGRectMake(8, self.lastView.frame.origin.y+self.lastView.frame.size.height+8, [UIScreen mainScreen].bounds.size.width-16, 80);
            if (button.tag==1000) {
                textview.textAlignment=NSTextAlignmentLeft;
            }else{
                textview.textAlignment=NSTextAlignmentCenter;
            }
        }

        [self cellAddSubview:textview];

    self.chooseAlignmentView.hidden=YES;

}
//长按textview选择是否删除
-(void)longTap:(UITapGestureRecognizer *)ges{

    UIAlertController *alertVC=[UIAlertController alertControllerWithTitle:@"确定删除吗" message:nil preferredStyle:UIAlertControllerStyleAlert];
    [alertVC addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {

    }]];
    [alertVC addAction:[UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

        self.changedTextview=(UITextView *)ges.view;
        //从self.totalViewArr中删除需要删除的textview
        NSMutableArray *tmp=[NSMutableArray array];
        for (UIView *view in self.totalViewArr) {
            if (view.tag==self.changedTextview.tag) {

            }else{
                [tmp addObject:view];
            }
        }
        self.totalViewArr=[NSMutableArray arrayWithArray:tmp];
//给self.totalViewArr中的控件重新赋tag值
        for (UIView *view in self.totalViewArr) {
            NSInteger index=[self.totalViewArr indexOfObject:view];
            view.tag=931+index;
        }

        [self reLayoutSubviewsInCell:self.changedTextview];

    }]];

    [self presentViewController:alertVC animated:YES completion:^{

    }];
}
//重新布局tableviewcell中的子控件
-(void)reLayoutSubviewsInCell:(UIView *)changedView{

    UITableViewCell *cell=[self.tableview cellForRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0]];

    NSArray *views=cell.contentView.subviews;

    for (int i=0; i<views view=views[i]; xss=removed i=0; view=self.totalViewArr[i]; rect=view.frame; view.frame=CGRectMake(rect.origin.x, self.lastView=[self.totalViewArr self.cellHeight=self.lastView.frame.origin.y+self.lastView.frame.size.height+13; cell=[self.tableview self.lastView=view; view.tag=930+self.totalViewArr.count; self.cellHeight=self.lastView.frame.origin.y+self.lastView.frame.size.height+13; cell=[self.tableview gesview=ges.view; point=[ges xss=removed>=0) {
            NSMutableArray *tmp=[NSMutableArray array];
            //往下
            for (int i=(int)gesview.tag-930; i<self view=self.totalViewArr[i]; xss=removed>view.center.y ) {
                       //ok
                        if (self.totalViewArr.count==2) {
                            UIView *last=[self.totalViewArr lastObject];
                            CGRect rect=last.frame;
                            last.frame=CGRectMake(rect.origin.x,gesview.frame.origin.y ,rect.size.width , rect.size.height);
                            gesview.frame=CGRectMake(gesview.frame.origin.x, last.frame.size.height+last.frame.origin.y+8, gesview.frame.size.width, gesview.frame.size.height);
                            [tmp addObject:last];
                            [tmp addObject:gesview];
                            [self breakFor:tmp];
                            break;
                        }else{
                            //ok
                            if (gesview.tag==931) {
                                for (int j=1; j<self view=self.totalViewArr[j]; rect=view.frame; view.frame=CGRectMake(rect.origin.x, last=tmp[self.totalViewArr.count-2]; gesview.frame=CGRectMake(gesview.frame.origin.x, j=0; view=self.totalViewArr[j]; j=(int)gesview.tag-930; view=self.totalViewArr[j]; rect=view.frame; view.frame=CGRectMake(rect.origin.x, last=[tmp gesview.frame=CGRectMake(gesview.frame.origin.x, nextView=self.totalViewArr[i+1];>view.center.y && gesview.center.y+point.y<nextView xss=removed j=1; view=self.totalViewArr[j]; rect=view.frame; view.frame=CGRectMake(rect.origin.x, pre=self.totalViewArr[i]; gesview.frame=CGRectMake(gesview.frame.origin.x, j=i+1; view=self.totalViewArr[j]; j=0; j=(int)gesview.tag-930; tmpview=self.totalViewArr[j]; rect=tmpview.frame; tmpview.frame=CGRectMake(rect.origin.x, last=[tmp gesview.frame=CGRectMake(gesview.frame.origin.x, j=i+1; tmp=[NSMutableArray i=0; view=self.totalViewArr[i]; xss=removed gesview.frame=CGRectMake(gesview.frame.origin.x, view.frame=CGRectMake(view.frame.origin.x, xss=removed xss=removed gesview.frame=CGRectMake(gesview.frame.origin.x, j=0; viewtmp=self.totalViewArr[j]; viewtmp.frame=CGRectMake(viewtmp.frame.origin.x, xss=removed view.tag!=931){ j=0; tmpview=self.totalViewArr[j]; gesview.frame=CGRectMake(gesview.frame.origin.x, j=(int)view.tag-931; tmpview=self.totalViewArr[j]; rect=tmpview.frame; tmpview.frame=CGRectMake(rect.origin.x,gesview.frame.size.height+8+rect.origin.y, xss=removed gesview.tag!=self.totalViewArr.count+930){ gesview.frame=CGRectMake(gesview.frame.origin.x, j=0; tmpview=self.totalViewArr[j]; rect=tmpview.frame; tmpview.frame=CGRectMake(rect.origin.x, j=(int)gesview.tag-930; tmpview=self.totalViewArr[j]; view.tag!=931 gesview.tag!=self.totalViewArr.count+930){ j=0; tmpview=self.totalViewArr[j]; gesview.frame=CGRectMake(gesview.frame.origin.x, j=i; tmpview=self.totalViewArr[j]; rect=tmpview.frame; tmpview.frame=CGRectMake(rect.origin.x,rect.origin.y+gesview.frame.size.height+8 j=(int)gesview.tag-930; tmpview=self.totalViewArr[j]; cell=[self.tableview self.totalViewArr=[NSMutableArray index=[self.totalViewArr view.tag=931+index; self.lastView=[self.totalViewArr xss=removed toolBarView=[[UIView toolBarView.backgroundColor=[UIColor self.exitButton.frame=CGRectMake([UIScreen xss=removed exitButton=[UIButton exitButton.backgroundColor=[UIColor exitButton.layer.cornerRadius=6; exitButton.layer.masksToBounds=YES; cell=[self.tableview views=cell.contentView.subviews; tmpView=nil; i=0; view=views[i]; xss=removed textview=(UITextView size=[textview.text rect=textview.frame; textview.frame=CGRectMake(rect.origin.x, tmpView=textview; textview=(UITextView size=[textview.text rect=textview.frame; textview.frame=CGRectMake(rect.origin.x, imageview=(UIImageView rect=imageview.frame; imageview.frame=CGRectMake(rect.origin.x, tmpView=view; self.lastView=tmpView; self.cellHeight=self.lastView.frame.origin.y+self.lastView.frame.size.height+13; self.tableview.contentOffset=CGPointMake(0, self.moveOrNot=NO; self.tableview.contentOffset=CGPointMake(0, xss=removed size=[textView.text self.changeHeight=size.height-self.beginSize.height; self.changedTextview=textView;> imageview相关

-(UIButton *)pictureButton{

if (_pictureButton==nil) {
    _pictureButton=[UIButton buttonWithType:UIButtonTypeCustom];
    [_pictureButton setImage:[UIImage imageNamed:@"picture"] forState:UIControlStateNormal];
    _pictureButton.layer.cornerRadius=25;
    _pictureButton.layer.masksToBounds=YES;
    _pictureButton.backgroundColor=[UIColor whiteColor];
    [_pictureButton addTarget:self action:@selector(pictureButtonAction) forControlEvents:UIControlEventTouchUpInside];
}
return _pictureButton;

} //点击图片按钮选择拍照还是相册 -(void)pictureButtonAction{

UIAlertController *alertVC=[UIAlertController alertControllerWithTitle:nil message:nil preferredStyle:UIAlertControllerStyleActionSheet];

[alertVC addAction:[UIAlertAction actionWithTitle:@"相册" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

    UIImagePickerController *vc=[[UIImagePickerController alloc]init];
    vc.delegate=self;
    vc.sourceType=UIImagePickerControllerSourceTypePhotoLibrary;
    vc.allowsEditing=YES;
    vc.videoQuality=UIImagePickerControllerQualityTypeHigh;

    [self presentViewController:vc animated:YES completion:^{

    }];

}]];

[alertVC addAction:[UIAlertAction actionWithTitle:@"拍照" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

    UIImagePickerController *vc=[[UIImagePickerController alloc]init];
    vc.delegate=self;
    vc.sourceType=UIImagePickerControllerSourceTypeCamera;
    vc.allowsEditing=YES;
    vc.videoQuality=UIImagePickerControllerQualityTypeHigh;

    [self presentViewController:vc animated:YES completion:^{

    }];

}]];

[alertVC addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {

}]];

[self presentViewController:alertVC animated:YES completion:^{

}];

} //图片选择完成后的操作 -(void)imagePickerController:(UIImagePickerController )picker didFinishPickingMediaWithInfo:(NSDictionary )info{

NSLog(@"%@",info);
UIImage *img=[info objectForKey:@"UIImagePickerControllerEditedImage"];
//UIImage *img=[info objectForKey:@"UIImagePickerControllerOriginalImage"];
CGSize size=img.size;

if (self.createOrNot==YES) {
    UIImageView * imageview1=[UIImageView new];
    imageview1.layer.cornerRadius=10;
    imageview1.layer.masksToBounds=YES;
    imageview1.layer.borderColor=[UIColor whiteColor].CGColor;
    imageview1.layer.borderWidth=6;
    imageview1.userInteractionEnabled=YES;
    imageview1.image=img;
    UITapGestureRecognizer *tap=[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(change:)];
    [imageview1 addGestureRecognizer:tap];

    if (self.totalViewsCount==0) {
        if (size.width>[UIScreen mainScreen].bounds.size.width) {
            imageview1.frame=CGRectMake(6, 8, [UIScreen mainScreen].bounds.size.width-12, size.height*([UIScreen mainScreen].bounds.size.width-12)/size.width);
        }else{
            imageview1.frame=CGRectMake([UIScreen mainScreen].bounds.size.width/2.0-size.width/2.0, 8,size.width, size.height);
        }

    }else{
        if (size.width>[UIScreen mainScreen].bounds.size.width) {
            imageview1.frame=CGRectMake(6, self.lastView.frame.origin.y+self.lastView.frame.size.height+8, [UIScreen mainScreen].bounds.size.width-12, size.height*([UIScreen mainScreen].bounds.size.width-12)/size.width);
        }else{
            imageview1.frame=CGRectMake([UIScreen mainScreen].bounds.size.width/2.0-size.width/2.0, self.lastView.frame.origin.y+self.lastView.frame.size.height+8,size.width, size.height);
        }

    }

    [self cellAddSubview:imageview1];

}else{
    self.needChangedImageview.image=img;
    self.createOrNot=YES;

}

[picker dismissViewControllerAnimated:YES completion:^{

}];

} //点击图片进行修改或删除 -(void)change:(UITapGestureRecognizer *)ges{

UIAlertController *alertVC=[UIAlertController alertControllerWithTitle:nil message:nil preferredStyle:UIAlertControllerStyleActionSheet];
[alertVC addAction:[UIAlertAction actionWithTitle:@"改变图片" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {
    self.createOrNot=NO;
    self.needChangedImageview=(UIImageView *)ges.view;
    [self pictureButtonAction];
}]];
[alertVC addAction:[UIAlertAction actionWithTitle:@"删除图片" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {

    UIImageView *imageview=(UIImageView *)ges.view;
    self.changedImageView=imageview;

    NSMutableArray *tmp=[NSMutableArray array];
    for (UIView *view in self.totalViewArr) {
        if (view.tag==imageview.tag) {

        }else{
            [tmp addObject:view];
        }
    }
    self.totalViewArr=[NSMutableArray arrayWithArray:tmp];
    for (UIView *view in self.totalViewArr) {
        NSInteger index=[self.totalViewArr indexOfObject:view];
        view.tag=931+index;
    }

    [self reLayoutSubviewsInCell:self.changedImageView];

}]];
[alertVC addAction:[UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {

}]];

[self presentViewController:alertVC animated:YES completion:^{

}];

}


> tableview相关

-(UITableView *)tableview{

if (_tableview==nil) {
    _tableview=[[UITableView alloc]init];
    _tableview.separatorStyle=UITableViewCellSeparatorStyleNone;
    _tableview.delegate=self;
    _tableview.dataSource=self;
}
return _tableview;

}

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{

return 1;

}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{

return 1;

}

-(UITableViewCell )tableView:(UITableView )tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

static NSString *cellid=@"cellid";

UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:cellid];

if (cell==nil) {
    cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellid];
    cell.selectionStyle=UITableViewCellSelectionStyleNone;
    cell.backgroundColor=[UIColor colorWithRed:arc4random()%6/255.0 green:arc4random()%6/255.0 blue:arc4random()%6/255.0 alpha:1];
    self.tableview.backgroundColor=cell.backgroundColor;

}

return cell;

}

-(CGFloat)tableView:(UITableView )tableView heightForRowAtIndexPath:(NSIndexPath )indexPath{

return self.cellHeight;

}


> 随机改变背景颜色

-(UIButton *)colorButton{

if (_colorButton==nil) {
    _colorButton=[UIButton buttonWithType:UIButtonTypeCustom];
    _colorButton.backgroundColor=[UIColor whiteColor];
    [_colorButton setImage:[UIImage imageNamed:@"color"] forState:UIControlStateNormal];
    _colorButton.layer.cornerRadius=25;
    _colorButton.layer.masksToBounds=YES;
    [_colorButton addTarget:self action:@selector(colorButtonAction) forControlEvents:UIControlEventTouchUpInside];
}
return _colorButton;

}

-(void)colorButtonAction{

UITableViewCell *cell=[self.tableview cellForRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0]];
cell.backgroundColor=[UIColor colorWithRed:arc4random()%6/255.0 green:arc4random()%6/255.0 blue:arc4random()%6/255.0 alpha:1];
self.tableview.backgroundColor=cell.backgroundColor;

}


> 保存图片到手机

-(UIButton *)saveButton{

if (_saveButton==nil) {
    _saveButton=[UIButton buttonWithType:UIButtonTypeCustom];
    _saveButton.backgroundColor=[UIColor whiteColor];
    [_saveButton setImage:[UIImage imageNamed:@"finish"] forState:UIControlStateNormal];
    _saveButton.layer.cornerRadius=25;
    _saveButton.layer.masksToBounds=YES;
    [_saveButton addTarget:self action:@selector(saveButtonAction) forControlEvents:UIControlEventTouchUpInside];
}
return _saveButton;

}

-(void)saveButtonAction{

UITableViewCell *cell=[self.tableview cellForRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:0]];

for (UIView *view in [cell.contentView subviews]) {
    if ([view isKindOfClass:[UITextView class]]) {
        UITextView *textview=(UITextView *)view;
        textview.layer.borderWidth=0;
    }
}
UIImageWriteToSavedPhotosAlbum([self convertViewToImage:cell], self, @selector(image:didFinishSavingWithError:contextInfo:), nil);

} //view转为image -(UIImage )convertViewToImage:(UIView )v{

CGSize s=v.bounds.size;
UIGraphicsBeginImageContextWithOptions(s, NO, [UIScreen mainScreen].scale);
[v.layer renderInContext:UIGraphicsGetCurrentContext()];

UIImage *image=UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;

} //保存结束后的回调

  • (void)image:(UIImage )image didFinishSavingWithError:(NSError )error contextInfo:(void *)contextInfo{

    if(error == nil) {

    NSLog(@"success");

    }else{

    NSLog(@"fail");

    }

}



好了,目前就这么多内容,欢迎指教。
收藏
0
sina weixin mail 回到顶部