IOS开发－UI学习－根据URL显示图片，下载图片的练习（button，textfield，image view，url，data）

编写一个如下界面，实现：

1、在文本输入框中输入一个网址，然后点击显示图片，图片显示到UIImageView中。

2、点击下载，这张显示的图片被下载到手机的Documents文件夹下的Dowmload目录下，并按序号命名。

3、在文本框输入完成之后点击其他地方，键盘自动消失。

 

准备工作：

1、输入的URL有可能是http而非https，需要在Info.plist中添加如下代码：

   <key>NSAppTransportSecurity</key>
    <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    </dict>

添加之后，Info.plist如下：

 

 

接下来是代码，代码全部写在UIViewController的.m文件中：

#import "ViewController.h"

@interface ViewController (){
//    定于全局变量
    UIButton *btnDownLoad;
    UIButton *btndisplay;
    UIImageView *imageView;
    UITextField *textFieldinputUrl;
    NSData *imagedata;
    NSString *newpath;
    int count;
    
    
}

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    
//    显示图片按钮初始化及加载
//    初始化为圆角矩形按钮
    btndisplay = [UIButton buttonWithType:UIButtonTypeRoundedRect];
//    设置按钮的位置，大小
    btndisplay.frame = CGRectMake(100, 660, 100 ,50 );
//    设置按钮背景色
    btndisplay.backgroundColor = [UIColor colorWithRed:0.512 green:0.562 blue:0.943 alpha:1.000];
//    设置按钮文本颜色及文本内容
    [btndisplay setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [btndisplay setTitle:@"显示图片" forState:UIControlStateNormal] ;
//    给按钮添加显示图片事件
     [btndisplay addTarget:self action:@selector(display:) forControlEvents:UIControlEventTouchUpInside];
//    把按钮加载到view上
    [self.view addSubview:btndisplay];
    
//   下载图片按钮初始化及加载
    btnDownLoad = [[UIButton alloc]initWithFrame:CGRectMake(218, 660, 100, 50)];
    btnDownLoad.backgroundColor = [UIColor colorWithRed:0.512 green:0.562 blue:0.943 alpha:1.000];
    [btnDownLoad setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [btnDownLoad setTitle:@"下载图片" forState:UIControlStateNormal] ;
    [btnDownLoad addTarget:self action:@selector(download:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btnDownLoad];
    
//    设置URL输入框
//    初始化文本输入框及背景色设置
    textFieldinputUrl = [[UITextField alloc]initWithFrame:CGRectMake(20, 590, 378, 50)];
    textFieldinputUrl.backgroundColor = [UIColor colorWithRed:0.653 green:1.000 blue:0.919 alpha:1.000];
//    设置文本输入前提示水印
    textFieldinputUrl.placeholder = @"请输入图片地址";
//    设置文本输入框中消除按钮
    textFieldinputUrl.clearButtonMode = UITextFieldViewModeAlways;
//    把文本输入框加载到View
    [self.view addSubview:textFieldinputUrl];
    
    
//    设置图片控件
    imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 20, 418, 550)];
    imageView.backgroundColor = [UIColor grayColor];
    [self.view addSubview:imageView];
    
//    获取沙盒中document的路径
    NSString *dictpath = [NSString stringWithFormat:@"%@/Documents",NSHomeDirectory()];
//    创造一个字符串指向document中的要新建的download文件夹
    newpath =[NSString stringWithFormat:@"%@/download",dictpath];
//    在document中新建download文件夹
    [[NSFileManager defaultManager]createDirectoryAtPath:newpath withIntermediateDirectories:YES attributes:nil error:nil];
    
    NSLog(@"%@",dictpath);
}


//显示图片
-(void)display:(id)sender{
    
//    把文本框输入的URL转换成数据
    NSURL *imageurl = [NSURL URLWithString:textFieldinputUrl.text];
    imagedata = [NSData dataWithContentsOfURL:imageurl];
//    把数据转换成图片
    UIImage *image = [UIImage imageWithData:imagedata];
//    转换的图片给UIImageView显示
    imageView.image =image;
    
}


//下载图片
-(void)download:(id)sender{
    count++;
//    在路径下新建图片文件
    NSString *newfilepath = [NSString stringWithFormat:@"%@/%d.jpg",newpath,count];
//    把图片数据保存在路径下新建好的文件中
    [[NSFileManager defaultManager]createFileAtPath:newfilepath contents:imagedata attributes:nil];
}


//输入结束后让键盘滚蛋
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    [textFieldinputUrl resignFirstResponder];
}



- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

 

最终输入URL点击显示图片之后显示：

 

点击下载图片之后，在手机中本软件的路径下：

 

 

需要注意的地方有：

1、文本框在输入完后，我们点击文本框之外的其他地方，键盘如何消失：

//输入结束后让键盘滚蛋
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    [textFieldinputUrl resignFirstResponder];
}

 

2、下载图片时如何自动为图片命名：定义一个全局变量用来计算点击下载图片按钮的次数，然后根据次数为图片命名，可保证不重名。然后生成格式化字符串作为下载后图片的名字：

//下载图片
-(void)download:(id)sender{
   count++;
//   在路径下新建图片文件
  看集  NSString *newfilepath = [NSString stringWithFormat:@"%@/%d.jpg",newpath,count];
//    把图片数据保存在路径下新建好的文件中
    [[NSFileManager defaultManager]createFileAtPath:newfilepath contents:imagedata attributes:nil];
}