I am writing a chat application for Apple-tv, and I have a problem with displaying custom view in cells chat.
I have code:
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) ->
UICollectionViewCell {
var myCell = self.chatCollectionView.dequeueReusableCellWithReuseIdentifier(chatCellIdentifier, forIndexPath: indexPath) as UICollectionViewCell
myCell.removeFromSuperview()
currentIndexPath = indexPath
if flag[indexPath.row]==0
{
myCell = sendBotMessage(historyString[indexPath.row], path: indexPath, collectionView: chatCollectionView)
}
else
{
myCell = sendUserMessage(historyString[indexPath.row], path: indexPath, collectionView: chatCollectionView)
}
return myCell
}
Code displays two versions of messages, as can be seen, sendBotMessage and sendUserMessage. The problem is that the display of the next cell is rendered incorrectly previous. First run with 1 sendBotMessage-view
and after adding second item
second (right) messages adding by sendUserMessage, another view.
the whole history of "correspondence" is stored in historyString - an array of type string. Storage is organized correctly , as when scrolling display errors disappear. For this reason, it can be concluded about the correctness of the rendering functions .
All new message appends in historyString, after that calling reloadData() and collectionView must be redrawing.
Where I could make a mistake? I tried to clean the subview for collectionView, disable scrolling animation, it did not help.
Code of procedure drawing view's :
func sendUserMessage(text : String, path : NSIndexPath, collectionView : UICollectionView) -> UICollectionViewCell {
let userMessage = text
let textSize = getTextFrameSize(userMessage)
let frameForMessage = getFrameforView(textSize)
let messageBuble = Chat_ViewInCell(frame: frameForMessage, textSize: textSize, text: userMessage)
messageBuble.backgroundColor = UIColor.clearColor()
let avatarImage = UIImage(named: "\(userAvatar+1).png")
let avatarView = UIImageView(image: avatarImage)
avatarView.contentMode = UIViewContentMode.ScaleAspectFit
let totalX = messageBuble.frame.width + 340
let constraint = 1750 - totalX
messageBuble.frame.origin = CGPointMake(constraint, 0)
avatarView.frame = CGRectMake(messageBuble.frame.maxX + 10, 0, 170, 170)
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(chatCellIdentifier, forIndexPath: path) as! chatCollectionViewCell
//добавляем, счастье, радуемся
cell.addSubview(messageBuble)
cell.addSubview(avatarView)
return cell
}
func sendBotMessage(text : String, path : NSIndexPath, collectionView : UICollectionView) -> UICollectionViewCell {
let userMessage = text
let textSize = getTextFrameSize(userMessage)
let frameForMessage = getFrameforView(textSize)
let messageBuble = bot_ViewInCell(frame: frameForMessage, textSize: textSize, text: userMessage)
messageBuble.backgroundColor = UIColor.clearColor()
let avatarImage = UIImage(named: partner_image)
let avatarView = UIImageView(image: avatarImage)
avatarView.contentMode = UIViewContentMode.ScaleAspectFit
avatarView.frame = CGRectMake(0, 0, 170, 170)
let constraint = avatarView.frame.maxX + 10
messageBuble.frame.origin = CGPointMake(constraint, 0)
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(chatCellIdentifier, forIndexPath: path) as! chatCollectionViewCell
//добавляем в возвращаемую ячейку
cell.addSubview(avatarView)
cell.addSubview(messageBuble)
return cell
}
After recommended changes with custom CollectionCellView i have this code:
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) ->
UICollectionViewCell {
var myCell = chatCollectionView.dequeueReusableCellWithReuseIdentifier(chatCellIdentifier, forIndexPath: indexPath) as! chatCollectionViewCell
var customCell = myCell
if flag[indexPath.row]==0
{
customCell = sendBotMessage(historyString[indexPath.row], path: indexPath, collectionView: collectionView)
}
else
{
customCell = sendUserMessage(historyString[indexPath.row], path: indexPath, collectionView: collectionView)
}
myCell = customCell
currentIndexPath = indexPath
return myCell
}
Function on drawing too have changes to custom cell:
func sendUserMessage(text : String, path : NSIndexPath, collectionView : UICollectionView) -> chatCollectionViewCell {
let userMessage = text
let textSize = getTextFrameSize(userMessage) //высчитали необходимые размеры лейбла
let frameForMessage = getFrameforView(textSize) //высчиитали необходимые размеры всей вьюшки
let messageBuble = Chat_ViewInCell(frame: frameForMessage, textSize: textSize, text: userMessage)
messageBuble.backgroundColor = UIColor.clearColor()
//создаем аватар
let avatarImage = UIImage(named: "\(userAvatar+1).png")
let avatarView = UIImageView(image: avatarImage)
avatarView.contentMode = UIViewContentMode.ScaleAspectFit
//считаем отступ до правого края, позицию аватара
let totalX = messageBuble.frame.width + 340
let constraint = 1750 - totalX
messageBuble.frame.origin = CGPointMake(constraint, 0)
avatarView.frame = CGRectMake(messageBuble.frame.maxX + 10, 0, 170, 170)
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(chatCellIdentifier, forIndexPath: path) as! chatCollectionViewCell
//добавляем, счастье, радуемся
cell.addSubview(messageBuble)
cell.addSubview(avatarView)
return cell
}
func sendBotMessage(text : String, path : NSIndexPath, collectionView : UICollectionView) -> chatCollectionViewCell {
let userMessage = text
let textSize = getTextFrameSize(userMessage) //высчитали необходимые размеры лейбла
let frameForMessage = getFrameforView(textSize) //высчиитали необходимые размеры всей вьюшки
//создали всю вьюшку
let messageBuble = bot_ViewInCell(frame: frameForMessage, textSize: textSize, text: userMessage)
messageBuble.backgroundColor = UIColor.clearColor()
//создаем аватар и считаем его позицию
let avatarImage = UIImage(named: partner_image)
let avatarView = UIImageView(image: avatarImage)
avatarView.contentMode = UIViewContentMode.ScaleAspectFit
avatarView.frame = CGRectMake(0, 0, 170, 170)
let constraint = avatarView.frame.maxX + 10
messageBuble.frame.origin = CGPointMake(constraint, 0)
let cell = collectionView.dequeueReusableCellWithReuseIdentifier(chatCellIdentifier, forIndexPath: path) as! chatCollectionViewCell
//добавляем в возвращаемую ячейку
cell.addSubview(avatarView)
cell.addSubview(messageBuble)
return cell
}
But problem no fixes... What i makes wrong with custom CollectionViewCell? I must to do smth another?
The problem is fixed! I don't know about prepareForReuse() method. So simple, in custom cell class defeniton i must override it method, and call for subviews clearsContextBeforeDrawing and removeFromSuperview. Code here:
class chatCollectionViewCell: UICollectionViewCell {
#IBOutlet weak var view: Chat_ViewInCell!
override func prepareForReuse() {
super.prepareForReuse()
for currView in self.subviews
{
currView.clearsContextBeforeDrawing = true
currView.removeFromSuperview()
}
}
All worked, without incorrect redrawing.
Related
I first programmatically created a tableview :
private func setupTableView() {
tableView = UITableView(frame: CGRect(x: 0, y: 180, width: view.frame.width, height: view.frame.height), style: UITableView.Style.plain)
tableView.dataSource = self
tableView.delegate = self
tableView.register(ItemTableViewCell.self, forCellReuseIdentifier: "Cell")
view.addSubview(tableView)
}
and set the cellForRow method as below :
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! ItemTableViewCell
guard let finalItems = presenter.finalItems?[indexPath.row] else { return cell }
presenter.configure(cell: cell, FinalItem: finalItems)
return cell
}
Then I configure the ItemTableViewCell as below :
class ItemTableViewCell: UITableViewCell {
private var iconImageView : UIImageView = {
let imgView = UIImageView(image: #imageLiteral(resourceName: "Image"))
imgView.contentMode = .scaleAspectFit
imgView.clipsToBounds = true
return imgView
}()
private var titleLabel : UILabel = {
let lbl = UILabel()
lbl.textColor = .black
lbl.font = UIFont.boldSystemFont(ofSize: 12)
lbl.textAlignment = .left
return lbl
}()
func configure(finalItem: FinalItem) {
titleLabel.text = finalItem.title
iconImageView.downloaded(from: finalItem.images_url.small)
}
}
When I push to the DetailViewController with the uinavigationbar, the elements contained in the rows (titles, labels...) are still visible a few milli seconds:
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let finalItem = finalItems[indexPath.row]
let detailViewController = ModuleBuilder.createDetailModuleWith(finalItem)
detailViewController.finalItem = finalItem
navigationController?.pushViewController(detailViewController, animated: true)
}
This is not what I am expecting. I never figure this problem out before.
I would like to display multiple images on scrollview when user selected images with DKImagePickerController github.
Here is my code but images don't appear. Anyone can tell what's wrong?
Thank you in advance!
var picker = DKImagePickerController()
var imagesArray = [Any]()
#IBAction func pickPhoto(_ sender: Any) {
picker.maxSelectableCount = 10
picker.showsCancelButton = true
picker.allowsLandscape = false
picker.assetType = .allPhotos
self.present(picker, animated: true)
picker.didSelectAssets = { (assets: [DKAsset]) in
self.imagesArray.append(assets)
for i in 0..<self.imagesArray.count {
let imageView = UIImageView()
imageView.image = self.imagesArray[i] as? UIImage
imageView.contentMode = .scaleAspectFit
let xposition = self.view.frame.width * CGFloat(i)
imageView.frame = CGRect(x: xposition, y: 330, width: self.scrollView.frame.width, height: 170)
self.scrollView.contentSize.width = self.scrollView.frame.width * CGFloat(i * 1)
self.scrollView.addSubview(imageView)
}
}
}
Instead of displaying images to scrollView, you can add that images in array and reload the collectionView/TableView..
as I did it here in collectionView
func showImagePicker() {
let pickerController = DKImagePickerController()
self.previewView?.isHidden = false
pickerController.assetType = .allPhotos
pickerController.defaultAssetGroup = .smartAlbumUserLibrary
pickerController.didSelectAssets = { (assets: [DKAsset]) in
if assets.count>0
{
for var i in 0 ... assets.count-1 {
assets[i].fetchOriginalImage(true, completeBlock: { (image, info) in
self.abc.append(image)
})
}
}
self.previewView?.reloadData()
}
self.present(pickerController, animated: true) {}
}
Here abc :[UIImage] and previewView? : UICollectionView
and in collection delegate methods:
public func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
{
return self.abc.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
var cell: UICollectionViewCell?
var imageView: UIImageView?
cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CellImage", for: indexPath)
imageView = cell?.contentView.viewWithTag(1) as? UIImageView
if let cell = cell, let imageView = imageView
{
let tag = indexPath.row + 1
cell.tag = tag
imageView.image = self.abc[indexPath.row]
}
return cell!
}
I want to ask how could I have done this feature you can see in this image:
I know the editActionsForRowAt but I think it's not the solution for the things I need to do, so I added UISwipeGestureRecognizer and my code look like this:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cellId", for: indexPath) as! ConnectionTableCell
let users = self.users[indexPath.section]
let user = users.userInfo[indexPath.row]
cell.userImage.image = UIImage(named: user.imageUrl)
cell.name.text = user.name
cell.work.text = user.work
cell.selectionStyle = .none
cell.addGestureRecognizer(UISwipeGestureRecognizer(target: self, action: #selector(didSwipeForRow)))
return cell
}
func didSwipeForRow(recognizer: UIGestureRecognizer) {
if recognizer.state == UIGestureRecognizerState.ended {
let swipeLocation = recognizer.location(in: self.tableView)
if let swipedIndexPath = tableView.indexPathForRow(at: swipeLocation) {
let textConstant = tableView.frame.width + 10
let imageConstant = tableView.frame.width - 20
let swipeView = UIView()
swipeView.backgroundColor = UIColor.themeColor(color: .green)
let cell = tableView.cellForRow(at: swipedIndexPath) as! ConnectionTableCell
let height = cell.frame.height
let users = self.users[swipedIndexPath.section]
let user = users.userInfo[swipedIndexPath.row]
cell.addSubview(swipeView)
swipeView.frame = CGRect(x: 0, y: 0, width: imageConstant - 60, height: height)
cell.name.leftAnchor.constraint(equalTo: self.tableView.rightAnchor, constant: textConstant).isActive = true
cell.work.leftAnchor.constraint(equalTo: self.tableView.rightAnchor, constant: textConstant).isActive = true
cell.userImage.rightAnchor.constraint(equalTo: self.tableView.rightAnchor, constant: imageConstant).isActive = true
}
}
}
But the problem is when I swipe a cell its also affecting the reused cell as you can see in this image :
Any suggestions on how to solve this issue? Thanks in advance guys.
My app loads images from a backend and displays them in a UITableViewCell, that contains a UIImageView to display it and some labels and buttons.
I've added the suggested contraints to the UITableViewCell with the 'Reset to suggested contraints' option.
Here's some of the code after retrieving the data:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
var cell = PostTableViewCell()
if (self.posts.count == 0) { return cell }
let post = posts[indexPath.row]
// Instancia o reuse identifier
if post["post_image"] != nil {
cell = tableView.dequeueReusableCell(withIdentifier: Storyboard.PostWithImage, for: indexPath) as! PostTableViewCell
} else {
cell = tableView.dequeueReusableCell(withIdentifier: Storyboard.PostWithoutImage, for: indexPath) as! PostTableViewCell
}
return cell
}
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
var cell = PostTableViewCell()
cell = tableView.dequeueReusableCell(withIdentifier: Storyboard.PostWithImage) as! PostTableViewCell
return cell.bounds.size.height;
}
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
var cell = PostTableViewCell()
cell = tableView.dequeueReusableCell(withIdentifier: Storyboard.PostWithImage) as! PostTableViewCell
return cell.bounds.size.height;
}
private func configureCell(cell: PostTableViewCell, atIndexPath indexPath: IndexPath) {
cell.queue.cancelAllOperations()
let operation: BlockOperation = BlockOperation()
operation.addExecutionBlock { [weak operation] () -> Void in
DispatchQueue.main.sync(execute: { [weak operation] () -> Void in
if (operation?.isCancelled)! { return }
let post = self.posts[indexPath.row]
cell.accessibilityIdentifier = post.recordID.recordName
guard let postTitle = post["post_title"], let postBody = post["post_body"] else {
return
}
if let asset = post["post_image"] as? CKAsset {
self.imageCache.queryDiskCache(forKey: post.recordID.recordName, done: { (image, cachetype) in
if image != nil {
cell.postImageView.contentMode = .scaleAspectFill
cell.postImageView.autoresizingMask = [.flexibleBottomMargin,
.flexibleHeight,
.flexibleLeftMargin,
.flexibleRightMargin,
.flexibleTopMargin,
.flexibleWidth ];
cell.postImageView.image = image!
} else {
do {
let data = try Data(contentsOf: asset.fileURL)
let image = UIImage(data: data)
cell.postImageView.contentMode = .scaleAspectFill
cell.postImageView.autoresizingMask = [.flexibleBottomMargin,
.flexibleHeight,
.flexibleLeftMargin,
.flexibleRightMargin,
.flexibleTopMargin,
.flexibleWidth ];
cell.postImageView.image = image!
self.imageCache.store(image!, forKey: post.recordID.recordName)
} catch {
print("Error 1001 = \(error.localizedDescription)")
}
}
})
}
cell.titleLabel.text = postTitle as? String
cell.bodyLabel.text = postBody as? String
})
}
cell.queue.addOperation(operation)
}
Here's some prints from the app itself that shows the image overlapping over the labels.
It only overlaps if the image is in portrait mode, if the image was taken in landscape it suits well.
What's the best way to bypass this issue?
You can programmatically tell the image to draw only in the given image area. If your constraints are working properly and it is staying the correct size, the image may just be drawing beyond the View bounds because of the .scaleAscpedtFill setting.
Do this by using .clipToBounds = true.
cell.postImageView.clipToBounds = true
Or, you can set it in interface builder as well, per the image below.
Give that a try and see if that helps?
I am learning how to create a UICollectionView programmatically. I want to create a grid of pictures collected from the user in another part of the app.
Will this sample code help me accomplish this? Also, how do I configure the data to emit the image I want? My source code is below.
UICollectionView:
class PhotosViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {
override func viewDidLoad() {
super.viewDidLoad()
let imageStore = ImageStore()
}
override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated)
let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
layout.sectionInset = UIEdgeInsets(top: 20, left: 10, bottom: 10, right: 10)
layout.itemSize = CGSize(width: 100, height: 100)
let myCollectionView:UICollectionView = UICollectionView(frame: self.view.frame, collectionViewLayout: layout)
myCollectionView.dataSource = self
myCollectionView.delegate = self
myCollectionView.registerClass(RDCellCollectionViewCell.self, forCellWithReuseIdentifier: "MyCell")
myCollectionView.backgroundColor = UIColor.whiteColor()
self.view.addSubview(myCollectionView)
}
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return images.count
}
var images: [UIImage] = [
]
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let myCell = collectionView.dequeueReusableCellWithReuseIdentifier("MyCell", forIndexPath: indexPath) as! RDCellCollectionViewCell
myCell.imageView.image = images[indexPath.item]
myCell.backgroundColor = UIColor.grayColor()
return myCell
}
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath)
{
print("User tapped on item \(indexPath.row)")
}
}
ImageStore.swift:
class ImageStore: NSObject {
let cache = NSCache()
func setImage(image: UIImage, forKey key: String) {
cache.setObject(image, forKey: key)
let imageURL = imageURLForKey(key)
if let data = UIImageJPEGRepresentation(image, 0.5) {
data.writeToURL(imageURL, atomically: true)
}
}
func imageForKey(key: String) -> UIImage? {
if let existingImage = cache.objectForKey(key) as? UIImage {
return existingImage
}
let imageURL = imageURLForKey(key)
guard let imageFromDisk = UIImage(contentsOfFile: imageURL.path!) else {
return nil
}
cache.setObject(imageFromDisk, forKey: key)
return imageFromDisk
}
func deleteImageForKey(key: String) {
cache.removeObjectForKey(key)
let imageURL = imageURLForKey(key)
do {
try NSFileManager.defaultManager().removeItemAtURL(imageURL)
}
catch let deleteError {
print("Error removing the image from disk: \(deleteError)")
}
}
func imageURLForKey(key: String) -> NSURL {
let documentsDirectories =
NSFileManager.defaultManager().URLsForDirectory(.DocumentDirectory, inDomains: .UserDomainMask)
let documentDirectory = documentsDirectories.first!
return documentDirectory.URLByAppendingPathComponent(key)
}
}
You're on the right track. You'll need to create a subclass of UICollectionViewCell that contains a UIImageView; this will let you plug the correct UIImage into it in cellForItemAtIndexPath.
This describes how to hook up your custom cell:
Create UICollectionViewCell programmatically without nib or storyboard
As for getting the correct image, you'll need to map the index path to your image store somehow, so that an item number corresponds to the correct image key.
If the task is to add an image, you should use something like this in cellForItemAtIndexPath:
let myCell = collectionView.dequeueReusableCellWithReuseIdentifier("MyCell", forIndexPath: indexPath)
myCell.backgroundColor = UIColor.blueColor()
let imageView = UIImageView(frame: cell.contentView.frame)
cell.contentView.addSubview(imageView)
imageView.image = //Here you should get right UIImage like ImageStore().imageForKey("YOUR_KEY")
return myCell
Or you can use custom UICollectionViewCell subclass as Joshua Kaden wrote.