UIPickerview customisation - iphone

I would like to do some customization of the UIPickerView.
End Goal: have a picker view rotating a few icon sized images.
firstly i would like to change the black/grey boarder surrounding the spindle to a transparent colour. i.e. [UIColor clearColor];
Then shrink the picker view down so it is relatively small, (probably around 40 x 40 pixels) Experimenting with this is IB did not make it seem easy.
Finally change the view returned to the picker for each section. This i think is easy with
pickerView:viewForRow:forComponent:reusingView:
The rest, not sure if it is possible or if i am going to have to delve into some of the core animation/graphics (or find a different way to do what i want).

UIPickerView is not customizable. At all.
You'll have to go custom for what you want.
Perhaps the easiest way would be to mess with an UIScrollView with vertical pagination enabled, and try to get it to act like you want. Maybe overlap an UIImageView with it and wrap the whole thing up in a custom view.

You can also "customize" the outer bezel of the picker by simply placing a UIImageView over the top with a hole cut out for the working parts. Apple does this with the Clock app.

Related

UITableview clipsToBounds

I am creating an iPad view which has a tableview as a subview. The tableview only takes a small portion of the screen and is somewhere near the middle of the screen and it contains some menu items. I want people to be about to scroll this tableview up and down however I do not like how the cells disappear against a hard edge. When I set clipsToBounds to false, I get what I want in that the hard edge is not there anymore but the top/bottom cell disappears when the tableview needs that cell for recycling. Is there a common technique to avoid this hard-edge of when the cells scroll up against the tableview's bounds? I was thinking of adding gradient alpha masks on a parent container view but it seems a bit over the top.
There are no hard and fast rule about this, but you certainly can do whatever you feel best. What I would do in a case of floating tableView is giving it a nice border using layer. It is easy to code (2~3 lines). Round the edge to make it pretty.
If you want to drop shadow, it gets a little more complicated but possible. Just draw a bezier curve path of a rectangle (where you want your shadow to appear). Assign that CALayer shadowPath. Then add it to the table.
You can also gradient an alpha to make it appear shadow like.
But I would suggest, you set clipsToBounds to YES since it looks horrible otherwise, given the fact that the table 'floats' somewhere in your view.

UIScrollView lags on iPhone

I'm trying to create a crossword app. The game runs in a UIScrollView, because the player should be able to zoom, scroll etc. The largest crossword are 21x21 which means there need to be 441 touchable tiles. What i've tried so far were to create an UIView and added it as a subView to the UIScrollView. Then I call a method that creates 441 custom UIButtons and set the backgroundImage.
Some of the UIButtons need to have a custom label overlay, so i added a UILabel and set it on top of the UIButton.
When I run the app in simulator all works as it should, but when i test it on an iPhone 4 the UIScrollView lags a lot.
I don't know if this the way to do it? Can you maybe try to guide me in the right direction of how to do this so the UIScrollView won't lag on a device.
Thanks in advance.
Big UIScrollViews are difficult to make smooth without some sort of caching mechanism, such as the one provided by UITableView.
One thing you can do, however, to make life easier for your rendering, is to make sure to use opaque backgrounds whenever possible. In stead of making a view transparent you should make it the same color as its underlying view. This is something that does help.
Also, I have experienced better performance using imageWithContentsOfFile: in stead of imageNamed: for initializing images to be used in a UIScrollView.
In order to not keep all those buttons in memory, you should work with reusable table view cells, this will really improve the scroll performance. Here's one component that could make your life easier: DTGridView, there are also others (you can check Cocoa Controls)

Correct approach for implementing vertical scrolling with UIScrollView

I know that I asked a question a few minutes ago, but I want to make a few points clearer before asking for the community's help. I'm new to iOS development, close to finishing my first app. The only thing standing in my way is this UIScrollView. I simply do not understand it, and could use your help.
This is in the detail view controller of a drill-down app with a tab bar. I have approximately 8 fields (for things like phone numbers and such) drawing from a .plist. Obviously, those take up enough room that I could use a little extra real estate. I would guess that it needs to be about the size of two views vertically, but I do not understand how to allocate that sort of space to a UIScrollView. Some tutorials I have read say that you don't even need to define it in the header, which I doubt and do not understand. Additionally, I do not understand how to simply get the app to smoothly scroll up-and down only. Apple's examples have constant move cycles that flip between horizontal pictures.
I doubt it makes very much a difference, but I have an image that is in the background. I'm going to load the view on top of that.
My question is broad, so I don't expect you to take the time to sit down and write out all of the code for me (and I wouldn't ask you to). Just an outline of quick, helpful tips would help me understand how to get this view to load in the context of my project.
Many thanks!
It's fairly simple. Add a UIScrollView to your view. Add your fields and such to the scrollview. In viewDidLoad or somewhere similar, you need to set the contentSize on your scrollview. This is the "virtual" area that will be scrollable. This will generally be larger than the frame of the scrollview. In your case, you indicated it should be roughly double the width.
For instance, if you had a scrollview with a view inside, and you wanted to make sure the entire view is visible via scrolling:
self.scrollView.contentSize = self.contentView.frame.size;
//setting scrollview zoom level
self._scrollview.minimumZoomScale=0.5;
self._scrollview.maximumZoomScale=6.0;
self._scrollview.contentSize=CGSizeMake(320,500 );
you have to outlet scroll view in .h class and #property #synthesis this scroll view.then you can able to scroll up and down,if u want only vertical scrolling ,then u have to go to interface builder and uncheck the horizontal scrolling.
You can set a few settings for your scrollview to limit the scrolling to horizontal or vertical. A few important ones are:
// pseudcode here, start typing "[scrollView " then press escape to get a intelli-sense of all // the things you can set for the scrollview.
// values could be YES/NO or TRUE/FALSE, I can't remember which one but
// I think it's YES/NO. Once you start scrolling, the phone will determine
// which way you're scrolling then lock it to that direction
[scrollView setDirectionalLockEnabled:YES];
// when you slide the view, if enough of the next part of the view is visible,
// the scrollview will snap or bounce the scrollview to fit this new "page".
// think of swiping feature to navigate the iPhone home screens
// to show different "pages" of iphone apps
[scrollView setPagingEnabled:YES];
// as a safe guard, make sure the width of your scrollview fits snuggly with the content
// it is trying to display. If the width is more than necessary to display your table of
// data vertically, sometimes the scrollview will cause the
// horizontal scrolling that you don't want to happen and you get bi-directional scrolling
Just set the content size of UIScrollView after adding all the controls/button/textfields etc. for example you add 10 textfields in UIScrollview then content size of UIScrollView will be
lastTextField.frame.origin.y+lastTextField.frame.size.height+20; 20 is for margin.
That's it let me know if you want to know something more related to your app.

How can I specify where I want my UI elements to go on orientation change in Interface Builder?

Ok so I know this is a bit of a newbie question, but being that I am a newbie its ok! I have a view that I am trying to make orientation friendly in IB, and I am having some difficulties.
I have everything looking nice in portrait of course, but then when I go to landscape mode (by hitting that arrow in the top-right corner) everything gets all messed up.
Now, because of the way the view is laid out, I need to align 3 buttons along the bottom of an image view in portrait, and then in landscape, those three buttons need to be symmetrically aligned along the right side.
No combination of fiddling with those red arrows in the size inspector are rewarding me the results I am seeking. Is it possible to set up the buttons one way in one orientation in IB, and then on change, set them completely different?
I have looked all around for a useful IB tutorial, but haven't been able to find anything.
I know you want to do this in IB, but if you're willing to try it programmatically, then you can move things around pretty easily. For your buttons, just implement the setCenter method like this:
[myButton setCenter:CGPointMake(xCenter,yCenter)];
Otherwise, if you want to use the IB, use the Autosizing options. The arrows will stretch or compress the width and height, and the bars (|-|) preserve distances from the top and bottom. If you have three buttons in a row, you can fix the left distance for the left button, the right distance for the right button and both/neither for the center button. Something like that may work.
The third option is to make a new view, call it landscapeView or something, by dragging a UIView from the library to the window with File's Owner, First Responder, View, etc. Then orient that to landscape, copy over all your UI objects, lay them out as you like, and when you rotate, replace the current view with landscapeView. The problem with this that I've found (one of many) is that you have to reconnect everything and have different IBOutlets for the labels and whatnot. T
Using IB's autosizing features can only do so much. PengOne does a good job of describing them in his second paragraph. If they are not enough, you have to move the elements programmatically. See Responding to Orientation Changes. Otherwise, you can just use a completely different view, again as mentioned by PengOne.

UIBarButtonItem in middle of navbar?

I have created a flexible navigation bar in my app that will show custom buttons on the left, right, and in the middle. So far I have got working:
Right/Left/Middle - Custom Image and/or Text
Right/Left - Normal looking button with custom Image in it
Right/Left - Normal looking button with custom Text in it
By 'normal looking' I mean the default UIBarButtonItemStyle- just a nice shiny button.
My question is, how can I achieve the same look in the MIDDLE of the nav bar? I can do custom/text images by just creating a custom UIButton, and on the right / left I create a UIBarButtonItem from it, but in the middle I just add the UIButton view as a subview of the navbar.
I can't add a UIBarButtonItem to the navbar as a subview, and any UIButton I create doesn't look like a UIBarButtonItem.
The only workaround I can think of is to use a stretchable custom image that I steal from a screenshot. I'd rather avoid doing it this way. Am I missing something?
*********** UPDATE **************
The open source library Three20 will allow you to create UIButtons that look like UIBarButtonItems. Then you can add them to the bar view either by placing manually as a subview or by setting the title view.
I never understood why they didn't make UIBarButtonItems derive from UIViews (or even better, UIButtons) so they could be used elsewhere.
Sounds like you're on the right track, but need better artwork :-) You can get a large number of iPhone UI components in a Photoshop .PSD file from here. They have pre-rendered bar buttons which you can use as a base for a standard UIButton image. If you have Photoshop (or a decent drawing program) you can stretch the buttons from the middle to fit your size without getting the corners distorted. Just add the label and you should be good to go.
Put a flexible region on the left and right, they will offset each other causing anything between them to be centered