iOS 内容从水平到垂直并带有动画，反之亦然
Par*_*iya 0 ios swift uistackview
我们可以通过UIStackView最初的垂直轴然后最终它将是水平轴来实现这一点，反之亦然吗？
如果使用NSAutoLayout，如何做到这一点？
如果有人可以为我提供示例来源或此处的任何提示都会有所帮助，则需要帮助。
更新答案
感谢@Fogmeister
首先，我制作两个 StackView，其中一个包含 namelable 和 profileImage
bigStackView 持有第一个 stackView 和 followButton
像这样的约束
大堆栈视图：
我之所以在左侧和右侧添加 20 个点，是因为如果我将其设置为 0，则关注按钮将靠近屏幕边缘！
StackView： 您不需要在此 stackView 上添加约束
简介图片：
名称标签：
关注图片：
然后我在向下滚动时使它们的间距相等，间距为 5
但是当向上滚动时，StackView 的间距将为 15，因此个人资料图像将远离 nameLable （这就是为什么我添加两个 stackView 的原因，以便我可以控制间距）
并为 stackView 添加 160 点的高度约束，并在向上滚动时将其更改为 100 点
代码会变成这样
import UIKit
class ViewController: UIViewController , UITableViewDelegate , UITableViewDataSource {
@IBOutlet weak var bigStackView: UIStackView!
@IBOutlet weak var StackView: UIStackView!
@IBOutlet weak var StackViewHight: NSLayoutConstraint!
@IBOutlet weak var progileHight: NSLayoutConstraint!
@IBOutlet weak var profileWidth: NSLayoutConstraint!
var rowsNames = ["Row 0", "Row 1", "Row 2", "Row 3", "Row 4", "Row 5",
"Row 6", "Row 7", "Row 8", "Row 9", "Row 10", "Row 11",
"Row 12", "Row 13", "Row 14", "Row 15", "Row 16", "Row 17",
"Row 18", "Row 19", "Row 20", "Row 21", "Row 22", "Row 23",
"Row 24", "Row 25", "Row 26", "Row 27", "Row 28", "Row 29", "Row 20"]
// we set a variable to hold the contentOffSet before scroll view scrolls
var lastContentOffset: CGFloat = 0
override func viewDidLoad() {
super.viewDidLoad()
}
// MARK: - UITableViewDataSource
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return rowsNames.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
cell.textLabel?.text = rowsNames[indexPath.row]
return cell
}
// this delegate is called when the scrollView (i.e your UITableView) will start scrolling
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
self.lastContentOffset = scrollView.contentOffset.y
}
// while scrolling this delegate is being called so you may now check which direction your scrollView is being scrolled to
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if (self.lastContentOffset < scrollView.contentOffset.y) {
// moved to top
UIView.animate(withDuration: 0.5,
animations: {
// Change Hight and Witdh of profileImage (make it smaller)
self.progileHight.constant = 50
self.profileWidth.constant = 50
self.bigStackView.axis = .horizontal
self.StackView.axis = .horizontal
// Change spacing between profileImage and nameLable
self.StackView.spacing = 15
// Make BigStackView Smaller
self.StackViewHight.constant = 100
self.view.layoutIfNeeded()
})
} else if (self.lastContentOffset > scrollView.contentOffset.y) {
// moved to bottom
UIView.animate(withDuration: 0.5,
animations: {
// return Hight and Witdh of profileImage to its orginal size
self.progileHight.constant = 100
self.profileWidth.constant = 100
self.bigStackView.axis = .vertical
self.StackView.axis = .vertical
// return spacing between profileImage and nameLable to the orginal space
self.StackView.spacing = 5
// return BigStackView to its orginal size
self.StackViewHight.constant = 160
self.view.layoutIfNeeded()
})
} else {
// didn't move
}
}
}
结果将是：
旧答案：
我认为你不能通过 UIStackView 实现这一点
但用 UIView 做起来很容易
首先让你的故事板像这样
然后添加约束
用户界面视图：
简介图片：
名称标签：
关注按钮：
我在每台 iPhone 设备和 iPad 上进行了测试，约束没有被打破
那么你只需要使用 UIView.animate
并移动物品
代码会是这样的
import UIKit
class ViewController: UIViewController , UITableViewDelegate , UITableViewDataSource {
var rowsNames = ["Row 0", "Row 1", "Row 2", "Row 3", "Row 4", "Row 5",
"Row 6", "Row 7", "Row 8", "Row 9", "Row 10", "Row 11",
"Row 12", "Row 13", "Row 14", "Row 15", "Row 16", "Row 17",
"Row 18", "Row 19", "Row 20", "Row 21", "Row 22", "Row 23",
"Row 24", "Row 25", "Row 26", "Row 27", "Row 28", "Row 29", "Row 20"]
@IBOutlet weak var squareView: UIView!
@IBOutlet weak var hightView: NSLayoutConstraint!
@IBOutlet weak var profileImage: UIImageView!
@IBOutlet weak var followButton: UIButton!
@IBOutlet weak var nameLable: UILabel!
// we set a variable to hold the contentOffSet before scroll view scrolls
var lastContentOffset: CGFloat = 0
override func viewDidLoad() {
super.viewDidLoad()
}
// MARK: - UITableViewDataSource
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return rowsNames.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
cell.textLabel?.text = rowsNames[indexPath.row]
return cell
}
// this delegate is called when the scrollView (i.e your UITableView) will start scrolling
func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
self.lastContentOffset = scrollView.contentOffset.y
}
// while scrolling this delegate is being called so you may now check which direction your scrollView is being scrolled to
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if (self.lastContentOffset < scrollView.contentOffset.y) {
// moved to top
self.hightView.constant = 100
UIView.animate(withDuration: 0.5,
animations: {
self.profileImage.transform = CGAffineTransform(translationX:-150, y: -15).scaledBy(x: 0.5, y: 0.5)
self.followButton.transform = CGAffineTransform(translationX:130, y: -110)
self.nameLable.transform = CGAffineTransform(translationX:-95, y: -80)
self.view.layoutIfNeeded()
})
} else if (self.lastContentOffset > scrollView.contentOffset.y) {
// moved to bottom
UIView.animate(withDuration: 0.5,
animations: {
self.hightView.constant = 206
self.profileImage.transform = CGAffineTransform.identity
self.followButton.transform = CGAffineTransform.identity
self.nameLable.transform = CGAffineTransform.identity
self.view.layoutIfNeeded()
})
} else {
// didn't move
}
}
}
我所做的是检测用户是否向上或向下滚动
当它向上滚动时
我更改了 UIView 的高度，还更改了 ProfileImage 的位置，并将其缩小了一半，然后更改了 namaLable 和 followButton
当它向下滚动时，我将高度尺寸返回到原始尺寸，并将其余视图返回到其原始尺寸
CGAffineTransform.identity
结果是
我希望这个解决方案对你来说很常见
| 归档时间： |
|
| 查看次数： |
2013 次 |
| 最近记录： |