it is my first question in the forum, although I have been reading for quite a long time.
I am trying to design a tableviewcell with XCode 10 in swift for accessing to documents that are translated into many languages. So what I want is to show the text of the document title and below, a CHIP (material-design) with the flag icon and the capital letters of the language.
I have made a sketch to show that:
https://i.imgur.com/fnS5Szn.jpg (i can not post images yet)
I read the information in the webpage for the material design, specifically the section for CHIPS in iOS: https://material.io/develop/ios/components/chips/
But all the information is in Objective-C, not in swift, and I have no idea of what they explain.
I have also take a look at cosmicmind material framework because it says in the readme file that one of the features is CHIPS, however I havent been able to find the example for CHIPS in the samples section.
Hope you can help me to design the cell.
Thanks in advance.
Well, I think I have solved the problem myself by using a collectionview embedded in the tableviewcell.
Within the storyboard, in the tableviewcontroller, add a prototype cell, give the height that you want, add a label with the "document title" and add a collectionview.
Add a prototype cell to the collectionview, give it the size you want, add a background, the flag icon and the language capital letters and that's all.
Drag and drop the outlets of the collectionview and the tableview, and set the tableview as the delegate for the collectionview... and you are done.
To make it look like an Android chip you should round the corners by adding in the tableviewcell, at "cellforrowat":
cell.chipBackground.layer.cornerRadius = 20
And then it will look like in Android.
I leave a snapshot of the result:
document list with different languages
Related
I have a question. I am trying to create an expandable FAQ menu without using a tableviewcontroller. The reason I don't want to use a tableview is because I don't want expandable cells, rather, I want a buttonclick to reveal a label while also sliding down any other buttons on this page.
I'm using Swift in Xcode 7.3
If anyone has any suggestions/knows of a tutorial/a forum post, it would be greatly appreciated.
Thank You.
Sure,nyou could use buttons, and either change constraints on label heights or dynamically add labels. That's a lot of effort and code.
Or, you could use a table view and one of the myriad guides. Remember that table views don't have to be selectable on ever row, and they don't have to display row separator lines (UI).
Indeed you could disable selection on all rows and add buttons to some rows, though I'd personally say that's overkill and why require the user to be 100% accurate with the tap on a button which in your sample image doesn't even look like a button.
I have noticed that in some apps they use what appears to be the the native display screen for a contact, it shows the contact photo, name, phone numbers and options to text message and add to favourites.
But it also will have some customized fields in it also like missed calls or some other non native contact information,
Here is an example screen shot taken from the Viber application:
I am quite new to iPhone development and I was wondering if this screen is made available to developers so that a contacts information can be presented from within an application with custom fields or if it is not and has to be developed from scratch?
EDIT:
Thanks for the help, with it I have successfully recreated the screen in a static manner, I have one more question and that is how would I make the cell that has the outgoing calls in it react to dymanic data?
So for instance there could be 10 calls there, so how do I adjust the size of the cell on the fly? And also whats the best object to use to allow the calls to be displayed? At the moment I'm using a UITextView to display the static data but I dont think this will work for dynamic data?
I think the developer made this screen there self, it just an UITableView with some custom UITableViewcells.
You can use the UITableView haderView property to insert the the top view with the image.
The just add sections for all the white cells, make use the the tableview style is set to grouped.
The screenshot is probably showing a custom UI that is made to look similar to the standard one.
You can get a similar interface with some limited customization options with the ABPersonViewController class (in the AddressBookUI framework). It basically takes an address book entry (ABPerson, you can also create this from scratch) and allows you to specify which properties (phone numbers, email addresses...) to show.
You can also customize what happens when you tap on a property by implementing the personViewController:shouldPerformDefaultActionForPerson:property:identifier: method in the view controller's delegate.
The above screen can be created by using UITableView. Since u're new to iPhone..I would suggest you to first go through some basics.
For UITableView, Here's the Link..
UITableView Class Reference
Also look for UITableView Cell Formatting in google.
Hope dat helps... :)
happy coding
I am very new to iphone application development and am struggling to create a table view page where each row contains a left-aligned label with an editable text next to it - just like how it works in the email account details page in the settings application on my iphone.
I have been googling the subject for hours and it is now somehow clear to me that I need to add UITextFields to UITableViewCells, but it is still not at all clear to me how I make these text fields take up the right amount of space:
How do I make the text fields align above each other?
How do I make the text fields expand as far as possible to the right?
How do I prevent the text fields from hiding part of the left-aligned label?
Read the Apple Docs on Tableviews there are a number of predefined table cells. Also look at the Tableview programming Guide. Pick the one that has the font characteristics that you want and Apple will take care of it for you. Also, in the Settings app, the settings are a Grouped style.
For the look you are describing I think it is called UITableViewCellStyleSubtitle.
You need custom UITableViewCells and there are a number of ways of making them. For your purposes, any one of the techniques detailed in the Apple documentation will probably suffice.
An alternative to those approaches is in GSUtils (full disclosure: open-source library written by me), where you can use the same approach to designing your table view cells as you would design a UIView.
This question already has answers here:
How to create a UITableView with editable components?
(2 answers)
Closed 3 years ago.
I need to present the user with a screen with controls (i.e. a dialog). It will display some labels and different types of controls so that the user can do some configuration:
select a color (custom color picker)
select a line width (slider)
select one value from a list of values (UISegmentedControl?)
enable / disable one option (On/Off)
...
I am evaluating different alternatives:
Create the layout with labels and controls in InterfaceBuilder
Use a UITableView, so that each cell contains a label and its control
I like option 2 because it is similar to iPhone Settings app, and it makes the screen look organized, giving you sections, scroll..., but it is a real pain to create in code all different cell layouts, taking into account each row heights...
The solution has to be easiliy maintainable, allowing easy reuse of code, DRY (low repetition), data-driven...
Is there a recommended or standard aproach to do this?
Instead of implementing it yourself you might also like to consider some of the open source solutions. I use InAppSettingsKit in my app. There are a few minor UI glitches but it works well. I also evaluated mySettings (indeed I submitted a couple of patches) and InAppSettings.
Even if you don't use them, you might be able to crib a few ideas from them.
You can create the tableview cells in IB and then just create IBOutlets to each cell, and then return each cell in the data source method (forgotten the exact name of it, its where you normally create cells)
You could create a cell in IB for each cell or create different types of cells in IB, say one slider based cell, etc and programmatically change the text, etc.
This is staticly creating a tableview, theres an Apple guide on it somewhere.
you said it. use a UITableView and create custom UITableViewCells (probably in Interface Builder!) and add these in.
Also, as far as selecting a value from a list of values.. a drill in UITableView (embed the root UITableView in a navigation controller) with all the options and then a checkmark is probably advisable (this is how most apps handle this behavior). The On/Off button is more suited for UISegmentedControl.
There are great examples of this in this book.
Good luck.
I'm exploring the iPhone SDK and want to create and use a UI component like the figure below. A rounded table with cells in which each cell can have some label text, maybe an input text field and an action button that would take it to the next screen. The table should not be screen filling.
But... I can't figure out how to do it or find example code. The 'Table View' always seems to result in a screen filling table and although the 'Table View Cell' looks like what I need I can't find any good examples. I'm sure it's all not that hard, but I just can't find it. Any tips, pointers are appreciated.
(This figure is just an example of the sort of UI component I'm looking for, I'm not build something related to flight tracking...)
Table like component http://gerodt.homeip.net/table_ui_component.png
Gero
Try looking at the "5_CustomTableViewCell" project of the TableViewSuite code sample from Apple. It should how to create custom subclasses of UITableViewCell.
The short answer is, as alluded to above, you'll want to subclass UITableViewCell and add your custom UI elements to it. For the example you provided, you'd want two different types of cells; one with a label (in light blue) and content (in black) for 4 of your cells, and then a more complex one with additional text on the right.
You want a Grouped style table, which has sections with rounded elements as you lay out instead of filling the screen.
You also want custom table cells, which you can search here to find example code for.
As mentioned by other answers, what you want is a grouped TableView with custom UITableViewCells. Take a look at the Table View Programming Guide, in particular this section on table view creation and this section on custom cells.