Extend image repeating horizontal line and repeating vertical line on iOS - ios

I have image and in that image i want to repeat horizontal and vertical line, so i extend my image.
For example i have image 50X50, and i want it to be 50x70, by repeating line x = 15. Is this even possible on iOS?
EDIT:
Ok i'll try to be more clear. I have image 60x60, which is rectangle basically, with width 60 and height 60. Now i want to streach that image to be 80x60, by repeating pixles with x = 40. Or to draw it simply, i have:
123456
1 XXXAXX
2 XXXAXX
3 XXXAXX
4 XXXAXX
5 XXXAXX
6 XXXAXX
and i want it to be:
12345678
1 XXXAAAXX
2 XXXAAAXX
3 XXXAAAXX
4 XXXAAAXX
5 XXXAAAXX
6 XXXAAAXX
I repeat all pixels on image that are on the line 40. And i want to do it on any number of images.

The key to achieving your desired result is resizableImageWithCapInsets: on UIImage. For example, take the following 50px by 50px image (Note: this is the #2x version):
If you want to stretch the red line horizontal, you first define a UIEdgeInset that describes the position of the red line:
UIEdgeInsets redLine = UIEdgeInsetsMake(0, 15, 0, 34);
This defines a one-pixel wide slice of the image offset by 15px from the left. The right offset is 34 because the right edge of the stretchable slice is at 16px and 50 (image width) minus 16 is 34.
Now that we have the UIEdgeInset, we can load the image and create a stretchable version of it:
UIImage *stretchableImage = [[UIImage imageNamed:#"my_image"] resizableImageWithCapInsets:redLine];
We can assign this stretchableImage to a UIImageView with the frame that we need:
UIImageView *stretchedImageView = [[UIImageView alloc] initWithImage:stretchableImage];
stretchedImageView.frame = CGRectMake(100,100,70,50); // The image view is 70px wide
In the app, stretchedImageView will look like this:
There's another method called resizableImageWithCapInsets:resizingMode: that allows you to tile the image slice rather than stretch it, so you can do crazy things like take this image:
And tile it horizontally like this:

If i understand the question correctly, you should use:
(UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets
UIEdgeInsets is structure that specifies float values for each cap
inset: top, left, bottom and right areas of an image. To apply this to
the image for the button, here is all we need to do:
UIImage *buttonImage = [[UIImage imageNamed:#"blueButton"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 16, 0, 16)];
This requests that the left and right 16 pixels of the original image
are not scaled or resized when stretching the image to accomodate the
button size frame defined above. The end
OBS: This only work well for plain images, for example images with gradient will not work well.
Take a look here for more detail.

Just repeat an image in UIImageView like this:
var dottedLineView : UIImageView = {
let view = UIImageView()
view.contentMode = .scaleAspectFill
view.clipsToBounds = true
view.backgroundColor = UIColor(patternImage: #imageLiteral(resourceName: "dashedLine"))
return view
}()

Related

Xamarin - Button with text and image in absolute layout results in mis-aligned elements

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.

Swift UILabel with horizontal lines on both sides

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

Swift: programmatically align labels for different IOS screen sizes

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.

iPhone - resizing image and two labels to fit the screen

I'm new to iPhone developing. I have a screen with image, title and content:
Image has dynamic size and also all text can have any length. What I want to achievie is to fit the image exactly in screen and make all labels to be only as long as they should be.
Afterk about 5 hours of work I have:
Working labels length, achieved by setting Lines=0 and Preferred Width=content width
Not working image, which lefts blank spaces
I have read a lot, I understand Content Hugging Priority and Content Compression Resistance Priority. I know differences in UIViewContentMode. I know that I can manually set UIImage.frame=CGRectMake(...). Nothing works. My image is more wider than higher (lets assume that width/height = 3). If I have UIViewContentMode=Aspect Fit then I will have blank space above and below the image. If set to Aspect fill then image is too high and also cropped. Changing frame in code doesn't change anything in view. What I want is to have image with size that was made using Aspect fit, but without blank space.
Finally I dit it. First of all, everyone writes that UIImageView.Frame should be modified to shrink the image, but be aware, that if your view is UITableViewCell then you should do that in layoutSubviews method (remember to invoke super.layoutSubviews() at the begging).
Secondly, make in IB a height constraint for your UIImageView for temporary value (for example 100). You will change that constraint in layoutSubviews method.
And finally: fitting image is NOT about its ratio. Set UIViewContentMode=Aspect Fit. Then the case with blank top and bottom areas occurs only when the initial image is wider than screen. Calculating the proper height should also take place in layoutSubviews.
Example implementation:
override func layoutSubviews() {
super.layoutSubviews()
var imageWidth = (imageViewObject.image?.size.width)!
var imageHeight = (imageViewObject.image?.size.height)!
var frameWidth = UIScreen.mainScreen().bounds.width
var properHeight: CGFloat
if imageWidth > frameWidth {
var ratio = frameWidth / imageWidth
properHeight = imageHeight * ratio
}
else {
properHeight = imageHeight
}
imageHeightConstraint.constant = properHeight
imageViewObject.frame = CGRectMake(0, 0, frameWidth, properHeight)
}

Maximize Size of UITabBarItem image

I would like to create a custom UITabBarItem with a Icon-image thats size is a little bit bigger than usual. The thing is I don't want to use a full replace of the background image because i would like to have the translucent effect of the TabBar.
So i would like to know 2 things:
What sizes are now correct for the new iOS7 UITabBarItems and their icons
How do I modify the size of the icon to display a bigger icon, because i dont want to show a title. Without the title its kinda small. In mind to keep the translucent effect displaying.
Any help or suggestions would be great!
Regardless of the icon’s visual style, create a toolbar or navigation bar icon in the following sizes:
About 44 x 44 pixels
About 22 x 22 pixels (standard resolution)
Regardless of the icon’s visual style, create a tab bar icon in the following sizes:
About 50 x 50 pixels (96 x 64 pixels maximum)
About 25 x 25 pixels (48 x 32 pixels maximum) for standard resolution
Have a look at these Developers guide for bar & buttons
Bar icons in Human interface guidelines
To increase the size, try below code,
NSArray *items = self.tabBarController.tabBar.items;
for (UITabBarItem *b in items)
b.imageInsets = UIEdgeInsetsMake(-5, -5, -5, -5);
If you want to decrease, try passing positive values to UIEdgeInsetsMake(top,left,bottom,right)
Swift 4.2,
let array = tabBarController?.tabBar.items
for controller in array! {
controller.tabBarItem.imageInsets = UIEdgeInsets(top: 5, left: -5, bottom: -5, right: -5)
}

Resources