UIScrollView：从 firebase 调用用户名时在滚动视图中显示用户个人资料图像
UIScrollView: Show user profile Images in a scroll view when user name is called from firebase
我正在构建一个应用程序，用户可以在该应用程序中选择他们关注的 4 个随机用户来回答问题。目前它从我的 firebase 数据库中调用随机名称。每个用户都有他们在注册时上传的个人资料图片，并将其保存在与用户全名相同的位置。
我希望个人资料图像与全名同时被调用，并按照名称被调用的顺序显示在屏幕的 UIScrollView 上（例如，选项 A user image is first shown，然后滚动选项 B 用户图片等）- like this image
到目前为止，正在调用全名并显示在按钮上，我可以访问 URL 的 firebase 存储，但我不知道如何从 firebase 获取 profileImageUrl 以按此顺序显示在随机选择用户名时在滚动视图上，到目前为止我有这个：
@IBOutlet weak var pinionImagesScrollView: UIScrollView!
@IBOutlet weak var questionLabel: UILabel!
@IBOutlet weak var optionA: UIButton!
@IBOutlet weak var optionB: UIButton!
@IBOutlet weak var optionC: UIButton!
@IBOutlet weak var optionD: UIButton!
let numberOfKeys = randomKeyArray.count
var namesRemaining = numberOfKeys
var names = [String]()
var profileImages = [String]()
for i in 0..<numberOfKeys {
let thisUserKey = randomKeyArray[i]
let userRef = self.ref.child("users").child(thisUserKey)
userRef.observeSingleEvent(of: .value, with: { snapshot in
let name = snapshot.childSnapshot(forPath: "fullname").value as! String
let profileImageUrl = snapshot.childSnapshot(forPath: "profileImageUrl").value as! String
print(name)
namesRemaining -= 1
names.append(name)
// Another array for images
print(profileImageUrl)
profileImages.append(profileImageUrl)
self.currIds.append(thisUserKey)
if namesRemaining == 0 {
self.currNames = names
self.optionA.setTitle(names[0], for: .normal)
self.optionA.backgroundColor = UIColor.orange
self.optionB.setTitle(names[1], for: .normal)
self.optionB.backgroundColor = UIColor.orange
self.optionC.setTitle(names[2], for: .normal)
self.optionC.backgroundColor = UIColor.orange
self.optionD.setTitle(names[3], for: .normal)
self.optionD.backgroundColor = UIColor.orange
}
})
}
不胜感激 help/explanation，谢谢 :)
编辑代码更新：
@IBOutlet weak var imagePageControl: UIPageControl!
@IBOutlet weak var userImageScrollView: UIScrollView!
@IBOutlet weak var questionLabel: UILabel!
@IBOutlet weak var optionA: UIButton!
@IBOutlet weak var optionB: UIButton!
@IBOutlet weak var optionC: UIButton!
@IBOutlet weak var optionD: UIButton!
var user: UserModel?
override func viewDidLoad() {
super.viewDidLoad()
loadNewQuestion()
getFourRandomNodesAndPrintUserName()
imagePageControl.numberOfPages = namesWithUrl.count
setupLayout()
}
var ref: DatabaseReference = Database.database().reference()
var currNames: [String] = []
var currIds: [String] = []
var names = [String]()
var namesWithUrl = [String : String]()
var frame = CGRect(x: 0, y: 0, width: 0, height: 0)
var imageViewA = UIImageView()
var imageViewB = UIImageView()
var imageViewC = UIImageView()
var imageViewD = UIImageView()
func setupLayout() {
userImageScrollView.addSubview(imageViewA)
imageViewA.translatesAutoresizingMaskIntoConstraints = false
imageViewA.widthAnchor.constraint(equalTo: userImageScrollView.widthAnchor, constant: -10).isActive = true
imageViewA.heightAnchor.constraint(equalToConstant: 60).isActive = true
imageViewA.topAnchor.constraint(equalTo: userImageScrollView.topAnchor, constant: -5).isActive = true
userImageScrollView.addSubview(imageViewB)
imageViewB.translatesAutoresizingMaskIntoConstraints = false
imageViewB.widthAnchor.constraint(equalTo: userImageScrollView.widthAnchor, constant: -10).isActive = true
imageViewB.heightAnchor.constraint(equalToConstant: 60).isActive = true
imageViewB.topAnchor.constraint(equalTo: imageViewA.bottomAnchor, constant: 5).isActive = true
userImageScrollView.addSubview(imageViewC)
imageViewC.translatesAutoresizingMaskIntoConstraints = false
imageViewC.widthAnchor.constraint(equalTo: userImageScrollView.widthAnchor, constant: -10).isActive = true
imageViewC.heightAnchor.constraint(equalToConstant: 60).isActive = true
imageViewC.topAnchor.constraint(equalTo: imageViewB.bottomAnchor, constant: 5).isActive = true
userImageScrollView.addSubview(imageViewD)
imageViewD.translatesAutoresizingMaskIntoConstraints = false
imageViewD.widthAnchor.constraint(equalTo: userImageScrollView.widthAnchor, constant: -10).isActive = true
imageViewD.heightAnchor.constraint(equalToConstant: 60).isActive = true
imageViewD.topAnchor.constraint(equalTo: imageViewC.bottomAnchor, constant: 5).isActive = true
imageViewD.bottomAnchor.constraint(equalTo: userImageScrollView.bottomAnchor, constant: -5).isActive = true
}
// Each view is attached to the bottom of the previous view, and the final must be attached to the bottom of the scroll view in order for it to scroll properly.
func getFourRandomNodesAndPrintUserName() {
self.currNames = []
self.currIds = []
var myKeyArray = [String]()
guard let uid = Auth.auth().currentUser?.uid else {
return
}
let ref = self.ref.child("following").child(uid)
//retreives all nodes in the following node
ref.observeSingleEvent(of: .value, with: { snapshot in
print(snapshot.children.allObjects)
for child in snapshot.children { //build the array of keys
let snap = child as! DataSnapshot
let key = snap.key
myKeyArray.append(key)
}
var randomKeyArray = [String]()
let numFollowers = min(4, myKeyArray.count)
for _ in 0..<numFollowers { //will iterate four times
let count = myKeyArray.count //get the number of elements
let randomInt = Int.random(in: 0..<count) //get a random index for the array
let randomUserKey = myKeyArray[randomInt]
randomKeyArray.append(randomUserKey)
myKeyArray.remove(at: randomInt) //remove that object so it's not selected again
}
let numberOfKeys = randomKeyArray.count
var namesRemaining = numberOfKeys
for i in 0..<numberOfKeys {
let thisUserKey = randomKeyArray[i]
let userRef = self.ref.child("users").child(thisUserKey)
userRef.observeSingleEvent(of: .value, with: { snapshot in
let name = snapshot.childSnapshot(forPath: "fullname").value as! String
let profileImageUrl = snapshot.childSnapshot(forPath: "profileImageUrl").value as! String
print(name)
print(profileImageUrl)
namesRemaining -= 1
self.names.append(name)
self.namesWithUrl[name] = profileImageUrl
self.currIds.append(thisUserKey)
if numFollowers <= 3 {
self.optionA.setTitle("Follow\nat least\n4 friends!", for: .normal)
self.optionA.titleLabel?.textAlignment = .center
self.optionA.setTitleColor(UIColor.lightGray, for: .normal)
self.optionA.isEnabled = false
self.optionB.setTitle("Follow\nat least\n4 friends!", for: .normal)
self.optionB.titleLabel?.textAlignment = .center
self.optionB.setTitleColor(UIColor.lightGray, for: .normal)
self.optionB.isEnabled = false
self.optionC.setTitle("Follow\nat least\n4 friends!", for: .normal)
self.optionC.titleLabel?.textAlignment = .center
self.optionC.setTitleColor(UIColor.lightGray, for: .normal)
self.optionC.isEnabled = false
self.optionD.setTitle("Follow\nat least\n4 friends!", for: .normal)
self.optionD.titleLabel?.textAlignment = .center
self.optionD.setTitleColor(UIColor.lightGray, for: .normal)
self.optionD.isEnabled = false
}
else if namesRemaining == 0 {
self.currNames = self.names
self.optionA.setTitle(self.names[0], for: .normal)
self.optionA.backgroundColor = UIColor.orange
self.imageViewA.sd_setImageLoad(URL(namesWithUrl[name[0]])) //this is where i am getting the error - here you want to set the image to the imageView not the scrollView
self.optionB.setTitle(self.names[1], for: .normal)
self.optionB.backgroundColor = UIColor.orange
self.optionC.setTitle(self.names[2], for: .normal)
self.optionC.backgroundColor = UIColor.orange
self.optionD.setTitle(self.names[3], for: .normal)
self.optionD.backgroundColor = UIColor.orange
}
self.userImageScrollView.contentSize = CGSize(width: (self.userImageScrollView.frame.size.width * CGFloat(self.namesWithUrl.count)), height: self.userImageScrollView.frame.size.height)
self.userImageScrollView.delegate = self
})
}
})
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let pageNumber = userImageScrollView.contentOffset.x / userImageScrollView.frame.size.width
imagePageControl.currentPage = Int(pageNumber)
}
更新：外观
how images look now instead of being able to swipe between them
编辑：试图做到这一点，以便您可以在图像之间滑动 - 但出现错误：应用程序委托上的线程 1 SIGBART
var frame = CGRect(x: 0, y: 0, width: 0, height: 0)
func setupLayout() {
frame.origin.x = userImageScrollView.frame.size.width * CGFloat(4)
frame.size = userImageScrollView.frame.size
let imageViewA = UIImageView(frame: frame)
userImageScrollView.addSubview(self.imageViewA)
imageViewA.bottomAnchor.constraint(equalTo: userImageScrollView.bottomAnchor, constant: -5).isActive = true
let imageViewB = UIImageView(frame: frame)
userImageScrollView.addSubview(self.imageViewB)
imageViewB.bottomAnchor.constraint(equalTo: userImageScrollView.bottomAnchor, constant: -5).isActive = true
imageViewB.leftAnchor.constraint(equalTo: imageViewA.leftAnchor)
let imageViewC = UIImageView(frame: frame)
userImageScrollView.addSubview(imageViewC)
imageViewC.bottomAnchor.constraint(equalTo: userImageScrollView.bottomAnchor, constant: -5).isActive = true
imageViewC.leftAnchor.constraint(equalTo: imageViewB.leftAnchor)
let imageViewD = UIImageView(frame: frame)
userImageScrollView.addSubview(imageViewD)
imageViewD.bottomAnchor.constraint(equalTo: userImageScrollView.bottomAnchor, constant: -5).isActive = true
imageViewD.leftAnchor.constraint(equalTo: imageViewC.leftAnchor)
self.userImageScrollView.contentSize = CGSize(width: (self.userImageScrollView.frame.size.width * CGFloat(4)), height: self.userImageScrollView.frame.size.height)
self.userImageScrollView.delegate = self
}
制作names:profileImageUrl
的字典
var namesWithUrl = [String : String]()
而不只是 names.append(name) 做：
names.append(name)
namesWithUrl[name] = profileImageUrl
所以现在该名称及其正确的 profileImageUrl 保存在字典中，因此字典将如下所示：
[name1value : name1URl, name2value : name2URl, ...]
然后如果你使用 SDWebImage 你可以非常简单地做到这一点：
self.optionA.setTitle(names, for: .normal)
self.optionA.backgroundColor = UIColor.orange
self.optionA.sd_setBackgroundImage(with: URL(namesWithUrl[name[1]]), for: .normal)
//If using the button image
self.optionB.setTitle(names[1], for: .normal)
self.optionB.backgroundColor = UIColor.orange
optionAImageView.sd_setImage(with: URL(namesWithUrl[name[1]]))
//if using a seperate imageView
这将很容易地将图像设置到您的 imageView，您只需在每个图像下方添加该行即可。
编辑：将图像视图添加到滚动视图。
您可以通过故事板将图像视图添加到滚动视图上，或者您可以像这样以编程方式添加它们：
首先声明它们：
var imageViewA = UIImageView()
var imageViewB = UIImageView()
然后我喜欢有一个 setupLayout 函数来处理我的视图：
func setupLayout() {
pinionImagesScrollView.addsubview(imageViewA)
imageViewA.translatesAutoResizingMaskIntoConstraints = false
imageViewA.widthAnchor.constraint(equalTo: pinionImagesScrollView.widthAnchor, constant: -10).isActive = true
imageViewA.heightAnchor.constraint(equalToConstant: 60).isActive = true
imageViewA.topAnchor.constraint(equalTo: pinionImagesScrollView.topAnchor, constant: -5).isActive = true
pinionImagesScrollView.addsubview(imageViewA)
imageViewB.translatesAutoResizingMaskIntoConstraints = false
imageViewB.widthAnchor.constraint(equalTo: pinionImagesScrollView.widthAnchor, constant: -10).isActive = true
imageViewB.heightAnchor.constraint(equalToConstant: 60).isActive = true
imageViewB.topAnchor.constraint(equalTo: imageViewA.bottomAnchor, constant: -5).isActive = true
}
在那里你可以看到我们如何将 imageViewB 放在 imageViewA 下方并且宽度与 scrollview -10 相同，给出一点 space.
然后在viewDidLoad()中调用setupLayout()。在您将图像放在上面之前，它们将是空的。 optionAImageView.sd_setImage(with: URL(namesWithUrl[name[1]]))
更新：
您可能需要将 url 的字符串版本更改为 SD_setimage 的 URL，如下所示：
let optionAUrl = URL.init(string: nameUrls[names[0]])
imageView.sd_setImage(with: optionAUrl)
下标错误可能意味着你正在初始化字典错误，正如我所测试的那样，它应该可以正常工作。
更新：
setupLayout 的问题是您将自动布局与使用框架混合在一起。我假设你的 scrollViews 约束是在故事板中定义的，所以这里是你将如何设置 imageViews，以便宽度和高度与 scrollView 相同，你可以在它们之间滚动。请注意，如果您想水平滚动，您应该研究一下使用 UICollectionView。
在此示例中，我以编程方式创建 scrollView，您可以只关注 imageView，因为您的约束是在情节提要中制定的。
import UIKit
class ViewController: UIViewController {
let scrollView = UIScrollView()
let imageViewA = UIImageView()
let imageViewB = UIImageView()
let imageViewC = UIImageView()
//Declaring the imageViews
override func viewDidLoad() {
super.viewDidLoad()
setupLayout()
// Do any additional setup after loading the view, typically from a nib.
}
func setupLayout() {
view.addSubview(scrollView)
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
scrollView.widthAnchor.constraint(equalTo: view.widthAnchor, constant: -10).isActive = true
scrollView.backgroundColor = .gray
//setting up the size of the scrollView
scrollView.addSubview(imageViewA)
//This means we are using autoLayout, building the views and setting their size based on how their constraints relate to other objects
imageViewA.translatesAutoresizingMaskIntoConstraints = false
imageViewA.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
//Setting the imageViewA top anchor to the scrollView topanchor we are essentially saying the top of this imageView starts at the top of the scroll view
imageViewA.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -10).isActive = true
//Here the imageViews width is equal to the scrollViews width, (-10 is optional if you want it not to touch the edges)
imageViewA.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor).isActive = true
//CenterXAnchor here I am making sure the imageView is centered in the scrollView
imageViewA.heightAnchor.constraint(equalTo: scrollView.heightAnchor, constant: -10).isActive = true
//same with the height
imageViewA.backgroundColor = .cyan
//Background just for my testing as I dont have any images to sue
imageViewA.contentMode = .scaleAspectFit
//This is how you want the image to scale into the view for when you set it.
scrollView.addSubview(imageViewB)
imageViewB.translatesAutoresizingMaskIntoConstraints = false
imageViewB.topAnchor.constraint(equalTo: imageViewA.bottomAnchor, constant: 10).isActive = true
//Because we want to scroll down, the top anchor of imageViewB is equal to the bottom anchor of imageViewA meaning the top of B starts at the bottom of A
imageViewB.heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true
imageViewB.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -10).isActive = true
//Height and widths are the same.
imageViewB.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor).isActive = true
imageViewB.backgroundColor = .cyan
imageViewB.contentMode = scaleAspectFit
scrollView.addSubview(imageViewC)
imageViewC.translatesAutoresizingMaskIntoConstraints = false
imageViewC.topAnchor.constraint(equalTo: imageViewB.bottomAnchor, constant: 10).isActive = true
//imageViewCs top starts at bottom of B
imageViewC.heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true
imageViewC.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -10).isActive = true
imageViewC.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor).isActive = true
imageViewC.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
//for the final view, it needs to be connected to the bottom so the scrollView is able to scroll.
imageViewC.backgroundColor = .cyan
imageViewC.contentMode = .scaleAspectFit
}
}
这给了我一个方形的 Scrollview，它显示了 imageViewA 并允许我向下滚动并查看 imageViewB，然后是 imageView C
此代码的输出，scrollView 设置为视图的 centerYanchor，因此它停在中间，蓝色方块是 imageView，image1 显示它是如何启动的，您可以看到 ImageViewA，然后 image2 显示如何滚动到下一个图像:
我正在构建一个应用程序，用户可以在该应用程序中选择他们关注的 4 个随机用户来回答问题。目前它从我的 firebase 数据库中调用随机名称。每个用户都有他们在注册时上传的个人资料图片，并将其保存在与用户全名相同的位置。
我希望个人资料图像与全名同时被调用，并按照名称被调用的顺序显示在屏幕的 UIScrollView 上（例如，选项 A user image is first shown，然后滚动选项 B 用户图片等）- like this image
到目前为止，正在调用全名并显示在按钮上，我可以访问 URL 的 firebase 存储，但我不知道如何从 firebase 获取 profileImageUrl 以按此顺序显示在随机选择用户名时在滚动视图上，到目前为止我有这个：
@IBOutlet weak var pinionImagesScrollView: UIScrollView!
@IBOutlet weak var questionLabel: UILabel!
@IBOutlet weak var optionA: UIButton!
@IBOutlet weak var optionB: UIButton!
@IBOutlet weak var optionC: UIButton!
@IBOutlet weak var optionD: UIButton!
let numberOfKeys = randomKeyArray.count
var namesRemaining = numberOfKeys
var names = [String]()
var profileImages = [String]()
for i in 0..<numberOfKeys {
let thisUserKey = randomKeyArray[i]
let userRef = self.ref.child("users").child(thisUserKey)
userRef.observeSingleEvent(of: .value, with: { snapshot in
let name = snapshot.childSnapshot(forPath: "fullname").value as! String
let profileImageUrl = snapshot.childSnapshot(forPath: "profileImageUrl").value as! String
print(name)
namesRemaining -= 1
names.append(name)
// Another array for images
print(profileImageUrl)
profileImages.append(profileImageUrl)
self.currIds.append(thisUserKey)
if namesRemaining == 0 {
self.currNames = names
self.optionA.setTitle(names[0], for: .normal)
self.optionA.backgroundColor = UIColor.orange
self.optionB.setTitle(names[1], for: .normal)
self.optionB.backgroundColor = UIColor.orange
self.optionC.setTitle(names[2], for: .normal)
self.optionC.backgroundColor = UIColor.orange
self.optionD.setTitle(names[3], for: .normal)
self.optionD.backgroundColor = UIColor.orange
}
})
}
不胜感激 help/explanation，谢谢 :)
编辑代码更新：
@IBOutlet weak var imagePageControl: UIPageControl!
@IBOutlet weak var userImageScrollView: UIScrollView!
@IBOutlet weak var questionLabel: UILabel!
@IBOutlet weak var optionA: UIButton!
@IBOutlet weak var optionB: UIButton!
@IBOutlet weak var optionC: UIButton!
@IBOutlet weak var optionD: UIButton!
var user: UserModel?
override func viewDidLoad() {
super.viewDidLoad()
loadNewQuestion()
getFourRandomNodesAndPrintUserName()
imagePageControl.numberOfPages = namesWithUrl.count
setupLayout()
}
var ref: DatabaseReference = Database.database().reference()
var currNames: [String] = []
var currIds: [String] = []
var names = [String]()
var namesWithUrl = [String : String]()
var frame = CGRect(x: 0, y: 0, width: 0, height: 0)
var imageViewA = UIImageView()
var imageViewB = UIImageView()
var imageViewC = UIImageView()
var imageViewD = UIImageView()
func setupLayout() {
userImageScrollView.addSubview(imageViewA)
imageViewA.translatesAutoresizingMaskIntoConstraints = false
imageViewA.widthAnchor.constraint(equalTo: userImageScrollView.widthAnchor, constant: -10).isActive = true
imageViewA.heightAnchor.constraint(equalToConstant: 60).isActive = true
imageViewA.topAnchor.constraint(equalTo: userImageScrollView.topAnchor, constant: -5).isActive = true
userImageScrollView.addSubview(imageViewB)
imageViewB.translatesAutoresizingMaskIntoConstraints = false
imageViewB.widthAnchor.constraint(equalTo: userImageScrollView.widthAnchor, constant: -10).isActive = true
imageViewB.heightAnchor.constraint(equalToConstant: 60).isActive = true
imageViewB.topAnchor.constraint(equalTo: imageViewA.bottomAnchor, constant: 5).isActive = true
userImageScrollView.addSubview(imageViewC)
imageViewC.translatesAutoresizingMaskIntoConstraints = false
imageViewC.widthAnchor.constraint(equalTo: userImageScrollView.widthAnchor, constant: -10).isActive = true
imageViewC.heightAnchor.constraint(equalToConstant: 60).isActive = true
imageViewC.topAnchor.constraint(equalTo: imageViewB.bottomAnchor, constant: 5).isActive = true
userImageScrollView.addSubview(imageViewD)
imageViewD.translatesAutoresizingMaskIntoConstraints = false
imageViewD.widthAnchor.constraint(equalTo: userImageScrollView.widthAnchor, constant: -10).isActive = true
imageViewD.heightAnchor.constraint(equalToConstant: 60).isActive = true
imageViewD.topAnchor.constraint(equalTo: imageViewC.bottomAnchor, constant: 5).isActive = true
imageViewD.bottomAnchor.constraint(equalTo: userImageScrollView.bottomAnchor, constant: -5).isActive = true
}
// Each view is attached to the bottom of the previous view, and the final must be attached to the bottom of the scroll view in order for it to scroll properly.
func getFourRandomNodesAndPrintUserName() {
self.currNames = []
self.currIds = []
var myKeyArray = [String]()
guard let uid = Auth.auth().currentUser?.uid else {
return
}
let ref = self.ref.child("following").child(uid)
//retreives all nodes in the following node
ref.observeSingleEvent(of: .value, with: { snapshot in
print(snapshot.children.allObjects)
for child in snapshot.children { //build the array of keys
let snap = child as! DataSnapshot
let key = snap.key
myKeyArray.append(key)
}
var randomKeyArray = [String]()
let numFollowers = min(4, myKeyArray.count)
for _ in 0..<numFollowers { //will iterate four times
let count = myKeyArray.count //get the number of elements
let randomInt = Int.random(in: 0..<count) //get a random index for the array
let randomUserKey = myKeyArray[randomInt]
randomKeyArray.append(randomUserKey)
myKeyArray.remove(at: randomInt) //remove that object so it's not selected again
}
let numberOfKeys = randomKeyArray.count
var namesRemaining = numberOfKeys
for i in 0..<numberOfKeys {
let thisUserKey = randomKeyArray[i]
let userRef = self.ref.child("users").child(thisUserKey)
userRef.observeSingleEvent(of: .value, with: { snapshot in
let name = snapshot.childSnapshot(forPath: "fullname").value as! String
let profileImageUrl = snapshot.childSnapshot(forPath: "profileImageUrl").value as! String
print(name)
print(profileImageUrl)
namesRemaining -= 1
self.names.append(name)
self.namesWithUrl[name] = profileImageUrl
self.currIds.append(thisUserKey)
if numFollowers <= 3 {
self.optionA.setTitle("Follow\nat least\n4 friends!", for: .normal)
self.optionA.titleLabel?.textAlignment = .center
self.optionA.setTitleColor(UIColor.lightGray, for: .normal)
self.optionA.isEnabled = false
self.optionB.setTitle("Follow\nat least\n4 friends!", for: .normal)
self.optionB.titleLabel?.textAlignment = .center
self.optionB.setTitleColor(UIColor.lightGray, for: .normal)
self.optionB.isEnabled = false
self.optionC.setTitle("Follow\nat least\n4 friends!", for: .normal)
self.optionC.titleLabel?.textAlignment = .center
self.optionC.setTitleColor(UIColor.lightGray, for: .normal)
self.optionC.isEnabled = false
self.optionD.setTitle("Follow\nat least\n4 friends!", for: .normal)
self.optionD.titleLabel?.textAlignment = .center
self.optionD.setTitleColor(UIColor.lightGray, for: .normal)
self.optionD.isEnabled = false
}
else if namesRemaining == 0 {
self.currNames = self.names
self.optionA.setTitle(self.names[0], for: .normal)
self.optionA.backgroundColor = UIColor.orange
self.imageViewA.sd_setImageLoad(URL(namesWithUrl[name[0]])) //this is where i am getting the error - here you want to set the image to the imageView not the scrollView
self.optionB.setTitle(self.names[1], for: .normal)
self.optionB.backgroundColor = UIColor.orange
self.optionC.setTitle(self.names[2], for: .normal)
self.optionC.backgroundColor = UIColor.orange
self.optionD.setTitle(self.names[3], for: .normal)
self.optionD.backgroundColor = UIColor.orange
}
self.userImageScrollView.contentSize = CGSize(width: (self.userImageScrollView.frame.size.width * CGFloat(self.namesWithUrl.count)), height: self.userImageScrollView.frame.size.height)
self.userImageScrollView.delegate = self
})
}
})
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
let pageNumber = userImageScrollView.contentOffset.x / userImageScrollView.frame.size.width
imagePageControl.currentPage = Int(pageNumber)
}
更新：外观
how images look now instead of being able to swipe between them
编辑：试图做到这一点，以便您可以在图像之间滑动 - 但出现错误：应用程序委托上的线程 1 SIGBART
var frame = CGRect(x: 0, y: 0, width: 0, height: 0)
func setupLayout() {
frame.origin.x = userImageScrollView.frame.size.width * CGFloat(4)
frame.size = userImageScrollView.frame.size
let imageViewA = UIImageView(frame: frame)
userImageScrollView.addSubview(self.imageViewA)
imageViewA.bottomAnchor.constraint(equalTo: userImageScrollView.bottomAnchor, constant: -5).isActive = true
let imageViewB = UIImageView(frame: frame)
userImageScrollView.addSubview(self.imageViewB)
imageViewB.bottomAnchor.constraint(equalTo: userImageScrollView.bottomAnchor, constant: -5).isActive = true
imageViewB.leftAnchor.constraint(equalTo: imageViewA.leftAnchor)
let imageViewC = UIImageView(frame: frame)
userImageScrollView.addSubview(imageViewC)
imageViewC.bottomAnchor.constraint(equalTo: userImageScrollView.bottomAnchor, constant: -5).isActive = true
imageViewC.leftAnchor.constraint(equalTo: imageViewB.leftAnchor)
let imageViewD = UIImageView(frame: frame)
userImageScrollView.addSubview(imageViewD)
imageViewD.bottomAnchor.constraint(equalTo: userImageScrollView.bottomAnchor, constant: -5).isActive = true
imageViewD.leftAnchor.constraint(equalTo: imageViewC.leftAnchor)
self.userImageScrollView.contentSize = CGSize(width: (self.userImageScrollView.frame.size.width * CGFloat(4)), height: self.userImageScrollView.frame.size.height)
self.userImageScrollView.delegate = self
}
制作names:profileImageUrl
var namesWithUrl = [String : String]()
而不只是 names.append(name) 做：
names.append(name)
namesWithUrl[name] = profileImageUrl
所以现在该名称及其正确的 profileImageUrl 保存在字典中，因此字典将如下所示：
[name1value : name1URl, name2value : name2URl, ...]
然后如果你使用 SDWebImage 你可以非常简单地做到这一点：
self.optionA.setTitle(names, for: .normal)
self.optionA.backgroundColor = UIColor.orange
self.optionA.sd_setBackgroundImage(with: URL(namesWithUrl[name[1]]), for: .normal)
//If using the button image
self.optionB.setTitle(names[1], for: .normal)
self.optionB.backgroundColor = UIColor.orange
optionAImageView.sd_setImage(with: URL(namesWithUrl[name[1]]))
//if using a seperate imageView
这将很容易地将图像设置到您的 imageView，您只需在每个图像下方添加该行即可。
编辑：将图像视图添加到滚动视图。
您可以通过故事板将图像视图添加到滚动视图上，或者您可以像这样以编程方式添加它们：
首先声明它们：
var imageViewA = UIImageView()
var imageViewB = UIImageView()
然后我喜欢有一个 setupLayout 函数来处理我的视图：
func setupLayout() {
pinionImagesScrollView.addsubview(imageViewA)
imageViewA.translatesAutoResizingMaskIntoConstraints = false
imageViewA.widthAnchor.constraint(equalTo: pinionImagesScrollView.widthAnchor, constant: -10).isActive = true
imageViewA.heightAnchor.constraint(equalToConstant: 60).isActive = true
imageViewA.topAnchor.constraint(equalTo: pinionImagesScrollView.topAnchor, constant: -5).isActive = true
pinionImagesScrollView.addsubview(imageViewA)
imageViewB.translatesAutoResizingMaskIntoConstraints = false
imageViewB.widthAnchor.constraint(equalTo: pinionImagesScrollView.widthAnchor, constant: -10).isActive = true
imageViewB.heightAnchor.constraint(equalToConstant: 60).isActive = true
imageViewB.topAnchor.constraint(equalTo: imageViewA.bottomAnchor, constant: -5).isActive = true
}
在那里你可以看到我们如何将 imageViewB 放在 imageViewA 下方并且宽度与 scrollview -10 相同，给出一点 space.
然后在viewDidLoad()中调用setupLayout()。在您将图像放在上面之前，它们将是空的。 optionAImageView.sd_setImage(with: URL(namesWithUrl[name[1]]))
更新：
您可能需要将 url 的字符串版本更改为 SD_setimage 的 URL，如下所示：
let optionAUrl = URL.init(string: nameUrls[names[0]])
imageView.sd_setImage(with: optionAUrl)
下标错误可能意味着你正在初始化字典错误，正如我所测试的那样，它应该可以正常工作。
更新：
setupLayout 的问题是您将自动布局与使用框架混合在一起。我假设你的 scrollViews 约束是在故事板中定义的，所以这里是你将如何设置 imageViews，以便宽度和高度与 scrollView 相同，你可以在它们之间滚动。请注意，如果您想水平滚动，您应该研究一下使用 UICollectionView。
在此示例中，我以编程方式创建 scrollView，您可以只关注 imageView，因为您的约束是在情节提要中制定的。
import UIKit
class ViewController: UIViewController {
let scrollView = UIScrollView()
let imageViewA = UIImageView()
let imageViewB = UIImageView()
let imageViewC = UIImageView()
//Declaring the imageViews
override func viewDidLoad() {
super.viewDidLoad()
setupLayout()
// Do any additional setup after loading the view, typically from a nib.
}
func setupLayout() {
view.addSubview(scrollView)
scrollView.translatesAutoresizingMaskIntoConstraints = false
scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
scrollView.bottomAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
scrollView.widthAnchor.constraint(equalTo: view.widthAnchor, constant: -10).isActive = true
scrollView.backgroundColor = .gray
//setting up the size of the scrollView
scrollView.addSubview(imageViewA)
//This means we are using autoLayout, building the views and setting their size based on how their constraints relate to other objects
imageViewA.translatesAutoresizingMaskIntoConstraints = false
imageViewA.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
//Setting the imageViewA top anchor to the scrollView topanchor we are essentially saying the top of this imageView starts at the top of the scroll view
imageViewA.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -10).isActive = true
//Here the imageViews width is equal to the scrollViews width, (-10 is optional if you want it not to touch the edges)
imageViewA.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor).isActive = true
//CenterXAnchor here I am making sure the imageView is centered in the scrollView
imageViewA.heightAnchor.constraint(equalTo: scrollView.heightAnchor, constant: -10).isActive = true
//same with the height
imageViewA.backgroundColor = .cyan
//Background just for my testing as I dont have any images to sue
imageViewA.contentMode = .scaleAspectFit
//This is how you want the image to scale into the view for when you set it.
scrollView.addSubview(imageViewB)
imageViewB.translatesAutoresizingMaskIntoConstraints = false
imageViewB.topAnchor.constraint(equalTo: imageViewA.bottomAnchor, constant: 10).isActive = true
//Because we want to scroll down, the top anchor of imageViewB is equal to the bottom anchor of imageViewA meaning the top of B starts at the bottom of A
imageViewB.heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true
imageViewB.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -10).isActive = true
//Height and widths are the same.
imageViewB.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor).isActive = true
imageViewB.backgroundColor = .cyan
imageViewB.contentMode = scaleAspectFit
scrollView.addSubview(imageViewC)
imageViewC.translatesAutoresizingMaskIntoConstraints = false
imageViewC.topAnchor.constraint(equalTo: imageViewB.bottomAnchor, constant: 10).isActive = true
//imageViewCs top starts at bottom of B
imageViewC.heightAnchor.constraint(equalTo: scrollView.heightAnchor).isActive = true
imageViewC.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -10).isActive = true
imageViewC.centerXAnchor.constraint(equalTo: scrollView.centerXAnchor).isActive = true
imageViewC.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
//for the final view, it needs to be connected to the bottom so the scrollView is able to scroll.
imageViewC.backgroundColor = .cyan
imageViewC.contentMode = .scaleAspectFit
}
}
这给了我一个方形的 Scrollview，它显示了 imageViewA 并允许我向下滚动并查看 imageViewB，然后是 imageView C
此代码的输出，scrollView 设置为视图的 centerYanchor，因此它停在中间，蓝色方块是 imageView，image1 显示它是如何启动的，您可以看到 ImageViewA，然后 image2 显示如何滚动到下一个图像: