ios:how to add top and bottom border in tableview?

Question

I want table like this image that show top and bottom border with color only

i have apply this code in viewDidLoad()

tblFilter.layer.borderWidth = 0.5
tblFilter.layer.borderColor = UIColor.white.cgColor

above code add border at all side that i dont want. i want table border in only top or bottom side. i want tableview border like given image. see given image. please suggest me solution Thanks

you can use uiview with 1px height and width same as table. and set background color of uiview — KAR, Apr 20 '17 at 13:14
just decrase the x and increase the width thats all, you get top and bottom only — Anbu.Karthik, Apr 20 '17 at 13:19
added border but its scrolling when i scroll my tableview. i dont want to scroll border. it should be stickt to top and bottom. i apply below code let topBorder = CAShapeLayer() let topPath = UIBezierPath() topPath.move(to: CGPoint(x: 0, y: 0)) topPath.addLine(to: CGPoint(x: tblFilter.frame.width, y: 0)) topBorder.path = topPath.cgPath topBorder.strokeColor = UIColor.red.cgColor topBorder.lineWidth = 1.0 topBorder.fillColor = UIColor.red.cgColor tblFilter.layer.addSublayer(topBorder) — hardik, Apr 21 '17 at 12:19

score 1 · Answer 1 · answered May 17 '17 at 09:27

1

my problem is solved. i added one custom view. In that view i added two view with 1px height at top and bottom of view and i added table-view in that custom view.

answered May 17 '17 at 09:27

hardik

199
1
6
21

RajeshKumar R · Accepted Answer · 2017-04-21T07:06:43.673

0

Try this

    let topBorder = CAShapeLayer()
    let topPath = UIBezierPath()
    topPath.move(to: CGPoint(x: 0, y: 0))
    topPath.addLine(to: CGPoint(x: tblFilter.frame.width, y: 0))
    topBorder.path = topPath.cgPath
    topBorder.strokeColor = UIColor.red.cgColor
    topBorder.lineWidth = 1.0
    topBorder.fillColor = UIColor.red.cgColor
    tblFilter.layer.addSublayer(topBorder)

    let bottomBorder = CAShapeLayer()
    let bottomPath = UIBezierPath()
    bottomPath.move(to: CGPoint(x: 0, y: tblFilter.frame.height))
    bottomPath.addLine(to: CGPoint(x: tblFilter.frame.width, y: tblFilter.frame.height))
    bottomBorder.path = bottomPath.cgPath
    bottomBorder.strokeColor = UIColor.red.cgColor
    bottomBorder.lineWidth = 1.0
    bottomBorder.fillColor = UIColor.red.cgColor
    tblFilter.layer.addSublayer(bottomBorder)

edited Apr 21 '17 at 07:06

answered Apr 20 '17 at 13:17

RajeshKumar R

15,445
2
38
70

1

Thanks but when i scroll my tableview its scrolling. i want fix at top and bottom. what i do ? – hardik Apr 20 '17 at 13:27
at last line What does "btn" means ? – hardik Apr 21 '17 at 07:01
Thanks it working but when i scrolling tableview why this line scrolling with them. i dont want to scroll it. – hardik Apr 21 '17 at 07:21
border is Still scrolling .. what i do ? @Rajeshkumar R – hardik Apr 21 '17 at 08:25
@hardik Add this lines in `viewDidLoad` method `let top = UIView.init(frame: CGRect(x: 0, y: 0, width: tblFilter.frame.size.width, height: 1)) line.backgroundColor = UIColor.white let bottom = UIView.init(frame: CGRect(x: 0, y: 0, width: tblFilter.frame.size.width, height: 1)) line.backgroundColor = UIColor.white tblFilter.tableFooterView = bottom tblFilter.tableHeaderView = top` – RajeshKumar R Apr 21 '17 at 12:51
1

but try to understand. as per your code view has been added on top of the tableview but when i scroll table then border also scroll with them and that i dont want. i need stickt border on top or bottom. – hardik Apr 24 '17 at 06:08

score 0 · Answer 3 · answered Apr 20 '17 at 13:17

0

If don't want to use the table footer and header you can use the table header view and footer view where you can return view with white color and height would be 1 and width same as table width

answered Apr 20 '17 at 13:17

Ahmed Ginani

6,522
2
15
33

i did that but its scrolling with table content. i want fix at top and bottom. – hardik Apr 20 '17 at 13:30

score 0 · Answer 4 · answered Apr 20 '17 at 13:19

0

Use tableview header and footer.

// in -viewDidLoad
self.tableView.tableHeaderView = ({UIView *line = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.tableView.frame.size.width, 1 / UIScreen.mainScreen.scale)];
    line.backgroundColor = self.tableView.separatorColor;
    line;
});

Same do it for footer also.

self.tableView.tableFooterView = ({UIView *line = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.tableView.frame.size.width, 1 / UIScreen.mainScreen.scale)];
        line.backgroundColor = self.tableView.separatorColor;
        line;
    });

Or else just add UIVIEW to the background and set the color. That will also help.

answered Apr 20 '17 at 13:19

Jitendra

5,055
2
22
42

but how to stop scrolling ? – hardik Apr 24 '17 at 07:30
Inside cell you are asking stick all 4 constraint top , bottom , leading , trailing. – Jitendra Apr 24 '17 at 10:49
no, i want top and bottom border for table view and i have done it but my table border scrolling when i scroll table view so, how to stop border scrolling – hardik Apr 24 '17 at 10:58

score 0 · Answer 5 · answered Apr 20 '17 at 13:20

Take two UIView. Give it white color. y cordinate of top uiview is min y of uitableview and y cordinate of bottom uiview is max y of uitableview.

you can get min y and max y using GetMaxY and GetMinY.

width of both uiview are same as uitableview.

height of both uiview are 1px.

hope this will help you.

score 0 · Answer 6 · answered Apr 20 '17 at 13:25

0

take label in the cell with height value as 1 and give border to it. Programmatically hide/show on your require index.

answered Apr 20 '17 at 13:25

Bhawin Ranpura

129
1
8

ios:how to add top and bottom border in tableview?

6 Answers6