CODEWITHSUNDEEP
iosuiviewlayer
GilbertOOl
GilbertOOl

Reputation: 1309

Add just a top border to an UIView with Quartzcore/layer?

Is it possible to add a border just on top of a UIView, if so, how please?

Upvotes: 38

Views: 36429

Answers (8)

Shahriar Hossain
Shahriar Hossain

Reputation: 148

Swift5:

We will write a separate method to add borders to this view. To add borders to this view we will create two layers with the desired thickness. We will set the frame of these two layers to the top and bottom of the view. We will set the desired background color of the borders on these layers and add these layers as subLayers to the view.

func addTopBorders() {
   let thickness: CGFloat = 1.0
   let topBorder = CALayer()
   topBorder.frame = CGRect(x: 0.0, y: 0.0, width: 
   self.down_view_outlet.frame.size.width, height: thickness)
   topBorder.backgroundColor = UIColor.white.cgColor
   down_view_outlet.layer.addSublayer(topBorder)
}

Upvotes: 0

dengApro
dengApro

Reputation: 4008

GilbertOOI's answer in Swift 4:

let topBorder: CALayer = CALayer()
topBorder.frame = CGRect(x: 0, y: 0, width: myView.frame.size.width, height: 1)
topBorder.backgroundColor = UIColor.purple.cgColor
myView.layer.addSublayer(topBorder)

Upvotes: 5

Nitin Gohel
Nitin Gohel

Reputation: 49720

I just Testing Bellow few line of Code and it works very nice, just test it in to your Project. hope you'll get your solution easily.

Why to create new View and adding it into your existing view..? For this task simply create one CALayer and add it into your existing UIView's Layer do as following:-

#import <QuartzCore/QuartzCore.h>
- (void)viewDidLoad
{
    CALayer *TopBorder = [CALayer layer];
    TopBorder.frame = CGRectMake(0.0f, 0.0f, myview.frame.size.width, 3.0f);
    TopBorder.backgroundColor = [UIColor redColor].CGColor;
    [myview.layer addSublayer:TopBorder];

  [super viewDidLoad];

}

and It's Output is:-

enter image description here

Upvotes: 98

Andrew Bennett
Andrew Bennett

Reputation: 930

remus' answer in Obj-C:

 CALayer *topBorder = [CALayer new];
 topBorder.frame = CGRectMake(0.0, 0.0, self.frame.size.width, 3.0);
 topBorder.backgroundColor = [UIColor redColor].CGColor;
 [myView.layer addSublayer:topBorder];

Upvotes: 2

brandonscript
brandonscript

Reputation: 72885

GilbertOOI's answer in Swift 2:

let topBorder: CALayer = CALayer()
topBorder.frame = CGRectMake(0.0, 0.0, myView.frame.size.width, 3.0)
topBorder.backgroundColor = UIColor.redColor().CGColor
myView.layer.addSublayer(topBorder)

Upvotes: 10

n8tr
n8tr

Reputation: 5066

I created this simple UIView subclass so that it works in Interface Builder and works with constraints: https://github.com/natrosoft/NAUIViewWithBorders

Here's my blog post about it: http://natrosoft.com/?p=55

-- Basically just drop in a UIView in Interface Builder and change its class type to NAUIViewWithBorders.
-- Then in your VC's viewDidLoad do something like: 

/* For a top border only ———————————————- */
self.myBorderView.borderColorTop = [UIColor redColor];
self.myBorderView..borderWidthsAll = 1.0f;

/* For borders with different colors and widths ————————— */
self.myBorderView.borderWidths = UIEdgeInsetsMake(2.0, 4.0, 6.0, 8.0);
self.myBorderView.borderColorTop = [UIColor blueColor];
self.myBorderView.borderColorRight = [UIColor redColor];
self.myBorderView.borderColorBottom = [UIColor greenColor];
self.myBorderView.borderColorLeft = [UIColor darkGrayColor];

Here's a direct link to the .m file so you can see the implementation: NAUIViewWithBorders.m
There is a demo project as well.

Upvotes: 2

aroooo
aroooo

Reputation: 5066

Here's a UIView category that lets you add a layer-back or view-backed border on any side of the UIView: UIView+Borders

Upvotes: 6

GilbertOOl
GilbertOOl

Reputation: 1309

i've find solution for me, here's the tricks :

CGSize mainViewSize = self.view.bounds.size;
CGFloat borderWidth = 1;
UIColor *borderColor = [UIColor colorWithRed:37.0/255 green:38.0/255 blue:39.0/255 alpha:1.0];
UIView *topView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, mainViewSize.width, borderWidth)];
topView.opaque = YES;
topView.backgroundColor = borderColor;
topView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin;        
[self.view addSubview:topView];

Upvotes: 18

Related Questions