首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >iOS 关于Interface Building 的一些小技巧

iOS 关于Interface Building 的一些小技巧

作者头像
星宇大前端
发布2020-02-13 12:53:44
1.7K0
发布2020-02-13 12:53:44
举报
文章被收录于专栏:大宇笔记大宇笔记

从纯代码UI -> 最初的Xib -> StoryBoard ,感受到UI的搭建也是逐渐可视化,简单化。我是一个可视乎开发的支持者,有一些朋友不喜欢,这个纯属个人爱好,风格不同。

备注:本文代码Demo使用Swift

# Xib基础

## 1. UIStackView StackView 是iOS9以后才有的,主要解决了组件排列布局复杂的问题,高效快速。

AutoLayout布局是不是遇到过一个均分排列的布局,还要隐藏显示其中一个。 这样布局就很麻烦了,每次都要更改约束。

UIStackView主要有四个属性:

  • Axis(主轴是水平和垂直)
  • Alignment
  • Distribution
  • Spacing
在这里插入图片描述
在这里插入图片描述

Alignment属性

  1. Fill:完全充满
  2. Top:顶部对齐
  3. Center:居中对齐
  4. Bottom:底部对齐

Distribution属性

  1. Fill:完全充满
  2. Fill Equally:均分填充,可是设置间隙,减去间隙均分填充满。
  3. Fill Proportionally:按照之前比例填充,可以设置间隙,减去间隙按比例充满。
  4. Fill Spacing:该属性会保持子视图的宽高,所有子视图中间的间隔保持一致。
  5. Fill Center: 该属性是控制所有子视图的中心之间的距离保持一致。 StackViewDemo

场景:动态Tab,可以展示2个也可以三个。

在这里插入图片描述
在这里插入图片描述

全部代码和布局如下图:

在这里插入图片描述
在这里插入图片描述

2. AutoLayout 优先级和动画

在没有UISatckView之前,我们可以利用优先级完成三个Tab删除一个的场景,但是再重新显示是比较困难的。

约束优先级

先看下演示效果:

在这里插入图片描述
在这里插入图片描述

约束:三个Button等宽等高,均匀分布到屏幕,关键点是Tab3的约束

优先级的作用简单总结一下:一个元素可以同时存在两个相同作用的约束,优先级必须有先后,当其中一个失效,另一个就会使用,这样当我们删除相关元素,可以导致优先级改变。

Tab3的优先级如下:

在这里插入图片描述
在这里插入图片描述

代码:

@IBAction func deleteTab2BtnClick(_ sender: Any) {
       priorityTab2.removeFromSuperview()
        UIView.animate(withDuration: 3, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 15, options: .curveEaseInOut, animations: {
            self.view.layoutIfNeeded()
        }, completion: nil)
 }

伸缩优先级

点击控件我们在size inspector 一栏,最下部可以看到下面优先级。

在这里插入图片描述
在这里插入图片描述

Content Hugging Priority:表示一个控件“抗拉伸”的优先级。优先级越高,越不容易被拉伸,默认是:251。

Content Compression Resistance Priority:表示一个控件“抗压缩”的优先级。优先级越高,越不容易被压缩,默认是:750。

应用场景

最常见的简单问题,如果我们需要在一行放两个Label,Label宽度自适应。这样就会报错,因为无法确定哪一个Label的宽度撑开的优先级高。

演示Demo:

两个Label约束如下:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这时候就会报,上文所说的错误,修改一个优先级即可,我们想让Label1拉伸,所有将Label2的抗拉伸优先级调高成252,同理你可以将Label1调成249。

在这里插入图片描述
在这里插入图片描述

还没有结束,上述过程是空间充足的情况如果空间不足的话,还会出现报错。

在这里插入图片描述
在这里插入图片描述

现在我们不希望Label2被压缩,所以同理调高优先级即可。

3. @IBDesignable 和 @IBInspectable 的使用

应用场景:我们使用Xib绑定Custom Class想看一下样子,所见即所得,IBDesignable这个属性即可满足这个需求。

有时候我们想在XIb里直观修改Xib属性,但是Xcode并不全部提供属性修改,可以通过Keypath修改,但是键入太麻烦容易出错,所以可以通过IBInspectable添加自定义属性。

应用Demo:

制作一个可以动态修改Raduis属性,即可显示的Demo。

在这里插入图片描述
在这里插入图片描述
import UIKit
@IBDesignable
class LayerView: UIView {
    @IBInspectable var myRaduis:CGFloat = 0.0{
        didSet{
            self.layer.cornerRadius = myRaduis
        }
    }
}

# 视图复用

1.自定义Xib View复用

Xcode 创建CocoaTouch Class View的时候,不可以自动生成绑定的Xib View。所以需要创建Xib View,然后绑定Custom Class。

step 1:

在这里插入图片描述
在这里插入图片描述

step 2:新建View Class,并在XIb绑定Custom Class为该类。

step 3:使用该View

2,3步截图使用代码如下:

在这里插入图片描述
在这里插入图片描述
if let customView = Bundle.main.loadNibNamed("CustomView", owner: self, options: nil)?.first as? CustomView{
            customView.frame = CGRect(x: 200, y: 500, width: 200, height: 100)
            self.view.addSubview(customView)
}

2.在StoryBoard和Xib中怎么复用Xib文件

上个例子中制作了一个Xib view,但是在项目中往往想更直接在StoryBoard中复用Xib view。直接关联肯定是不行的。

下面介绍下如何在Sb中复用XIb 文件:

接上文例子,我们想在Sb中加上Xib view需要如下步骤,

step 1:绑定Xib 文件的 File's owner 的Class

在这里插入图片描述
在这里插入图片描述

step 2:在 init?(coder: NSCoder)初始化方法中,添加xib视图。

import UIKit
class SbView: UIView {
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        if let sbView = Bundle.main.loadNibNamed("SbView", owner: self, options: nil)?.first as? UIView{
            sbView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
            self.addSubview(sbView)
        }
    }
}

step3: 在StoryBoard中,将该视图绑定Class即可。

在这里插入图片描述
在这里插入图片描述

# StoryBoard 

1.Segue

Segue是一个很简单对象类,继承于NSObject。目的也很简单,主要是Sb VC之间跳转关系的纽带。

基本属性:

属性

作用

identifier

字符串标识,区分页面不同Segue

source

跳转之前的控制器

destination

需要跳转到的控制器

传值:

有时候我们需要判断是否满足跳转的条件,可以重写UIViewController shouldPerformSegue代理:

 override func shouldPerformSegue(withIdentifier identifier: String, sender: Any?) -> Bool {
        if identifier ==  "jumpSecond"{
            return true
        }
        return false
  }

传值的时候,可以重写prepare方法。

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier ==  "jumpSecond"{
            let vc = segue.destination as? SecondViewController
            vc?.title = "第二控制器"
        }
}

下面一个图可以清楚说明:

在这里插入图片描述
在这里插入图片描述

2.快捷TableViewController

一些简单的表格页面,比如设置页面,可以使用静态TableViewController,简单高效。

应用Demo,设置页面:

在这里插入图片描述
在这里插入图片描述

step1: 拖一个TableViewController,改成静态的Cells,Style改成分组

在这里插入图片描述
在这里插入图片描述

step2: 修改Cell 为想要的类型,然后复制Section Cell,修改数据,组合即可。

# Cocoapods 制作第三方库,上传Xib文件

Cocoapods库制作的时候,Xib文件需要写到资源里,需要注意一下。

# ――― Resources ―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――― #
  #
  #  A list of resources included with the Pod. These are copied into the
  #  target bundle with a build phase script. Anything else will be cleaned.
  #  You can preserve files from being cleaned, please don't preserve
  #  non-essential files like tests, examples and documentation.
  #

  # spec.resource  = "icon.png"
  spec.resources = "Classes/Cell/*.xib","Classes/Image/*.png"

# 展望

希望写一个第三方库,可以更方便的使用Interface Building去写app,扩展更多更有用的可视化属性和控件。 让开发iOS 更简单,高效。

抛砖引玉,希望有相同志向的人,能一起扩展完善。

第三方地址:XibKits

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-01-15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • # Xib基础
    • Alignment属性
      • Distribution属性
      • 2. AutoLayout 优先级和动画
        • 约束优先级
          • 伸缩优先级
          • 3. @IBDesignable 和 @IBInspectable 的使用
          • # 视图复用
          • 1.自定义Xib View复用
          • 2.在StoryBoard和Xib中怎么复用Xib文件
          • # StoryBoard 
          • 1.Segue
          • 2.快捷TableViewController
            • 应用Demo,设置页面:
            • # Cocoapods 制作第三方库,上传Xib文件
            • # 展望
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档