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

news2024/11/15 17:23:31

暑假第一周 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.coloradmin.cn/o/1926052.html

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

相关文章

WPF学习(2) -- 样式基础

WPF学习(2) -- 样式基础

一、代码 <Window x:Class"学习.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expression/blend/2008&…
阅读更多...
计算机网络之网络互连

计算机网络之网络互连

1.什么是网络互连 1.1网络互连的目的 将两个或者两个以上具有独立自治能力的计算机网络连接起来&#xff0c;实现数据流通&#xff0c;扩大资源共享范围&#xff0c;或者容纳更多用户。 网络互连包括&#xff1a; 同构网络、异构网络的互连&#xff0c; 局域网与局域网&…
阅读更多...
【操作系统】文件管理——文件管理基础、文件的逻辑结构和目录结构（个人笔记）

【操作系统】文件管理——文件管理基础、文件的逻辑结构和目录结构（个人笔记）

学习日期&#xff1a;2024.7.14 内容摘要&#xff1a;文件管理基础、文件的逻辑结构、文件目录 文件管理基础 引言 文件是一组有意义的信息/数据的集合&#xff0c;计算机中存放着各种各样的文件&#xff0c;一个文件有哪些属性&#xff1f; 操作系统应该向上层的应用程序提…
阅读更多...
网络 闲聊

网络 闲聊

闲谈 闲话 网络安全——>网络空间安全 网络空间&#xff1a;一个由信息基础设备组成互相依赖的网络 继&#xff1a;海、陆、空、天、的第五大空间 信息安全的一个发展&#xff1a; 通信保密阶段---计算机安全---信息系统安全---网络空间安全 棱镜门事件 棱镜计划&…
阅读更多...
leetcode日记（38）字母异位词分组

leetcode日记（38）字母异位词分组

最开始的想法是创建vector<vector<string>> result&#xff0c;然后遍历strs中字符串&#xff0c;遍历result中vector&#xff0c;比较vector中第一个string和strs中string&#xff0c;若为字母异位词&#xff0c;则加入vector&#xff0c;若无&#xff0c;则创建新…
阅读更多...
数学基础 三角函数、两条平行线截距

数学基础 三角函数、两条平行线截距

三角函数变化公式 已知两条平行线&#xff0c;其中一条的起始点p1&#xff0c;p2&#xff0c;其中一条直线 p3&#xff0c;p4计算两条直线之间的截距 在二维平面上&#xff0c;当我们说“两条直线之间的截距”时&#xff0c;这通常意味着我们需要找到一条与这两条直线都相交的…
阅读更多...
鸿蒙语言基础类库：【@system.battery (电量信息)】

鸿蒙语言基础类库：【@system.battery (电量信息)】

电量信息 说明&#xff1a; 从API Version 6开始&#xff0c;该接口不再维护&#xff0c;推荐使用新接口[ohos.batteryInfo]。本模块首批接口从API version 3开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import battery from syste…
阅读更多...
8款值得收藏的App推荐！

8款值得收藏的App推荐！

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频https://aitools.jurilu.com/ 值得一试的大众APP&#xff0c;它可能会给你的生活带来小小的改变。把下面的内容看完&#xff0c;我确信你一定会收获不少。 一、Todo清单——重…
阅读更多...
Django 删除所有数据

Django 删除所有数据

1&#xff0c;添加模型 Test/app11/models.py from django.db import modelsclass Post(models.Model):title models.CharField(max_length200)content models.TextField()pub_date models.DateTimeField(date published)class Book(models.Model):title models.CharFiel…
阅读更多...
Flowable-流程设计

Flowable-流程设计

接上文&#xff0c;对flowable的基础概念进行了介绍&#xff0c;本文开始&#xff0c;安装部署flowable-ui的官方流程设计器&#xff0c;实现流程图的绘制&#xff0c;并将绘制的流程图&#xff0c;保存到自己的数据库中。 一、安装Flowable-UI 本文介绍的flowable的版本为6.7.…
阅读更多...
【C++】——入门基础

【C++】——入门基础

文章目录 命名空间输入与输出缺省参数函数重载引用内敛函数指针控制nullptr 命名空间 当C语言遇到命名冲突时&#xff0c;很难解决&#xff0c;所以C关键字namespace就是针对这种问题的。 如何使用命名空间内的成员呢&#xff1f; 加命名空间名称及限定符&#xff08; &#…
阅读更多...
PHP贵州旅游攻略系统-计算机毕业设计源码16663

PHP贵州旅游攻略系统-计算机毕业设计源码16663

目 录 第 1 章 引 言 1.1 选题背景与意义 1.2 国内外研究现状 1.3 论文结构安排 第 2 章 系统的需求分析 2.1 系统可行性分析 2.1.1 技术方面可行性分析 2.1.2 经济方面可行性分析 2.1.3 法律方面可行性分析 2.1.4 操作方面可行性分析 2.2 系统功能需求分析 2.3 系…
阅读更多...
昇思25天学习打卡营第21天|基于MindSpore的DCGAN生成漫画头像

昇思25天学习打卡营第21天|基于MindSpore的DCGAN生成漫画头像

基于MindSpore的DCGAN生成漫画头像 GAN基础原理 生成对抗网络&#xff08;GAN&#xff09;的基础原理是通过两个互相博弈的模型&#xff0c;生成模型和判别模型&#xff0c;来实现对数据分布的学习并产生新的、与真实数据极其相似的数据实例。 生成对抗网络&#xff08;GAN&a…
阅读更多...
Win10工具：批量word转png图片

Win10工具：批量word转png图片

首先声明这个小工具是小编本人开发的&#xff0c;无任何广告&#xff0c;会员收费机制等&#xff0c;永久使用。允许公司或个人使用&#xff0c;不允许倒卖&#xff0c;否则发现后会追究法律责任&#xff0c;毕竟开发不易。工具是用python开发的。 功能非常单一&#xff0c;就…
阅读更多...
acrobat 中 PDF 复制时不能精确选中所选内容所在行的一种解决方法

acrobat 中 PDF 复制时不能精确选中所选内容所在行的一种解决方法

现象&#xff1a;划取行的时候&#xff0c;自动扩展为多行 如果整段选中复制&#xff0c;粘贴后是乱码 解决步骤 识别完&#xff0c;保存 验证 可以按行复制了。 如果遇到仅使用 acrobat OCR 不能彻底解决的&#xff0c;更换其他自己熟悉的进行 OCR。
阅读更多...
[misc]-流量包-菜刀666

[misc]-流量包-菜刀666

菜刀&#xff0c;中国菜刀&#xff1f;命令执行&#xff0c;打开流量包发现&#xff0c;一句话木马 whoaii,ls 等命令。 这里有张图片FFD8(JPG)文件头 目录遍历&#xff0c;也多了一张图片6666.jpg 通过工具将16进制保存为文件得到图片&#xff1a;Th1s_1s_p4sswd_!!! 这里的提…
阅读更多...
[线性RNN系列] Mamba: S4史诗级升级

[线性RNN系列] Mamba: S4史诗级升级

前言 iclr24终于可以在openreview上看预印本了 这篇&#xff08;可能是颠覆之作&#xff09;文风一眼c re组出品&#xff1b;效果实在太惊艳了&#xff0c;实验相当完善&#xff0c;忍不住写一篇解读分享分享。 TL;DR &#xff08;overview&#xff09; Structured State-Sp…
阅读更多...
完全免费的PDF软件

完全免费的PDF软件

PDFgear - 将易于使用的PDF软件带给大众PDFgear是一款功能齐全的PDF管理软件&#xff0c;适用于Windows、Mac和移动设备&#xff0c;而且完全免费。https://www.pdfgear.com/zh/
阅读更多...
elasticsearch性能调优方法原理与实战

elasticsearch性能调优方法原理与实战

❃博主首页 &#xff1a; 「码到三十五」 &#xff0c;同名公众号 :「码到三十五」&#xff0c;wx号 : 「liwu0213」 ☠博主专栏 &#xff1a; <mysql高手> <elasticsearch高手> <源码解读> <java核心> <面试攻关> ♝博主的话 &#xff1a…
阅读更多...
50+dfm模型素人网红路人实时直播替换DFLive模型dfm格式

50+dfm模型素人网红路人实时直播替换DFLive模型dfm格式

作为一名直播达人&#xff0c;我投入了大量时间和精力在网上收集和购买各种直播所需的模型资源。这些资源不仅包括男模、女模&#xff0c;还有明星脸、大众脸、网红脸以及各类稀有的素人模型。为了回馈广大直播爱好者&#xff0c;我将这些宝贵资源整理成一个合集&#xff0c;供…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023