自己做了一遍,现在再复习一下,总结一下。

最终效果如下

       

1、新建一个工程Single View Application

总体如下

不过要关闭自动布局功能

这是按下设置按钮显示的界面
默认是隐藏的,可以在设置时改变坐标显示出来,之后在隐藏

关于导入图片:

  可以新建一个组,将图片拖拽到文件夹里。

给各个组件设置默认值,这里准备的时16张图片,所以都是按16张算得

  顶部默认是1/16

  滑动条是0到15,默认是0

  图片默认显示 0.png

2、然后给各个需要的控件添加属性和监听事件

如下:

 #import <UIKit/UIKit.h>

 @interface SLQViewController : UIViewController
- (IBAction)sliderValueChanged:(UISlider *)slider; // 滑动条-改变图显示顺序的监听事件
@property (weak, nonatomic) IBOutlet UIImageView *imageView; // 图片显示对象
@property (weak, nonatomic) IBOutlet UILabel *imageNum; // 顶部图片显示的顺序
@property (weak, nonatomic) IBOutlet UILabel *imageInfo; // 底部图片的描述信息
@property (weak, nonatomic) IBOutlet UIView *settingView; // 设置界面
- (IBAction)setting:(id)sender; // 设置按钮监听事件
- (IBAction)imageSizeChange:(UISlider *)sender;// 设置界面改变图片大小的监听事件
- (IBAction)nightModel:(UISwitch *)sender;// 设置界面switch按钮的监听事件 @end

3、主界面代码实现

  1、先让顶部的lable标签随滚动条值的改变而改变

  这里定义的又 imageNum 属性来控制lable标签。还有滑动条的监听事件 imageSizeChange

  首先获取滑动条改变值,然后设置要显示在 imageNum 的信息。

    // 设置显示第几张, %.f 不保存任何小数,因为是从0开始的,所以显示要加1
_imageNum.text = [NSString stringWithFormat:@"%.f/16",slider.value + ];

  随着滑动条的拖拽,imageNum 的值一直在改变。

  2、接着显示图片  imageView

  首先获取滑动条改变值,然后设置要显示在 imageView 的信息。

     // 设置中间的图片
// 获得文件名 %.f 不保存任何小数,图片的编号是从0开始的,直接取就行
NSString *name = [NSString stringWithFormat:@"%.f.png",slider.value]; //
4   _imageView.image = [UIImage imageNamed:name]; // 设置要显示的图片到控件

  随着滑动条的拖拽,图片 的值一直在改变。注意观察和顶部文字顺序是否一致。

  3、显示图片的文字描述信息iamgeInfo

  因为有十几张图片的描述信息,所以我们使用plist来保存文字信息。然后通过代码读取文件获得信息。

  首先新建一个plist文件

  

  然后选择类型为数组,点击加号添加条目

  

  添加结果如下

  

  现在就来读取这个plist文件,需要使用到一个类 NSBundle,获取主程序的全路径

  NSBundle 会获取主程序的安装目录,可以读取下面的配置文件。使用方式如下:
     // 如果要访问资源包中得所有资源,可以通过这个类访问,
NSBundle *bundle = [NSBundle mainBundle];
// 获取全路径
NSString *path = [bundle pathForResource:@"desc" ofType:@"plist"];
// 加载所有描述
_array= [NSArray arrayWithContentsOfFile:path];

  其中_array 是定义的一个NSArray数组的属性,用来保存文字描述信息

  又因为这个文字描述从读取出来后一直没有改变,所以把它的读取放在 viewDidLoad 方法中。

  viewDidLoad方法会在主界面加载后执行,并且只会执行一次。

  读取文件如下

 - (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib. // 设置描述
// 如果要访问资源包中得所有资源,可以通过这个类访问,
NSBundle *bundle = [NSBundle mainBundle];
// 获取全路径
NSString *path = [bundle pathForResource:@"desc" ofType:@"plist"];
// 加载所有描述
_array= [NSArray arrayWithContentsOfFile:path];
_imageInfo.text = _array[]; // 设置默认显示描述
}

  设置要显示的描述 改变imageInfo控件的text属性的值

     // 设置描述,因为slider.value是按浮点值进行改变的,强制转换成int型要进行四舍五入1.40-> 1,但是如果加0.5就会改善这种误差
int index = (int)(slider.value + 0.5); // +0.5是为了消除强制转换的四舍五入所
_imageInfo.text = _array[index]; // 设置显示描述

4、设置界面的实现 settingView

  1、实现按下弹出,再次按下隐藏

  首先在main.storyboard界面将settingView隐藏起来,将坐标改到刚好隐藏到底部。我这里设置的y坐标是480  

 - (IBAction)setting:(id)sender
{
// 动画开始
[UIView beginAnimations:nil context:nil];
// 设置动画时间
[UIView setAnimationDuration:0.5];
// 取出中点,现在是隐藏状态的中点
CGPoint center = _settingView.center; // 修改y值,如果要_settingView的y坐标值和整个主界面的高度相同,那么就没显示到主界面中
if (_settingView.frame.origin.y == self.view.frame.size.height) // 没出现就弹出
{
center.y -= _settingView.bounds.size.height; // _settingView的y值减去自身的高度,那么可将界面显示到主界面
}
else
{
center.y += _settingView.bounds.size.height; // 已经出现就隐藏
}
// 重新赋值
_settingView.center = center;
// 执行动画
[UIView commitAnimations];
}

  2、夜间模式实现

  这里实现的比较简单,知识改变主界面的背景色

 - (IBAction)nightModel:(UISwitch *)sender
{
if (!sender.on) // 如果开关关闭就显示白色
{
self.view.backgroundColor = [UIColor whiteColor]; // 关闭--背景显示白色 }
else // 否则显示灰色
self.view.backgroundColor = [UIColor darkGrayColor]; // 打开--背景显示灰色
}

  3、图片大小改变

  这里直接改变图片控件的transform属性

 - (IBAction)imageSizeChange:(UISlider *)sender
{
// transform 属性修改
_imageView.transform = CGAffineTransformMakeScale(sender.value, sender.value);
}

整个 SLQViewController.m文件如下:

 //
// SLQViewController.m
// 图片浏览器
//
// Created by Christian on 15/4/25.
// Copyright (c) 2015年 itcast. All rights reserved.
// #import "SLQViewController.h" @interface SLQViewController ()
{
NSArray *_array; // 保存文字描述信息
} @end @implementation SLQViewController - (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib. // 3、设置描述
// 如果要访问资源包中得所有资源,可以通过这个类访问,
NSBundle *bundle = [NSBundle mainBundle];
// 获取全路径
NSString *path = [bundle pathForResource:@"desc" ofType:@"plist"];
// 加载所有描述
_array= [NSArray arrayWithContentsOfFile:path];
_imageInfo.text = _array[]; // 设置默认显示描述
} - (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
} - (IBAction)sliderValueChanged:(UISlider *)slider
{
// 1、设置中间的图片
// 获得文件名 %.f 不保存任何小数
NSString *name = [NSString stringWithFormat:@"%.f.png",slider.value];
_imageView.image = [UIImage imageNamed:name];
// 2、设置显示第几张
_imageNum.text = [NSString stringWithFormat:@"%.f/16",slider.value + ];
// 3、设置描述
int index = (int)(slider.value + 0.5); // +0.5是为了消除强制转换的四舍五入所
_imageInfo.text = _array[index]; // NSLog(@"%d",index); }
- (IBAction)setting:(id)sender
{
// 动画开始
[UIView beginAnimations:nil context:nil];
// 设置动画时间
[UIView setAnimationDuration:0.5];
// 取出中点,现在是隐藏状态的中点
CGPoint center = _settingView.center; // 修改y值,如果要_settingView的y坐标值和整个主界面的高度相同,那么就没显示到主界面中
if (_settingView.frame.origin.y == self.view.frame.size.height) // 没出现就弹出
{
center.y -= _settingView.bounds.size.height; // _settingView的y值减去自身的高度,那么可将界面显示到主界面
}
else
{
center.y += _settingView.bounds.size.height; // 已经出现就隐藏
}
// 重新赋值
_settingView.center = center;
// 执行动画
[UIView commitAnimations];
} - (IBAction)imageSizeChange:(UISlider *)sender
{
// transform 属性修改
_imageView.transform = CGAffineTransformMakeScale(sender.value, sender.value);
} - (IBAction)nightModel:(UISwitch *)sender
{
if (!sender.on) // 如果开关关闭就显示白色
{
self.view.backgroundColor = [UIColor whiteColor]; // 关闭--背景显示白色 }
else // 否则显示灰色
self.view.backgroundColor = [UIColor darkGrayColor]; // 打开--背景显示灰色
} @end

整个过程大概就是这样,每天进步一点点。

最新文章

  1. chrome断点续传功能
  2. 【leetcode❤python】66. Plus One
  3. 使用queryperf对DNS服务器作压力测试
  4. zoj1654 Place the Robots 二分图最大匹配
  5. 【原】无脑操作:Centos 7后台运行及终止jar包程序
  6. How to Change Error Message Colors in Windows 10 PowerShell Console
  7. Python自定义异常及抛出异常
  8. 亿级 ELK 日志平台构建部署实践
  9. 【POJ2248】加法链 idfs
  10. JAVA代码MD5加密方法
  11. 三篇文章了解 TiDB 技术内幕——说存储
  12. PKU2503_map应用
  13. http get 方式参数的长度限制&lt;转&gt;
  14. Netty源码分析第5章(ByteBuf)----&gt;第6节: 命中缓存的分配
  15. Jump Game - LeetCode
  16. sparse coding
  17. mongodb C++ Driver安装
  18. Android新的menu实现——ActionMode
  19. oracle约束约束状态和设计习惯
  20. HttpWebRequest 请求 Api 及 异常处理

热门文章

  1. 【Java/Android性能优5】 Android ImageCache图片缓存,使用简单,支持预取,支持多种缓存算法,支持不同网络类型,扩展性强
  2. Hadoop 分片、分组与排序
  3. 使用bouncycastle进行DESede/DESeee/AES128/AES192/AES256的加解密
  4. iOS Dispatch_sync 阻塞线程的原因
  5. java基础编程——二维数组中的查找
  6. macbook pro开机键盘键盘和触摸板没反应问题
  7. Vue项目中遇到的一些问题总结
  8. vue watch深度监听对象,实现数据联动
  9. SummerVocation_Learning--java的线程同步
  10. 【NTT】bzoj3992: [SDOI2015]序列统计