Sorry I'm not sure if I have the terminology correct but I'd like to see the borders of the controls I use in Xcode as I work with them on my storyboard.
For example, I have a UITextView but I'm unable to see how much space it takes up until I click it.
I'm convinced there's an option for it and a google hasn't turned up anything, probably because I'm searching for the wrong thing!
Thanks in advance.
In Xcode, Editor > Canvas > Show Layout Rectangles will draw a red rectangle around each view, and the baseline for views where that makes sense.
You can see the bounds of any view in the screen using this code:
view.layer.borderColor = [UIColor redColor].CGColor;
view.layer.borderWidth = 1.f;
Look you can use this for ANY view you want. Also, you can change the color and border size if you need.
If you can't see the bounds, check out if your view hasn't ambiguously layout or if the frame has defined correctly.
If you do not want to use code to do this you can go into the Interface Builder and click on the desired object and in the Attribute Inspector set the background to any color. This will not give you a border, but rather a filled rectangle over the whole area of the object which will allow you to see the objects bounds.
Related
well am trying to make this UI :
the above UI contains a ProgressView on UITableViewCell and the vertical line is a UIView (if i should use something else then a UIView for this vertical line then please do provide your suggestions ) well am stuck in moving this vertical line ? how can i place this line at the point where the bar is filled as shown in the image , if anybody knows then please let me it'll be so helpful for me
the pseudocode for what i need will be like
verticleLine.xAxisPostion = progressBar.progress.xAxis
Trying to think out of the box here: maybe you could use a UISlider instead with userInteractionEnabled set to false? With UISlider you can specify not only the track color, but also the thumb image (being a tiny plain grey vertical bar in your case).
To expand a little bit: you set the minimumTrackTintColor to green, the maximumTrackTintColor to red (or stretchable images for minimum/maximumTrackImage), minimumValue to 0, maximumValue to 1. Instead of progress you can now use value — and it should give you roughly the same behaviour with the thumb (grey bar) following the value.
the above UI contains a ProgressView
Don't use a UIProgressView. Just create your own self-drawing view that looks exactly the way you want it to. The view that you've designed — green to the left of the progress point, red to the right of the progress point, and a vertical line right at the progress point — is trivial to draw, and trivial to redraw when progress happens (i.e. when the value changes).
I am a beginner and just started learning iOS. I want to achieve this layout, using Swift:
When you drag a text field into your project, there's a number of styling options available in the Utilities bar in Xcode, that can help you style the shape, colour and other properties of your field. To achieve the look you want, you could use something like this:
Place a UITextField and a UIButton on your story board. Then select both items, and then go to Editor, Embed In, stack view. If they are one on top of the other, change the stack view orientation to vertical then they will be side by side as shown above. Next change the attributes of both in the attributes inspector to taste. You can change the attributes manually in code using textField.defaultTextAttrubutes = [ "the look you are going for"], but you should need to in order to recreate your example.
you can add a view container to your view, inside that container .. add a button and a textfield then add positioning constraints on them.
as you can see in the picture .. it illustrates the idea .. you can style it the way you want e.g. change the height of your textfield .. change its border style etc. the same with your button.
example
In order to add a border, you have to enter some specific information in the attributes inspector. Here is a snapshot of what you can use to create border radius if you want one, vary the thickness of the border, and select a color for the border. screenshot of attributes inspectorYou can vary the values to make the radius greater and the width thicker also, plus you can change the color. Pay very close attention to the spelling otherwise this won't work.
In an effort to create a border effect, I would like to pin one label inside another with, say, the following constants:
up - 5
left - 5
right - 5
down - 5
This would give me a 5-point border around the inside label. Is this possible? If so, how do I make this happen? Or is there a better way to create a border around a text label?
For your specific needs, I would suggest using a border on the UILabel itself, by using the following code:
label.layer.borderColor = UIColor.blackColor().CGColor
label.layer.borderWidth = 1
Or Objective-C:
[label layer].borderColor = [[UIColor blackColor] CGColor];
[label layer].borderWidth = 2;
As a response to your comment on the other answer:
When you pin a view to another view in the storyboard, it only creates a view with the parameters it guesses to be what you want. Usually this is correct, but if you need more fine-grained control over what attributes it links, you can select the constraint, and in the inspector change all it's properties (except first and second item):
But I would advise against using a UILabel, just to set a background. If you really need to use a view behind the label, use a simple UIView, so that iOS doesn't have to calculate letter spacing and such and keep information about the label's text. This one instance of a label versus an empty view might not make a difference, but a developer should always aim to use their memory and CPU wisely.
If your application is storyboard based, here is one option you can do. Simple drag in an image and put it behind the label. Just make the image whatever style border you prefer. If you want to put the image in front of the label, make sure to make the middle of the image transparent.
For something as easy as a border you do not need any photo editing software, you could just use something like Microsoft Powerpoint. Good luck, hope this helps!
How can I draw a little triangle above the selected item in a UISegmentedControl? Does anyone know an open-source than extends it?
(if not - pointers of how to do it)
Design should look like (this is in the bottom of the screen)
I don't believe there's a native way to do that. You can either find a library that allows for it, but you can do it yourself fairly easily, which I recommend.
I can think of a few out of the box ways to approach it, here at the two I think worth mentioning off the bat:
1) Use UISegmentedControl with images. Make the segmented controller have a height that includes the triangle, and have an image for selected and normal states that shows what you want. The Normal states would have a rectangle of transparency on top, as wide as the entire image and as tall as the triangle. The selected image would include the triangle. Both images should end up the same width and height.
2) Subclass UISegmentedControl and do some custom drawing in drawRect:. You could draw the triangle outside (above) the bounds of the segmented controller, make sure to set the segmented controller's clipToBounds property to NO, as well as its layer's masksToBounds property.
If you'd like more help, or some other suggestions, just ask.
I have a map. On the map, I'd like to draw small, blurred circle. I've implemented something like this:
UIVisualEffect *visualEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
self.visualEffectView = [[UIVisualEffectView alloc] initWithEffect:visualEffect];
[self addSubview:self.visualEffectView];
and then in layoutSubviews:
[self.visualEffectView setFrame:CGRectMake(0.f, 0.f, 20.f, 20.f];
Now the problem is making this view round. I've tried:
[self.visualEffectView.layer setCornerRadius:10.f];
However nothing happens. Another try was with (basing on SOF question):
CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = [UIBezierPath bezierPathWithOvalInRect:self.visualEffectView.bounds].CGPath;
self.visualEffectView.layer.mask = mask;
But in this case, the visualEffectView is round but doesn't blur :/. Is there any way to make it working?
BTW: I've tried FXBlurView, however it works very slowly, I can't accept my app to load only map + blur for ~1 minute on iPhone 5.
Tryout:
self.visualEffectView.clipsToBounds = YES;
Put this after you set the cornerRadius. This should be it. You can leave out the BezierPath stuff. Hope this helps :)
EDIT:
I just tried something similar in my own project. And a good way to keep the blur with round corners, is simply to put the visual effect view as a child of a new view with the same frame as your visual effect view. You can now just set the corner radius of this new parent UIView object and set its clipsToBounds property to YES. It then automatically gives its subviews the corner radius, as it clips to its bounds.
Give it a try, it works in my case.
I figured this out if anyone wants to know how to do it, no code needed:
Create a view and set its background to "Clear Color" in the Attribute editor (it MUST be clear color not default.
Drag another view on top of the first view, size it to the size you want your Visual Effect view to be, and in the Attribute editor set its background to "Clear Color", and check "Clip Subviews".
Also on this view, go to the identity inspector and under "User Defined Runtime Attributes" add a new Key Path named "layer.cornerRadius", make it type "Number", and set its value to 9 or higher for a decent rounded edge. (There's a bug in Xcode which will change the Key Path back to the default once you change the Type, if this happens, just be sure to go back and re-type in layer.cornerRadius).
Drag a Visual Effects View with blur on top of the View in step 3.
Now run your program. You will have rounded edges, blur, and no artifacts.
Now, I created mine where it links using a segue, if you need this to work with a segue your segue has to be set to Modal and the presentation has to be set to OVER Full Screen (not just Full Screen).
Here is a link to a project file that demonstrates it. Note the hierarchy of the views in the second view controller: Project File on Dropbox
EDIT: My picture disappeared so I readded it.
Things have obviously changed since the original question, but I was able to achieve this just by selecting "Clip to Bounds" and setting "layer.cornerRadius" in "User Defined Runtime Attributes" on the Visual Effect View itself.
to draw circle the CornerRadius must be equal width/2
in your example width = 30 then the CornerRadius = 30/2 = 15;
This works for me
#IBOutlet weak var blurView: UIVisualEffectView!
And in viewDidLoad()
blurView.layer.cornerRadius = 10;
blurView.clipsToBounds = true
You can change the corner radius according to your preference.
Well, so there is a possibility to apply rounded corners just like on normal UIView. However the UIVisualEffectView won't look good, because the area nearby curved 'sides' of the circle isn't blurred properly. Because it looks buggy and ugly I disadvise to round UIVisualEffectView.