I'm new to Swift and ios development. I have 6 labels and a horizontal SKScene in my App. I would like to align those 6 labels beautifully and automatically. Now I have fixed the positions and the alignment always looks awful on some screen size while good on other.
I have not used storyboards or other graphical editors for building the ui but everything is done in code. Therefore I'm looking for a programmatic solution (code examples) for handling the alignment.
If you want to place them in the middle of the screen horizontally, but give them different y positions, you could just do something like this for each label:
label.position = CGPointMake(CGRectGetMidX(self.frame),CGRectGetMaxY(self.frame) * 0.80)
To place them at different y positions, just multiply by the maxY by a different decimal number. This way, all of the labels are aligned along the x-axis and appear at different y-positions, like a column and they will appear this way on every screen size because they are positioned relative to the screen size and not in a fixed position.
You can align the labels (lets say at the center of the screen) like this.
var label1 = UILabel(CGRectMake: 0, 0, 200, 40)
label1.center = CGPointMake(UIScreen.mainScreen().bounds.size.width/2, 30)
var label2 = UILabel(CGRectMake: 0, 0, 200, 40)
label2.center = CGPointMake(UIScreen.mainScreen().bounds.size.width/2, label1.center.y + 30)
and so on. Just reference the main screen bounds and not static points for alignment, so that they are centered in any screen size.
What I ended up doing was to create an empty SKSprite to which I included the SKLabels. Now I can control by the pixed the distances between labels but align the top-level sprite in the middle of the screen despite screen size.
Related
How does the ScrollView.scrollIndicatorInsets actually work ?
If you set all insets to 0 as default, and you do some debugging you will actually find that the scrollbar isn't exactly near the bottom or right edges by default as it should be.
ScrollView.scrollIndicatorInsets = UIEdgeInsets.init(top: 0, left: 0, bottom: 0, right: 0)
As you can see, there is some extra spacing between the scrollbar and the scroll view edges.
Is there any way that I can place the scrollbar bottom left corner exactly at the bottom left corner of the view programatically ? I don't want to hardcode anything, I want it to work on any scrollview size and screen.
What do the insets actually specify (yes, I know they specify a rectangle for the scrollbar) ? Is there a default spacing-to-edge that iOS uses for the scrollbar and I have to take that into consideration ? Is there glow on the scrollbar's layer view, hence the spacing ?
EDIT:
I solved this using the non-convential approach by accessing the UIView from the scrollbar itself (subviews.last), and using the smallest size (which is the thickness).
Quick inspection shows the Scroll Indicators with Insets set to UIEdgeInsetsZero (the default) places them 3-pts from the edges.
You can try using:
theScrollView.scrollIndicatorInsets = UIEdgeInsets.init(top: -3, left: -3, bottom: -3, right: -3)
which should align the horizontal indicator flush to the bottom, and flush with the left and right edges, and the vertical indicator flush to the right, and flush with the top and bottom edges.
You might want to get the frame(s) first though, as it's possible it varies between devices / sizes / iOS versions.
Edit:
A couple clarifying notes...
The scroll indicators are image views. You can find them by inspecting the scroll view's subviews (code or with Debug View Hierarchy).
The default insets (of Zero) put those image views 3-pts from the edge of the scroll view's frame.
With a 300 x 500 scroll view, the origin of the vertical indicator is:
x:294.5 y:3.0 with a width of 2.5
294.5 + 2.5 == 297
// 3-pts from the right edge, 3-pts from the top
and the origin of the horizontal indicator is:
x:3.0 y:494.5 with a height of 2.5
494.5 + 2.5 == 497
// 3-pts from the left edge, 3-pts from the bottom
So, using:
.scrollIndicatorInsets = UIEdgeInsets.init(top: -3, left: -3, bottom: -3, right: -3)
moves the origins to
// vertical
x:297.5 y:0.0 with a width of 2.5
297.5 + 2.5 == 300
// flush to top and right edges
// horizontal
x:0.0 y:497.5 with a height of 2.5
497.5 + 2.5 == 500
// flush to left and bottom edges
I suppose it's possible that could change in the future. As fewer and fewer people use devices with small screens, Apple could change the width/height to 3 or 3.5 or whatever, and could change the default inset from 3 to something else. Which is why I said you might want to get the frames to get the proper inset values, rather than hard-coding them to 3.
Curiously, though, until the indicator frames have been drawn to the screen - either by flashing them or actually scrolling the content - their frames are set to 7-pts in height (for the vertical indicator) and 7-pts width (for the horizontal), and positioned at the bottom-right corner.
So, with the 500 x 300 scroll view frame, the indicator frames are initially:
// vertical
x:294.5 y:490.0 w:2.5 h:7.0
// horizontal
x:290.0 y:494.5 w:7.0 h:2.5
That still tells you they are 3-pts from the edges, but it's not quite as clear... and again, no guarantee that won't change in the future.
If you really want sure the indicators will go where you want them, your best bet may be to use custom views instead of the built-in indicators.
I am trying to create a button in a Xamarin Forms cross-platform app (iOS and Android), where the button has both text and an image. The XAML is pretty straightforward:
<AbsoluteLayout ...>
<Labels and backgrounds and such>
<Button x:Name="HomeButton2" TranslationX="6" TranslationY="100"
BackgroundColor="#efeff4" TextColor="#4a4a4a"
WidthRequest="58" HeightRequest="76"
ContentLayout="Top,5"
Image="TaskBar_Assets_HomeButtonIcon.png" Text="Home"
Clicked="HomeButton_Clicked" />
</AbsoluteLayout>
but what I get on the iPad is a button where both the image and the text are strangely pushed over to the side:
(the source image "TaskBar_Assets_HomeButtonIcon.png" is 47 x 44 so it should fit fine in the overall button area)
The only way I can find to make this look better, is to make a custom control based on Button, and then I can see that several of the properties of the underlying UIButton seem wonky:
The Control.ImageView.Frame is all zeroes:
Control.ImageView = <UIImageView: 0x12df52940; frame = (0 0; 0 0);
clipsToBounds = YES; opaque = NO; userInteractionEnabled = NO;
layer = <CALayer: 0x173623180>>
The Control.ImageEdgeInsets and .TitleEdgeInsets look odd (the right + left seem like they leave no space for the image or text):
Control.ImageEdgeInsets = {-8.9501953125, 20.33935546875, 8.9501953125, -20.33935546875}
Control.TitleEdgeInsets = {22, -23.5, -22, 23.5}
What I'm doing, is adjusting the Control.ImageEdgeInsets so that Control.ImageEdgeInsets.Left is equal to the half of the (button width minus the image width) and setting Control.ImageEdgeInsets.Right to zero (for no particular reason except that it works)
and then figuring out what to set Control.TitleEdgeInsets was done with trial & error, I ended up with values related to the width of the "Home" text (41 pixels):
Control.ImageEdgeInsets updated to {-8.9501953125, 5.5, 8.9501953125, 0}
Control.TitleEdgeInsets updated to {22, -50, -22, -9}
That results in a reasonable button look:
although it looks like I need to do more trial & error to get the text "Home" actually centered.
But why do I need to go through all this? Why doesn't the button just display text & image correctly in the first place?
And if I do have to go through all this, why are the values for Left & Right for ImageEdgeInsets and TitleEdgeInsets so different?
Most of the articles I have read about images on buttons suggest constructing your own using an Image and a Label in a grid using a gesture recognizer to handle the tap.
You could also try a button and an image in a grid.
Use Margin to adjust placement.
I try and stay clear of absolute layout.
Here's the ButtonRenderer source code from Xamarin.Froms.If you set the ContentLayout to Top, the below codes will be run:
void ComputeEdgeInsets(UIButton button, Button.ButtonContentLayout layout)
{
...
var horizontalImageOffset = labelWidth / 2;
var horizontalTitleOffset = imageWidth / 2;
...
button.ImageEdgeInsets = new UIEdgeInsets(-imageVertOffset, horizontalImageOffset, imageVertOffset, -horizontalImageOffset);
button.TitleEdgeInsets = new UIEdgeInsets(titleVertOffset, -horizontalTitleOffset, -titleVertOffset, horizontalTitleOffset);
}
As the codes show, the Left offset of image is horizontalImageOffset which is labelWidth / 2. The Left offset of title is horizontalTitleOffset which is imageWidth / 2.
So, when the text is wider, the left offset of image will be bigger. When the image is wider, the left offset of text will be bigger.
Edit:
In native iOS, the default layout is like the left image: Image is at left and Label is at right. In Xamarin for Top setting, Xamarin moves the Image up and right, moves the Label down and left to makes them like the right image. I paint this illustration, hope it clear.
I have a label on-screen that has its height set as 300px, set to the bottom of the screen, and I want to create a UIView that exactly overlays it. The code I use is
let theFrame = CGRect(x: myLabel.frame.minX, y: myLabel.frame.minY, width: myLabel.frame.width, height: myLabel.frame.height)
newVu = UIView(frame: theFrame)
let newColor = UIColor(colorLiteralRed: 0.5, green: 0.5, blue: 1, alpha: 0.5)
newVu.backgroundColor = newColor
self.view.addSubview(newVu)
The result that I get has the new UIView shifted about 20 points higher than the label. ((EDIT: as GeorgeGreen helped me see in Comments, this is because the label is within a Vertical StackView, which is constrained to the bottom of the Top Layout Guide -- thus the Y of the label is relative to the top of the Stack View, not the top of the screen.)) Clearly there are different frames of reference at work, but what is needed to bring everything into the same frame of reference? EDIT: Or, asked another way, how can I get the "absolute" X and Y coordinates of the label in the screen, so that no matter how many views it is embedded in, I can know where to drop a new View to exactly overlay it?
Original screen in IB:
Result of the code (new view is semi-transparent; note the yellow band at the bottom):
You can get your label position in view by
let theFrame = view.convert(myLabel.frame, from: your_stack_view_here)
and You should move it to
viewDidAppear
Because
viewWillLayoutSubviews
will call any time subview will layout. That's mind at the first time it run, your "mylabel" didn't layout with correct position.
Apple document
Regarding your question of “how can I get the "absolute" X and Y coordinates of the label in the screen”, the answer is to use UIView.convert(_:to:), passing nil as the second parameter. (This will yield coordinates relative to the containing window's origin, but for practical purposes is probably what you mean by “the screen”).
I am trying to create a UILabel that has 2 horizontal lines on the left and right side like this:
Does anyone know the best approach for doing this in Swift? The content text in the center will change so I want to make sure it can adapt. I'd really like to create some kind of reusable UIView class but I'm not sure where to start?
Thank you!
You can take two UIview of height 1 or 2 pixels of both side of the label. so it's look likes line!!
And you should set background color to black of that view!
Hope this will help :)
Take one UIView with height of 2. Set leading & Trailing according to Super View.
Now take one UILabel with background color white and put Vertically Center to line view.
Make both Center same.
Your work done.
For more help please refer below image.
You can use an extension on UILabel
public extension UILabel {
func drawLineOnBothSides(labelWidth: CGFloat, color: UIColor) {
let fontAttributes = [NSFontAttributeName: self.font]
let size = self.text?.size(attributes: fontAttributes)
let widthOfString = size!.width
let width = CGFloat(1)
let leftLine = UIView(frame: CGRect(x: 0, y: self.frame.height/2 - width/2, width: labelWidth/2 - widthOfString/2 - 10, height: width))
leftLine.backgroundColor = color
self.addSubview(leftLine)
let rightLine = UIView(frame: CGRect(x: labelWidth/2 + widthOfString/2 + 10, y: self.frame.height/2 - width/2, width: labelWidth/2 - widthOfString/2 - 10, height: width))
rightLine.backgroundColor = color
self.addSubview(rightLine)
}
}
This will add a horizontal line of width of 1.0 on the both side of your label. If you don't add text for your label, it will show two horizontal lines through center with some spaces in between them.
As others have mentioned, you can achieve this using three views:
Add a View to your scene to use as a container. I called this view "Lined Label Holder."
To that container, add two Views, one to produce the line on either side of the label.
Add the label in between the two views, and give it some text. Due to the "height = Test.height" constraint on the Lined Label Holder, The intrinsic height of this label is used to calculate the container's height.
The label is allowed to grow with added text and the lines will always start 5px away from the edges of the text and extended to the edges of the container, whose width can be set independently.
This image shows the required constraints:
Use one UIView with black background and height of 1px, set label background to white, align its text to center and align UILabel to center of UIView (there is no need for 2 views since label white background will cover UIView).
Not necessary 2 UIView's.
Take 1 UIView and give background black color.Add the constraints necessary with: height=2.
place 1 label on the center and give required constraints
I have a series of labels that I want to center horizontally (that is, along the X axis), like this:
thing1: value1
thing2: value2
etc.
Autolayout doesn't seem to allow this. Even if I stick the two together and use the guidelines to center the pair, the center constraint only applies to the first label in the pair.
The various "things" will have different lengths, and I want to colons to line up (right-justified) and the values on the left to line up (left-justified).
Is there any way to do this?
This is easy to do in code. The x-offset of the first label should be half the difference between the width of the parent view and the sum of the widths of the two labels. For example:
CGFloat xOffset = ((parentView.frame.size.width -
(view1.frame.size.width + view2.frame.size.width)) / 2);
// now position the first label using this offset
view1.frame = CGRectMake(xOffset,
view1.frame.origin.y,
view1.frame.size.width,
view1.frame.size.height);
// and position the second view relative to the first
view2.frame = CGRectMake(CGRectGetMaxX(view1.frame),
view2.frame.origin.y,
view2.frame.size.width,
view2.frame.size.height);