如何从 UICollectionView select 多个图像并将它们传输到另一个 View Controller?
How to select multiple images from UICollectionView and transfer them to another View Controller?
代码写在Swift。我正在构建一个社交应用程序,用户可以在其中制作 posts。我使用 Firebase 作为后端(数据库、存储)。因此,我有一个 UICollectionView
从设备的照片库中获取所有照片并使用自定义单元格填充 collection 视图。在同一个视图控制器中,我有另一个自定义单元格,用户可以用它来拍照并用它来制作 post。为了更清楚:
如果用户决定拍照,当他们点击 "Use photo" 时,他们需要被呈现给一个新的视图控制器,该视图控制器应该显示他们刚刚拍摄的照片以及其他选项(例如使用 UITextFields
和 UITextView
的标题、描述和标签)。
如果用户决定 select 来自他们自己的图库的多张照片,我必须以某种方式标记这些 photos/cells(即使用一个按钮作为复选标记),添加select将照片编辑到一个数组中(有一些限制,最多可能有 10 张照片)。当他们单击 "Next" 按钮时,需要将数组发送到新的 Post 视图控制器,其中所有图像都应该动态显示,可能使用水平 UICollectionView
(?!)(带有如果图像被 select 意外编辑,则删除图像的选项)并且再次,如上所述,有机会添加标题、描述等。现在,我不知道该怎么做。
我在寻找解决方案,但我已经坚持了几天,所以非常欢迎帮助!
这是我在 Collection 视图控制器中的内容(PS:我没有包含从中获取图像的功能的部分照片)
import UIKit
import Photos
class PrePhotoPostVC: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UINavigationControllerDelegate, UIImagePickerControllerDelegate, UICollectionViewDelegateFlowLayout {
@IBOutlet weak var nextButton: UIBarButtonItem!
var photosLibraryArray = [UIImage]()
@IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
checkPhotoLibraryPermission()
setupCollectionViewDelegates()
}
@IBAction func cancelButtonPressed (_ sender: UIBarButtonItem) {
dismiss(animated: true, completion: nil)
}
@IBAction func nextButtonPressed (_ sender: UIBarButtonItem) {
nextButton.isEnabled = false
}
@IBAction func takeAphotoButtonPressed (_ sender: UIButton) {
// Camera Autorization
AVCaptureDevice.requestAccess(forMediaType: AVMediaTypeVideo) { response in
if response {
if UIImagePickerController.isSourceTypeAvailable(UIImagePickerControllerSourceType.camera) {
let imagePicker = UIImagePickerController()
imagePicker.delegate = self
imagePicker.sourceType = UIImagePickerControllerSourceType.camera;
imagePicker.allowsEditing = false
self.present(imagePicker, animated: true, completion: nil)
}
else {
print("Camera isn't available in similator")
}
}
else {
print("unautorized")
}
}
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 2
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
if section == 0 {
return 1
} else {
return photosLibraryArray.count
}
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if indexPath.section == 0 {
let cellCamera = collectionView.dequeueReusableCell(withReuseIdentifier: cellPrePostCameraCell, for: indexPath)
return cellCamera
}
else {
let cellPhotoLibrary = collectionView.dequeueReusableCell(withReuseIdentifier: cellPrePostPhotoLibrary, for: indexPath) as! PrePhotoPostPhotoLIbraryCell
cellPhotoLibrary.awakeFromNib()
cellPhotoLibrary.photoLibraryImage.image = photosLibraryArray[indexPath.row]
return cellPhotoLibrary
}
}
}
这个 UICollectionView
的屏幕截图:
这是我的照片库单元格代码:
import UIKit
class PrePhotoPostPhotoLIbraryCell: UICollectionViewCell {
// MARK: Outlets
@IBOutlet weak var photoLibraryImage: UIImageView!
// var selectedPhotos = [UIImageView]()
@IBAction func selectedButtonPressed(_ sender: UIButton) {
self.layer.borderWidth = 3.0
self.layer.borderColor = isSelected ? UIColor.blue.cgColor : UIColor.clear.cgColor
}
override func awakeFromNib() {
photoLibraryImage.clipsToBounds = true
photoLibraryImage.contentMode = .scaleAspectFill
photoLibraryImage.layer.borderColor = UIColor.clear.cgColor
photoLibraryImage.layer.borderWidth = 1
photoLibraryImage.layer.cornerRadius = 5
}
}
首先声明一个可变类型的数组,它将在其中存储选定的单元格项。
var _selectedCells : NSMutableArray = []
然后在您的 viewDidLoad 函数中添加以下代码。
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
//this will allow multiple selection on uicollectionviewcell
CollectionView.allowsMultipleSelection=true //CollectionView is your CollectionView outlet
}
然后,实现用于选择和取消选择单元格的collectionview委托函数
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath){
//add the selected cell contents to _selectedCells arr when cell is selected
_selectedCells.add(indexPath)
collectionView.reloadItems(at: [indexPath])
}
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
//remove the selected cell contents from _selectedCells arr when cell is De-Selected
_selectedCells.remove(indexPath)
collectionView.reloadItems(at: [indexPath])
}
我建议将所选项目的 NSIndexPath 保存在一个数组中,然后将其用作委托函数中比较的基础 cellForItemAt indexPath
。
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "YOUR_CELL_Identifier", for: indexPath as IndexPath)
//add your tick mark image to the cell in your storyboard or xib file.
let tickImage = cell.viewWithTag(YOUR_IMAGE_TAG_HERE) as? UIImageView
//Show tickImage if the cell is selected and hide tickImage if cell is NotSelected/deSelected.or whatever action you want to perform in case of selection and deselection of cell.
if _selectedCells.contains(indexPath) {
cell.isSelected=true
collectionView.selectItem(at: indexPath, animated: true, scrollPosition: UICollectionViewScrollPosition.top)
tickImage?.isHidden=false
}
else{
cell.isSelected=false
tickImage?.isHidden=true
}
return cell
}
为了将项目发送到下一个控制器,从选定的索引路径中获取所有项目。
代码写在Swift。我正在构建一个社交应用程序,用户可以在其中制作 posts。我使用 Firebase 作为后端(数据库、存储)。因此,我有一个 UICollectionView
从设备的照片库中获取所有照片并使用自定义单元格填充 collection 视图。在同一个视图控制器中,我有另一个自定义单元格,用户可以用它来拍照并用它来制作 post。为了更清楚:
如果用户决定拍照,当他们点击 "Use photo" 时,他们需要被呈现给一个新的视图控制器,该视图控制器应该显示他们刚刚拍摄的照片以及其他选项(例如使用
UITextFields
和UITextView
的标题、描述和标签)。如果用户决定 select 来自他们自己的图库的多张照片,我必须以某种方式标记这些 photos/cells(即使用一个按钮作为复选标记),添加select将照片编辑到一个数组中(有一些限制,最多可能有 10 张照片)。当他们单击 "Next" 按钮时,需要将数组发送到新的 Post 视图控制器,其中所有图像都应该动态显示,可能使用水平
UICollectionView
(?!)(带有如果图像被 select 意外编辑,则删除图像的选项)并且再次,如上所述,有机会添加标题、描述等。现在,我不知道该怎么做。
我在寻找解决方案,但我已经坚持了几天,所以非常欢迎帮助!
这是我在 Collection 视图控制器中的内容(PS:我没有包含从中获取图像的功能的部分照片)
import UIKit
import Photos
class PrePhotoPostVC: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UINavigationControllerDelegate, UIImagePickerControllerDelegate, UICollectionViewDelegateFlowLayout {
@IBOutlet weak var nextButton: UIBarButtonItem!
var photosLibraryArray = [UIImage]()
@IBOutlet weak var collectionView: UICollectionView!
override func viewDidLoad() {
super.viewDidLoad()
checkPhotoLibraryPermission()
setupCollectionViewDelegates()
}
@IBAction func cancelButtonPressed (_ sender: UIBarButtonItem) {
dismiss(animated: true, completion: nil)
}
@IBAction func nextButtonPressed (_ sender: UIBarButtonItem) {
nextButton.isEnabled = false
}
@IBAction func takeAphotoButtonPressed (_ sender: UIButton) {
// Camera Autorization
AVCaptureDevice.requestAccess(forMediaType: AVMediaTypeVideo) { response in
if response {
if UIImagePickerController.isSourceTypeAvailable(UIImagePickerControllerSourceType.camera) {
let imagePicker = UIImagePickerController()
imagePicker.delegate = self
imagePicker.sourceType = UIImagePickerControllerSourceType.camera;
imagePicker.allowsEditing = false
self.present(imagePicker, animated: true, completion: nil)
}
else {
print("Camera isn't available in similator")
}
}
else {
print("unautorized")
}
}
}
func numberOfSections(in collectionView: UICollectionView) -> Int {
return 2
}
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
if section == 0 {
return 1
} else {
return photosLibraryArray.count
}
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
if indexPath.section == 0 {
let cellCamera = collectionView.dequeueReusableCell(withReuseIdentifier: cellPrePostCameraCell, for: indexPath)
return cellCamera
}
else {
let cellPhotoLibrary = collectionView.dequeueReusableCell(withReuseIdentifier: cellPrePostPhotoLibrary, for: indexPath) as! PrePhotoPostPhotoLIbraryCell
cellPhotoLibrary.awakeFromNib()
cellPhotoLibrary.photoLibraryImage.image = photosLibraryArray[indexPath.row]
return cellPhotoLibrary
}
}
}
这个 UICollectionView
的屏幕截图:
这是我的照片库单元格代码:
import UIKit
class PrePhotoPostPhotoLIbraryCell: UICollectionViewCell {
// MARK: Outlets
@IBOutlet weak var photoLibraryImage: UIImageView!
// var selectedPhotos = [UIImageView]()
@IBAction func selectedButtonPressed(_ sender: UIButton) {
self.layer.borderWidth = 3.0
self.layer.borderColor = isSelected ? UIColor.blue.cgColor : UIColor.clear.cgColor
}
override func awakeFromNib() {
photoLibraryImage.clipsToBounds = true
photoLibraryImage.contentMode = .scaleAspectFill
photoLibraryImage.layer.borderColor = UIColor.clear.cgColor
photoLibraryImage.layer.borderWidth = 1
photoLibraryImage.layer.cornerRadius = 5
}
}
首先声明一个可变类型的数组,它将在其中存储选定的单元格项。
var _selectedCells : NSMutableArray = []
然后在您的 viewDidLoad 函数中添加以下代码。
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
//this will allow multiple selection on uicollectionviewcell
CollectionView.allowsMultipleSelection=true //CollectionView is your CollectionView outlet
}
然后,实现用于选择和取消选择单元格的collectionview委托函数
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath){
//add the selected cell contents to _selectedCells arr when cell is selected
_selectedCells.add(indexPath)
collectionView.reloadItems(at: [indexPath])
}
func collectionView(_ collectionView: UICollectionView, didDeselectItemAt indexPath: IndexPath) {
//remove the selected cell contents from _selectedCells arr when cell is De-Selected
_selectedCells.remove(indexPath)
collectionView.reloadItems(at: [indexPath])
}
我建议将所选项目的 NSIndexPath 保存在一个数组中,然后将其用作委托函数中比较的基础 cellForItemAt indexPath
。
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "YOUR_CELL_Identifier", for: indexPath as IndexPath)
//add your tick mark image to the cell in your storyboard or xib file.
let tickImage = cell.viewWithTag(YOUR_IMAGE_TAG_HERE) as? UIImageView
//Show tickImage if the cell is selected and hide tickImage if cell is NotSelected/deSelected.or whatever action you want to perform in case of selection and deselection of cell.
if _selectedCells.contains(indexPath) {
cell.isSelected=true
collectionView.selectItem(at: indexPath, animated: true, scrollPosition: UICollectionViewScrollPosition.top)
tickImage?.isHidden=false
}
else{
cell.isSelected=false
tickImage?.isHidden=true
}
return cell
}
为了将项目发送到下一个控制器,从选定的索引路径中获取所有项目。