[iOS] UIBezierPath, CAShapeLayer, UIColor.init(patternImage:) 에서 UITabBar의 모양, 색상 및 모양을 변경합니다.

Swift4.2와 Swift5에서 동작 확인

실현하고 싶었던 UITabBar


htps: //언제나 s. 아 ぇ. 이 m/sg/아 p/p 리파라/이 d1039257927? mt=8
(홍콩의 AppStore가 아니면 다운로드 할 수 없습니다)

실현 가능한 UITabBar (아이콘은 이번 기사와 관계없습니다)


방법

⑴ UIBezierPath를 사용하여 어떤 그래픽을 그릴지 정의합니다. 이번에는 시작점의 Y 좌표를 빼고 세로로 약간 확장하고 있습니다.

MyTabBarController.swift

    func createLengthExpandShape() -> CGPath {
        let path = UIBezierPath()

        //Starting point (left top) then draw lines until the it returns to the starting point with close().
        let startX: CGFloat = 0
        let startY: CGFloat = -37

        path.move(to: CGPoint.init(x: startX, y: startY))
        path.addLine(to: CGPoint.init(x: self.tabBar.frame.width, y: startY))
        path.addLine(to: CGPoint.init(x: self.tabBar.frame.width, y: self.tabBar.frame.height))
        path.addLine(to: CGPoint.init(x: startX, y: self.tabBar.frame.height))
        path.close()

        return path.cgPath
    }

참고 htps : // 메이 m. 코 m / @ p 히 p 307 / d 등 w- 아-쿠 s와 m 이오 s-타바 r 샤 27d298 아 7f4

(2) CAShapeLayer에 (1)의 패스를 추가하고 레이어의 모양을 바꿉니다.

MyTabBarController.swift

　　 override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        //中略　ここでUITabBarControllerの他の設定を色々することになると思います

        //Change tabbar shape
        self.changeTabBarShape()

    }

    func changeTabBarShape() {
        let shapeLayer = CAShapeLayer()

        //Get CGPath
        shapeLayer.path = self.createLengthExpandShape()

        //Set image
        shapeLayer.fillColor = UIColor.init(patternImage: UIImage.init(named: "MyImage.png")!).cgColor

        //Set layer
        self.tabBar.layer.insertSublayer(shapeLayer, at: 0)
    }

(3)UIColor.init(patternImage:) 로 설정하고 싶은 이미지를 준비해, Xcode에 드래그＆드롭으로 추가해 주세요. 이 때 Copy Items If Needed에 체크를 하는 것이 좋습니다.

이번에 만든 이미지


이미지 준비가 가장 이해하기 어려운 점입니다.
이미지는 런타임 시 상하 반대로 사용되므로 이미지 편집 소프트웨어 등에서 이미지의 내용을 미리 상하 반대로 해 주세요. 또한 이미지가 붙기 시작하는 것은 "확장 전"레이어의 왼쪽 상단 모서리에서 점에 유의하십시오.

이번, 이미지 아래의 핑크색으로 잡색으로 칠한 것만의 부분이 UITabBar의 본래의 좌상으로부터 붙일 수 있습니다.

그 위의 CAShapeLayer로 확장한 부분에는 이미지에 레이스의 히라히라 부분이 붙여집니다.

반짝반짝 부분과 채워진 부분 사이를 png로 투과해 두면 UITabBar가 이미지에 맞게 복잡하게 모양을 바꾸기(같아 보이는) 때문에 디자인성이 증가합니다.

CAShapeLayer의 확장 방법을 좀 더 복잡하게 바꾸고 싶다면 이미지의 내용도 조정해야 한다고 생각합니다. 이번은 세로로 했을 뿐이므로, 간단하게 끝납니다.

모든 프로젝트
htps : // 기주 b. 코 m / 사토루 - P 리 짱 / 찬게 우타 바라 ぺ

마음에 들면 GitHub에게 별을 받으면 도움이됩니다.

더 우수한 방법이 있다고 생각하므로 누군가를 말해주세요 ...

이상