博客> iOS开发之图文混排
iOS开发之图文混排
2018-06-20 23:31 评论:0 阅读:145 hmj

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

这个功能的设计思路版本是: 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;

}

-(void)cellAddSubview:(UIView *)view{

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

    [self.totalViewArr addObject:view];
    self.lastView=view;
    self.totalViewsCount++;
    view.tag=930+self.totalViewArr.count;

    [cell.contentView addSubview:view];
    self.cellHeight=self.lastView.frame.origin.y+self.lastView.frame.size.height+13;
    [self.tableview reloadData];
}
//长按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 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> 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 回到顶部