多页面语言学习APP的UI

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=[[TarbarView alloc] init];
/*将self的值赋给tabbarView中的相应值,完成页面间值的参数传递*/
[self.navigationController pushViewController:tabbarView animated:true];

7.如何为UINavigationController中的ViewController设置UINavigationController上的标题?

使用以下代码:

self.navigationItem.title = @"Your Title"

8.UINavigationControllertitle不显示。

UINavigationController + UITabBarController 这两者一起用的情况下,UINavigationControllertitle不显示,我的问题在于把UITabBarController包在UINavigationController中了。
根本原因在于UINavigationController只是一个容器,其title属性继承自UIViewController,本身并没有title属性。解决办法是,初始化时不应该使用init,而应该使用initWithRootview:ViewController,来设置一个具有title的根控制器。之后,再在UITabBarController中使用self.navigationItem.title = @"title";即可。

另外,为了在切换标签页时,title也能够改变,需要为UITabBarController加入UITabBarControllerDelegate协议,通过实现该协议的UITabBarControllerDelegate方法,可以在切换时通过switch语句判断index来选择title。特别注意:使用代理协议时,需要在UIView'ControllerviewDidLoad方法中设置self.delegate=self,以便代理方法执行!!!!

9.UINavigationControllertitle使用容器中的UITabBarController的参数时,参数始终为null

原因是在UITabBarControllerviewDidLoad方法中设置的属性不能直接反应到页面上,所以应该在viewWillAppear中设置。

10.出现'autorelease' is unavailable: not available in automatic reference counting mode错误码。

在创建iOS项目时,如果选择了"Use Automatic Reference Counting",那么代码中,自然就不需要再写autorelease了。删去即可。

11.对UITableViewController的使用。

典型样例

12.如何使UITableViewCell选中后打钩?

曲线救国,这是一个解决UITableCell如何单选的方法,从代码中可以知道如何打钩。

基本上是在didSelectRowAtIndexPath中添加,以下三行代码:

UITableViewCell *cell=[self.tableView cellForRowAtIndexPath:indexPath];
cell.textLabel.textColor=[UIColor blueColor];
[cell setAccessoryType:UITableViewCellAccessoryCheckmark];

13.如何设置UIColor为自定义颜色?

使用类似如下代码:

UIColor *testColor1= [UIColor colorWithRed:240/255.0 green:240/255.0 blue:240/255.0 alpha:1];
labelColor.backgroundColor =  testColor1;

14.如何设置UIButton为圆形?

典型样例
主要代码如下:

login.layer.cornerRadius=55;
login.layer.masksToBounds=YES;

15.如何使用UISegmentedController

典型样例
主要代码如下:

NSArray *options=[[NSArray alloc] initWithObjects:@"用户信息",@"用户设置", nil];
//初始化UISegmentedControl
//在没有设置[segment setApportionsSegmentWidthsByContent:YES]时,每个的宽度按segment的宽度平分
UISegmentedControl *segment = [[UISegmentedControl alloc]initWithItems:options];
//设置frame
segment.frame = CGRectMake(0, 400, self.view.frame.size.width, 40);
[self.view addSubview:segment];

16.如何使选中不同UISegmentedController进行切换?

[segment addTarget:self action:@selector(selected:) forControlEvents:UIControlEventValueChanged];
    
-(void)selected:(id)sender{
    UISegmentedControl* control = (UISegmentedControl*)sender;
    switch (control.selectedSegmentIndex) {
        case 0:
            NSLog(@"0");
            break;
        case 1:
            NSLog(@"1");
            break;
        case 2:
            NSLog(@"2");
            break;
            
        default:
            NSLog(@"3");
            break;
    }
}

17.设置segment被选中前后的字体颜色和背景颜色。

典型样例
主要代码如下:

//背景颜色
segment.tintColor=myColor;
//默认选中
segment.selectedSegmentIndex = 0;
//选择时的文字颜色和字体
[segment setTitleTextAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:18],NSForegroundColorAttributeName: [UIColor whiteColor]} forState:UIControlStateSelected];
//未选择时的文字颜色和字体
[segment setTitleTextAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:15],NSForegroundColorAttributeName: myColor} forState:UIControlStateNormal];

18.花费了我超多时间的问题:在UISegmentedControl中加入UITableViewController标签页时,总是整个屏幕都被UITableView铺满,而能点击的只有预先设置的cell

原来在UITableviewController中,self.view就是self.tableview,而tableviewframe默认就是整个视图的。所以我的解决方法是,先在当前UIView中创建一个UIView,设置好其frame,再将这个frame赋给UITableView

额外功能

实现了UITableViewCell被点击后选中的功能。尝试实现了UIPageViewController的滑动功能,但是需要额外创建视图容器,失败了。

点击选中功能的关键在于,在UITabBarController中,将标签页的声明放在@interface中,而非放在viewDidLoad方法中,viewDidLoad中只进行实例化。

你可能感兴趣的:(多页面语言学习APP的UI)