iOS - How to add bubble with text/buttons over cell in UITableView? - ios

I really have no idea how to call this feature, music app had it up to 8.4, it looks like on the screenshot. I want to implement it in my app so when user presses the cell the "bubble" with 2 option buttons shows up.
I am interested in how to make it happen in Obj-C but I'm sure people will apreciate the answer written in Swift. Thanks
Screenshot

I'm doing exactly the same thing as what you want.
To do so, you have to create your own view controller, not UIMenuItem. The screen capture is as follows.
What I'm doing is to create a viewController as popup (PopoverMenuController), and adding a tableView as a subView for menu.
In the same way, you can add whatever UI controls you want instead of tableView.
Here is how you use my PopoverMenuController.
var myPopupMenu: PopoverMenuController!
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
// make cell fully visible
let tableCell = tableView.cellForRow(at: indexPath)!
tableView.scrollRectToVisible(tableView.rectForRow(at: indexPath), animated: false)
// pop up menu
myPopupMenu = PopoverMenuController()
myPopupMenu.sourceView = tableCell
var rect = tableCell.bounds
// I'm adjusting popup menu position slightly (this is optional)
rect.origin.y = rect.size.height/3.0
rect.size.height = rect.size.height / 2.0
myPopupMenu.sourceRect = rect
myPopupMenu.addAction(PopMenuAction(textLabel: "MyMenu-1", accessoryType: .none, handler: myMenuHandler1))
myPopupMenu.addAction(PopMenuAction(textLabel: "MyMenu-2", accessoryType: .none, handler: myMenuHandler2))
present(myPopupMenu, animated: true, completion: nil)
}
func myMenuHandler1(_ action: PopMenuAction?) -> Bool {
// do some work...
return false
}
func myMenuHandler2(_ action: PopMenuAction?) -> Bool {
// do some work...
return false
}
To transltae to Obj-C should not be a big effort.
I put souce code of PopoverMenuController.swift here. This controller is self-contained and it has a description on how to use.
Hope this helps.

Look up how to implement UIMenuController on a UITableViewCell
How to show a custom UIMenuItem for a UITableViewCell

Related

Highlight UITableViewCell like iMessage when long pressed

I have simple chat created using UITableView. I want to add the ability to highlight a message after long press. In fact, I want to create the same feature like iMessage:
After a long press, we unhighlight background (more darker), highlight message, scroll to this message and show the actionSheet
For now I managed to add only longPress and actionSheet
Long press recongizer on viewDidLoad:
let longPressRecognizer = UILongPressGestureRecognizer(target: self, action: #selector(onCellLongPressed(gesture:)))
messagesTableView.addGestureRecognizer(longPressRecognizer)
onCellLongPressed function:
#objc func onCellLongPressed(gesture: UILongPressGestureRecognizer) {
if gesture.state == UIGestureRecognizerState.began {
let touchPoint = gesture.location(in: self.messagesTableView)
if let indexPath = messagesTableView.indexPathForRow(at: touchPoint) {
self.messagesTableView.selectRow(at: indexPath, animated: true, scrollPosition: UITableViewScrollPosition.none)
shareWithFriend()
}
}
}
#objc func shareWithFriend() {
alert(style: .actionSheet, actions: [
UIAlertAction(title: "Share with friend", style: .default, handler: { [weak self] (_) in
print("SHARE HERE")
}),
UIAlertAction(title: "Cancel", style: .destructive),
])
}
func alert(_ title: String? = nil, message: String? = nil, style: UIAlertController.Style, actions: [UIAlertAction]) {
let alertController = UIAlertController(title: title, message: message, preferredStyle: style)
actions.forEach(alertController.addAction)
present(alertController, animated: true)
}
As you can see, the background color is above the navigation bar so I guess there is a secondary view controller astutely presented above the collection view when the user selects a cell.
I think this is two different view hierarchies which look like one:
One view controller contains the balloon list
One view controller contains a copy of the selected balloon and the few actions associated to it
Here is the road map :
Detect a long press in the collection view cells
Copy the selected balloon and present it inside a secondary view controller (ActionVC)
Adjust the position of the selected balloon inside the ActionVC. If the selected balloon is under the future action button, it should be moved. If the selected balloon does not bother anyone, it should be presented without any change.
Adjust the content offset of the collection view to reflect 3. The modification should be done alongside 3 to look like if the cell was actually moved.
Detect any touch on the ActionVC
Dismiss the ActionVC
Here is an example project.
To copy the balloon, I actually create a view of the same class as the one used in the collection view cell. But you could use a snapshot.
To adjust the selected balloon position inside the ActionVC, I used constraints with priorities. One claims "don't be under the action button", another one claims "be exactly where the cell was". I used a simple coordinates conversion to compute the expected selected balloon position inside the ActionVC.
To perform 3 alongside 4, I used the transitionCoordinator of the ActionVC, but you could use a simple animation block and present the ActionVC without animation.
I'm sorry if this answer will not fulfill your request completely, but hope it will help you.
Your initial code was right, but you have not set Scrolling type. So I suggest you use this method selectRow(at:animated:scrollPosition:) Just set scroll position:
self.messagesTableView.selectRow(at: indexPath, animated: true, scrollPosition: UITableViewScrollPosition.top)
This also will select this row and hence call the following method tableView(_:didSelectRowAt:). So you will need to implement highlighting logic here:
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
// your logic of changing color
}
Then you should implement similar action, but to deselect the row using deselectRow(at:animated:)I believe this should be done when user finished his action. Also you need to implement similar function tableView(_:didDeselectRowAt:) to return color back:
override func tableView(_ tableView: UITableView, didDeselectRowAt indexPath: IndexPath) {
// change color back
}
Update:
You may also use the setHighlighted(_:animated:) method to highlight a cell. In this way you may avoid using selectRowAt/didSelectRowAt/didDeselectRowAt and scroll tableView using
tableView?.scrollToRow(at: indexPath, at: UITableViewScrollPosition.top, animated: true).

How to add accessibility label for VoiceOver at Swipe Action Configuration for Row?

I'm creating an iOS App using Swift 4 and I'm not using Storyboards.
To delete a row from the Table View Controller the user swipe left the row and then click the Delete Button.
Here is the code I'm using to implement that (no external libraries have been used):
override func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
self.isAccessibilityElement = true
self.accessibilityLabel = "Delete row"
let deleteAction = UIContextualAction(style: .normal , title: "DELETE") { (action, view, handler) in
self.removeRowFromMyList(indexPath: indexPath.row)
MyListController.stations.remove(at: indexPath.row)
self.tableView.deleteRows(at: [indexPath], with: .automatic)
self.tableView.setEditing(false, animated: true)
self.tableView.reloadData()
}
let swipeAction = UISwipeActionsConfiguration(actions: [deleteAction])
swipeAction.performsFirstActionWithFullSwipe = false
return swipeAction
}
I did check other questions and none of them address that.
Please don't hesitate to comment here for any other information you need to know to solve this issue.
Thanks :)
Using Accessibility Custom Action from UIAccessibility by Apple
You just need to set Accessibility Custom Action:
cell.accessibilityCustomActions = [UIAccessibilityCustomAction(name: "Delete", target: self, selector: #selector(theCustomAction))]
#objc private func theCustomAction() -> Bool {
//Do anything you want here
return true
}
Update:
So I did recreate the project but this time I was using Storyboards (I wasn't the last time) and I imported from Cocoapods the SwipeCellKit Library and I followed their documentation and VoiceOver was working perfectly fine with deleting a cell from them indexPath.row with no problem.
When Voice Over is turned on and the UITableViewCell is in focus, Voice Over would announce "Swipe Up or Down to Select a Custom Action, then double tap to activate"
If the user follows the above mentioned instruction, the user would be able to select one of the many actions available and double tap to activate it
After performing the action, Voice Over would announce "Performed action "
Note:
Advantage with using standard controls is that accessibility is mostly handled for you.
You don't have to worry about it breaking with newer versions of iOS
If system provides built in functionality then go with it.
Implementing members of the UIAccessibilityCustomAction class will allow you to add additional functionality to the UITableViewCell. In cellForRowAt: IndexPath, add the follow code to attach a custom action to the cell.
cell.isAccessibilityElement = true
let customAction = UIAccessibilityCustomAction(name: "Delete Row", target: self, selector: #selector(deleteRowAction))
cell.accessibilityCustomActions = [selectAction, disclosureAction]
Selectors associated with the custom actions are powerful, but it is difficult to pass in parameters as arguments that indicate the cell or the index path. Furthermore, a tableView's didSelectRowAt: IndexPath isn't activated by the accessibility focus.
The solution here is to find the location of the VoiceOver accessibility focus and obtain information from the cell. This code can be included in your selector as shown below.
#objc func deleteRowAction() -> Bool {
let focusedCell = UIAccessibilityFocusedElement(UIAccessibilityNotificationVoiceOverIdentifier) as! UITableViewCell
if let indexPath = tableView?.indexPath(for: focusedCell) {
// perform the custom action here using the indexPath information
}
return true
}

Swift animate view in tableviewcell

For an app that I'm developing, I'm using a tableview. My tableview, has of course a tableviewcell. In that tableviewcell I'm adding a view programmatically (so nothing in storyboard). It's a view where I draw some lines and text and that becomes a messagebubble. If the messagebubble is seen by the other user you sent it too , a line of the bubble will go open.
So I have the animation function inside the class of that UIView (sendbubble.swift)
Now, it already checks if it is read or not and it opens the right bubble. But normally it should animate (the line that goes open should rotate) in 0.6 seconds. But it animates instantly. So my question is, how do I animate it with a duration?
I would also prefer to still call it in my custom UIView class (sendbubble.swift) . Maybe I need code in my function to check if the cell is presented on my iphone?
Thanks in advance!
func openMessage() {
UIView.animate(withDuration: 0.6, delay: 0.0, options: [], animations: {
var t = CATransform3DIdentity;
t = CATransform3DMakeRotation(CGFloat(3 * Float.pi / 4), 0, 0, 1)
self.moveableLineLayer.transform = t;
}, completion:{(finished:Bool) in })
}
First you need to grab the cell.
Get the indexPath of that cell where you need to show open bubble.
Get the cell from tableView.cellForRowAt(at:indexPath)
We will now have access to that bubble view now you can animate using the same function func openMessage()
Any question? comment.
You need to implement the UITableViewDelegate method tableView(_:willDisplay:forRowAt:) https://developer.apple.com/reference/uikit/uitableviewdelegate/1614883-tableview
That is triggered when the cell is about to be drawn - not when it is created. You will also need to store a state in your model that says if the animation has occurred, otherwise it will happen every time the cell comes back into view.
EXAMPLE
In the view controller (pseudo code)
class CustomViewController: UITableViewDelegate {
//where ever you define your tableview
var tableView:UITableView
tableView.delegate = self
var dataSource //some array that is defining your cells - each object has a property call hasAnimated
func tableView(_ tableView: UITableView, willDisplay cell: ITableViewCell,
forRowAt indexPath: IndexPath) {
if let cell = cell as? CustomTableViewCell, dataSource[indexPath.row].hasAnimated == false {
dataSource[indexPath.row].hasAnimated = true
cell.openMessage()
}
}
}
class CustomTableViewCell: UITableViewCell {
func openMessage() { //your method
}
}

Hide button in UICollectionView cell

I am programmatically creating cells and adding a delete button to each one of them. The problem is that I'd like to toggle their .hidden state. The idea is to have an edit button that toggles all of the button's state at the same time. Maybe I am going about this the wrong way?
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("verticalCell", forIndexPath: indexPath) as! RACollectionViewCell
let slide = panelSlides[indexPath.row]
cell.slideData = slide
cell.slideImageView.setImageWithUrl(NSURL(string: IMAGE_URL + slide.imageName + ".jpg")!)
cell.setNeedsLayout()
let image = UIImage(named: "ic_close") as UIImage?
var deleteButton = UIButton(type: UIButtonType.Custom) as UIButton
deleteButton.frame = CGRectMake(-25, -25, 100, 100)
deleteButton.setImage(image, forState: .Normal)
deleteButton.addTarget(self,action:#selector(deleteCell), forControlEvents:.TouchUpInside)
deleteButton.hidden = editOn
cell.addSubview(deleteButton)
return cell
}
#IBAction func EditButtonTap(sender: AnyObject) {
editOn = !editOn
sidePanelCollectionView.reloadData()
}
I think what you want to do is iterate over all of your data by index and then call cellForItemAtIndexPath: on your UICollectionView for each index. Then you can take that existing cell, cast it to your specific type as? RACollectionViewCell an then set the button hidden values this way.
Example (apologies i'm not in xcode to verify this precisely right now but this is the gist):
for (index, data) in myDataArray.enumerated() {
let cell = collectionView.cellForRowAtIndexPath(NSIndexPath(row: index, section: 0)) as? RACollectionViewCell
cell?.deleteButton.hidden = false
}
You probably also need some sort of isEditing Boolean variable in your view controller that keeps track of the fact that you are in an editing state so that as you scroll, newly configured cells continue to display with/without the button. You are going to need your existing code above as well to make sure it continues to work as scrolling occurs. Instead of creating a new delete button every time, you should put the button in your storyboard and set up a reference too and then you can just use something like cell.deleteButton.hidden = !isEditing

tvos UICollectionView lose focus to previous Focus Cell

I am building a tvos application. i have a strange bug where UICollectionView lose focus of the previously selected cell when i navigate back to that particular view. The scenario is some thing this like this.
I have two UIViewControllers A and B. A has a UITableView and it has three prototype cells in it. Each cell has a horizontal scrolling UICollectionView inside it. When i click on any of UICollectionViewCell it navigates to the B (detail page). I am presenting B modally.
Now when i press Menu button on Siri remote view A appears again (in other words view B is removed from View hierarchy) but the current selected cell is different then the previously selected. I have tried to use remembersLastFocusedIndexPath with both true and false values and also tried by implementing
func indexPathForPreferredFocusedViewInCollectionView(collectionView: UICollectionView) -> NSIndexPath?
but the control neves comes to this function when i navigate back to view A. I am also reloading every thing in viewWillAppear function.
Can any one help me in this. Thanks
The property remembersLastFocusedIndexPath should be set to true for the collectionView and false for the tableView.
Also, Are you reloading the UITableView in viewWillAppear i.e Is the table data being refreshed when the B is popped and A appears?
If Yes, then lastFocusedIndexPath will be nil on reload.
We faced the same issue. We solved it by not reloading the contents when B is popped.
Maintain a flag say didPush. Set this flag to true when B is pushed. When A appears check whether the flag is set and only then fetch data and reload table.
This worked for us.
I don't remember exactly, but I know there was a known issue for remembersLastFocusedIndexPath where it wasn't working as intended.
This is one workaround, although take it with a grand of salt as it does seem slightly hacky and it uses the common (but potentially unstable) approach of overriding the preferredFocusedView property.
private var viewToFocus: UIView?
override var preferredFocusView: UIView? {
get {
return self.viewToFocus
}
}
Save locally the indexPath of the last cell in View A when presenting View B
// [1] Saving and scrolling to the correct indexPath:
override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated)
...
collectionView.scrollToItemAtIndexPath(indexPath:, atScrollPosition:, animated:)
}
// [2] Create a dispatchTime using GCD before setting the cell at indexPath as the preferredFocusView:
override func viewDidAppear(animated: Bool) {
super.viewDidAppear(animated)
...
let dispatchTime: dispatch_time_t = dispatch_time(DISPATCH_TIME_NOW, Int64(CGFloat.min * CGFloat(NSEC_PER_SEC)))
dispatch_after(dispatchTime, dispatch_get_main_queue(), {
self.viewToFocus = collectionView.cellForItemAtIndexPath(indexPath:)
// [3] Request an update
self.setNeedsFocusUpdate()
// [4] Force a focus update
self.updateFocusIfNeeded()
}
}
The reason we split the two methods into both viewWillAppear and viewDidAppear is that it eliminates a bit of the animation jump. If anyone else could jump in with suggestions to improve or even alternate solutions, I'd also be interested!
In Swift
If you want to focus collection view Cell then
You can use collectionview Delegate method, method name is
func collectionView(collectionView: UICollectionView, didUpdateFocusInContext context: UICollectionViewFocusUpdateContext, withAnimationCoordinator coordinator: UIFocusAnimationCoordinator)
{
}
You can use this method like this...
func collectionView(collectionView: UICollectionView, didUpdateFocusInContext context: UICollectionViewFocusUpdateContext, withAnimationCoordinator coordinator: UIFocusAnimationCoordinator) {
if let previousIndexPath = context.previouslyFocusedIndexPath,
let cell = collectionView.cellForItemAtIndexPath(previousIndexPath) {
cell.contentView.layer.borderWidth = 0.0
cell.contentView.layer.shadowRadius = 0.0
cell.contentView.layer.shadowOpacity = 0
}
if let indexPath = context.nextFocusedIndexPath,
let cell = collectionView.cellForItemAtIndexPath(indexPath) {
cell.contentView.layer.borderWidth = 8.0
cell.contentView.layer.borderColor = UIColor.blackColor().CGColor
cell.contentView.layer.shadowColor = UIColor.blackColor().CGColor
cell.contentView.layer.shadowRadius = 10.0
cell.contentView.layer.shadowOpacity = 0.9
cell.contentView.layer.shadowOffset = CGSize(width: 0, height: 0)
collectionView.scrollToItemAtIndexPath(indexPath, atScrollPosition: [.CenteredHorizontally, .CenteredVertically], animated: true)
}
}

Resources