服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - iOS应用中使用Auto Layout实现自定义cell及拖动回弹

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

2021-01-09 17:26JohnLui IOS

这篇文章主要介绍了iOS应用中使用Auto Layout实现自定义cell及拖动回弹的方法,自定义UITableViewCell并使用Auto Layout对其进行约束可以方便地针对多尺寸屏幕进行调整,代码为Swift语言,需要的朋友可以参考下

自定义 cell 并使用 auto layout
创建文件
我们可以一次性创建 xib 文件和类的代码文件。

新建 cocoa touch class:

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

设置和下图相同即可:

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

检查成果

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

分别选中上图中的 1、2 两处,检查 3 处是否已经自动绑定为 firsttableviewcell,如果没有绑定,请先检查选中的元素确实是 2,然后手动绑定即可。

完成绑定工作
切换一页,如下图进行 identifier 设置:

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

新建 table view controller 页面
新建一个 table view controller 页面,并把我们之前创建的 swift on ios 那个按钮的点击事件绑定过去,我们得到:

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

然后创建一个名为 firsttableviewcontroller 的 uitableviewcontroller 类,创建流程跟前面基本一致。不要创建 xib。然后选中 storyboard 中的 table view controller(选中之后有蓝色边框包裹),在右侧对它和 firsttableviewcontroller 类进行绑定:

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

调用自定义 cell
修改 firsttableviewcontroller 类中的有效代码如下:

复制代码 代码如下:


import uikit

 

class firsttableviewcontroller: uitableviewcontroller {

    override func viewdidload() {
        super.viewdidload()

        var nib = uinib(nibname: "firsttableviewcell", bundle: nil)
        self.tableview.registernib(nib, forcellreuseidentifier: "firsttableviewcell")
    }

    override func didreceivememorywarning() {
        super.didreceivememorywarning()
    }

    // mark: - table view data source

    override func numberofsectionsintableview(tableview: uitableview) -> int {
        return 1
    }

    override func tableview(tableview: uitableview, numberofrowsinsection section: int) -> int {
        return 10
    }

    override func tableview(tableview: uitableview, cellforrowatindexpath indexpath: nsindexpath) -> uitableviewcell {
        let cell = tableview.dequeuereusablecellwithidentifier("firsttableviewcell", forindexpath: indexpath) as firsttableviewcell

        cell.textlabel?.text = indexpath.row.description

        return cell
    }
}


viewdidload() 中添加的两行代码是载入 xib 的操作。最下面的三个 func 分别是定义:

 

self.tableview 中有多少个 section
每个 section 中分别有多少个条目
实例化每个条目,提供内容
如果你得到以下页面,说明你调用自定义 cell 成功了!

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

给自定义 cell 添加元素并使用 auto layout 约束
首先向 images.xcassets 中随意加入一张图片。

然后在左侧文件树中选中 firsttableviewcell.xib,从右侧组件库中拖进去一个 image view,并且在右侧将其尺寸设置如下图右侧:

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

给 imageview 添加约束:

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

选中该 imageview(左箭头所示),点击自动 auto layout(右箭头所示),即可。

给 imageview 设置图片:

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

再从右侧组件库中拖入一个 uilabel,吸附到最右侧,垂直居中,为其添加自动约束,这一步不再赘述。

在 firsttableviewcell 类中绑定 xib 中拖进去的元素
选中 firsttableviewcell.xib,切换到双视图,直接进行拖动绑定:

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

绑定完成!

约束 cell 的高度
在 firsttableviewcontroller 中添加以下方法:

复制代码 代码如下:

override func tableview(tableview: uitableview, heightforrowatindexpath indexpath: nsindexpath) -> cgfloat {
    return 50
}


给自定义的 uilabel 添加内容
修改 firsttableviewcontroller 中以下函数为:

复制代码 代码如下:


override func tableview(tableview: uitableview, cellforrowatindexpath indexpath: nsindexpath) -> uitableviewcell {
    let cell = tableview.dequeuereusablecellwithidentifier("firsttableviewcell", forindexpath: indexpath) as firsttableviewcell

 

    cell.firstlabel.text = indexpath.row.description

    return cell
}


查看结果
4.0 寸:

 

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

4.7 寸:

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

如果你得到以上结果,那么恭喜你自定义 cell 并使用 auto layout 成功!


22 行代码实现拖动回弹
搭建界面
删除首页中间的按钮,添加一个 view ,设置一种背景色便于辨认,然后对其进行绝对约束:

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

拖动一个 uipangesturerecognizer 到该 view 上:

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

界面搭建完成。

属性绑定
切换到双向视图,分别右键拖动 uipangesturerecognizer 和该 view 的 top space 的 auto layout 属性到 viewcontroller 中绑定:

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

然后将 uipangesturerecognizer 右键拖动绑定:

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

编写代码

复制代码 代码如下:


class viewcontroller: uiviewcontroller {
   
    var middleviewtopspacelayoutconstant: cgfloat!
    var middlevieworiginy: cgfloat!
   
    @iboutlet weak var middleview: uiview!
    @iboutlet weak var middleviewtopspacelayout: nslayoutconstraint!
    @iboutlet var pangesture: uipangesturerecognizer!
    override func viewdidload() {
        super.viewdidload()
       
        pangesture.addtarget(self, action: selector("pan"))
        middleviewtopspacelayoutconstant = middleviewtopspacelayout.constant
        middlevieworiginy = middleview.frame.origin.y
    }

 

    override func didreceivememorywarning() {
        super.didreceivememorywarning()
        // dispose of any resources that can be recreated.
    }
   
    func pan() {
        if pangesture.state == uigesturerecognizerstate.ended {
            uiview.animatewithduration(0.4, delay: 0, options: uiviewanimationoptions.curveeaseinout, animations: { () -> void in
                self.middleview.frame.origin.y = self.middlevieworiginy
                }, completion: { (success) -> void in
                    if success {
                        self.middleviewtopspacelayout.constant = self.middleviewtopspacelayoutconstant
                    }
            })
            return
        }
        let y = pangesture.translationinview(self.view).y
        middleviewtopspacelayout.constant = middleviewtopspacelayoutconstant + y
    }

}


查看效果

 

iOS应用中使用Auto Layout实现自定义cell及拖动回弹

22 行代码,拖动回弹效果完成!

延伸 · 阅读

精彩推荐
  • IOS详解iOS中多个网络请求的同步问题总结

    详解iOS中多个网络请求的同步问题总结

    这篇文章主要介绍了详解iOS中多个网络请求的同步问题总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    liang199111302021-03-15
  • IOSiOS自定义UICollectionViewFlowLayout实现图片浏览效果

    iOS自定义UICollectionViewFlowLayout实现图片浏览效果

    这篇文章主要介绍了iOS自定义UICollectionViewFlowLayout实现图片浏览效果的相关资料,需要的朋友可以参考下...

    jiangamh8882021-01-11
  • IOSiOS中UILabel实现长按复制功能实例代码

    iOS中UILabel实现长按复制功能实例代码

    在iOS开发过程中,有时候会用到UILabel展示的内容,那么就设计到点击UILabel复制它上面展示的内容的功能,也就是Label长按复制功能,下面这篇文章主要给大...

    devilx12792021-04-02
  • IOSiOS开发技巧之状态栏字体颜色的设置方法

    iOS开发技巧之状态栏字体颜色的设置方法

    有时候我们需要根据不同的背景修改状态栏字体的颜色,下面这篇文章主要给大家介绍了关于iOS开发技巧之状态栏字体颜色的设置方法,文中通过示例代码...

    梦想家-mxj8922021-05-10
  • IOSiOS开发之视图切换

    iOS开发之视图切换

    在iOS开发中视图的切换是很频繁的,独立的视图应用在实际开发过程中并不常见,除非你的应用足够简单。在iOS开发中常用的视图切换有三种,今天我们将...

    执着丶执念5272021-01-16
  • IOSiOS实现控制屏幕常亮不变暗的方法示例

    iOS实现控制屏幕常亮不变暗的方法示例

    最近在工作中遇到了要将iOS屏幕保持常亮的需求,所以下面这篇文章主要给大家介绍了关于利用iOS如何实现控制屏幕常亮不变暗的方法,文中给出了详细的...

    随风13332021-04-02
  • IOSiOS中滑动控制屏幕亮度和系统音量(附加AVAudioPlayer基本用法和Masonry简单使用)

    iOS中滑动控制屏幕亮度和系统音量(附加AVAudioPlayer基本用法和

    这篇文章主要介绍了iOS中滑动控制屏幕亮度和系统音量(附加AVAudioPlayer基本用法和Masonry简单使用)的相关资料,需要的朋友可以参考下...

    CodingFire13652021-02-26
  • IOSiOS中MD5加密算法的介绍和使用

    iOS中MD5加密算法的介绍和使用

    MD5加密是最常用的加密方法之一,是从一段字符串中通过相应特征生成一段32位的数字字母混合码。对输入信息生成唯一的128位散列值(32个字符)。这篇文...

    LYSNote5432021-02-04