UIkitでNeumorphismをデザインする

UIkitのUIButtonをカスタムしてNeumorphism（ニューモーフィズム ）のボタンを作成します。

こんにちは、Yukiです。

アプリ開発未経験者がiOSアプリを作成するシリーズのUIkitのカスタマイズ編です。

なぜiOSアプリを開発することになったかは最初の記事で↓

アプリ開発未経験者が社長の一言でiOSアプリを開発することになった

作成するボタンのデザインは見出しのような感じです。

ニューモーフィズムの凸のデザインのみで凹はしないので、ご承知おきください🙇‍♀️。

また作成するボタンは

• ボタンの背景色（RGB）から影の色を自動で生成する
• ボタンの角丸を簡単に設定できる

ようにしています。

目次です。

• ニューモーフィズムのデザインのポイント
• UIButtonのExtension
• UIButtonのカスタムクラス作成

ニューモーフィズムのデザインのポイント

……………………………………

まずニューモーフィズムのデザインを作るには要素の背景色と全体の背景色を同じ色で統一します。

そして要素の背景色をベースとして、2つの影を使用します。

左上にはベース色より明るい色を、右下にはベースより暗い色を使用します。

影の色は基本的にはベース色の輝度を調節して作成します。

輝度はRGBやHexなどを使うと輝度だけ変更した色を作成するのが少しめんどくさいので、今回はベース色をRGBで指定すると2つの影の色が自動作成されるようなに実装をします。

UIButtonのExtension

……………………………………

まずはNeumorphismのデザインがカスタマイズしやすいように、UIButtonをExtensionします。

Xcodeのプロジェクトで新しいSwiftファイル（NeumorphismExtension.swift）を作成します。

このファイルに追加する全体のコードは以下のようになります。

// NeumorphismExtension.swift
import UIKit
public extension UIButton {
    
    func NeumorphismShadow(_ defaultcolor: UIColor, _ shadowType: String)->UIColor{
        var color: UIColor = defaultcolor
var hue : CGFloat = 0
        var saturation : CGFloat = 0
        var brightness : CGFloat = 0
        var alpha : CGFloat = 0
if color.getHue(&hue, saturation: &saturation, brightness: &brightness, alpha: &alpha) {
            let brightRate:CGFloat = shadowType == "dark" ? 0.90: 1.10;
            color = UIColor(hue: hue, saturation: saturation, brightness: brightness * brightRate, alpha: alpha)
        }
        return color
    }
func AddShadow(width: CGFloat, height: CGFloat, color: UIColor, roundCorner: CGFloat){
        let btnLayer = CALayer()
        btnLayer.masksToBounds = false
        btnLayer.shadowColor = color.cgColor
        btnLayer.shadowOpacity = 1
        btnLayer.shadowOffset = CGSize(width: width, height: height)
        btnLayer.shadowRadius = 10
        btnLayer.shadowPath = UIBezierPath(roundedRect: self.bounds, cornerRadius: roundCorner).cgPath
        self.layer.insertSublayer(btnLayer, at: 0)
    }
func AddBackground(color : UIColor, roundCorner: CGFloat){
        let background = CALayer()
        background.backgroundColor = color.cgColor
        background.cornerRadius = roundCorner
        background.frame.size = CGSize( width:frame.size.width, height:frame.size.height )
        self.layer.insertSublayer(background, at: 0)
    }
func Neumorphism(r: CGFloat, g: CGFloat, b: CGFloat, roundCorner: CGFloat){
        let backGroundColor = UIColor(displayP3Red: r/255, green: g/255, blue: b/255,alpha: 1.0)
        let darkcolor = NeumorphismShadow(defaultcolor: backGroundColor, shadowType: "dark")
        let lightcolor = NeumorphismShadow(defaultcolor: backGroundColor, shadowType: "light")
AddBackground(color: backGroundColor, roundCorner: roundCorner)
        AddShadow(width: 4.0, height: 4.0, color: darkcolor, roundCorner: roundCorner)
        AddShadow(width: -4.0, height: -4.0, color: lightcolor, roundCorner: roundCorner)
    }
    
}

関数Neumorphism(r: CGFloat, g: CGFloat, b: CGFloat, roundCorner: CGFloat)

ボタンの背景色と2つの影をUIButtonのレイヤーに追加する処理をします。引数のr, g, bには背景色のRGB、roundCornerにはボタンの角丸のサイズをそれぞれ代入してください。

関数NeumorphismShadow(defaultcolor: UIColor, shadowType: String)

背景色を元に輝度を調節して影の色を作成します。引数defaultcolorには背景色（UIColor）、shadowTypeには2つの影のどちらかをdarkかlightで代入してください。

定数brightRateで輝度の調節をしているので、自分の好みで輝度の割合は変えてください。

let brightRate:CGFloat = shadowType == "dark" ? 0.90: 1.10;

関数AddBackground(color : UIColor, roundCorner: CGFloat)

レイヤーに背景色のサブレイヤーを追加します。サブレイヤーを使わず、レイヤーの背景を変えると影が上に被さって上手くいかないので、今回はサブレイヤーを使います。

関数AddShadow(width: CGFloat, height: CGFloat, color: UIColor, roundCorner: CGFloat)

レイヤーに影のサブレイヤーを追加します。今回は影を二つ使用するためサブレイヤーを使います。

UIButtonのカスタムクラス作成

……………………………………

カスタムクラス作成用のSwiftファイル（NeumorphismButton.swift）を作成します。

このファイルに記述するコード全体は以下のようになります。

import UIKit
@IBDesignable
class NeumorphismButton: UIButton {
 
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupAttributes()
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupAttributes()
    }
    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        setupAttributes()
    }
    
    private func setupAttributes() {
        setTitleColor(UIColor(displayP3Red: 85/255, green: 97/255, blue: 111/255,alpha: 1.0), for: .normal)
        Neumorphism(r: 233, g:241, b:250, roundCorner: 10)
    }
}

initとprepareForInterfaceBuilderについては馴染みがあると思うので説明は省きます🙇‍♀️。

setupAttributes()内で先ほど作った関数Neumorphismを背景色と角丸のサイズを指定して呼び出します。お好みで文字やpaddingなどを設定してください、

※今回は文字の色だけ指定しています。

あとはstoryboardからbuttonを設置して、NeumorphismButtonを当てはめてあげてください。

ボタンのデザインを整えて全体の背景を変えると以下のようなNeumorphismのボタンができます。

以上がUIButtonのNeumorphismなデザインのカスタマイズ方法でした。

探り探りやっていたので、もっと効率的な方法がある、あるいは間違っているところがある可能性があります🙇‍♀️。

TwitterのDMからアドバイスいただけると嬉しいです！

monkeyy