多页面语言学习APP的UI

本文介绍了使用Objective-C在Xcode环境下开发多页面语言学习App的UI布局,重点讨论了纯代码布局的挑战与解决方案,包括UITableView、UICollectionView、UINavigationController、UITabBarController的使用,以及在页面跳转、组件交互中遇到的问题和解决方法。通过实践,作者实现了页面间的跳转、标签页切换和信息传递等功能。

UI组件布局学习

开发环境
  • Mac OS
  • Objective-C
  • Xcode
实验目的
  1. 学习使用纯代码进行UI布局

  2. 学习UITableView, UICollectionView, UINavigationController, UITabBarController等组件的使用,以及delegate和protocol的概念

实验过程
基本思路

实验刚开始时完全没有思路,不知道怎样建立可以跳转、交互的多个页面(单个页面还是比较容易接受的)。在tutorial.md文件中查看到实验项目的树结构目录后,基本明白项目架构,而且终于知道了ViewController组件的目标就是实现一个页面,而View组件则是页面中的小组分,这些小组分往往也用类来封装起来。

但是由于之前接触的都是只有AppDelegateViewController两个组件的项目,所以对多个组件如何交互毫无头绪,查看了github上的诸多开源项目后,终于发现其实负责界面统筹的只有AppDelegate,原本的ViewController在本项目中可以划分成多个控制组件,只要在AppDelegate中组合即可。

AppDelegate有一个根视图控制器,可以作为首页或者用于调度其他页面,通常使用UINavigationController组件作为容器,可以方便的实现父页面到子页面的跳转以及子页面回到父页面的返回。另外,UITabBarController也是一个常用的容器,用于在较少的页面间切换。

遇到的问题

1.在一个已经被压入UINavigationControllerViewController中,发生了需要跳转到子页面的事件,如何将新页面压入到这个唯一的UINavigationController中?

使用[self.navigationController pushViewController:newViewController animated:YES];方法,需要注意newViewController参数是一个实例,而非类或接口。

2.重写父类方法时,主要是UIViewControllerviewDidLoad方法时,被压入UINavigationController时,没有新界面显示。

原因是没有在viewDidLoad中调用[super viewDidLoad]方法。

3.声明了一个UIViewController类型的实例,并对其进行addSubViewaddChildViewController之类的方法将无法直接反应到页面上。

4.UITabBarController的标签的图片设置后不显示。

需要设置渲染模式。

//最初代码,不显示图片
self.tabBarItem.image = [UIImage imageNamed:@"icon.png"];

//设置渲染模式,显示图片
elf.tabBarItem.image = [[UIImage imageNamed:@"icon.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

5.如何设置UITabBarController的标签被选中和未被选中时的图片和文字显示。

CSDN链接
使用.tabBarItem.image.tabBarItem.selectedImage分别设置标签被选中前后的图片;使用[nv.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor redColor]} forState:UIControlStateSelected];设置标签被选中前后文字的样式。

6.如何在UINavigationController中的一个ViewController的跳转事件中将父页面的信息传递给子页面。

TarbarView *tabbarView=[<
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值