Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Two cells in one row in UITableView

I'm trying to build a grouped UITableView cell like the table in user details in Twitter's app (former Tweetie app).

It's a cell with two sides, and you can select any of them separately (and the background turns blue, like a rounded button).

Anyone did something like it or know how they made it?

A screen shot from the view (it's the following, tweets, followers and favorites cells)

alt text

like image 228
Ricardo Augusto Avatar asked Oct 06 '10 20:10

Ricardo Augusto


2 Answers

I was wanting to do the same in my own app, but I was also a bit clueless on how this was done in the Twitter app.

After having a long play with that cell in the Twitter app, trying to break it to see what it'd do (eg, pressing multiple buttons at the same time, scrolling while tapping etc XD), I think I've figured out how it's done.

From what I can see, it's a single UITableViewCell (ie spanning multiple lines) with a special custom contentView added into it that renders everything in there (text, lines etc). When a user taps the cell, the custom view works out which region of the overall cell was tapped (Possible by intercepting touchesBegan in the custom view class), and then redraws that particular region as highlighted (probably entirely within drawRect).

Since if you look VERY closely, the highligthed blue background overlaps the cell curved corner slightly (denoting it's being drawn over the top), my guess is the custom cell is also personally rendering the highlighted blue background (As opposed to the UITableViewCell doing it as per usually).

Hope that helped. It's not a very elegant solution, but it should hopefully do the trick.

like image 146
TiM Avatar answered Nov 16 '22 02:11

TiM


First off.... create a background image that is nothing but a white rectangle with a single grey line down the middle.

Next, subclass a UITableViewCell..... it has two custom style UIButtons. The background is the white image with the line down the middle from earlier.

assign clearColor to the button background image and button image.

Size and place buttons such that button1 and button 2 meet at the single grey line.

In your tableView where you plan to use this custom cell, make it a grouped style tableview.

Go crazy ^_^

like image 34
Sid Avatar answered Nov 16 '22 03:11

Sid