What I want to achieve: I have an array of images that I want to horizontally swipe/scroll through. These images represent contacts. When I find the contact(image) I want, I press a separate Start Call button. This button segues to a Phone view controller. I need to display an image of the person I'm calling on that Phone view controller. To do this I need to know what contact image I was on before I initiated the segue.
My contacts view controller. Currently showing my scrollview attempt
What I currently have: I have a scrollview and a separate collectionview already set up (they are in NO WAY connected to each other. I have both because I'm trying to figure out which gets me what I need). Both are fully functional and allow me to page through images from my array.
I can’t figure out how to pragmatically get which image is being displayed when I press the button that would initiate the segue to the next view controller.
I was originally trying to tag the images and then retrieve the tag and pass it to the next view controller via segue.
I then tried to get the index of the image that is "currently visible" and pass it via segue.
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCollectionViewCell", for: indexPath) as! ImageCollectionViewCell
cell.imgImage.image = imageArray[indexPath.row]
//Get character for segue
selectedCharacter = indexPath.row
return cell
}
I also tried to get the image name and pass that via segue.
func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCollectionViewCell", for: indexPath) as! ImageCollectionViewCell
switch cell.imgImage.image{
case UIImage(named: "Van"):
selectedCharacter = 2
case UIImage(named: "Fel"):
selectedCharacter = 3
default:
selectedCharacter = 1
}
}
I have yet to be able to figure out any way to get info with the scrollview.
Scrollview viewDidLoad code:
#IBOutlet var scrollView: UIScrollView!
for i in 0..<images.count {
let imageView = UIImageView()
let x = self.view.frame.size.width * CGFloat(i)
imageView.frame = CGRect(x: x, y: 0, width: 343, height: 244)
imageView.contentMode = .scaleAspectFit
imageView.image = images[i]
imageView.tag = i
scrollView.contentSize.width = scrollView.frame.size.width * CGFloat(i + 1)
scrollView.addSubview(imageView)
}
The Question: Does anyone have any ideas on how I get which contact I'm trying to call and if I should use a scroll view or a collection view?
Thank you!
I don't know where you click, but you can get the current view index with this:
let index = scrollView.contentOffset.x / scrollView.bounds.size.width
collectionView or scrollview is the same
you can use a collection view. create a custom cell class that has an image property. when you are about to return the cell in the cellForItem function, you can set the image property.
let cell = collectionView.dequeueReusableCellWithIdentifier("Your Cell's identifier", forIndexPath: indexPath)
cell.image = imageArray[indexPath.item]
you can then override the didSelectItem, and access the image property of the cell at the indexPath that is passed in like so:
let cell = collectionView!.cellForItemAtIndexPath(indexPath)
let image = cell.image
// do whatever you need with the image.
Related
I have a list of user avatars inside of a UICollectionViewCell. When the user taps on one, I'd like to add the selected item to a collection as well as highlight it to indicate it's been tapped.
Unfortunately the UI doesn't seem to update. Any ideas?
Initially I load the images and set them to be rounded. I can even set the border color, if I want, but for now I set it to clear. This all works upon loading the cells:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath as IndexPath) as! UICollectionViewCell
// Configure the cell
let member: UserProfile = groupMembers[indexPath.item]
let imgAvatar = cell.viewWithTag(2) as! UIImageView
imgAvatar.layer.cornerRadius = contactAvatar.frame.size.width / 2
imgAvatar.clipsToBounds = true
imgAvatar.contentMode = UIViewContentMode.scaleAspectFill
imgAvatar.layer.borderWidth = 2.0
imgAvatar.layer.borderColor = UIColor.clear.cgColor
imgAvatar.layer.cornerRadius = 30.0
let downloadURL = NSURL(string: member.avatarUrl)!
imgAvatar.af_setImage(withURL: downloadURL as URL)
return cell
}
And now here is the code that executes when you tap on any given UIImageView in the collection, but it does not seem to update the image:
///Fired when tapped on an image of a person
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath as IndexPath) as! UICollectionViewCell
let tappedUser: UserProfile = groupMembers[indexPath.item]
let imgAvatar = cell.viewWithTag(2) as! UIImageView
..add item to collection, etc..
//Update imageview to indicate it's been tapped.
DispatchQueue.main.async {
contactAvatar.layer.cornerRadius = contactAvatar.frame.size.width / 2
imgAvatar.clipsToBounds = true
imgAvatar.contentMode = UIViewContentMode.scaleAspectFill
imgAvatar.layer.borderWidth = 2.0
imgAvatar.layer.cornerRadius = 30.0
imgAvatar.layer.borderColor = UIcolor.blue.cgColor
}
}
}
Running this code, it hits the breakpoint to indicate I've tapped on the item, but it does not update the UI. I'm convinced there is a thread / ui issue where the collection view isn't "redrawing" the changes I've made to the image. Maybe I can't change around the appearances of a view inside of a collection?
Thanks in advance for any insight.
Your didSelect is not correct. Get the cell from the collection view.
cellForItem
///Fired when tapped on an image of a person
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at:indexPath) as! UICollectionViewCell
let tappedUser: UserProfile = groupMembers[indexPath.item]
let imgAvatar = cell.viewWithTag(2) as! UIImageView
..add item to collection, etc..
//Update imageview to indicate it's been tapped.
DispatchQueue.main.async {
contactAvatar.layer.cornerRadius = contactAvatar.frame.size.width / 2
contactAvatar.clipsToBounds = true
contactAvatar.contentMode = UIViewContentMode.scaleAspectFill
contactAvatar.layer.borderWidth = 2.0
contactAvatar.layer.cornerRadius = 30.0
contactAvatar.layer.borderColor = UIcolor.blue.cgColor
}
}
}
Using mobile so let me know if it does not work.
The code which you have written to to get instance of cell is not correct please use below line of code and rest all seems correct hope by changing this line will work.
let cell = collectionView.cellForItem(at:indexPath) as! UICollectionViewCell
What I'm trying to do is when I tap the button in a cell, that button in that cell becomes invisible. The problem is when I tap the button, it becomes invisible, but when I scroll the collection view the hidden button goes from one to the other. For example, I tap the second one it hides but when I scroll I see that the 7th becomes hidden. Every time I scroll the hidden button change.
This is the code I wrote:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell : CollectionViewCellKharid3 = collectionView.dequeueReusableCell(withReuseIdentifier: "customcell3", for: indexPath) as! CollectionViewCellKharid3
cell.lblEsmeMahsul.text = mainCats[indexPath.row]
cell.imgMahsul.af_setImage(withURL: URL(string : (mainadress + "/Opitures/" + mainPicNumbers[indexPath.row]))!, placeholderImage: UIImage(named: "loadings" ))
cell.btnKharid.addTarget(self, action: #selector(btnColectionviewCellTapped), for : UIControlEvents.touchUpInside)
cell.btnKharid.tag = indexPath.row
cell.btnMosbat.addTarget(self, action: #selector(btnMosbatTapped), for : UIControlEvents.touchUpInside)
cell.btnMosbat.tag = indexPath.row
cell.configureCell()
return cell
}
#objc func btnColectionviewCellTapped(_ sender:UIButton){
// let indexPath : IndexPath = self.collectionview1.ind
print(sender.tag)
sender.isHidden = true
}
#objc func btnMosbatTapped(_ sender:UIButton){
let index = IndexPath(item: sender.tag , section: 0)
let cell = self.collectionviewForushVije.cellForItem(at: index) as? CollectionViewCellKharid3
cell?.lblTedad.text = "22"
print(sender.tag)
}
Cells get reused. You need to keep track of which cells have been tapped so you can set the proper button state in your cellForItemAt method.
Declare a property in your class:
var beenTapped: Set<Int> = []
Then in btnColectionviewCellTapped add:
beenTapped.insert(sender.tag)
And in cellForItemAt you need:
cell.btnKharid.isHidden = beenTapped.contains(indexPath.item)
You should also replace the use of indexPath.row with indexPath.item. row is for table views. item is for collection views.
It's a very common mis-use of UICollectionView(or UITableView). When deal with them, you should alway keep one thing in mind, re-use. The collection/tableview cell will be highly reuse by os when on need. The problem cause in your code is, you assume the one time set of one property in a cell will be persistence, which is wrong. The cell come from dequeue method, can always be a new cell or an existing cell, therefore, any configuration should be apply to a cell should be config again. Think in that way, all view in a cell is "dirty" when it get it from collection view, you should set the property you want before return it back(or have a mechanism to set it later). Therefore, in your case, just set the isHidden property every time you prepare the cell in cellForRow delegate.
I created a Collection View where the cells have a view inside. The views have a alpha value of 0.65. When I scroll, the view gets brighter. Maybe the views will be stacked on top of each other?
MY CODE:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! LevelStufenCell
cell.levelViewBack = UIView()
cell.levelViewBack.frame = CGRect(x: 0, y: 0, width: cell.frame.height, height: cell.frame.width)
cell.levelViewBack.layer.cornerRadius = cell.levelViewBack.frame.height * (36 / 198)
cell.levelViewBack.backgroundColor = UIColor.white
cell.levelViewBack.alpha = 0.65
cell.insertSubview(cell.levelViewBack, at: 10)
return cell
}
Cells are reused, so you are adding another levelViewBack to each cell every time the cells scroll into view.
You have defined levelViewBack inside your LevelStufenCell ... is it an IBOutlet? If so, you do not need to create a new one each time - simply remove this line:
cell.levelViewBack = UIView()
If it is not an IBOutlet, are you creating it inside LevelStufenCell? If so, again, simply remove that line. If not, check if it's been created before "creating it again":
if cell.levelViewBack == nil {
cell.levelViewBack = UIView()
}
We are trying to make a collection view. In each cell the users can choose an image and enter text into a text field. We noticed that after adding four cells, when we add a new cell, the text field is already filled with the information from previous cells. In our code, we never programmatically fill the text field (which starts out empty), we allow the user to do this. Any suggestions?
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("Image", forIndexPath: indexPath) as! CollectionViewCell
cell.deleteButton?.addTarget(self, action: #selector(AddNewItem.xButtonPressed(_:)), forControlEvents: UIControlEvents.TouchUpInside)
cell.deleteButton?.layer.setValue(indexPath.row, forKey: "index")
let item = items[indexPath.item]
let path = getDocumentsDirectory().stringByAppendingPathComponent(item.image)
cell.imageView.image = UIImage(contentsOfFile: path)
cell.imageView.layer.borderColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.3).CGColor
cell.imageView.layer.borderWidth = 2
cell.layer.cornerRadius = 7
return cell
}
You can use this in UICollectionViewCell custom class
override func prepareForReuse() {
self.profileImg.image = #imageLiteral(resourceName: "Profile Icon Empty")
super.prepareForReuse()
}
Problem is that you are using dequeReusableCellWithIdentifier which returns already created cell(that you were using before). That's why it's already filled with previous data. You need to clear this data before showing this cell, or fill it from some storage(for example array that represents your collection view cells(each object in array somehow related to cell, in your case that is text wroten in cell))
Here's how I ultimately ended up resolving it.
I created an Item class which contained all of the fields which are shown in the collection view cell and created an array of Items.
Here is a simplified version of my CollectionViewCell class, which here only has a single text field:
class CollectionViewCell: UICollectionViewCell {
#IBOutlet weak var itemName: UITextField!
var item: Item?
func initializeListeners(){
itemName.addTarget(self, action: #selector(itemNameChanged(_:)), forControlEvents: UIControlEvents.EditingChanged)
}
//When the item name is changed, make sure the item's info is updated
func itemNameChanged(textField: UITextField) {
item?.itemName = textField.text!
}
}
Here's a simplified version of the cellForItemAtIndexPath function in my view controller class:
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! CollectionViewCell
cell.initializeListeners()
let item = items[indexPath.item]
cell.item = item
cell.itemName.text = item.itemName
return cell
}
The reason is that collectionViewLayout.collectionViewContentSize.height
is taller than the real contents size! It is recommended to keep UICollectionView calculate the height automatically (without using UIScrollView, let UICollectionView maintain the scroll), as manual change will cause lots of weird behaviors.
I'm trying to make a UICollectionView that has infinite scrolling of buttons and the button's background is populated base on the result of http request to a server.
let reuseIdentifier = "Cell"
let screenSize: CGRect = UIScreen.mainScreen().bounds
let screenWidth = screenSize.width
let screenHeight = screenSize.height
let categoryApiUrl = "url"
let categoryImageField = "field"
class BrowseViewController: UICollectionViewController, UICollectionViewDataSource, UICollectionViewDelegate {
var categoryImgUrl:[String] = []
var buttonList:[UIButton] = []
func setupView(){
self.title = "Browse"
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 20, left: 10, bottom: 10, right: 10)
layout.itemSize = CGSize(width: screenWidth/2-15, height: screenHeight/3.5)
collectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
collectionView!.dataSource = self
collectionView!.delegate = self
collectionView!.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: reuseIdentifier)
collectionView!.backgroundColor = UIColor.whiteColor()
self.view.addSubview(collectionView!)
}
func setupButton(cell: UICollectionViewCell, cellNumber: Int){
var button = UIButton.buttonWithType(UIButtonType.System) as UIButton
button.frame = CGRectMake(0, 0, screenWidth/2-15, screenHeight/3.5)
button.backgroundColor = UIColor.orangeColor()
button.setTitle("Category", forState: UIControlState.Normal)
button.addTarget(self, action: "btnClicked:", forControlEvents: UIControlEvents.TouchUpInside)
buttonList.append(button)
cell.addSubview(button)
}
override func viewDidLoad(){
super.viewDidLoad()
let url = NSURL(string: categoryApiUrl)
let request = NSURLRequest(URL: url!)
NSURLConnection.sendAsynchronousRequest(request, queue: NSOperationQueue.mainQueue()) {(response, dataValue, error) in
let json = JSON(data: dataValue)
for(var i = 0; i < json.count; i++){
self.categoryImgUrl.append(json[i]["CATEGORY_IMAGE"].stringValue)
let imageUrl = self.categoryImgUrl[i]
let url = NSURL(string: imageUrl)
let data = NSData(contentsOfURL: url!)
let image = UIImage(data: data!)
self.buttonList[i].setBackgroundImage(image, forState: .Normal)
}
}
override func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
//#warning Incomplete method implementation -- Return the number of sections
return 1
}
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
//#warning Incomplete method implementation -- Return the number of items in the section
return 10;
}
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as UICollectionViewCell
let cellNumber = indexPath.row as Int
setupButton(cell, cellNumber: cellNumber)
// Configure the cell
return cell
}
override func scrollViewDidScroll(scrollView: UIScrollView) {
let offsetY = scrollView.contentOffset.y
let contentHeight = scrollView.contentSize.height
if offsetY > contentHeight - scrollView.frame.size.height {
numberOfItemsPerSection += 6
self.collectionView!.reloadData()
}
}
}
Currently, the code is able to pull the image from the server and populate it as the button's background image.
However, since I made this collection view scrollable. When I scroll the view down and then back up, the background image of the previous buttons disappear.
I did some research but couldn't find a solution to it. The reason that the button disappears is because IOS only loads the cell that is visible on screen. So when I scroll down and then scroll back up, the previous cells are consider as "New Cells". Therefore the background image that was in it are now gone.
Questions:
Does anyone have an idea on how to retain the previous buttons even if we scroll down and then scroll back up? In addition, with my current code, I added the image onto the button inside the http request because the http request is always the last execution that finishes. Is there anyway to change the code so then the http request will be finish before the cells get loaded?
I would suggest to create uicollectionview in interface builder, subclass uicollectionviewcell, add one dynamic cell to collectionview, change its class to collectionviewcell you subclassed, drop uibutton on it, and everytime cell is being created, you would download the image.
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as myCollectionViewCell
let cellNumber = indexPath.row as Int
//downloadimghere
cell.myButton.setBackgroundImage(downloadedImg, forState: .Normal)
return cell
}
This would download image everytime cell is being created. For more info you should checkout "lazy image loading". I think this is a better approach to your problem.
Now to your code, first of all you are not using your buttonList array, everytime cell is being created you create a new button and place it there, so you are not reusing already created buttons. If you fixed this, it might work like you wanted.
Here is another problem, since collectionview is reusing cells, everytime you create a button and place it on cell, it stays there, so basically now you are creating button on button. So if you want this to work correctly and have only one button on your cell, you need to remove previous button from the cell before you create it, you can do this in cellForItemAtIndexPath.
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as myCollectionViewCell
//something like this
for view in cell.subviews(){
if view == <UIButton>{
view.removeFromSuperview()
}
}
return cell
}
There might be some syntax errors in my code, I didnt test it, but you get the idea how to do it.