Rasukaru BLOG

アプリでウェットな人生を。開発に関することやその他諸々。備忘録。

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

Swift 投稿日:2017/02/16

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

コード

①上辺だけに枠線を追加

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

②好きな辺に枠線を追加

          //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に乗っければいいんじゃないのということで実装してみたら出来たのでこれでやってますが、何か他にいい方法があれば教えていただきたい。


コメントを読み込んでいます...