「iOS」暑假第一周 —— ZARA的仿写

暑假第一周 ZARA的仿写

文章目录

  • 暑假第一周 ZARA的仿写
    • 写在前面
    • viewDidLoad 之中的优先级
    • 添加自定义字体
      • 下载想要的字体
      • 添加至info之中
      • 找到字体名字并应用
    • 添加应用图标和启动页面

写在前面

暑假第一周留校学习，对于ZARA进行了仿写，在仿写的过程之中，还是遇到了一些问题，此文章就是对在仿写过程之中遇到问题及其解决方案的总结，并且对自己仿写的内容进行展示。

viewDidLoad 之中的优先级

先是在布局我的主页面的时候。使用自动布局去布局scrollView，我发现scrollView似乎进行布局之后并不会把scrollview给布局到主页面的时候，当时遇到这个问题，找不到问题发生的原因，以为是scrollView无法进行自动布局，所以直接使用frame对布局进行赋值，也算是将问题解决了。

但是在编写第二个菜单页面的时候，将scrollView和segementView结合的时候，又是遇到这个问题了，但是这次就找到了问题所在的地方。

在程序之中 viewDidLoad 我将所有控件都进行布局，包括对scrollView之中的图片进行添加，代码如下：

#import "JCFourth.h"@interface JCFourth ()<UIScrollViewDelegate>@property (nonatomic, strong) UISegmentedControl *segmentedControl;
@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) NSArray *titles;
@property (nonatomic, strong) NSMutableArray *imageViews;
@property (nonatomic, assign) NSInteger currentIndex;
@property (nonatomic, strong) UIView *lineView;@end@implementation JCFourth- (void)viewDidLoad {[super viewDidLoad];self.titles = @[@"女士", @"男士", @"儿童", @"HOME", @"香水"];self.currentIndex = 0;self.imageViews = [NSMutableArray array];[self setUpSegmentedControl];[self setUpScrollView];[self setUpLine];[self configureImages];
}- (void)setUpLine {self.lineView = [[UIView alloc] initWithFrame:CGRectZero];self.lineView.backgroundColor = [UIColor blackColor];self.lineView.translatesAutoresizingMaskIntoConstraints = NO;[self.view addSubview:self.lineView];[NSLayoutConstraint activateConstraints:@[[self.lineView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],[self.lineView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],[self.lineView.topAnchor constraintEqualToAnchor:self.segmentedControl.bottomAnchor],[self.lineView.heightAnchor constraintEqualToConstant:1]]];
}- (void)setUpSegmentedControl {self.segmentedControl = [[UISegmentedControl alloc] initWithItems:self.titles];self.segmentedControl.translatesAutoresizingMaskIntoConstraints = NO;self.segmentedControl.selectedSegmentIndex = 0;[self.segmentedControl addTarget:self action:@selector(segmentChanged:) forControlEvents:UIControlEventValueChanged];[self.view addSubview:self.segmentedControl];// 设置背景图像为透明图像UIImage *transparentImage = [[UIImage alloc] init];[self.segmentedControl setBackgroundImage:transparentImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];[self.segmentedControl setBackgroundImage:transparentImage forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];[NSLayoutConstraint activateConstraints:@[[self.segmentedControl.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],[self.segmentedControl.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],[self.segmentedControl.topAnchor constraintEqualToAnchor:self.view.topAnchor constant:100],[self.segmentedControl.heightAnchor constraintEqualToConstant:40]]];}- (void)setUpScrollView {self.scrollView = [[UIScrollView alloc] init];self.scrollView.pagingEnabled = YES;self.scrollView.translatesAutoresizingMaskIntoConstraints = NO;self.scrollView.showsHorizontalScrollIndicator = NO;self.scrollView.showsVerticalScrollIndicator = NO;self.scrollView.delegate = self;[self.view addSubview:self.scrollView];[NSLayoutConstraint activateConstraints:@[[self.scrollView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor],[self.scrollView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor],[self.scrollView.topAnchor constraintEqualToAnchor:self.segmentedControl.topAnchor],[self.scrollView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor constant:-75]]];
}
- (void)configureImages {for (int i = 0; i < self.titles.count + 2; i++) {NSString *imageName;UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(self.scrollView.frame.size.width * i, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height)];if (i == 0) {imageName = @"香水1.jpg";} else if (i == self.titles.count + 1) {imageName = @"女士1.jpg";} else {imageName = [NSString stringWithFormat:@"%@1.jpg", self.titles[i - 1]];}UIImage *image = [UIImage imageNamed:imageName];if (image) {imageView.image = image;} else {NSLog(@"Image not found: %@", imageName);}imageView.contentMode = UIViewContentModeScaleAspectFill;imageView.clipsToBounds = YES; // 确保裁剪内容[self.scrollView addSubview:imageView];[self.imageViews addObject:imageView];}self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * (self.titles.count + 2), self.scrollView.frame.size.height);CGPoint contentOffset = CGPointMake(self.scrollView.frame.size.width, 0);[self.scrollView setContentOffset:contentOffset animated:NO];
}- (void)segmentChanged:(UISegmentedControl *)sender {NSInteger index = sender.selectedSegmentIndex;[self.scrollView setContentOffset:CGPointMake(self.view.frame.size.width * (index + 1), 0) animated:YES];
}- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {CGFloat offsetX = scrollView.contentOffset.x;CGFloat pageWidth = scrollView.frame.size.width;int index = (int)(offsetX / pageWidth + 0.5) % ((int)self.imageViews.count + 2);if (index == 0) {self.segmentedControl.selectedSegmentIndex = 4;} else if (index == 6) {self.segmentedControl.selectedSegmentIndex = 0;} else {self.segmentedControl.selectedSegmentIndex = index - 1;}
}- (void)scrollViewDidScroll:(UIScrollView *)scrollView {CGFloat offsetX = scrollView.contentOffset.x;CGFloat pageWidth = scrollView.frame.size.width;if (offsetX >= pageWidth * 6) {// 滚动到假的最后一页，瞬间跳到实际第一页[self.scrollView setContentOffset:CGPointMake(pageWidth, 0) animated:NO];} else if (offsetX <= 0) {// 滚动到假的第一页，瞬间跳到实际最后一页[self.scrollView setContentOffset:CGPointMake(pageWidth * 5, 0) animated:NO];}}@end

scrollView之中的图片内容是空白的，我们得到的界面是这样的：

image-20240710220003258

其实在 viewDidLoad ，scrollView是已经布局在了界面之上，但是为什么没有画面呢？是因为在自动布局的过程之中分为几个阶段：

  1. viewDidLoad 阶段：在 viewDidLoad 方法中，我们在其中创建和配置视图的约束，但实际的布局计算和应用尚未发生。
  2. viewWillAppear: 阶段：在视图控制器即将显示之前，自动布局系统会进行一次布局计算和应用。在这个阶段，系统会根据视图的约束来计算视图的大小和位置，并应用于屏幕上的实际视图。
  3. viewDidLayoutSubviews 阶段：在视图控制器视图的布局发生变化时，例如设备旋转、状态栏变化或者视图控制器自身布局发生变化时，自动布局系统会再次进行布局计算和应用。这个阶段是在视图完成布局后调用的，所以对于scrollView之中的图片内容，应该是在自动布局计算结束之后，可以在 viewDidLayoutSubviews 方法中进行进一步的布局调整或更新。

因此，虽然我们在 viewDidLoad 方法中创建和配置视图的约束，但实际的布局计算和应用发生在稍后的阶段，主要是在 viewWillAppear: 和 viewDidLayoutSubviews 阶段。由于在 viewDidLoad 方法中实际的布局计算和应用尚未发生，所以在 viewDidLoad 方法中尝试设置图片视图的位置或大小，无法得到预期的结果。

那解决方法其实很简单，我们只要将将 configureImages 方法放在 viewDidLayoutSubviews 方法中以确保在正确的时机设置图片视图的尺寸。

而在 viewDidLayoutSubviews 方法中，视图层次结构已经完成布局，并且子视图的大小和位置已经确定。这是因为 viewDidLayoutSubviews 方法在每次视图布局发生变化时都会被调用，包括视图控制器的初始布局以及后续的布局更改，例如设备旋转、状态栏变化或者视图控制器自身布局发生变化。

因此，将 configureImages 方法放在 viewDidLayoutSubviews 方法中，可以确保在正确的时机设置图片视图的尺寸，以适应当前的布局状态。这样，无论是初始布局还是后续的布局更改，都能够正确地显示图片在 UIScrollView 中。

总结起来，将 configureImages 方法放在 viewDidLayoutSubviews 方法中是为了确保在视图布局完成后再设置图片视图的尺寸，以适应当前的布局状态。这样可以解决图片在 UIScrollView 中无法正确显示的问题。

image-20240710220816229

最后结果如上图。

添加自定义字体

在仿写NARA的过程之中，我发现自带的字体和logo本身的差距较大，于是想着自己找个更美观的艺术字来进行使用，于是学习了如何添加字体。

下载想要的字体

在网上查找相关的字体下载网站，下载后缀为.ttf 或者为 .otf的文件，与添加图片类似，直接将文件拖拽至项目之中，记得勾选add to target

image-20240711162325798

添加至info之中

然后打开info文件，在Imformation property List的目录下添加 “Fonts provided by application”的文件

image-20240711162723017

最后添加文件的全称（加上后缀），添加到这个文件夹之下

image-20240711162933822

找到字体名字并应用

因为可能存在字体本身的名字和我们添加的.ttf的文件上的名字不同，那么我们就要找出所属的字体名字。我们可以用上这个程序：

    for(NSString *familyname in [UIFont familyNames]){NSLog(@"family: %@",familyname);for(NSString *fontName in [UIFont fontNamesForFamilyName:familyname]){NSLog(@"----font: %@",fontName);}NSLog(@"--------------");}

这段代码的意思就是，是打印出所有非系统字体的类以及具体的字体名字，这是一个很直接的方法，但由于xcode也有自带的非系统字体，那么如果字体原先的名字和我们使用的.ttf文件的差别很大的话，我们要将他们找出来的话还是很麻烦的，不过一般情况下字体自身的名字是会和我们添加的.ttf文件名字相等的。

找到字体名字之后我们可以使用+ (nullable UIFont *)fontWithName:(NSString *)fontName size:(CGFloat)fontSize; 的方法对字体进行运用

UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectZero];titleLabel.text = @"ZARA";titleLabel.font = [UIFont fontWithName:@"TimesNewRomanPS-BoldItalicMT" size:60];titleLabel.textAlignment = NSTextAlignmentLeft;

经过以上的操作我们就可以使用自定义的字体啦

image-20240711164126407

添加应用图标和启动页面

应用图标和启动页面又被称作app icon和launch image

对于应用图标的使用其实很简单

我们在左侧菜单栏找到Assets，点进去后右键在iOS选项之中点击添加New iOS App icon，然后将自己想要的图片放入即可。（注：要求的图片应该是1024✖️1024 pt）

image-20240711201919289

那么对于启动页面，我们可以在左侧菜单栏的Launch Screen之中将相应的图片界面给手动添加进去，如下图所示

image-20240711202756493

将以上的内容综合一下，我们就得到了具备应用图标和启动页面，看起来有点像模像样的ZARA啦

Jul-11-2024 20-28-43

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

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

相关文章

护网HW面试常问——webshell内存马流量特征以及查杀

护网HW面试常问——webshell内存马流量特征以及查杀

参考&#xff1a;学习干货|HVV必学远控工具及Webshell流量合集分析(建议收藏附面试题) 蚁剑 ini_set ini_set_time ini_set_limit ini_set("display_errors","0") 部分代码明文传输&#xff0c;较好辨认 哥斯拉 1、User-Agent (弱特征) 在默认的情况…
阅读更多...
【坑】微信小程序开发wx.uploadFile和wx.request的返回值格式不同

【坑】微信小程序开发wx.uploadFile和wx.request的返回值格式不同

微信小程序 使用wx.request&#xff0c;返回值是json&#xff0c;如下 {code:200,msg:"更新用户基本信息成功",data:[]} 因此可以直接使用如 res.data.code获取到返回值中的code字段 但是&#xff0c;上传图片需要使用wx.uploadFile&#xff0c;返回的结果如下 …
阅读更多...
Hive表【汇总】

Hive表【汇总】

提前必备 1、内部表和外部表的区别 概念讲解&#xff1a; 外部表&#xff1a;1、存放他人给予自己的数据2、当我们删除表操作时&#xff0c;会将表的元数据删除&#xff0c;保留数据文件 内部表&#xff1a;1、存放已有的数据2、当我们删除表操作时&#xff0c;会将表的元数据…
阅读更多...
CCNA-2-V7-模块7–9:可用且可靠的网络考试答案

CCNA-2-V7-模块7–9:可用且可靠的网络考试答案

1.一台启用了DHCP的客户端PC刚刚启动。客户端PC在与DHCP服务器通信时，将在哪两个步骤中使用广播消息？(选两个。) DHCPDISCOVERDHCPACKDHCPOFFERDHCPREQUESTDHCPNAK 2.管理员发出命令:管理员想达到什么目的？ Router(config)# interface g0/1 Router(config-if)# ip address …
阅读更多...
Java中标识符和关键字

Java中标识符和关键字

1.标识符 public class HelloWorld{public static void main(String[] args){System.out.println("Hello,world");} }上述代码中在public class 后面的HelloWorld称为类名&#xff0c;main称为方法名&#xff0c;也可以将其称为标识符&#xff0c;即&#xff1a;在程…
阅读更多...
算法学习day12(动态规划)

算法学习day12(动态规划)

一、不同的二叉搜索树 二叉搜索树的性质&#xff1a;父节点比左边的孩子节点都大&#xff1b;比右边的孩子节点都小&#xff1b; 由图片可知&#xff0c;dp[3]是可以由dp[2]和dp[1]得出来的。(二叉搜索树的种类和根节点的val有关) 当val为1时&#xff0c;左边是一定没有节点的…
阅读更多...
C语言 ——— 模拟实现strcpy函数

C语言 ——— 模拟实现strcpy函数

目录 strcpy函数功能介绍 strcpy函数的模拟实现 strcpy函数功能介绍 学习并使用strcpy函数-CSDN博客 strcpy函数的模拟实现 代码演示&#xff1a; #include<stdio.h> #include<assert.h> char* my_strcpy(char* destination, const char* source) {assert(des…
阅读更多...
Databricks Layer

Databricks Layer

前言 Databricks 中的 Bronze-Silver-Gold 层级是数据湖架构中数据组织和处理的一种方法&#xff0c;它允许数据从原始状态逐步转化为对业务决策有用的形式。这种分层方法有助于数据的可管理性、可扩展性和可维护性&#xff0c;同时也支持数据的快速摄取和灵活的分析需求。Dat…
阅读更多...
illustrator免费插件功能强大脚本大集合300多款开发必备可收藏无需下载可直接运行ai设计印刷开发都可用

illustrator免费插件功能强大脚本大集合300多款开发必备可收藏无需下载可直接运行ai设计印刷开发都可用

宝贝名称&#xff1a;TB48 ai悟空插件开发神器脚本仓库300多个脚本开发参考 测试版本&#xff1a;AI CC2018-2020-2021-2022-2023-2024 系统支持&#xff1a;windows系统 标签&#xff1a;Ai插件开发图片插画平面设计印刷打印图标矢量 加企鹅群可自动获取。功能不定时更新
阅读更多...
传输层重点协议

传输层重点协议

目录 一、TCP协议 TCP协议段落格式 原理 1、确认应答机制 2、超时重传机制 3、连接管理机制 三次握手 四次挥手 &#xff08;1&#xff09;不能合并为三次挥手的原因 &#xff08;2&#xff09;延时应答机制—实现合并 &#xff08;3&#xff09;TIME_WAIT的作用 &…
阅读更多...
【Unity2D 2022：NPC】制作NPC

【Unity2D 2022：NPC】制作NPC

一、创建NPC角色 1. 创建JambiNPC并同时创建Jambi站立动画 &#xff08;1&#xff09;点击第一张图片&#xff0c;按住shift不松&#xff0c;再选中后两张图片&#xff0c;拖到层级面板中 &#xff08;2&#xff09;将动画资源文件保存到Animation Clips文件夹中 &#xff08;…
阅读更多...
电气工程VR虚拟仿真实训平台以趣味化方式增强吸引力

电气工程VR虚拟仿真实训平台以趣味化方式增强吸引力

在工业4.0时代和教育信息化的双重推动下&#xff0c;我们致力于推动实训课件的跨界合作与共创。VR实训课件不仅促进了不同领域、不同行业之间的紧密合作&#xff0c;更让学习变得生动直观。我们凭借3D技术生动、直观、形象的特点&#xff0c;开发了大量配套3D教材&#xff0c;让…
阅读更多...
TongRDS 2214 docker版指引（by lqw ）

TongRDS 2214 docker版指引（by lqw ）

文章目录 前言准备工作中心节点服务节点哨兵节点 前言 部署docker版本&#xff0c;建议先参考TongRDS2214手动部署版指引&#xff08;by lqwsy&#xff09; 在本地手动部署了一套适合业务场景的rds 服务后&#xff0c;再通过dockerfile 打镜像。 准备工作 1.准备对应的安装包…
阅读更多...
【亚马逊云】将Amazon EC2 日志数据传输到 CloudWatch 中

【亚马逊云】将Amazon EC2 日志数据传输到 CloudWatch 中

文章目录 1. 创建 CloudWatchLogs 策略2. 将 CloudWatchLogs 策略附加给IAM实体3. 将 IAM 角色附加到 EC2 实例4. 在 Amazon EC2 实例上安装和配置 CloudWatch Logs5. 在CloudWatch查看EC2日志6. 参考链接 实验目的&#xff1a;在运行的 EC2 Linux 实例上安装和配置 CloudWatch…
阅读更多...
【Java--数据结构】栈：不仅仅是数据存储，它是编程的艺术

【Java--数据结构】栈：不仅仅是数据存储，它是编程的艺术

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 目录 栈 栈的方法介绍 入栈push 出栈pop和 瞄一眼peek 判空isEmpty和判满isFull 模拟实现栈 push入栈 pop出栈和peek 测试 使用泛型实现栈 测试 使用链表实现栈&#xff08…
阅读更多...
怎么减少pdf的MB，怎么减少pdf的大小

怎么减少pdf的MB，怎么减少pdf的大小

在数字化时代&#xff0c;pdf文件因其格式稳定、跨平台兼容性强等特点而广受欢迎。然而&#xff0c;随着内容的丰富&#xff0c;pdf文件的大小也日益增大&#xff0c;给文件传输和存储带来了不少困扰。本文将为你介绍多种减小pdf文件大小的方法&#xff0c;帮助你轻松应对这一问…
阅读更多...
跳表的简单学习

跳表的简单学习

跳表&#xff08;SkipList&#xff09;学习 1. 什么是跳表&#xff1f; 基于“空间换时间”思想&#xff0c;通过给链表建立索引&#xff0c;使得链表能够实现二分查找。 跳表是可以实现二分查找的有序链表。 2. 从单链表到跳表 对于一般的单链表&#xff0c;在其中进行查…
阅读更多...
c语言指针超详解——入门篇

c语言指针超详解——入门篇

文章目录 前言1. 内存与地址内存编址 2. 指针变量和地址取地址操作符 &指针变量和解引用操作符 *指针变量解引用操作符指针变量的大小 3. 指针变量类型的意义指针的解引用指针-整数void* 指针 4. const 修饰指针const 修饰指针指向的变量const 修饰指针变量 5. 指针运算指针…
阅读更多...
本地部署，AnimeGANv3: 将现实世界照片转化为动漫风格

本地部署，AnimeGANv3: 将现实世界照片转化为动漫风格

目录 引言 技术背景 架构与原理 实验结果与分析 应用实例 本地部署 运行结果 Photo to Hayao Style Photo to Shinkai Style more suprise 支持多种风格 结论 参考文献 GitHub - TachibanaYoshino/AnimeGANv3: Use AnimeGANv3 to make your own animation works, …
阅读更多...
智驭数据：深剖朴素贝叶斯算法及其实战疆域拓展

智驭数据：深剖朴素贝叶斯算法及其实战疆域拓展

在浩瀚的数据海洋中&#xff0c;机器学习如同一艘智能航船&#xff0c;引领我们探索未知的知识岛屿。而在这艘船的诸多算法装备中&#xff0c;朴素贝叶斯&#xff08;Naive Bayes&#xff09;算法以其简洁高效、逻辑清晰的特点&#xff0c;成为了处理分类问题的一把利器。本文将…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023