Swift 5를 사용하여 iOS 앱에서 드리블과 유사한 UITabBar 디자인 만드는 방법

Swift 5를 사용하여 iOS 앱에서 드리블과 유사한 UITabBar 디자인 만드는 방법

 

아름다운 디자인 만들기

똑같은 오래된 탭 바가 지루한 사람이 또 있을까요?

예, 예, 알아요. 탐색에는 여전히 필요합니다. 확실히 탐색 모음보다 더 눈에 띕니다. 귀하의 앱이 훌륭하다면 사용자는 평범한 디자인에 신경 쓰지 않을 가능성이 높습니다. 하지만… 더 위대해지는 것을 막는 것은 무엇입니까?

문제는 제가 몇 년 동안 둥근 모서리가 있는 탭 바를 본 적이 있는데 아직도 볼 때마다 흥분된다는 것입니다. 그래서 나만의 것을 개발할 때가 왔을 때, 나는 왜 내 자신의 버전을 만들지 않느냐고 생각했습니다.

아직도 읽고 계십니까? 당신도 이 단계를 밟을 준비가 되었음을 의미합니다! 앱에서 이것을 구현하는 방법을 읽고, 연습을 하는 중이라면 여기에서 시작 자료를 다운로드하고 샘플 앱에서 저와 함께 작업하세요!

준비, 설정, 이동!

전제: 샘플 앱

오늘날 일부 정부 발행 서비스는 온라인으로 요청을 진행하기 전에 개인 문서의 세부 정보를 요청합니다. 운전면허증 번호, 신분증의 유효기간, 의료카드 발급기관. 그리고 저는 괜찮습니다. 하지만 정말로 소파에서 일어나 지갑을 찾아야 합니까? 2022년? 고칠 가치가 있는 문제처럼 들립니다.

유용하죠? 이 앱은 곧 App Store에서 사용할 수 있습니다! 내 프로필에서 업데이트를 확인하세요!

1단계: 탭 표시줄 만들기

스토리보드에서 뷰 컨트롤러를 선택합니다. Editor 메뉴를 열고 Embed in > Tab Bar Controller를 선택합니다.

Tab Bar View Controller를 선택하고 그것을 우리의 TabBarViewController() 샘플 앱에서 이미 만든 클래스입니다. 자체 프로젝트에서 작업하는 경우 여기에서 GitHub 스타터 프로젝트에서 클래스를 다운로드할 수 있습니다.

이제 탭 표시줄이 있으므로 여기에 항목을 추가하고 해당 보기에 연결할 차례입니다. 그렇게 하려면 스토리보드에 남아 있는 뷰 컨트롤러 수를 추가해야 합니다. 탭 표시줄에 총 3개의 항목이 있도록 두 개를 추가하겠습니다.

내 탭 표시줄에 대해 총 3개의 뷰 컨트롤러를 설정했습니다.

탭 표시줄 보기 컨트롤러를 클릭하고 Ctrl 키를 누른 채 새 보기 컨트롤러로 하나씩 끕니다. 그런 다음 선택 Relationship Segue > View Controllers.

2단계: 탭 표시줄의 기본 스타일 지정

모든 뷰 컨트롤러가 연결되면 각 탭 막대 항목에 대한 이미지를 선택합니다. 샘플 앱의 경우 다음을 사용합니다.

• 시스템의 house 홈 화면으로 사용되는 첫 번째 뷰 컨트롤러의 이미지 및 시스템의 house.fill 선택된 상태일 때;
• 시스템의 plus 사용자가 카드를 추가할 두 번째 뷰 컨트롤러의 이미지와 시스템의 plus.circle.fill 선택된 상태일 때;
• 시스템의 person 사용자의 정보와 프로필, 시스템의 세 번째 뷰 컨트롤러에 대한 이미지 person.fill 선택되었을 때.

근데 저 파란색은 뭐지? Tab Bar View Controller에서 Tab Bar를 선택하고 앱의 색상과 일치하는 Image Tint를 선택하여 더 나은 것으로 변경해 보겠습니다. 샘플 앱의 경우 다음을 선택했습니다.

• iDoxViewColor 내 자산에서 Image Tint로,
• 클리어 컬러 내 바 틴트를 위해,
• 클리어 컬러 내 배경색을 위해.

앱을 실행하고 원하는 결과를 얻었는지 확인하십시오. 이제 다음과 같이 표시되어야 합니다.

이제 탭 표시줄을 더 귀엽게 만들 차례입니다!

3단계: 둥근 탭 막대 효과 만들기

탭 막대의 가장자리를 둥글게 보이도록 편집하는 것은 거의 불가능한 작업이므로 둥근 탭 막대 효과를 만드는 가장 쉬운 방법은 다음을 사용하는 것입니다. CAShapeLayer().

우리는 우리의 TabBarViewController() 수업:

let layer = CAShapeLayer()

또한 생성 layerHeight 2부에서 탭 표시줄 안에 사용자 지정 가운데 버튼을 배치하는 데 사용할 속성:

var layerHeight = CGFloat()

샘플 앱에서 탭 표시줄에 사용할 여러 색상을 설정했습니다. 특정 색상에 더 쉽게 액세스할 수 있도록 해당 색상에 대한 참조를 생성하겠습니다. 내 생각은 다음과 같습니다.

• 탭 바의 색상이 될 배경색;
• 탭 표시줄의 선택되지 않은 항목에 대한 보조 색상(자동으로 회색이 되도록 하려는 경우 제외)
• 탭 막대의 그림자로 사용할 세 번째 색상(원하는 경우).

내 수업에서는 다음과 같이 보일 것입니다.

let bgColor = UIColor(named: “iDoxLightColor”)
let sColor = UIColor(named: “iDoxAccentColor”)
let tColor = UIColor(named: “iDoxShadowColor”)

이제 레이어에 모양을 줄 차례입니다. 첫 번째 그림과 똑같이 보이게 하기 위해 다음 지침을 사용했습니다.

• x 위치, 즉 화면의 왼쪽 가장자리에서 레이어의 거리를 10으로 설정해야 합니다.
• 연속적으로 레이어의 너비는 20을 뺀 화면과 같아야 합니다(그래서 화면 오른쪽까지의 거리도 10이 됩니다).
• y 위치, 즉 화면 상단에서 레이어의 거리는 원래 탭 표시줄의 y 위치에서 20을 뺀 값과 일치해야 합니다.
• 레이어의 높이는 탭 막대의 높이에 30을 더한 값과 같아야 합니다.

나는 또한 다음과 같이 덧붙였다.

1. 위에서 언급한 세 번째 색상을 사용하는 그림자
2. 항목의 너비와 위치를 조정하여 더 중앙에 배치합니다.
3. 보조 색상을 사용하여 선택되지 않은 항목의 색상.

마지막으로 레이어의 높이를 layerHeight 특성. 탭 막대의 사용자 지정 중간 버튼에 대한 제약 조건을 설정하려면 나중에 액세스해야 합니다.

나는 모든 것을 setUpTabBar() 이와 같이:

이 함수는 우리의 TabBarViewController()클래스 내부 viewDidLoad() 기능:

프로젝트를 실행하면 다음과 같은 내용이 표시되어야 합니다.

타다! 벌써부터 잘생겼어!

2부 준비가 되셨나요? 그것은 곧 나온다! 이 튜토리얼이 마음에 드셨나요? 당신의 프로젝트와 잘 맞았나요? 의견을 알려주세요

Want to Connect?Follow me on…
❤️ YouTube
💖 Dribbble
💜 Instagram
💙 Ko-Fi
🖤 GitHub