Repeat image horizontally and vertically

前端 未结 5 1402
刺人心
刺人心 2020-12-05 05:29

I want to repeat the following image:

\"enter

to achieve the following backgro

相关标签:
5条回答
  • 2020-12-05 05:43

    As my comment already said: use

    bluePatternView.backgroundColor = 
      [UIColor colorWithPatternImage:[UIImage imageNamed:@"blue_pattern.png"]];
    

    You dont want to stretch your image. Let UIKit take care of the repetition.

    Assuming that your bluePatternView is the actual large view for which you want to set a pattern as background. Maybe you are setting the background property of the wrong view if that code is still not working.

    Note: duplicating the SAME image with @2x and @3x extension will lead to behaive properly for better resolution devices.

    enter image description here

    0 讨论(0)
  • 2020-12-05 05:45

    You need to save image in Assets then put those lines in viewdidload

    bluePatternView.backgroundColor = UIColor.init(patternImage: #imageLiteral(resourceName: "f8"))
    

    This is for Swift 4.1.

    0 讨论(0)
  • 2020-12-05 05:45

    this with Bellow Method using stretchableImageWithLeftCapWidth like this way:-

    UIImage *backgroundImage = [[UIImage imageNamed:@"SheetBackground.png"] stretchableImageWithLeftCapWidth:0.5 topCapHeight:0];
    

    as par your need example:-

    UIImage *backgroundImage = [[UIImage imageNamed:@"q4Ses.png"] stretchableImageWithLeftCapWidth:0.5 topCapHeight:0];
    
      [_scro setBackgroundColor:[UIColor colorWithPatternImage:backgroundImage]];
    
    0 讨论(0)
  • 2020-12-05 05:51
    bluePatternView.backgroundColor = UIColor(patternImage: UIImage(named: "blue_pattern")!)
    
    0 讨论(0)
  • 2020-12-05 06:08

    I found solution in images.xcassets,

    Step 1:- Put your image to images.xcassets

    Step 2:- Click on image, then click on bottom right corner written “Show Slicing” Put image

    Step 3:- Click on Start Slicing
    start slicing

    Step 4:- Click on "Slice Horizontally and Vertically" button
    Slice horizontally and vertically

    Step 5:- Here you will see 3-Horizontal and 3-Vertical slice lines.
    enter image description here

    • Put the most left vertical line to left side of image and both right most lines to right side of image.
    • Put the most top line to top of image and both bottom most lines to bottom of image.
    • So the final result will be looking like this.

    enter image description here

    Step 6:- Use this image.

    And now image will be repeated.

    enter image description here

    Note:- If you give slicing to 2x image it will repeat just 2x image, for 3x images you need to do the same slicing.

    Example by Apple

    0 讨论(0)
提交回复
热议问题