UIKit之图片浏览器

功能需求

实现一个图片浏览器,点击左右按钮可以切换背景图,且更新背景图对应的索引页和图片描述内容。

分析:

  • 实现一个UIView的子类即可,该子类包含多个按钮。

实现步骤:

  1. 使用OC语言,故创建cocoa Touch类型文件。Xcode会创建.h文件和.m文件:PicBrowserDemo类。
    在这里插入图片描述

  2. 图片资源导入:注意图片不要重名
    注意各项的类型:Root是Array,其余是Dictionary

  3. 实现该类。
    该类带有多个控件,令其继承UIView。
    a. 声明类的成员变量:在.h文件中定义:,类型是strong。
    该图片浏览器需要两个可显示文字内容但不可修改的Label、两个前后图片切换的按钮以及承载图片的视图。
    在.h 文件中:

@interface PicBrowserDemo : UIView
@property(strong, nonatomic) UIImageView  *imageView;
@property(strong, nonatomic) UILabel *label1;
@property(strong, nonatomic) UILabel *label2;
@property(strong, nonatomic) UIButton *btn1;
@property(strong, nonatomic) UIButton *btn2;
@end

b. 创建plist类型文件,直接在项目下创建,plist文件属于resource类型文件,在该栏目下可找到。
选择root类型为Array,而每个元素设置为字典,因为每个字典中存图片的名称和title(描述)。

c. .m 文件:

// 1 plist:信息填写
// 2 初始化各个组件,显示的信息以第一张为基准
// 3 nxt
// 4 pre
// 5 降低冗余,合并:pre、nxt函数#import "PicBrowserDemo.h"// 写私有属性:在这里
@interface PicBrowserDemo()
// assign、strong的区别: asign表示基本类型的变量
@property(nonatomic, strong) NSArray *pic;
@property(nonatomic, assign) int index;@end// 从plist中读取到的各图片信息集合@implementation PicBrowserDemo
-(instancetype) initWithFrame:(CGRect)frame{self = [super initWithFrame:frame];if(self){// 初始化5个组件_imageView = [[UIImageView alloc] initWithFrame:CGRectMake(80, 230, 150, 150)];// 图片模式:放入如何显示的 按比例缩放,不会拉伸变形_imageView.contentMode = UIViewContentModeScaleAspectFit;// 初始化为pic中第一张图片NSDictionary *dict = self.pic[0];_imageView.image = [UIImage imageNamed:dict[@"icon"]];// 固定值写法://_imageView.image = [UIImage imageNamed:@"i1.png"];// label1:_label1 = [[UILabel alloc] initWithFrame:CGRectMake(80, 190, 150, 40)];_label2 = [[UILabel alloc] initWithFrame:CGRectMake(80, 380, 150, 40)];// text填内容_label1.text = [NSString stringWithFormat:@"%d/%ld", 1, self.pic.count];// 下面的label填入title_label2.text = dict[@"title"];// 填充方式fill_label1.textAlignment = NSTextAlignmentCenter;_label2.textAlignment = NSTextAlignmentCenter;// btn1_btn1 = [[UIButton alloc] initWithFrame:CGRectMake(30, 300, 50, 50)];_btn2 = [[UIButton alloc] initWithFrame:CGRectMake(230, 300, 50, 50)];// btn1[_btn1 setBackgroundImage:[UIImage imageNamed:@"zuo1.jpg"] forState:UIControlStateNormal];// btn2[_btn2 setBackgroundImage:[UIImage imageNamed:@"you1.png"] forState:UIControlStateNormal];// 绑定点击向前和向后[_btn1 addTarget:self action:@selector(changePages:) forControlEvents:UIControlEventTouchUpInside];//[_btn2 addTarget:self action:@selector(changePages:) forControlEvents:UIControlEventTouchUpInside];//        [_btn1 addTarget:self action:@selector(pre) forControlEvents:UIControlEventTouchUpInside];
//        //
//        [_btn2 addTarget:self action:@selector(nxt) forControlEvents:UIControlEventTouchUpInside];
//        // 用tags区分该切换前一张还是后一张_btn1.tag = 1;_btn2.tag = 2;[self addSubview: _imageView];[self addSubview: _btn1];[self addSubview: _btn2];[self addSubview: _label1];[self addSubview: _label2];}return self;
}// 重写属性pic的get方法懒加载:
/* 第一次调用一定为空,加载即可*/
- (NSArray *) pic{if(_pic == nil){// 获取plist的文件路径// nsBundle:获取手机上软件的安装路径,而非项目路径NSString *path = [[NSBundle mainBundle] pathForResource:@"pics" ofType:@"plist"];// 读取文件NSArray *array = [NSArray arrayWithContentsOfFile:path];NSLog(@"count:%ld", array.count);_pic = array;}return _pic;
}// 不需要参数:
- (void) changePages:(UIButton *)sender{switch (sender.tag) {case 1:_index--;break;case 2:_index++;break;}NSDictionary *dict = self.pic[self.index];// 上面的label填入页码_label1.text = [NSString stringWithFormat:@"%d/%ld", self.index+1, self.pic.count];// 下面的label填入title_label2.text = dict[@"title"];// 图片框填入图片:_imageView.image = [UIImage imageNamed:dict[@"icon"]];// 如果已经到了最后一张,则按钮切换为不允许点// 索引为末尾-1,则设置下一张按钮为不可点击// 没必要通过图片来设置,通过yes、no设置即可达到所需的灰色状态// 两条必须同时设置:否则会出现 翻到底再返回时,向右按钮仍然灰色self.btn2.enabled = !(_pic.count -1 == _index);self.btn1.enabled = !(0 == _index);
}// 加索引:
- (void) nxt{_index++;NSDictionary *dict = self.pic[self.index];// 上面的label:填入序号_label1.text = [NSString stringWithFormat:@"%d/%ld", self.index+1, self.pic.count];// 下面的label:填入标题_label2.text = dict[@"title"];// 图片框填入图片:_imageView.image = [UIImage imageNamed:dict[@"icon"]];// 如果已经到了最后一张,则按钮切换为不允许点// 索引为末尾-1,则设置下一张按钮为不可点击// 没必要通过图片来设置,通过yes、no设置即可达到所需的灰色状态self.btn2.enabled = !(_pic.count -1 == _index);self.btn1.enabled = !(0 == _index);
}//
- (void) pre{_index--;NSDictionary *dict = self.pic[self.index];// 上面的label:填入序号_label1.text = [NSString stringWithFormat:@"%d/%ld", self.index+1, self.pic.count];// 下面的label:填入标题_label2.text = dict[@"title"];// 图片框填入图片:_imageView.image = [UIImage imageNamed:dict[@"icon"]];// 如果为0,则设置向左不可点击且更换图片self.btn1.enabled = !(0 == _index);self.btn2.enabled = !(_pic.count -1 == _index);
}
@end

调用入口:

- (void)viewDidLoad {[super viewDidLoad];//[self test_Common_arrtibute];[self testPicBrowser];
}-(void) testPicBrowser{PicBrowserDemo *browserView = [[PicBrowserDemo alloc] initWithFrame:CGRectMake(50, 80, 300 ,700)];//[browserView setBackgroundColor: [UIColor blueColor]];[self.view addSubview:browserView];}
  1. 效果展示
  1. 首页只可向右
  2. 尾页只可向左

在这里插入图片描述
在这里插入图片描述

要注意的问题以及犯错

  1. 关于懒加载:
    设置变量同名的函数,实则为setter,判断变量指向为空,则做初始化获取操作,后续再利用都不需要,此为懒加载方式。
  1. 关于plist加载:
    使用bundle接口,, 通过plist文件名即可,该底层原理是使用了安装APP后的文件结构来获取文件,而非运行工程的目录结构。
  1. plist总是读取为空
    我的plist获取方式是读取Array接口,而我的plist中root设置为dictionary类型,因此接口不对应,获取错误了。改root为array类型即可。
  1. 初始化index报错
    switch中,tag为2是向右点击,所以应该index++。
  1. 图片浏览器初始化:
    按pic第一张的图片和title初始化即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/13088.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库的存储过程、函数与触发器

使用下面的场景来引入 1.创建表 CREATE DATABASE staff; USE staff; CREATE TABLE employee(id INT NOT NULL AUTO_INCREMENT,userName VARCHAR(255),birthDate DATE,idCard VARCHAR(255),loginName VARCHAR(255),PASSWORD VARCHAR(255),mobile VARCHAR(255),email VARCHAR(2…

开源连锁收银系统哪个好

针对开源连锁收银系统的选择,商淘云是一个备受关注的候选。商淘云以其功能丰富、易于定制和稳定性等优势,吸引了众多企业和开发者的关注。下面将从四个方面探讨商淘云开源连锁收银系统的优势: 首先,商淘云提供了丰富的功能模块。作…

如何查看SNMP设备的OID

什么是OID和MIB OID OID 代表对象标识符。 OID 唯一地标识 MIB 层次结构中的托管对象。 这可以被描述为一棵树,其级别由不同的组织分配。MIB MIB(管理信息基)提供数字化OID到可读文本的映射。 使用MIB Browser扫描OID 我的设备是一台UPS SN…

【Uniapp小程序】onShareAppMessage异步处理请求完后再分享

分享按钮 <button type"primary" open-type"share">保存并分享 </button>修改onShareAppMessage saveImage为promise方法 async onShareAppMessage() {const saveRes await saveImage();if (saveRes.code 200) {return {title: "tit…

每日两题 / 236. 二叉树的最近公共祖先 124. 二叉树中的最大路径和(LeetCode热题100)

236. 二叉树的最近公共祖先 - 力扣&#xff08;LeetCode&#xff09; dfs统计根节点到p&#xff0c;q节点的路径&#xff0c;两条路径中最后一个相同节点就是公共祖先 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* …

windows部署腾讯tmagic-editor02-Runtime

创建editor项目 将上一教程中的hello-world复制过来&#xff0c;改名hello-editor 创建runtime项目 和hello-editor同级 pnpm create vite删除src/components/HelloWorld.vue 按钮需要用的ts types依赖 pnpm add tmagic/schema tmagic/stage实现runtime 将hello-editor中…

【C语言】5.C语言函数(2)

文章目录 7.嵌套调⽤和链式访问7.1 嵌套调⽤7.2 链式访问 8.函数的声明和定义8.1 单个⽂件8.2 多个⽂件8.3 static 和 extern8.3.1 static 修饰局部变量8.3.2 static 修饰全局变量8.3.3 static 修饰函数 7.嵌套调⽤和链式访问 7.1 嵌套调⽤ 嵌套调用就是函数之间的互相调用。…

Docker安装Mosquitto

在物联网项目中&#xff0c;我们经常用到MQTT协议&#xff0c;用MQTT协议做交互就需要部署一个MQTT服务&#xff0c;而mosquitto是一个常用的MQTT应用服务&#xff0c; Mosquitto是一个实现了消息推送协议MQTT v3.1的开源消息代理软件。MQTT&#xff08;Message Queuing Teleme…

python的几个关于文本文件的demo脚本

部分来自WeTab AI PRO 1.在文末添加一行文字 def add_endline(filename, texts): # 文本末尾增加一行with open(filename, a) as file:file.write(f\n{texts})file.close() 当使用 open() 函数打开文件时&#xff0c;第二个参数指定了文件的打开模式。常见的文件打开模式包…

【LeetCode】每日一题 2024_5_14 完成所有任务需要的最少轮数(哈希)

文章目录 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01;题目&#xff1a;完成所有任务需要的最少轮数题目描述代码与解题思路 每天进步一点点 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01; 题目&#xff1a;完成所有任务需要的最少轮数 题…

拿到测试点如何跑

首先你要知道你测试点文件的位置,然后你要创建一个接收结果的文件,将你代码中的std::cin替换成infile,std::cout替换成outfile即可 #include <fstream> int main() {// 打开输入文件std::ifstream infile("C:\\Users\\Downloads\\P4779_1.in");// 打开输出文件…

OpenCV 图像退化与增强

退化 滤波 img_averagingcv2.blur(img2,(3,3)) #均值滤波 img_median cv2.medianBlur(img2,3) #中值滤波高斯模糊 result cv2.GaussianBlur(source, (11,11), 0)高斯噪声 def add_noise_Guass(img, mean0, var0.01): # 添加高斯噪声img np.array(img / 255, dtypefloat…

麒麟 V10 安装docker2

1. 查看系统版本 2.安装docker-ce 添加源 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 安装docker yum install docker-ce --allowerasing 重启docker systemctl start docker 3.安装nvidia-container-runtime 添…

el-tooltip 提示框样式修改?

【element-plus el-tooltip官网地址&#xff1a; Tooltip 文字提示 | Element Plus】 <el-tooltippopper-class"Tooltip":content"content"placement"top"effect"light" ><span class"content">{{ content }}&l…

【TypeScript的JSX简介以及使用方法】

TypeScript 是 JavaScript 的一个超集&#xff0c;它添加了静态类型检查和面向对象编程的特性。JSX 是一种 JavaScript 的语法扩展&#xff0c;主要用于 React 组件的声明性渲染。TypeScript 完美地支持 JSX&#xff0c;并允许你为 React 组件和它们的 props 添加类型注解。 T…

C中Mysql的基本api接口

一、初始化参数返回值 二、链接服务器三、执行SQL语句注意事项 四、获取结果集4.1mysql_affected_rows和mysql_num_rows4.2mysql_store_result与mysql_free_result注意事项注意事项整体的工作流程 4.3mysql_use_result&#xff08;&#xff09;4.4mysql_field_count&#xff08…

001 侧边栏 地址增删改查 默认地址代码没完善

文章目录 user_index.htmlmyaccount_style.cssmyaccount_scripts.jsaddress_edit.htmlReceiverAddressReceiverAddressControllerReceiverAddressServiceImplIReceiverAddressServiceRFshopAppApplicationServletInitializerpom.xmlReceiverAddressMapper.xmlReceiverAddressMa…

文件存储解决方案-阿里云OSS

文章目录 1.菜单分级显示问题1.问题引出1.苹果灯&#xff0c;放到节能灯下面也就是id大于1272.查看菜单&#xff0c;并没有出现苹果灯3.放到灯具下面id42&#xff0c;就可以显示 2.问题分析和解决1.判断可能出现问题的位置2.找到递归返回树形菜单数据的位置3.这里出现问题的原因…

Golang 的 unmarshal 踩坑指南

文章目录 1. 写在最前面2. 字段区分出空字段还是未设置字段2.1 问题描述2.2 解决 3. 字段支持多种类型 & 按需做不同类型处理3.1 问题描述3.2 解决 4. 碎碎念5. 参考资料 1. 写在最前面 笔者最近在实现将内部通知系统的数据定义转化为产品定义的对外提供的数据结构。 举例…

算法学习笔记(5.0)-基于比较的高效排序算法-归并排序

##时间复杂度O(nlogn) 目录 ##时间复杂度O(nlogn) ##递归实现归并排序 ##原理 ##图例 ##代码实现 ##非递归实现归并排序 ##释 #代码实现 ##递归实现归并排序 ##原理 是一种基于分治策略的基础排序算法。 1.划分阶段&#xff1a;通过不断递归地将数组从中点处分开&…