iOS 练习项目 Landmarks （三）：详情页设计

最新推荐文章于 2024-10-31 19:41:47 发布
最新推荐文章于 2024-10-31 19:41:47 发布
阅读量1k 收藏 12
点赞数 29
分类专栏： iOS 文章标签： ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ProgramNovice/article/details/140072884
版权

iOS 练习项目 Landmarks （三）：详情页设计

iOS 练习项目 Landmarks （三）：详情页设计

为starButton添加目标-动作对直接修改places数组

在获取cell的方法里，给cell.starButton.tag赋值为对应的行号，再添加一个目标-动作对，当点击starButton时，触发btnClicked:方法。

在btnClicked:中，先修改按钮的状态，来切换显示的图片；再根据sender.tag获取要修改的places数组元素的下标，取得对应行号的Place实例，设置其favorite属性与sender.selected一致。

// ViewController.m
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    ...
    // 设置 PlaceCell 对象的 starButton 的 tag 为对应的行号
    cell.starButton.tag = indexPath.row;
    // 添加目标-动作对
    [cell.starButton addTarget:self action:@selector(btnClicked:) forControlEvents:UIControlEventTouchUpInside];
    ...
    return cell;
}

#pragma mark - starButton click method

- (void)btnClicked:(UIButton *)sender
{
    // NSLog(@"before starButton in row %ld clicked: %d", sender.tag,  [self.places[sender.tag] favorite]);
    // 修改按钮的状态，切换图片
    sender.selected = !sender.selected;
    // 修改数据源（根据当前按钮状态设置对应行号的 Place 对象的 favorite 属性）
    [self.places[sender.tag] setFavorite:sender.selected];
    // NSLog(@"after starButton in row %ld clicked: %d", sender.tag, [self.places[sender.tag] favorite]);
}

PlaceCell通过通知其代理的方式更新数据源

上面的方法有两个缺点：

  1. 定义tag存在风险，可能会和系统的tag相冲突，太多的tag会使得项目变得过于复杂。
  2. 在PlaceCell内部直接修改数据源这种方法不好，界面和数据直接交互不符合MVC原则。

我们可以通过协议让数据和界面解耦。

先定义一个PlaceCellDelegate协议：

// PlaceCellDelegate.h
#import <Foundation/Foundation.h>

@class PlaceCell;

NS_ASSUME_NONNULL_BEGIN

@protocol PlaceCellDelegate <NSObject>

- (void)updateFavorite:(BOOL)newFavorite atPlaceCell:(PlaceCell *)cell;

@end

NS_ASSUME_NONNULL_END

没有PlaceCellDelegate.m，该声明也可以放在PlaceCell里。

从协议的名字就可以看出，它是PlaceCell的协议，需要在PlaceCell.h中引入和声明：

#import <UIKit/UIKit.h>
#import "PlaceCellDelegate.h"

NS_ASSUME_NONNULL_BEGIN

@interface PlaceCell : UITableViewCell

@property (nonatomic) UIButton *starButton;

@property (nonatomic, weak) id<PlaceCellDelegate> placeCellDelegate;
@property (nonatomic) BOOL favorite;

- (void)configureWithFavorite:(BOOL)favor;

@end

NS_ASSUME_NONNULL_END

这里还设置了一个favorite属性，和设置该属性和按钮状态的方法，该属性和对应数据源Place对象的favorite属性保持同步。

还是在获取cell的方法里：

// ViewController.m
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    ...
		// 设置 PlaceCellDelegate
    cell.placeCellDelegate = self;
    [cell configureWithFavorite:[item favorite]];
    ...
    return cell;
}

configureWithFavorite: 方法除了设置PlaceCell的favorite属性，还要设置starButton的状态，进而设置好按钮的图片：

- (void)configureWithFavorite:(BOOL)favor
{
    self.favorite = favor;
    self.starButton.selected = self.favorite;
}

该方法比存方法多做了一件事，就不取名叫setFavorite了。

在ViewController.h中新增PlaceCellDelegate协议：

@interface ViewController : UIViewController
    <UITableViewDelegate, UITableViewDataSource, PlaceCellDelegate>

既然要使用PlaceCellDelegate协议，那就要在ViewController.m里实现PlaceCellDelegate协议的方法：

#pragma mark - PlaceCellDelegate Method

- (void)updateFavorite:(BOOL)newFavorite atPlaceCell:(PlaceCell *)cell
{
    // 去 TableView 查该 cell 对应的 indexPath
    NSIndexPath *indexPath = [placeTable indexPathForCell:cell];
    NSLog(@"before starButton in row %ld clicked: %d", indexPath.row, [self.places[indexPath.row] favorite]);
    // 修改数据源对应的对象
    [self.places[indexPath.row] setFavorite:newFavorite];
    NSLog(@"after starButton in row %ld clicked: %d", indexPath.row, [self.places[indexPath.row] favorite]);
    // TableView 重新加载被修改了的那一行
    [placeTable reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationNone];
}

PlaceCellDelegate协议的部分就完成了。接下来在PlaceCell中实现收藏按钮点击事件的处理，为starButton添加目标-动作对：

// PlaceCell.m

- (void)initSubView
{
    CGRect buttonFrame = CGRectMake(320, 12, 25, 25);
    // 创建并设置 UIButton 对象
    self.starButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.starButton setFrame:buttonFrame];
    ...
    // 添加目标-动作对
    [self.starButton addTarget:self action:@selector(starButtonClicked:) forControlEvents:UIControlEventTouchUpInside];
    
    [self.contentView addSubview:self.starButton];
}

- (void)starButtonClicked:(UIButton *)sender
{
    sender.selected = !sender.selected;
    self.favorite = sender.selected;
    // 通知 placeCellDelegate
    [self.placeCellDelegate updateFavorite:self.favorite atPlaceCell:self];
    // NSLog(@"tag: %ld", sender.tag);
    // PlaceCell *curCell = (PlaceCell *)[sender superview];
    // NSIndexPath *indexPath = [IndexPath indexPathForRow:sender.tag inSection:[tableView reloadRows];
}

当按钮被点击时，首先将sender.selected取反，做到收藏/不收藏的切换，再修改cell的favorite属性，确保和sender.selected一致，再通知其placeCellDelegate（其实就是ViewController），placeCellDelegate就可以根据self.favorite和self（就是PlaceCell对象）去更新数据源。

景点详情页界面设计

参考界面：

在这里插入图片描述

可以看出一共有6个部分：

  1. 地图
  2. 圆形的位于中央的风景照片
  3. 景点名标签
  4. 收藏按钮
  5. 景区名标签
  6. 地区名标签

新建一个DetailViewController，声明这6个部分的组件对象，这些组件对象由一个Place对象来设置，所以还要有一个Place指针。

#import <UIKit/UIKit.h>
#import <MapKit/MapKit.h>

@class Place;

NS_ASSUME_NONNULL_BEGIN

@interface DetailViewController : UIViewController

@property (nonatomic) MKMapView *mapView;
@property (nonatomic) UIImageView *pictureView;
@property (nonatomic) UILabel *sightLabel;
@property (nonatomic) UIButton *starButton;
@property (nonatomic) UILabel *scenicAreaLabel;
@property (nonatomic) UILabel *stateLabel;

@property (nonatomic) Place *place;

@end

NS_ASSUME_NONNULL_END

在其实现文件中，对于每个组件，先创建其frame，再设置好样式，再根据Place对象的内容进行设置展现的内容，最后把组件添加到view：

// DetailViewController.m
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    /* width: 393, height: 852 */
    CGFloat viewFrameWidth = self.view.frame.size.width;
    CGFloat viewFrameHeight = self.view.frame.size.height;
    NSLog(@"%lf, %lf", viewFrameWidth, viewFrameHeight);
    CGRect mapFrame = CGRectMake(0, 0, viewFrameWidth, 300);
    CGRect pictureFrame = CGRectMake(viewFrameWidth / 2 - 100, 200, 200, 200);
    CGRect sightFrame = CGRectMake(20, 420, 150, 25);
    CGRect starButtonFrame = CGRectMake(180, 420, 25, 25);
    CGRect scenicAreaFrame = CGRectMake(20, 455, 140, 20);
    CGRect stateFrame = CGRectMake(viewFrameWidth - 120, 455, 100, 20);
    
    // 创建并设置 mapView
    self.mapView = [[MKMapView alloc] initWithFrame:mapFrame];
    [self.mapView setMapType:MKMapTypeStandard];
    MKCoordinateRegion viewRegion = MKCoordinateRegionMakeWithDistance([[self place] location].coordinate, 10000, 10000);
    [self.mapView setRegion:viewRegion];
    
    // 创建并设置 pictureView
    self.pictureView = [[UIImageView alloc] initWithFrame:pictureFrame];
    [self.pictureView setImage:[self.place picture]];
    
    // 创建并设置 sightLabel
    self.sightLabel = [[UILabel alloc] initWithFrame:sightFrame];
    [self.sightLabel setFont:[UIFont systemFontOfSize:24]];
    [self.sightLabel setText:[self.place sight]];
    
    // 创建并设置 starButton
    self.starButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.starButton setFrame:starButtonFrame];
    [self.starButton setTitle:@"" forState:UIControlStateNormal];
    [self.starButton setImage:[UIImage imageNamed:@"Image_star"] forState:UIControlStateNormal];
    [self.starButton setImage:[UIImage imageNamed:@"Image_starred"] forState:UIControlStateSelected];
    
    // 创建并设置 scenicAreaLabel
    self.scenicAreaLabel = [[UILabel alloc] initWithFrame:scenicAreaFrame];
    [self.scenicAreaLabel setFont:[UIFont systemFontOfSize:16]];
    [self.scenicAreaLabel setText:[self.place scenicArea]];
    
    // 创建并设置 stateLabel
    self.stateLabel = [[UILabel alloc] initWithFrame:stateFrame];
    [self.stateLabel setFont:[UIFont systemFontOfSize:16]];
    [self.stateLabel setText:[self.place state]];
    
    [self.view setBackgroundColor:[UIColor whiteColor]];
    [self.view addSubview:self.mapView];
    [self.view addSubview:self.pictureView];
    [self.view addSubview:self.sightLabel];
    [self.view addSubview:self.starButton];
    [self.view addSubview:self.scenicAreaLabel];
    [self.view addSubview:self.stateLabel];
}

这样一个基本的详情页就创建好了。

点击UITableViewCell跳转到对应详情页

首先要给ViewController提供一个NavigationController，可以直接在Main故事板中添加一个：

在这里插入图片描述

UITableViewDelegate协议里的tableView:didSelectRowAtIndexPath:方法会在选中一个UITableViewCell后触发，我们在这个方法里实现页面跳转：

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    // NSLog(@"row %ld clicked", indexPath.row);
    DetailViewController *detailViewController = [DetailViewController new];
    [detailViewController setPlace:[self.places objectAtIndex:indexPath.row]];
    [self.navigationController pushViewController:detailViewController animated:NO];
}

步骤分为3步：

  1. 初始化一个DetailViewController对象；
  2. 从数据源取出被点击cell对应行的数据，来设置DetailViewController对象的place属性；
  3. 使用NavigationController的pushViewController:animated:方法进行跳转。

运行效果

详情页如下所示：

在这里插入图片描述

UestcXiye
关注
专栏目录
Opencv项目实战：13 手部追踪
m0_62919535的博客
10-21 4979
这是一个比较基础的项目，我们将在后面对它进行一个拓展，有很多的计算机视觉的游戏都可以根据这个来创立，比如贪吃蛇、水果忍者、虚拟拖拽等上周由于事情较多，上周没有更新，而且最近的学校里的功课也要做，所以很抱歉，今天的这个项目我觉得很有用，就比如在这之后的一些项目也会用到，到时候可以做很多有趣的项目。
Landmarks:用于发现和分享您喜欢的地方的应用程序
04-21
:world_map: 地标 :world_map: 用于发现和分享您喜欢的地方的应用... :mobile_phone: 的iOS 您可以探索不同的景点并将其添加到收藏夹。 :watch: WatchOS 除了主应用程序。 您可以探索自己喜欢的地方并接收通知。
iOS 练习项目 Landmarks （二）：自定义 UITableViewCell
ProgramNovice的博客
07-01 934
iOS 练习项目 Landmarks （二）：自定义 UITableViewCell
iOS 练习项目 Landmarks （四）：添加 AutoLayout 约束
ProgramNovice的博客
07-02 831
iOS 练习项目 Landmarks （四）：添加 AutoLayout 约束
iOS 练习项目 Landmarks （五）：UISwitch 切换展示数据
ProgramNovice的博客
07-03 1394
iOS 练习项目 Landmarks （五）：UISwitch 切换展示数据
iOS 练习项目 Landmarks （一）：主界面、Model、数据源协议
ProgramNovice的博客
07-01 541
iOS 练习项目 Landmarks （一）：主界面、Model、数据源协议
开源项目：Landmarks 指南
gitblog_00814的博客
09-08 628
开源项目：Landmarks 指南 landmarksA Simple Profiling Library for OCaml项目地址:https://gitcode.com/gh_mirrors/la/landmarks 项目介绍 Landmarks 是一个在 GitHub 上发起的开源项目，地址为 https://github.com/LexiFi/landmarks.git。该项目致力于...
树莓派小项目（三）：手部识别小实验
weixin_75067193的博客
09-16 777
树莓派手部跟踪小实验
项目推荐：Landmarks - 精简易用的OCaml性能剖析库
gitblog_00419的博客
09-09 930
项目推荐：Landmarks - 精简易用的OCaml性能剖析库 landmarksA Simple Profiling Library for OCaml项目地址:https://gitcode.com/gh_mirrors/la/landmarks 项目介绍 Landmarks 是一个专为 OCaml 设计的轻量级性能剖析工具。它通过提供简单接口来标记代码中的关键部分，并在运行时测量这些区...
第一个 iOS 项目开发小结 - SwiftUI 学习资料、开源项目
萌宅鹿的技术小屋
11-29 3214
第一个 iOS 项目开发小结SwiftUI 知识点小记学习资料开源项目一些问题记录项目预览 这段时间由于项目需要，我学习了一段时间 SwiftUI 并单独完成了一个系统的开发，耗时两个星期，主要是经常会发现自己一开始的写法不好，然后对项目进行重构…尤其是网络请求、数据加载的生命周期、状态管理等方面。。 由于我不是专门做 iOS 的，我目前只会使用 SwiftUI，UIkit 基本没用到（有时候网上搜到别人的代码有用到会加进来），在要求不高的情况下，SwiftUI 还是够用的，后续有机会可以继续学习（还有一
matlab求 z = [sqrt((landmarks(:, 1) - x).^2 + (landmarks(:, 2) - y).^2), atan2(landmarks(:, 2) - y, landmarks(:, 1) - x) - theta];的雅可比矩阵
05-19
H = [-(landmarks(:, 1) - x) ./ sqrt((landmarks(:, 1) - x).^2 + (landmarks(:, 2) - y).^2), -(landmarks(:, 2) - y) ./ sqrt((landmarks(:, 1) - x).^2 + (landmarks(:, 2) - y).^2), zeros(n, 1); (landmarks...
facial-landmarks:使用图像处理技术的人脸地标检测
05-15
基于局部信息的人脸地标检测 最后一页更新： 2018/03/04 这项工作提出了一种方法来检测19个感兴趣的面部点（地标）。 本领域中可用的用于检测面部点的大多数方法分为两个主要类别：全局和局部。...
test_facial_landmarks:esr算法，用于测试人脸对齐
05-23
test_facial_landmarks 参考：曹X. 通过显式形状回归进行面部对齐。 在过程中。 CVPR，2012年。 模型已经过训练，请使用python定位面部标志。（需要numpy和opencv2）。 请在initializa_face.py中指定haar功能的...
manifold_landmarks:用高斯过程对流形进行地标
05-23
"manifold_landmarks"项目是针对这一主题的一个实现，特别是通过使用高斯过程（Gaussian Process）。高斯过程是一种概率模型，它在统计学和机器学习中广泛用于回归和函数近似。在流形学习中，高斯过程可以用来定义一...
苹果开发 IOS 证书生成步骤
一直在路上
10-28 470
PS：网上说的那些一大堆，都是乱弹琴的。核心步骤就是证书签名过程。
使用libimobiledevice+ifuse访问iOS沙盒目录
0.85度的博客
10-28 985
使用libimobiledevice+ifuse访问iOS沙盒目录，查看iOS app业务数据或日志
UE 引入 IOS framework库的坑
最新发布
qq_59398646的博客
10-31 224
多出了这个文件 就影响了 上传到开发者后台 就报错 90034 将其删除就好 （这个是mac文件系统自己创建的 史 ） 如何查出来的？在xcode中 xcode生成的头文件 name-Swift.h 不可以 在 .h 文件中 所以需要前向声明 @class Name;一、我明明已经把framework库进行签名的却在 上传到开发者后台时一直报错 90034 签章遗失 或者 未签。这是我的framework库的目录 关键就在这了。这个问题我最近遇到 极其坑爹。
iOS静态库（.a）及资源文件的生成与使用详解（OC版本）
weixin_39339407的博客
10-27 949
通过本篇博客的介绍，我们了解了如何在OC项目中生成并集成包含资源文件的静态库.a。相对于Swift的静态库，OC中需要自行设置对外开放文件，这一点需要注意。静态库的使用不仅能让代码复用更高效，同时也有助于项目结构的清晰和模块化的实现。在实际开发中，掌握这种方式可以帮助我们更灵活地管理资源，提高代码的可维护性和移植性。希望本篇内容能够为大家提供一个实用的开发思路，在后续的项目中更好地应用静态库的特性。
axios 如何取消请求
forgiveForever的博客
10-26 292
可以看到 源码中，判断是否有取消的理由（即reason）,存在 就会执行 listener （即外部传入的onCanceled），给构造函数 CancelToken 原型上设置 unsubscribe 函数，用于删除指定的监听器。给构造函数 CancelToken 原型上设置 subscribe 函数，用于添加订阅 监听器。onCanceled 中 request.abort() 即为 XHR 取消请求的方法。执行 executor 函数，传入 cancel 函数（即取消函数）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

UestcXiye

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值