公開中のアプリ

[Swift]ナビゲーションバーとツールバーの線を消す方法

ナビゲーションコントローラーって誰もが使うと思うんですけど、ナビゲーションバーって言うんですかね?それの下の線気になった事ありませんか?
今回はそれを消す方法をご紹介したいと思います!

おまけにツールバーの線も消して影を付けちゃいましょう!

線を消して影をつけるとこんな感じ!

ナビゲーションバーの下線を消そう

まずはナビゲーションバーの下線から消してみましょう。
と言っても1行で消せてしまいます。

self.navigationController?.navigationBar.shadowImage = UIImage()

cssみたいにborder-bottom: none;的な感じで消せるのかなって思ったんですけど。
なんか空のイメージをセットして消すみたいです!

ナビゲーションバーに影をつけよう

ではナビゲーションバーに影を付けてみましょう。
コードはこちらです!

self.navigationController?.navigationBar.layer.shadowRadius = 3.0
self.navigationController?.navigationBar.layer.shadowColor = UIColor.lightGray.cgColor
self.navigationController?.navigationBar.layer.shadowOffset = CGSize(width: 0, height: 6)
self.navigationController?.navigationBar.layer.shadowOpacity = 0.7

1行目:影の丸みを設定
2行目:カラーを設定
3行目:影の大きさを設定
4行目:影の透過を設定

以上のコードを下記コードのようにviewDidLoad()内に入れればOKです!

override func viewDidLoad() {
super.viewDidLoad()
//下線消す
self.navigationController?.navigationBar.shadowImage = UIImage()
//ナビゲーションバーの下に影
self.navigationController?.navigationBar.layer.shadowRadius = 3.0
self.navigationController?.navigationBar.layer.shadowColor = UIColor.lightGray.cgColor
self.navigationController?.navigationBar.layer.shadowOffset = CGSize(width: 0, height: 6)
self.navigationController?.navigationBar.layer.shadowOpacity = 0.7
}
}

ツールバーの上線を消そう

では次にツールバーの上の線を消しましょう!
線を消すだけなら下記画像のようにClips to Boundsの項目にチェックを入れるだけで良さそうです。

ただこれだと、影が付けられなくなったりなど色々問題が生じるので一度試してみて思ってる感じと違ったら次の方法を試してみて下さい!

まずツールバーをstoryboardに配置したらViewController.swiftなどのファイルと紐付けておきます。
紐付け方はこちらを参考にして下さい〜今回はツールバーの名前をbottomToolBarにしました。
ではコードを見てみましょう!

bottomToolBar.setShadowImage(UIImage(named: "clearPixel.png"), forToolbarPosition: UIBarPosition.any)

ナビゲーションバーでは空の画像をセットすれば良かったですけど、ツールバーの場合、実際に透過の画像を用意しないといけないようです。
(他にも方法があるみたいですけど、今回はこの方法で!)
透明の画像は「透明画像 ダウンロード」とかで調べるとすぐ出てきます。

透明画像はAssets.xcassetsフォルダに入れます。

「”clearPixel.png”」の部分が透明の画像名なので任意の名前にして下さい。
あとはコピペでOKです!

ツールバーに影をつけよう

影の付け方は同じです!

bottomToolBar.layer.shadowRadius = 3.0
bottomToolBar.layer.shadowColor = UIColor.lightGray.cgColor
bottomToolBar.layer.shadowOffset = CGSize(width: 0, height: -6)
bottomToolBar.layer.shadowOpacity = 0.7

気を付けたいのが影の方向です!
ナビゲーションバーの影は下でしたが、ツールバーには上に付けたいので3行目のheightの部分を-6みたいに「マイナス」で指定しましょう!

以上のコードを下記コードのようにviewDidLoad()内に入れればOKです!

override func viewDidLoad() {
super.viewDidLoad()
//ツールバーの線消す
bottomToolBar.setShadowImage(UIImage(named: "clearPixel.png"), forToolbarPosition: UIBarPosition.any)
//ツールバーの影つける
bottomToolBar.layer.shadowRadius = 3.0
bottomToolBar.layer.shadowColor = UIColor.lightGray.cgColor
bottomToolBar.layer.shadowOffset = CGSize(width: 0, height: -6)
bottomToolBar.layer.shadowOpacity = 0.7
}
}

まとめ

今回はナビゲーションバーとツールバーの線を消して影の付け方を説明しました!
ナビゲーションバーもツールバーもよく使うので色々カスタマイズできるようになりたいですね!

めっちゃ久しぶりの投稿です!4ヶ月ぶりくらい?
サボってた訳ではなくアプリを作っておりまして(汗)
初めてアプリを公開する事ができました!!
どんなアプリを作ったとか詳細はまた改めて書こうと思います!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

アプリ