Implement checkbox on UITableViewCell - Swift - uitableview

I am building a ToDo List type app, and I would like to place an editable checkbox in each cell in the UITableView. I want the user to be able to mark the item as completed by tapping the checkbox in the tableView. They also need to be able to tap in the cell, outside of the checkbox, and segue to a detail view.
So far I have created a custom cell class. The plan was to display an image of an unchecked box, and when the user taps the image, the image is swapped with a different image of a checked box (and the item is updated appropriately).
I tried putting a Touch Gesture Recognizer on the image, but it didn't work. Whenever the image on the cell is tapped, it just segues to the detail view. Then I found an article somewhere that says to create UIView nested inside the cell and link the Touch Gesture to that. So I tried that, but now it only work intermittently. Sometimes it recognizes the touch correctly, and sometimes it just segues to the detail view.
I've seen this idea in the Wunderlist app.
How do I go about implementing this correctly?

iOS doesn't have a native checkbox control. Apple uses a UISwitch instead.
If you want to follow Apple's HIG, use a switch.
If you want a checkbox style instead, you have several options.
You can attach a gesture recognizer to an image view and do it that way.
You can create a custom subclass of UIButton (MyCheckbox).
You can find a third party checkbox class that somebody else already created. I would look on Cocoa Controls. A quick search reveals half-a-dozen different checkbox options.
An important thing is the size of the "hit box" that the user taps. You usually want to create an image/view that's at least 30x30 points in size, and 40x40 points is better. An easy way to do that is to create your checked and unchecked images with enough whitespace around them to make them 30x30 or 40x40 points.
My guess is that your image view is too small and that's why you report that it is only working intermittently.

Related

UITableViewCell and the case of the missing Subtitle

I've checked all the usual suspects. I have a UITableView in an iOS 8 app that uses the UITableViewCellStyle.Subtitle and sets a subtitle for every cell. I won't bother including code as it's no different from any other code for this. The issue I'm having is best described as follows: my cells also have actions (the new API in iOS 8 lets you add actions to your cells accessible by swiping left on them, similar to Mail). Sometimes (seemingly random), however, the subtitles don't show up unless I swipe on them. Upon swiping, the subtitle appears. Scrolling the cell in and out of view again makes the subtitle disappear until I swipe on it once more. What could be causing this? The subtitle attribute is clearly being set on the cell, it just isn't visible when the cell becomes visible.
Additional info: when troubleshooting, I decided to disable the actions on the cell to see if that was the issue. However, the same problem would occur. Interestingly, with actions disabled, scrolling the cell out and back into view would cause the subtitle to appear.
I'm not unconvinced it's related to this: Subtitles of UITableViewCell won't update
You can chech my answer here for a temporary work around. Just put a blank space character in the interface builder inside the subtitle. check the answer for more details.

change order of list in tableview by clicking on whole cell

I currently have a 'tableview' with a list of items and I have enabled an 'edit' button to go into edit mode which shows the 'reordering controls' on the right side of the screen. I have also enabled 'canMoveRowAtIndexPath' and 'moveRowAtIndexPath:toIndexPath' to allow for the user to hold and drag the reorder control on the right side to reorder the list and have the data model update.
Is there a way to enable this but allow the user to click and drag the whole cell and not only the 'reorder controller'? Essentially I want to enlarge the area of the reorder controller's function to the whole cell when tableview is in editing mode.
for anyone else who is interested, I used this guide to get it working: b2cloud
the starting code template does not work as optimally since it has nib files and I'm using Xcode5 but it still works. The important code is all in the actualy tutorial as he lists how to set the reorder control to the size of the size via inserting it as a subview.
There is a way to enable this that allow the user to click and drag the whole cell and not only the 'reorder controller'!
Please check it out: https://github.com/FlorianMielke/FMMoveTableView
This might be helpful to you, Sir :)

Custom UIPicker control IOS

im looking for a similar control to this Android Wheel, its very similar to UIPickerView, but i know that Apple use to reject APPs that modify UIPickerView appearance.
I need a control that let me put images on a infinite loop scroll and let the user drag to select one.
I've found some controls here, but most of them only support strings, some support images and are looped but dont let the user scroll.
My purpose is to make a button scroll loop where you can drag any button to the center of the wheel and see a text description on a uilabel, i dont need the buttons to be clickables.
I hope I explained well, and sorry for my bad english.
I would better suggest you to go with the iCarousel here. This enables you a different mode of scrolling & directions & effects which you can project on a Custom view similar (by Sliding-In & Sliding-Out from the bottom of screen) like a UIPickerView. This is not at all made using extending UIPickerView, but you can project it like that. Once you see a demo app of it, you can eventually change your mind to use this over custom UIPickerView.
Just implement the delegate method declared here to know which of the element was clicked. iCarousel comes with a image loading view also. You can look into that too.
But if you want to stick with UIPickerView customization, then please have a look at this stack Overflow post. This is certainly what you want, except that you need to add button instead of images.

Should I use UIImageview or something else?

I'm starting an App that will display an image and users will click a "yes" or "no" button if they like it. Then once they decide, a new image will appear and the process will repeat. They will not need to go back to previously viewed images.
My question is would you use UIImageview to do this and would you use some kind of array etc.. or what? Also how would you hook in the yes, no, and next buttons to this type of layout. Would you use a pop up for the "next" button or have it appear somehow in the view etc.. the yes and no would be fixed in place.
The images they say yes to, will appear on another view in a sort of folder.
This is only my second app. The first one I started on wobbly ground, so I'm trying to get some sold feedback before I build the foundation. If you have sample code that would be cool but not necessary at this point.
Thanks!
If you are showing only one image on the page then it is feasible to use one UIImageView and an array of images. When user wants to view next image same UIImageView control will be reused with different image.
The images can be shown in webview also but imageview is ok too. Better keep the yes and no button below the view for simplicity. To populate the imageview you use array of images and on clicking next button or whatever, you can load the next image in the array to image view.

iOS Nested View Hierarchy to support drag drop functionality to allow end-user to configure forms

I'm building a native iOS app that will allow end users to build forms by dragging and dropping from a toolbox of custom controls. A typical scenario would be a power-user dragging some UILabels and UITextField representations around on a UIView. Groups of controls would be supported, allowing several controls to be visually contained within a section. The whole thing will probably be contained in a UIScrollView allowing horizontal scrolling between 'pages'.
'Normal' users will then use the form for data entry.
So, I have two related requirements: to allow different types of UIView/UITableView/UIImageView/UILabelView/UITextField etc to be laid-out and grouped (and probably contained within an outer UIScrollView), and to allow the layout to be adjusted/dragged/dropped by power-users.
My question is rather broad, but is essentially this: what is the most appropriate nested UIView hierarchy to support these two related requirements? Is a basic structure of UITableViews contained within an outer UIScrollView fundamentally sound if I want to drag-drop within nested views within the UITableView? Should I avoid UITableView because it will complicate dragging?
I appreciate this question is borderline subjective in scope, but I'd really appreciate some guidance from people who have tacked this sort of thing before and who have some words of wisdom for me.
Many thanks.
Sounds like an interesting app! I would say that using a UITableView would make the app horribly complicated. A UIScrollView would be a good base to drag and drop controls onto. Perhaps with an "add page" button, the user could tap this it required, and you could extend the contentSize of the UIScrollView to be the width of +1 pages, and then scroll it so the user can drag more controls onto that page.
To drag the controls around, you could use a UIPanGestureRecognizer attached to each control, and when triggered it changes the centre position of the control. You might need to turn off user interaction of some of these controls - e.g. for a UITextField the power user will want to drag it around but not want to enter a value into it.
For grouping controls, you could do something like this:
a "group mode", whereby the user taps a button to enter this mode, then taps a number of controls (would need some visual indication on them to show they are selected) and then taps done.
the selected controls are then be removed from the UIScrollView
a new UIView is created and positioned at the centre point of the selected controls, and is big enough for the controls to fit in at the same distances apart. It is added as a subview of the scroll view
the controls are all added as subviews of this view
the gesture recognizer is added to this view, instead of the individual controls. Then when dragging around, this group of controls will all move as a group with fixed layout.
If you have groups of controls that you think might be commonly used, you could even create them in advance, each in their own nib, and then allow the user to drag them onto the scroll view as a pre-made group.
What you might find, especially if some of your controls are quite large (e.g. I'd expect an image view to be significantly bigger than a label or text field), the pan gesture recognizer gets a bit limiting because when trying to drag views around you'll inadvertently pick the wrong one if they are positioned close together or overlapping. In which case, you might need the extra precision of handling all the touch events yourself - so when a touch starts, you test against all the controls (or groups) to see which has the closest centre to your tap position, and then as you get the touch moved events you can update this centre position.
I've not made anything quite as complex as what you're describing, but I did make an app where the user could drag small images onto a large image to apply as "decorations". They could drag on any number of these decorations, and also scale them with a pinch gesture. In this case, I had a UIImageView as a background which held the main image. Then the decorations were on the edge of the image, and a pan gesture recognizer was used to detect them being dragged onto the image. On drag, I'd actually create a new instance of the decoration (UIImageView) so that there was always another one left in the toolbox. A pinch gesture recognizer was used for the user to scale the decorations. For the user to move around a decoration they had already placed, I had to use manual touch handling to detect the right decoration (since they could easily be overlapping, and ones that looked round to the user are actually square in terms of UIViews, so it was easy for the user to accidentally drag the corner of one when they intended to drag a different one). Mixing an matching gesture recognizers and manual touch handling seemed to work out just fine, which was good because it's much easier to use the gesture recognizers for the more complex behaviour like pinching.
Back to your app, once your power user has set up everything, then when the normal user loads the app, you can just turn off any touch handling code (and remove or don't create the gesture recognizers) and they will get static forms as laid out by the power user. Then make sure user interaction is enabled on all of the controls (e.g. UITextField) and they will be able to enter data into them.
Doing all of the above with controls onto a scroll view will be complex enough I think, and you may end up having to deal with lots of niggly behaviour in trying to get it working nicely for both normal and power users. I think this would be 100x harder if you were also dealing with UITableViews and UITableCells at the same time.
Please let me know if you'd like me to elaborate on any aspect of the app I outlined above, as it does seem to have a fair chunk of functionality in common with your app. Hope to see/hear more about your app in the future!
EDIT
One more thing occurred to me - if you are keen to use a UITableView in your solution, then I would suggest that your power user lays out one UITableViewCell at a time. In fact, they would be dragging UILabels and other controls onto just a basic UIView, which when they've finished you then use to record the positions of the controls. You then use these positions when presenting those controls in a cell - in cellForRowAtIndexPath you would create and init all of the chosen controls, and position all of them in a newly created cell at the positions and layout the power user had chosen. The power user could also have a control to change the height of the cell they are laying out, for more flexibility. They would create a series of cell layouts one after the other (I guess each of these would be a "group" of controls), and then those cells would be presented in order in the table view. You could then give the power user some final tweaking control by letting them put the table into edit mode so they can reorder the cells (or even remove some).
Depending on the application, perhaps the user could also have these cell layouts they've previously created always available, so after they've built up a few common control groups, they can just keep reusing them to very rapidly build up a form. And then occasionally they would create a new cell layout when none of the ones they have created so far are suitable, and again it would be saved as a template for them to use again in future forms.
I would just make an EditView class that is just a UIView with some transparent background color. When you want to drag controls around, then set some type of edit mode where you overlay a bunch of EditViews on all the appropriate controls. The EditView would then support whatever gestures / touch handling you want to resize or move it. Dragging a view onto another view and releasing might prompt something like "Nest view A in view B?" which then you can make the related addSubview calls.
Nesting tableviews inside scrollviews won't be an issue, though I'm not sure what kind of behavior would be expected if you were trying to nest anything inside a tableview...that would have to be specified using standard UITableView methods.
For saving layouts and such, you might need to create your own pseudo-view hierarchy that contains various pieces of meta-data needed to recreate the final layout which you would then be able to store somewhere.

Resources