Discussion Forums  >  Plugins, Customizing, Source Code

Replies: 13    Views: 432

Crown Solutions
Aspiring developer
Profile
Posts: 463
Reg: Nov 11, 2011
MN
13,480
07/12/12 03:55 PM (13 years ago)

Circle View UITableView Mod

So I have been hacking away at the menu screens trying to modify them to understand better how they work and I found a very cool modification to a UITableView (menu list) but I do not know how to implement the code. Has anyone tried anything like this? Here is the link to the source (and a video of how it works) - http://MobileDeveloperTips.com/open-source/circular-tableview-trick.html I have downloaded the source code for the CircleView app and have started looking at it closer, but I can't figure out how to tie the code to a table I have already created in my menuListSimple.m file. I tried just pasting in the code and renaming the table to match my plugin, but that did not work. I am going to keep hammering away at this, but if someone who has worked with tables in more depth has any suggestions, I would love to hear them.
 
MGoBlue
Apple Fan
Profile
Posts: 980
Reg: Jun 07, 2011
Gold River, CA
10,600
like
07/12/12 04:37 PM (13 years ago)
That is a very cool find. I'll have to give it a shot and see if I can make it work. I'll report back. Thanks!
 
Fred@mySkylla com
Android Fan
Profile
Posts: 5259
Reg: Oct 03, 2011
location unknow...
62,560
like
07/12/12 05:50 PM (13 years ago)
Very interesting. Fred
 
XboxMods
buzztouch Evangelist
Profile
Posts: 718
Reg: Oct 28, 2011
location unknow...
12,080
like
07/12/12 05:57 PM (13 years ago)
Looks very cool, will try to implement it as well. Raoul
 
Dkeller
Aspiring developer
Profile
Posts: 153
Reg: Aug 18, 2011
Saint Augustine
3,680
like
07/12/12 06:54 PM (13 years ago)
Very interested @MGoBlue! This looks like a really cool concept!!
 
Crown Solutions
Aspiring developer
Profile
Posts: 463
Reg: Nov 11, 2011
MN
13,480
like
07/12/12 07:12 PM (13 years ago)
Getting lots of errors with this. I will keep at it. Let me know how it goes MGoBlue. I also think this one has some potential, basing it off of the button list- http://MobileDeveloperTips.com/open-source/ios-open-source-animated-menu.html
 
MGoBlue
Apple Fan
Profile
Posts: 980
Reg: Jun 07, 2011
Gold River, CA
10,600
like
07/12/12 07:17 PM (13 years ago)
Delete. Posted in wrong thread.
 
MGoBlue
Apple Fan
Profile
Posts: 980
Reg: Jun 07, 2011
Gold River, CA
10,600
like
07/12/12 07:18 PM (13 years ago)
Sorry. Posted in the wrong thread. Problem when reading with my iPhone.
 
Mackimack
Apple Fan
Profile
Posts: 481
Reg: Dec 30, 2010
Sweden
14,310
like
07/12/12 11:25 PM (13 years ago)
Nice find!!
 
ATRAIN53
Code is Art
Profile
Posts: 1755
Reg: Nov 17, 2011
Chicago
26,450
like
07/13/12 06:40 AM (13 years ago)
very nice. I was just making some custom buttons that look just like those and using them on a horizontal slide- This looks very interesting. Not the effect i want in that app, but i can see where this would work in some other ones. I'm looking at the BBViewController.m now and I would be thinking Custom plug-in for 2.0. You could copy/paste most of that code right in a custom plug-in screen. the @implementation BBViewController tells me it's been subclassed and that's the better way to implement code like this anyways. look at the -(void)loadDataSource that is the key. it's pulling from a plist array in the NSBundle (the data.plistt file) You would have to add that plist to your project as that's how the table is polulated in that code. making this work with existing BT menus *could* be possible, i'd have to look at the menu code much closer menu- but doing that will/would afeect all the instances of that type of menu in the app. that's why this project looks to be better suited for a plug-in IMO.
 
Crown Solutions
Aspiring developer
Profile
Posts: 463
Reg: Nov 11, 2011
MN
13,480
like
07/19/12 07:34 PM (13 years ago)
OK, I finally had a chance to look at this again, ATRAIN53 I completely agree this should be a plugin, and not a complete change, so you can integrate it as you wanted. After wracking my brain on how to do this, I stepped back and took a simpler approach. I simply commented out the normal code that builds the UITableView and pasted in the needed code from the other source code. I had to make a few simple mods to references, and now it works. Kind of. I can build the lists in the control panel, but It is constantly looking for the JSON data to populate the cells. (constant spinning wheel) so I can see the cells, and they move like I want, but won't populate correctly. I have to imagine this is an easy fix, but I haven't found it yet. I had to comment out the way the original source code pulled the data because they used a plist to populate, as was stated earlier, I will see if I can pull the back out of the original view. I wanted to post what I have so far, so other can play with it also. Hopefully we can get this working and package it as a plugin. Let me know if you have ideas on populating the cells. I will try and paste what I did here- ***Only file modified was BT_screen_MenuListSimple.m*** /*comment out original table view //table view cells - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { NSString *CellIdentifier = [NSString stringWithFormat:@"cell_%i", indexPath.row]; BT_cell_menuList *cell = (BT_cell_menuList *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier]; if (cell == nil){ //init our custom cell cell = [[[BT_cell_menuList alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease]; cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; } //this menu item BT_item *thisMenuItemData = [self.menuItems objectAtIndex:indexPath.row]; [cell setTheMenuItemData:thisMenuItemData]; [cell setTheParentMenuScreenData:[self screenData]]; [cell configureCell]; //custom background view. Must be done here so we can retain the "round" corners if this is a round table //this method refers to this screen's "listRowBackgroundColor" and it's position in the tap. Top and //bottom rows may need to be rounded if this is screen uses "listStyle":"round" [cell setBackgroundView:[BT_viewUtilities getCellBackgroundForListRow:[self screenData]:indexPath:[self.menuItems count]]]; //return return cell; }*/ //add table mod here // Row display. Implementers should *always* try to reuse cells by setting each cell's reuseIdentifier and querying for available reusable cells with dequeueReusableCellWithIdentifier: // Cell gets various attributes set automatically based on table (separators) and data source (accessory views, editing controls) - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *test = @"table"; BT_cell_menuList *cell = (BT_cell_menuList*)[tableView dequeueReusableCellWithIdentifier:test]; if( !cell ) { cell = [[BT_cell_menuList alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:test]; } //commented out data pull from origional source //NSDictionary *info = [mDataSource objectAtIndex:indexPath.row]; //[cell setCellTitle:[info objectForKey:KEY_TITLE]]; //[cell setIcon:[info objectForKey:KEY_IMAGE]]; return cell; } #define HORIZONTAL_RADIUS_RATIO .8 #define VERTICAL_RADIUS_RATIO 1.2 #define HORIZONTAL_TRANSLATION -120.0; -(float)getDistanceRatio { return (UIDeviceOrientationIsLandscape([[UIDevice currentDevice] orientation]) ? VERTICAL_RADIUS_RATIO : HORIZONTAL_RADIUS_RATIO); } -(void)scrollViewDidScroll:(UIScrollView *)scrollView { [self setupShapeFormationInVisibleCells]; } -(void)setupShapeFormationInVisibleCells { //changed mtableView - to myTableView in all ref NSArray *indexpaths = [myTableView indexPathsForVisibleRows]; float shift = ((int)myTableView.contentOffset.y % (int)myTableView.rowHeight); int totalVisibleCells =[indexpaths count]; float y = 0.0; float radius = myTableView.frame.size.height/2.0f; float xRadius = radius; for( NSUInteger index =0; index < totalVisibleCells; index++ ) { BT_cell_menuList *cell = (BT_cell_menuList*)[myTableView cellForRowAtIndexPath:[ indexpaths objectAtIndex:index]]; CGRect frame = cell.frame; //we get the yPoint on the circle of this Cell y = (radius-(index*myTableView.rowHeight) );//ideal yPoint if the scroll offset is zero y+=shift;//add the scroll offset //We can find the x Point by finding the Angle from the Ellipse Equation of finding y //i.e. Y= vertical_radius * sin(t ) // t= asin(Y / vertical_radius) or asin = sin inverse float angle = asinf(y/(radius)); //Apply Angle in X point of Ellipse equation //i.e. X = horizontal_radius * cos( t ) //here horizontal_radius would be some percentage off the vertical radius. percentage is defined by HORIZONTAL_RADIUS_RATIO //HORIZONTAL_RADIUS_RATIO of 1 is equal to circle float x = (floorf(xRadius*[self getDistanceRatio])) * cosf(angle ); x = x + HORIZONTAL_TRANSLATION; frame.origin.x = x ; if( !isnan(x)) { cell.frame = frame; } } }
 
Crown Solutions
Aspiring developer
Profile
Posts: 463
Reg: Nov 11, 2011
MN
13,480
like
07/19/12 07:41 PM (13 years ago)
Yep, I added this part back in, and it now populates the data //added this back in from orig code //this menu item BT_item *thisMenuItemData = [self.menuItems objectAtIndex:indexPath.row]; [cell setTheMenuItemData:thisMenuItemData]; [cell setTheParentMenuScreenData:[self screenData]]; [cell configureCell]; I put it right under where I commented out the data pull from the old source code. This still has some tweaking, but it is defiantly getting there.
 
ATRAIN53
Code is Art
Profile
Posts: 1755
Reg: Nov 17, 2011
Chicago
26,450
like
07/20/12 11:49 AM (13 years ago)
Keep going! Sounds like you might be close and on big breakthru - if you're able to populate that table with the BT JSON data. The Screen ID might be part of the missing puzzle. I would still aproach this using the plist to populate the table, but if you figure out how to populate it with the JSON data that is a HUGE breakthru. JSON Data Points are the key to making custom plugins work with the BT Control Panel. Those are really THE MAGIC of BT.
 
Crown Solutions
Aspiring developer
Profile
Posts: 463
Reg: Nov 11, 2011
MN
13,480
like
07/20/12 12:23 PM (13 years ago)
With the second post there it does now populate the table from the control panel. What I still have to fix is when you first open the tableview it has the table set up normally (normal box), but as soon as you try to scroll, it changes to the circle view. So basically the only change to the code was the how it builds the table view. I want to add in the image clipped in a circle like they have in the original project next, as I think it adds a lot to this look. I would like to set it up, so like a plugin it pulls the image ref from the JSON data off the control panel, but I might have to settle with hard coding it first, then trying to figure out the other part. Wish I had more time to focus on this!
 

Login + Screen Name Required to Post

pointerLogin to participate so you can start earning points. Once you're logged in (and have a screen name entered in your profile), you can subscribe to topics, follow users, and start learning how to make apps like the pros.