UI控件基础篇————简易图片浏览器

在上一课中已经学过UIlabel、UITextfield、UIBuutton等一些常用的基础控件，今天继续来学习一些新的控件。

制作图片浏览器

一、搭建UI界面 (第一个界面)

1.在storyboard中拖拽控件进行界面布局(button label imageview label slider)

(1) 设置图片：把图片放至项目中，support file—>images  图片自适应屏幕：Aspect fit

(2) 监听事件：通过slider来控制图片，属于值改变，用IBAction来监听slider，进行连线。

(规律：哪一个控件触发了这个事件，就把哪一个控件传进来)

(3) 实现slider监听方法

拥有图片、序号、文字描述属性，拥有属性用outlate,进行连线

@interface ViewController : UIViewController

// slider监听方法
- (IBAction)sliderViewChange:(UISlider *)sender;

// 图片、序号、文字描述
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (weak, nonatomic) IBOutlet UILabel *imageNo;
@property (weak, nonatomic) IBOutlet UILabel *imageDesc;

@end

(4) 在.m文件中实现

@implementation ViewController

#pragma mark 控制器的view加载完毕后会调用一次
- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 获取资源包
    NSBundle *bundle = [NSBundle mainBundle];
    
    // 获取文件的全路径
    NSString *path = [bundle pathForResource:@"descs"ofType:@"plist"];
    
    // 加载path对应的文件来创建数组
    _allDescs = [NSArray arrayWithContentsOfFile:path];
    
    // 设置默认描述
    _imageDesc.text = _allDescs[0];
    
    
}

// 设置图片
- (IBAction)sliderViewChange:(UISlider *)sender {
    
    // 1.设置中间的图片
    // 获取图片名称
    NSString *imageName = [NSString stringWithFormat:@"%.f.png",sender.value];
    _imageView.image = [UIImage imageNamed:imageName];
    
    // 设置序号第几张
    _imageNo.text = [NSString stringWithFormat:@"%.f/16",sender.value + 1];
    
    // 设置文字描述
    int no = (int)(sender.value + 0.5);
   
    _imageDesc.text = _allDescs[no];
    
}

@end

二、实现隐藏/显示界面(第二个界面)

1.搭建界面

(1)  在storyboard中拖拽控件进行界面布局(label label slider switch)

(2）连线 监听设置控制settingView(小界面)移动

#pragma mark 点击了设置
- (IBAction)setting {
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.5];
    
    // 1.取出中点
    CGPoint tempCenter = _settingView.center;
    
    // 2.修改y值
    if(_settingView.frame.origin.y == self.view.frame.size.height){
    tempCenter.y -= _settingView.bounds.size.height;
    }else{
        tempCenter.y += _settingView.bounds.size.height;
    }
    // 3.重新赋值
    _settingView.center = tempCenter;
    
    [UIView commitAnimations];
}

2.在settingVIew中搭建其他控件(夜间模式switch、图片大小slider)

- (IBAction)nightMode:(UISwitch *)sender;
- (IBAction)imageSiaeChange:(UISlider *)sender;

#pragma mark 夜间模式
- (IBAction)nightMode:(UISwitch *)sender {
    
    if(sender.on){
        self.view.backgroundColor = [UIColor darkGrayColor];
    } else{
        self.view.backgroundColor = [UIColor whiteColor];
    }
}

#pragma mark 图片尺寸
- (IBAction)imageSiaeChange:(UISlider *)sender {
    
    _imageView.transform = CGAffineTransformMakeScale(sender.value,sender.value);
}

完成。