LoginSignup
35
18

More than 5 years have passed since last update.

【Swift3.0】UIViewの指定した辺だけに枠線をつける

Posted at

UIViewの上辺だけに枠線をつけたい

TabBarを自作のUIViewで実装する機会があり、Viewの上線だけをつけたかったのですが、あまり調べても出てこなかったので書いておきます。ちなみにこんな感じのものを想定(見づらいですが上辺だけボーダー線が付いてます)。
スクリーンショット 2017-02-09 19.12.01.png

コード

ViewController.swift
import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        self.view.backgroundColor = UIColor.cyan

        //UIViewを作成
        let myView = UIView()
        myView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width/2, height: self.view.frame.height/2)
        myView.center = CGPoint(x: self.view.frame.midX, y: self.view.frame.midY)
        myView.backgroundColor = .white
        self.view.addSubview(myView)

        //上線のCALayerを作成
        let topBorder = CALayer()
        topBorder.frame = CGRect(x: 0, y: 0, width: myView.frame.width, height: 1.0)
        topBorder.backgroundColor = UIColor.lightGray.cgColor

        //作成したViewに上線を追加
        myView.layer.addSublayer(topBorder)

    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

CALayerで枠線を生成してそれをViewに載っけるという方法。CALayer.frameのwidthもしくはheightで線の太さを調整という形(左辺か右辺か、上辺か下辺かで変わる)。ちなみに以下のように左辺の線なんかも追加すればつけたいところにつけることができる。
スクリーンショット 2017-02-09 19.22.35.png

ViewController.swift
        //UIViewを作成
        let myView = UIView()
        myView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width/2, height: self.view.frame.height/2)
        myView.center = CGPoint(x: self.view.frame.midX, y: self.view.frame.midY)
        myView.backgroundColor = .white
        self.view.addSubview(myView)

        //上線のCALayerを作成
        let topBorder = CALayer()
        topBorder.frame = CGRect(x: 0, y: 0, width: myView.frame.width, height: 1.0)
        topBorder.backgroundColor = UIColor.lightGray.cgColor

        //左線のCALayerを作成
        let leftBorder = CALayer()
        leftBorder.frame = CGRect(x: 0, y: 0, width: 1.0, height:myView.frame.height)
        leftBorder.backgroundColor = UIColor.lightGray.cgColor

        /*
        //下線のCALayerを作成
        let bottomBorder = CALayer()
        bottomBorder.frame = CGRect(x: 0, y: myView.frame.height, width: myView.frame.width, height:1.0)
        bottomBorder.backgroundColor = UIColor.lightGray.cgColor

        //右線のCALayerを作成
        let rightBorder = CALayer()
        rightBorder.frame = CGRect(x: myView.frame.width, y: 0, width: 1.0, height:myView.frame.height)
        rightBorder.backgroundColor = UIColor.lightGray.cgColor
        */

        //作成したViewに上線を追加
        myView.layer.addSublayer(topBorder)

        //作成したViewに左線を追加
        myView.layer.addSublayer(leftBorder)

まとめ

とりあえずViewのLayerに乗っければいいんじゃないのということで実装してみたら出来たのでこれでやってますが、何か他にいい方法があれば教えていただきたい。

35
18
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35
18