I was making a demo app for instagram and implemented story view at the top of Home Screen and decided to keep add story button in one section and stories coming from server in other section. However sometimes the add story button shows image coming from the server while in my code I clearly set its image = add story image. Here's my code:
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "StoryCollectionViewCell", for: indexPath) as! StoryCollectionViewCell
if indexPath.section == 0 {
//code to set profile picture
cell.ivProfilePic.image = nil
cell.ivProfilePic.layer.borderWidth = 0
cell.ivRoundImage.isHidden = true // outside circle if unwatched story
cell.ivProfilePic.image = UIImage(named: "Create-Story-icon")
}
else {
let data = stories[indexPath.item]
//code to set profile picture
cell.ivProfilePic.image = nil
cell.ivProfilePic.kf.setImage(with: data.logo, options: [.processor(DownsamplingImageProcessor(size: cell.ivProfilePic.frame.size))])
}
}
I even tried to set nil so in case cell was retaining image after scrolling it would be set nil first, still no luck. The "create story icon" gets replaced by some image coming from server sometimes.
Or is there any other better way to show stories? and implement add story button different way?
Related
I'm trying to create hints for new users in iOS application, like to open profile click here, etc. I have a collection view and inside it I have elements that I fetch from server.
I need to show hint near the first element. My code:
var tipView = EasyTipView(
text: "Выбирай предмет и начинай обучение",
preferences: EasyTipView.globalPreferences
)
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let section = sections[indexPath.section]
switch section {
case .fav_subjects:
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "FavSubjectsCollectionViewCell", for: indexPath) as! FavSubjectsCollectionViewCell
let favSubjects = model[.fav_subjects] as! [Subjects.FavSubject]
let cellModel = favSubjects[indexPath.item]
cell.configure(with: cellModel)
//here I'm trying to render hint near first element of collectionView
if indexPath.section == 0 && indexPath.item == 0 {
let view = cell.contentView
tipView.show(forView: view)
}
return cell
case .all_subjects:
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "AllSubjectsCollectionViewCell", for: indexPath) as! AllSubjectsCollectionViewCell
let allSubjects = model[.all_subjects] as! [Subjects.Subject]
let cellModel = allSubjects[indexPath.item]
cell.configure(with: cellModel)
return cell
}
}
}
My problem is when I open screen for the first time my hint displays on the top of the screen and not near the first element, but when I switch to another screen and then go back, hint displays exactly where expected.
I suggest that my problem is screen rendered for the first time before all items fetched from server so tried to use layoutIfNeeded() to rerender when the size is changed but it doesn't help:
tipView.layoutIfNeeded()
if indexPath.section == 0 && indexPath.item == 0 {
let view = cell.contentView
self.tipView.layoutIfNeeded()
self.tipView.show(forView: view)
}
Also I have tried to use viewDidAppear, because I thought that if screen is already rendered than I will have element rendered and I will show hint in the right place for the first render but it turns out that in viewDidAppear cell is nil:
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
let cell = collectionView.cellForItem(at: IndexPath(item: 0, section: 0))
}
Incorrect(when screen opened first time):
Correct:
I'm new to iOS so I think I missed something important, please help.
The method cellForItem(at:) gets called before the cells gets displayed on screen. In fact, at this point the final frame of the cell is not yet determined, it will happen later when the cell gets added to the view hierarchy and the layout pass happens.
In some cases even if cellForItem(at:) gets called, the cell may never appear on screen.
If you always display the hint near the first element, perhaps it will be easier to use the collection view's frame as reference instead of the first cell unless you need the hint to scroll along with the cell.
Alternatively, add the hint as a subview to the cell's contentView and use Auto Layout to define its position inside the cell. Don't forget to remove the hint from the view hierarchy when appropriate because the same cell may end up being dequeued for another index path during scroll.
Pretty simple question here:
The scenario is pretty simple: I have a Collection View Cell with 2 buttons set in Storyboard with titles set to the default "Button".
Once I dequeue the cell, I fill in the info, super standard stuff:
let cell = collectionView?.dequeueReusableCell(withReuseIdentifier: CollectionViewCell.identifier, for: indexPath) as! CollectionViewCell
cell.setTitleButton(buttonText: "text1", buttontext2: "text2")
cell.delegate = self
return cell
Everything works as expected besides the fact that theres like half a second where the buttons title is seen as "Button", then instantly changes to whatever I set it on the setTitleButton method.
Its fixed 100% if I remove the title text completely on Storyboard, but that cant be the only way to solve this, right? I mean doing so completely removes the buttons from the Storyboard (as in its of course still there and accessible via the document outline, but isnt visible at all on the storyboard, which is bad).
I was under the impression that it would ignore the Storyboards value if it was set in code.
After running it a couple times, I realized sometimes it also flashes the value set in code --> sets it as "Button" ---> ends in the value set in code. Weird.
Try this!
// CollectionViewCell
override func awakeFromNib() {
super.awakeFromNib()
button1.titleLabel?.text = nil
button2.titleLabel?.text = nil
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: CollectionViewCell.identifier, for: indexPath) as! CollectionViewCell
cell.button1.setTitle("text1", for: .normal)
cell.button2.setTitle("text2", for: .normal)
return cell
}
update
now images displays as they are loaded, but there still a problem I can't solve.
The images overlaps the content of the cell even the three views are in a vertical stack (first is the image, the next two are label views).
I wonder how can a view overlap other views in a stackview
now my talbe view delegate method looks like this:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
var cell: BaseTableViewCell!
if let contents = contents {
let content = contents[indexPath.row]
if let imageUrl = content.imageUrl, let url = URL(string: imageUrl) {
cell = tableView.dequeueReusableCell(withIdentifier: "ImageContentRow", for: indexPath) as! ContentWithImageTableViewCell
Alamofire.request(url).responseImage(completionHandler: { (response) in
if let image = response.result.value {
cell.imageView?.image = image
cell.setNeedsLayout()
}
})
}else{
cell = tableView.dequeueReusableCell(withIdentifier: "ContentRow", for: indexPath) as! ContentTableViewCell
}
cell.contentTitleVeiw.text = content.title
cell.contentLeadView.text = content.lead
}
return cell!
}
I'm very new to iOS. I've already tutorials and watched video courses and now I would like to implement my very first app.
I try to read a feed and display the content's title, lead and image (if it has any).
I defined a cell, with an UIMageVeiw, and two UILables, at last I embedded them into a vertical StackView (I set distribution to Fill).
Everything works well, but images don't display automatically, just if I click on the cell, or sroll the TableVeiw.
And even if I set the image view to Aspect Fit (and embedded it into the top tof the vertical stack view), when the image displays it keeps it's original size and overlaps the cell content.
I've trying to find out what I do wrong for two days, but I can't solve it.
I try display data like this:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
var cell: BaseTableViewCell!
if let contents = contents {
let content = contents[indexPath.row]
if let imageUrl = content.imageUrl, let url = URL(string: imageUrl) {
cell = tableView.dequeueReusableCell(withIdentifier: "ImageContentRow", for: indexPath) as! ContentWithImageTableViewCell
cell.imageView?.af_setImage(withURL: url)
}else{
cell = tableView.dequeueReusableCell(withIdentifier: "ContentRow", for: indexPath) as! ContentTableViewCell
}
cell.contentTitleVeiw.text = content.title
cell.contentLeadView.text = content.lead
}
return cell!
}
The image view cell's view hierarchy looks like this:
My list looks like this after I start my app and data displayed:
After I click on a cell that should display an image or scroll it out and back the result is this:
At least this is my list view controller with the two prototype cells
(one for contents with image, one for without image)
You need to notify the tableView that the image was loaded and that it has to redraw the cell.
Try changing
cell.imageView?.af_setImage(withURL: url)
to
cell.imageView?.af_setImage(withURL: url, completion: { (_) in
self.tableView.beginUpdates()
self.tableView.setNeedsDisplay()
self.tableView.endUpdates()
})
Take a look at my answer here - in the end you might need to explicitly set height on the imageView.
Hello I am trying build a simple chat application where users can send messages and photos. I am having a hard time in figuring out the best way to select and delete multiple messages on long press on a single message.
I have used collection view to display the page. Right now I am using collection view didSelect method to click on the side of chat bubble image view and able to get select button for that particular cell. But, I am not able append checkbox button for every message. I also cannot long press on the chat bubble image view.
I also tried imageview tap on chat bubble but with this I need to reload the collection view. Is there a best way of implementing delete multiple messages?
Any help is appreciated
Thanks
Below is the sample code
code for changing the checkbox image of particular cell.
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
inputTextField.endEditing(true)
let cell: ChatLogMessageCell? = collectionView.cellForItem(at: indexPath) as! ChatLogMessageCell?
cell?.checkbox.isHidden = false
selectAll = true
if cell?.isSelected == true{
cell?.checkbox.image = UIImage(named: "checkedimage")
}else{
cell?.checkbox.image = UIImage(named: "uncheckedimage")
}
code to tap on chat bubble to append checkbox button to all cells.
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: chatcellId, for: indexPath) as! ChatLogMessageCell
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(self.imageTapped))
cell.bubbleImageView.addGestureRecognizer(tapGesture)
cell.bubbleImageView.isUserInteractionEnabled = true
if selectAll == true{
cell.checkbox.isHidden = false
}else{
cell.checkbox.isHidden = true
}}
When chat bubble is tapped collection view is reloaded to append the checkbox button to all cells
func imageTapped(){
selectAll = true
self.collectionView?.reloadData()
}
What I am finally trying to do is select and delete messages like whatsapp or iMessage (Above code is close to iMessage functionality) does. So I am completely open for complete code changes too. Thanks.
updated Code
override func viewDidLoad()
{
super.viewDidLoad()
let lpgr = UILongPressGestureRecognizer(target: self,
action: #selector(handleLongPress))
lpgr.minimumPressDuration = 0.5
lpgr.delaysTouchesBegan = true
lpgr.delegate = self
self.collectionView?.addGestureRecognizer(lpgr)
}
func handleLongPress(gestureReconizer: UILongPressGestureRecognizer) {
let p = gestureReconizer.location(in: self.collectionView)
let indexPath = self.collectionView?.indexPathForItem(at: p)
if let index = indexPath {
let cell: ChatLogMessageCell? = collectionView?.cellForItem(at: index) as! ChatLogMessageCell?
self.collectionView?.allowsMultipleSelection = true
for cell in collectionView!.visibleCells as! [ChatLogMessageCell] {
let indexPath = collectionView?.indexPath(for: cell as ChatLogMessageCell)
cell.checkbutton.isHidden = false
if selectedMsgs.contains((messages?[((indexPath)?.item)!])!) {
cell?.checkbox.image = UIImage(named: "checkedimage")
}
else {
cell?.checkbox.image = UIImage(named: "uncheckedimage")
}
}
} else {
print("Could not find index path")
}
}
On long press check boxes appear on all visible cells, but tap on chat bubble is not working.
You should attach a UILongPressGestureRecognizer to each cell in the collectionview, and set the UICollectionviewcontroller as the target for each of these recognizers. Then, when any one of them fires, set a custom property of your CollectionViewController (maybe name it editing or something) to true. Then fetch all the visible cells with the UICollectionView's visibleCells function.
In your UICollectionViewCell subclass, you should have some custom property getter/setter methods (maybe -editing and -setEditing:(BOOL)) which you can call now as you iterate through the cells in visibleCells. Within your -setEditing:(BOOL) function, you can add and remove the checkbox UIButton as you please. You'll also want to set the UICollectionView controller as the target of this UIButton, and within the UICollectionViewController, keep track of which cells are selected so when the user hits the "Delete" button, you know which messages to delete.
I would also recommend checking out https://github.com/jessesquires/JSQMessagesViewController/, which does all this logic for you.
I make a network call in ViewDidLoad to get objects (first 25), then I make another call in willDisplayCell to get the rest of the objects. I'm Using PINReMoteImage in the code below. It works, but the problem is that as you scroll through the collection view, a cell will have one picture then another picture will appear over it. How can I improve this UI? I thought updateWithProgress was supposed to deal with this by using a blur until the image is loaded but it doesn't seem to be working?
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as! PinCollectionViewCell
if let pinImageURL = self.pins[indexPath.row].largestImage().url {
cell.pinImage?.pin_updateWithProgress = true
cell.pinImage?.pin_setImageFromURL(pinImageURL, completion: ({ (result : PINRemoteImageManagerResult) -> Void in
if let image = result.image {
self.imageArray.append(image)
}
}))
}
The problem is that I'm reusing cells, but I wasn't resetting the image. So I simply added cell.pinImage?.image = nil to the above. Once I found out that was the problem I added an UIActivityViewIndicatorViewto the cell and stop it when the image comes in.