UI风格

在iOS 11中,系统APP使用了这种UI风格。这种风格最明显的变化就是使用了iOS 11的新特性--Large Title和新的SearchController。

Demo

GitHub: LargerTitleDemo

Large Title & Table View

设置Lager Title

APP全局使用Large Title

1
2
3
4
5
6
7
8
9
10
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
 // Override point for customization after application launch.
 // 设置Large Title偏好为True。
 if (@available(iOS 11.0, *)) {
  [[UINavigationBar appearance] setPrefersLargeTitles:true];
 } else {
  // Fallback on earlier versions
 }
 return YES;
}

单个ViewController使用Larger Title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- (void)viewWillAppear:(BOOL)animated {
 [super viewWillAppear:animated];
 // 设置Large Title偏好为YES。
 if (@available(iOS 11.0, *)) {
  [self.navigationController.navigationBar setPrefersLargeTitles:YES];
 } else {
  // Fallback on earlier versions
 }
}
 
- (void)viewWillDisappear:(BOOL)animated {
 [super viewWillDisappear:animated];
 // 设置Large Title偏好为NO。
 if (@available(iOS 11.0, *)) {
  [self.navigationController.navigationBar setPrefersLargeTitles:NO];
 } else {
  // Fallback on earlier versions
 }
}

使用上述代码设置后,即可开启Large Title的显示。

添加Table View

在StoryBoard添加TableView

在Xcode 9中,XIB和StoryBoard默认会添加 Safe Area(安全区) ,而添加在Controller的View上控件的约束也不再以supview为准,而是以Safe Area为准。

Safe Area是在iOS 9中添加的特性。如果你不需要使用Safe Area,或需要在旧版本的App中添加Safe Area,可以在XIB或StoryBoard的右侧边栏中“Show the File inspector”标签下对“Use Safe Area Layout Guides”选项下进行勾选,以添加或删除Safe Area。

添加Refresh Control

Refresh Control是系统的下拉刷新控件,配合Table View使用,以实现系统的下拉刷新效果。

1
2
3
4
5
6
7
UIRefreshControl *refreshControl = [[UIRefreshControl alloc]init];
[refreshControl addTarget:self action:@selector(beginRefresh:) forControlEvents:UIControlEventValueChanged];
if (@available(iOS 10.0, *)) {
 [self.tableView setRefreshControl:refreshControl];
} else {
 // Fallback on earlier versions
}

刷新完成调用 - (void)endRefreshing NS_AVAILABLE_IOS(6_0); 结束刷新状态。

Search Controller

添加搜索栏

1
2
3
4
5
6
if (@available(iOS 11.0, *)) {
 UISearchController *searchController = [[UISearchController alloc]initWithSearchResultsController:nil];
 self.navigationItem.searchController = searchController;
} else {
 // Fallback on earlier versions
}

关于 Search Controller 的使用在此不再赘述。可参考官方Sample Code Table Search with UISearchController

再说几句

由于Large Title及一些API仅在iOS 11提供,所以在调用前均添加了判断,以防止低版本系统调用高版本API造成应用崩溃

1
2
3
4
5
if (@available(iOS 10.0, *)) {
 // Code...
} else {
 // Fallback on earlier versions
}

在实际开发中,在ViewController上添加TableView实现效果不够理想,在滑动过程中有明显卡顿。而直接使用TableViewController实现效果最为理想,滑动无卡顿现象。

链接  http://www.jb51.net/article/130433.htm

感谢分享

iOS11新特性之LargeTitle的更多相关文章

  1. iOS -- iOS11新特性,如何适配iOS11

    前言 这几天抽空把WWDC的Session看了一些,总结了一些iOS11新的特性,可能对我们的App有影响,需要我们进行适配.本文作为一个总结. 本文内容包括:集成了搜索的大标题栏.横向选项卡栏.Ma ...

  2. iOS11 SDK 新特性 CoreML 及swift 小demo

    github代码 如果本博客对您有帮助,希望可以得到您的赞赏! swift 机器学习Core ML的简单调用小demo.完整代码附上: https://github.com/Liuyubao/LYBC ...

  3. WKWebView强大的新特性

    iOS11对WKWebView的功能进一步完善,新增如下功能: Manager Cookies Fileter unwanted content Provide custom resources 下面 ...

  4. SQL Server 2014 新特性——内存数据库

    SQL Server 2014 新特性——内存数据库 目录 SQL Server 2014 新特性——内存数据库 简介: 设计目的和原因: 专业名词 In-Memory OLTP不同之处 内存优化表 ...

  5. ElasticSearch 5学习(10)——结构化查询(包括新特性)

    之前我们所有的查询都属于命令行查询,但是不利于复杂的查询,而且一般在项目开发中不使用命令行查询方式,只有在调试测试时使用简单命令行查询,但是,如果想要善用搜索,我们必须使用请求体查询(request ...

  6. [干货来袭]C#6.0新特性

    微软昨天发布了新的VS 2015 ..随之而来的还有很多很多东西... .NET新版本 ASP.NET新版本...等等..太多..实在没消化.. 分享一下也是昨天发布的新的C#6.0的部分新特性吧.. ...

  7. CSS3新特性应用之结构与布局

    一.自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,包含margin.padding.borde ...

  8. 【译】Meteor 新手教程:在排行榜上添加新特性

    原文:http://danneu.com/posts/6-meteor-tutorial-for-fellow-noobs-adding-features-to-the-leaderboard-dem ...

  9. 跨平台的 .NET 运行环境 Mono 3.2 新特性

    Mono 3.2 发布了,对 Mono 3.0 和 2.10 版本的支持不再继续,而且这两个分支也不再提供 bug 修复更新. Mono 3.2 主要新特性: LLVM 更新到 3.2 版本,带来更多 ...

随机推荐

  1. OpenGL ES Shading Language中应尽量避免使用循环

      In addition to basic if-then-else statements, it is possible to write for, while, and do-while loo ...

  2. [Functional Programming] Daggy

    const daggy = require('daggy'); const {tagged, taggedSum} = daggy; const Coord = daggy.tagged('Coord ...

  3. [Docker] Building a Node.js Image

    Create a Dockerfile: FROM node:latest MAINTAINER Zhentian Wan ENV NODE_ENV=production ENV PORT= COPY ...

  4. GPUImage API 文档之GPUImageFilter类

    GPUImageFilter类 方法 - (id)initWithVertexShaderFromString:(NSString *)vertexShaderString fragmentShade ...

  5. ArcGIS10.4 Runtime Error R6034

    现在甲方采购的ArcGIS Desktop正版,一般都是较高的版本(10.4或10.4.1),但10.4经常报出C++ Runtime R6034错误. 问题 "Microsoft Visu ...

  6. iOS编程(双语版)-视图-Frame/Bounds/Center

    1. Frame 每个视图都有一个frame属性,它是CGRect结构,它描述了视图所在的矩形在其父视图中的位置. (屏幕坐标系默认的原点在左上角,x轴向右伸展,y轴向下伸展) 设置frame通常通过 ...

  7. Mysql5.7初始化成空密码或随机密码的方式

    命令在此:mysqld --initialize-insecure --user=mysql 文档表明,使用-initialize生成随机密码,使用-initialize-insecure生成空密码. ...

  8. 一个简单的C/S事例——JAVA-Socket

    TalkClient.java import java.io.*; import java.net.*; public class TalkClient { public static void ma ...

  9. AOP技术分析

    AOP的概述(http://www.cnblogs.com/lxp503238/p/6837653.html)        1. 什么是AOP的技术?        * 在软件业,AOP为Aspec ...

  10. http put post请求区别

    1.RESTful API REST: Representational State Transfer url 对应服务器上的一种资源,e.g. 数据,图片等,所以url 中只含有名词,通过HTTP动 ...