Is it possible to set up UISwitches and UISliders vertically rather than horizontally?
As like Caleb said, it may violate the guideline.But am not sure about that.
If you really want to change the here is a sample ,
urSlider.transform=CGAffineTransformRotate(urSlider.transform,270.0/180*M_PI);
The above code will change the slider position from horizontal to vertical.Same like this you can do for UISwitch.
I am looking to do the same. From the Apple Developer Site iOS UI Element Usage Guidelines:
Slider
Appearance and Behavior
A slider consists of a track and a thumb (a circular control that the user can slide) and optional images that convey the meaning of the right and left values. When people drag the thumb along the slider, the value or process is updated continuously and is displayed in the track.
Guidelines
Use a slider to give users fine-grained control over values they can choose or the operation of the current process.
If appropriate, customize the appearance of a slider. For example, you can do any of the following:
Display a slider either horizontally or vertically.
Set the width of a slider to fit in with the UI of your app.
Define the appearance of the thumb, so that users can see at a glance whether the slider is active.
Supply images to appear at both ends of the slider to help users understand what the slider does.Typically, these custom images correspond to the minimum and maximum values of the value range that the slider controls. A slider that controls font size, for example, could display a very small character at the minimum end and a very large character at the maximum end.
Define a different appearance for the track, depending on which side of the thumb it is on and which state the control is in.
There do not seem to be prohibitions against changing switches, steppers, and segmented controls. However, permission does not appear to be explicitly granted for those controls.
While it's not a good idea to modify the standard iOS controls like UISlider or UISwitch, it's very easy to write your own custom UIControl. See Mike Ash's "Diagonal Slider" post
I just tried to use UISlider vertically with a CGAffineTransformation (Set to 90 degrees).. But it doesn't work. It works until 45 degrees. So my guess is UISlider is not made to detect vertical finger slide movement.
To make a slider Vertically try this
UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(200, 270, 160, 30)];
CGAffineTransform sliderRotation = CGAffineTransformIdentity;
sliderRotation = CGAffineTransformRotate(sliderRotation,-(M_PI / 2));
slider.transform = sliderRotation;
[self.view addSubview:slider];
Those controls don't have a built-in vertical orientation option. It's possible that you could rotate them simply by applying an appropriate transform, but it's probably not a good plan if you hope to distribute your app through the app store. See section 10.3 of the App Store Review Guidelines, which tells you that you risk rejection for misusing standard controls.
Related
A designer I'm working with wants to have a UIImageView be at a specific y position, with a specific width/height depending on the iphone size. I've done research and I haven't been able to find anything online that allows me to do so with constraints on the story board. I want to avoid having to use code because throughout the rest of the app there are a lot of similar situations. In the past I've made different storyboards for each phone size to accommodate for the specificity our clients request, but I want to avoid doing this because it feels like bad practice. Is this even possible?
This can be completely handled in the Interface Builder. Follow the steps below.
1) Add your UIImageView to the ViewController
2) Set constraints for Width, Height, Vertically Align and Horizontally Align
3) You can adjust the Y position in the Size Inspector of the view.
4) Now switch to Assistant Editor and choose 'Preview' and add different screen sizes to see the auto layout in action.
All of this will set a static image size of 250x200, horizontally centered, and vertically at 1/4 of the screen height.
Little-known capability of constraints are that you can set view positions, or in your case sizes, by way of ratios against other views.
With just your image view selected, the tie-fighter :) constraints button lets you specify absolute positions & sizes: do that to set your desired y-position. But then select both your image view and its enclosing parent view, then the pop up for that same button now enables the equal height/width buttons. Add those constraints and then edit the constraint to change the 1:1 ratio to whatever ratio you need.
Excuse my lack of screenshots, posting from my phone.
I'm trying to build a custom, reusable UIScrollView that can be added to multiple views. The scroll view is going to be a weight picker. For the life of me, I can't find a decent example for how to implement this neatly or cleanly.
I would love for someone to point me to an existing library or tutorial that shows me how to do this. I've hacked apart a few examples, but so far, nothing is very good or reusable. Please help!!
For what it's worth, I have an image that individual ticks for the weight. So I can select to the tenth of the number (e.g. 160.4). The image has the first tick bold and larger than the remaining 9. I'd like to have the weight/number centered over the large tick. I'll update the points to my label/datasource after scrolling stops.
UPDATE
I need to make this. I have the custom font, background, and ticker image.
I would not do this through an UIScrollView. I think it would be more complex and you would certainly end up having issues when trying to add you custom picker into another scroll view.
What I would do is:
building the picker view by means of a series of CALayers, each one representing a "building block" of your picker view; see attached image:
each building block would represent a specific value by mixing a UILabel (the text) and an image;
use a pan gesture recognizer, or alternatively define touchesBegin/Moved/Ended method to deal with panning;
when a pan is done, you displace the view content to the left or right according to the panning;
when panning, you also add new building blocks to the left or right end of the picker to account for empty areas that would be revealed by the displacement done at point 4.
I think that having a look at another kind of custom control source code would be of great help to you. You would not possibly find your custom picker already implemented, but could get some guidance. Have a look then at cocoa controls.
Hope this helps.
If I were going to implement this, I would create a really wide image that had every weight on it I'd ever need - I would probably create this in code when the app started up. This image is then used as the contentView of your picker. You get all the scrolling features "for free", and you could even update the values shown in the other parts of the view during scrolling (or dragging.
The scrollView is just the area with the tick marks and weight numbers, and resides in a subview above the background, but below the centered vertical line that shows the actual weight.
EDIT: on second thought, forget the image. If you have the code to draw the image, you can do the drawing in a custom UIView. So you get the draw rect, you know the contentOffset, so you can draw just what you need.
I am trying to created a vertical menu (on the left side of the screen) which I can display and hide using a gesture recognizer.
I have found a post similar to this which helped slightly, but all it did was rotate the UIToolBar to a vertical position without changing the width or position.
If anyone has succesfully created something similar to this and is willing to help I would greatly appreciate it!
Also, if anyone can point me in the right direction possibly to some sample code I would like that as well.
You could do this with a UIToolBar by applying a 90 degree rotation transform, and then having all your icons rotated 90 degrees to match - you can change the width and position simply by adjusting the UIToolBar frame. However, you will need to create your own toolbar to do this rather than using the built-in one you get with a navigation controller.
Another option is simply to roll it yourself: this will allow you more customisation, so is perhaps the better option. There are a number of third-party implementations of varying types, some based off the current Facebook App side-bar, a good place to start looking is http://cocoacontrols.com - they are of varying quality.
On the other hand, it wouldn't be too difficult to roll your own, so that's a good option to consider.
As you can probably tell from my last few questions, I am working on a screen that allows users to edit labels. Pages and all the other lovely apps have glorious resizing handles to show what label is currently being edited.
I am trying to get some feedback on the best way to do this. Is it possible to add an 'dot' image to the centre of all the edges of the label? Is it possible to change the background colour only in sections of a label?
Or should I add an image on top of the label and disable it? The most important feature is for only the uilabel to respond to touches. If I overlay an image, I want it to ignore the touch and hand it off to the label.
Any feedback appreciated!
Cheers Guys!
You will find as many opinions on this as there are programmers. There is not built-in decoration for a view that shows the dot in the middle of each side. But you can add that easily enough. One way is instantiate four instances of an image with the dot and add them as subviews of the view you are decorating. you can then set the center of each dot on the center of each edge in the parent view. As long as clipping is turned off in the parent view, these will show up (if they are not hidden) even if they extend outside the frame of the parent view.
I don't understand what you want to accomplish by changing the background color in sections of the label view, but I this probably has some moderate complexity to it.
You can also to this with core graphics. I'll stop there, though. There are literally many ways to do what you are trying to do.
I have custom slider that I use the following touch event to respond to:
[bSlider addTarget:self action:#selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
I find it very difficult to use, it does not respond to touches about 50% of the time. Compared to the volume slider with the music player that works great every time you touch it. Are there any secrets to creating a slider in code that will make it more responsive?
I had the same problem with my custom UISlider and solved it by using a larger "thumb" image with transparency around the outside.
I also had problems with my callback function running slowly and causing the slider to be very laggy and clumsy to use, which I fixed by adding a simple check at the top of the function:
int val = ceil(sliderView.value);
if (val == _lastSliderVal) return;
_lastSliderVal = val;
// .. code to update various display elements based on slider value
After changing both of these, the slider works beautifully.
The problem is the event you are tracking. UIControlEventTouchUpInside means that your -start method will only get called if you lift your finger up while it is still in the bounds of the control, something that's not easy to do on a slider.
What you probably want is UIControlEventTouchUpOutside and/or UIControlEventTouchDragExit, which will call -start either when you lift your finger outside of the control's bounds, or when your finger is dragged from within a control to outside its bounds, respectively.
See the UIControl reference for more info.
Well I tried several things including the suggestions above but never got my slider to work as well as the iPhone volume slider in the music app. The only thing that helped was to add a clear background around the button image to make the touch space larger. That created problems getting the button to slide all the way to the bottom and top of slider that I never completely resolved. Now with OS 3.0 is seems to be working much better.