I want to have chat bubbles with a custom bubble image to be used to display chat messages.
As a beginner, I am thinking of having a UITableView with custom cells. The cell will have bubble image. And within that image, I want to have chat message, date&time and status.
Also, the size of bubble image will shrink or expand depending on message size.
How do I achieve this?
Is there any good tutorial to achieve this?
Please help.
Thanks in advance.
I would highly advise this library:
http://www.cocoacontrols.com/platforms/ios/controls/stbubbletableviewcell
I think it will suit your needs.
You can of course have a structure but the it will be quite odd because the size of table will be according to size of biggest cell , also the size of table will have to be defined during allocation so what you will be doing is placing an image according to the size of text and it will be quite odd as rest of cell will be simple white.
Now . You will have to implement the logic to change the size of image in layoutSubviews Method of UITableViewCell as You can get the size of text from the chat message using sizeWithFont method of NSString PLease see String size in label
and then you will have to set the frame of each cell or image in the delegate method of uitableview "- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath "
You can add as many labels as required in custom UITableViewcell (or controls).
Custom cell Tutorial
Alternatively you can create a custom view where in you can define methods to add subviews with the image as background cropped to match the size of message , below each message and create an array of strings or dictionary of string to keep a track of messages from different users.
check this - http://idevrecipes.com/2010/12/08/stretchable-images-and-buttons/ - and use the same method, but your image in custom table cell will be stretchable vertically - with some cap in the middle.. and then add this uiimage as a background to the cell
Related
I customized UITableView for two columns that have different background colors with background images.
I used three images, first image is top cell bg, second is middle cell bg and third is bottom cell bg for round border.
But the text contents in column can be multiline, and table must have round rect border.
See example image.
I tried customize cell for that. But first and round cells does not have rounded border.
See customized cell image. (It does not have rounded border.)
How can i customize UITableViewCell for implement like that image without using multiple background images?
Create Custom UITableViewCell and Make as Your wish and change size and use label for text.
You can simply use custom UITableViewCell
Check this tutorial:
http://www.appcoda.com/customize-table-view-cells-for-uitableview/
Hey please look at below scenario for more information.
check this screenshot.
And code style as like.
Two Imageview and two UIlabels are inside of every cell.
So need to create one custom cell and add in UITableView,
Please take a look on this Custom cell helpful link : Blog Link
Let me know if you need any more information relates to code.
You can create a custom class extending class UITableViewCell. Insert two image views in them using the required frame. Make them a property and then assign them the intended image or background color in method cellForRowAtIndexpath:.
If you require to give only different background colors and not image then no need to use UIImageView. A simple UIView will also do the task
ok, I've read tons of bits and pieces on the subject of loading dynamic content (from the web) into a UITableView and the problem with calculating cell height upfront. I've tried different simple implementations but the problem persists...
Assuming I need to read a JSON file from the web, parse it into 'item' objects, each with variable size image and various text labels, here is what I believe would be the right approach to avoid long hang time of the app while everything is loading:
on app load read JSON file and parse into items array
provide only small part of the items array to the tableview (about 10 items) - since I need to load the images associated with each item to calculate cell height - I don't want the view to go through the whole items list and load all images - this hangs the app until every image is loaded
display the tableview with the available cells (assuming I load a few 'spare' ones, user can even scroll to more items)
in the background using Grand Central Dispatch download images for all/some of the remaining items and then reload the tableview with the new data (repeat step 4 if item list is very long)
Step 2 above is necessary since I have no way to calculate the cell height without loading the images first, and since tableview first calculates height of all cells it may take a very long time to download all images for all items.
Would you say this is the right approach? am I missing something?
Why don't you standardize in the tableview the image size. Then you can manipulate the images as they are displayed to fit the size. Offer a way to view the image if selected. The Quartzcore framework will allow you to take your original images and size them.
I only suggest this because it would make your tableview look more appealing with uniform picture sizes than with random ones.
You're right that the show must go on, even while your data is still loading. So you'll want to design a cell that looks attractive before it has the correct image. A common approach is to ship a default image and format the cell so that looks good.
To handle the height, the tableView datasource protocol can ask you how tall a cell should be. The way to answer is, in pseudo code:
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
id myModelElement = [self.myModel objectAtIndex:indexPath.row];
UIImage *image = myModelElement.image;
if (!image) image = self.placeholderImage;
return kFIXED_HEIGHT + image.size.height;
}
You're also correct that you'll want to load the images asynchronously. See my answer here for a very simple approach to that. No GCD, not even a table row reload.
I'm using aqgridview to create a book-shelf like UI.
I can place image and title for image fine (with the ImageDemo example provided in aqgridview).
I want to place 'shelf' image where the image title is. (as in http://itunes.apple.com/ca/app/rivet-for-ipad/id375055319?mt=8)
I can set the background color of the label for title but the shelf background image won't be there where there's no cell in the first place.
Hence shelf image doesn't cover the entire screen width.
How can I stretch the shelf image?
Thank you
i'm also using AQGridView for a book grid with shelves, i found the best and fastest way to do this is simply use a UITableView.
Create a UITableView and add the shelves images as rows (Configure UITableViewCell)
Set the AQGridView backgroundView to the UITableView
_gridView.backgroundView = _tableView
you can use
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
to use different shelf graphics for different shelfes
but i'm guessing you already found way by now.
I am display some long text in a cell, and resizing the height of the cell using heightForRowAtIndexPath. However, when the text is displayed it is running into the area used by the (blank) disclosure indicator.
When such a row is selected, and the checkmark is displayed, the text reformats itself to not use the indicator area, causing a visual effect I do not want.
If there was a UITableViewCellAccessoryBlank accessory type (rather than UITableViewCellAccessoryNone), maybe the text wouldn't wrap into that area when displaying. Am I going to have to create a custom cell and layout my own label, or is there a simpler way?
First of all, I don't see a property call UITableViewCellAccessoryBlank in the UITableView Cell class reference so I don't think this will work.
I think you have 2 options :
Create a custom cell, like you suggest.
Configure the textLabel of your cell to change his contentMode.
I read this in UILabel class reference :
The default content mode of the
UILabel class is
UIViewContentModeRedraw. This mode
causes the view to redraw its contents
every time its bounding rectangle
changes. You can change this mode by
modifying the inherited contentMode
property of the class.
I suppose that the textLabel bounds change every time you change the accessory type, so by default it redraw himself.
You can try this in your - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath method :
cell.textLabel.contentMode = UiViewSomeContentMode;
Content mode list can be found here. I'm not sure which one you should use so I let you try.
EDIT
It seems that contentMode is not working. So you should use a custom UITableViewCell to prevent any animation when adding an accessoryView.
Hope this helps !
I would like to do a design similar to iPhone outbox.
It displays 3 lines of text in a single column. The first line is large and bold, the second line is of normal size and font and third one is grey color.
Also a time is displayed in the first line with a different font color.
I know to create a two line display using subtitle cell type but i am not sure how the outbox design is achieved.
Have they used a custom view with different labels and put that view inside the cell?
Thanks
You are on the right track. Create three custom labels and add them as subview to the cell.
You can either do that directly in your
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
or by subclassing UITableViewCell. Alternatively, you can design your custom cell in Interface Builder.