iOS에서 둥근 그림자가있는 그라데이션 버튼을 만드는 방법?

소개

미안해 (∴)/
그런데 여러분 버튼을 좋아합니까? 밀고 싶은 버튼 디자인을 좋아합니다.
iOS에서 UIButton을 Dribbble에있는 것처럼 낯설은 디자인로 만들기 위해서는 어떻게 할 것이라고 생각했기 때문에 만들었습니다. 오픈 소스도 있습니다 👍

할 수있는 것

엄청 밀고싶어😂

만드는 방법

Playground에서 동작 확인

Playground에서 외관을 확인하면서 코드를 작성합니다.

//: Playground - noun: a place where people can play
import UIKit
import PlaygroundSupport

let viewSize = CGSize(width: 200, height: 200)
let view = UIView(frame: CGRect(origin: CGPoint.zero, size: viewSize))
view.backgroundColor = UIColor.white

// ボタンのコードをここに追加していきます

let preview = view

Playground에서 UI 미리보기 기능이 있다는 것을 아십니까?
알고도 많이 사용하지 않는 사람이 많다고 생각합니다만 😅

버튼을 추가하고 확인하기 위한 상위 뷰를 만들었습니다.import PlaygroundSupport 잊지 말고

버튼 만들기

let button = UIButton(type: .system)
button.frame = CGRect(x: 25, y: 75, width: 150, height: 50)
button.setTitle("Tap here!", for: .normal)
button.setTitleColor(UIColor.white, for: .normal)

view.addSubview(button)

버튼의 모양

// 角丸で親しみやすく
button.layer.cornerRadius = button.bounds.midY
// 押せそうにみえる影
button.layer.shadowColor = UIColor.startColor.cgColor
button.layer.shadowOffset = CGSize(width: 0, height: 3)
button.layer.shadowOpacity = 0.7
button.layer.shadowRadius = 10
// グラデーションで強めのアピール (リサイズ非対応！）
let gradientLayer = CAGradientLayer()
gradientLayer.frame = button.bounds
gradientLayer.cornerRadius = button.bounds.midY
gradientLayer.colors = [UIColor.startColor.cgColor, UIColor.endColor.cgColor]
gradientLayer.startPoint = CGPoint(x: 0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)

button.layer.insertSublayer(gradientLayer, at: 0)

뛰어난 버튼 디자인의 효과를 만들어 내기 위해, 모퉁이로 그림자 첨부로 그라데이션을 설정하고 있습니다.

☝️ 그라데이션 레이어는 이대로라면 버튼이 리사이즈 했을 때에 사이즈를 추종해 주지 않으므로 주의가 필요합니다. 해결 방법은 아래에서 설명하는 오픈 소스를 참조하십시오.


이런 느낌입니다 ↑

사용한 색상

extension UIColor {
    static let startColor = #colorLiteral(red: 0, green: 0.4784313725, blue: 1, alpha: 1)
    static let endColor = #colorLiteral(red: 0.2852321628, green: 0.938419044, blue: 0.9285692306, alpha: 1)
}

다음에 그라데이션으로 설정한 색은 이쪽입니다. color literal에서 미리 정의된 것에서 텍토로 선택했습니다.

오픈소스 시작

DSFloatingButton

지금 만든 것 같은 느낌의 버튼을 쉽게 만들 수 있도록 오픈 소스화되어 있습니다. 버튼만의 최소한의 라이브러리입니다만, 스토리 보드로 그라데이션의 배색이나 그림자의 걸림 상태를 확인하면서 이케하고 있는 버튼이 만들어지게 되기도 하므로 좋으면 꼭 사용해 보세요!

다음과 같은 특징이 있습니다.
- IB로 외관을 설정할 수 있다
- 귀여운 탭 애니메이션 포함
- 그라데이션 레이어의 리사이즈에 대응



버튼 때 라이브러리를 도입할 때까지도 없어, 라고 하는 분이라도 파일을 복사 하면 좋기 때문에 좋아하게 사용해 주세요 😋

결론

처음으로 오픈 소스 만들었기 때문에 뭔가 반응 있으면 기뻤습니다.