07. 기본 UI 구성하기 #7

기본 UI 구성하기 #7
LoginView

---

계정 로그인에 사용할 UI를 구성한다.

LoginView
| Header

Login 화면의 상단에 해당하는 부분이다.
푸른색의 배경과 두 줄의 TextView로 이루어져 있다.

Source

VStack(alignment: .leading) {
    HStack {
        Spacer()
    }

    Group {
        Text("Hello.")

        Text("Welcom Back")
    }
    .font(.largeTitle)
    .fontWeight(.semibold)
}
.frame(height: 260)
.padding(.leading)
.background(Color(.systemBlue))
.foregroundColor(.white)
.clipShape(RoundedShape(corners: .bottomRight))

LoginView
| RoundedShape

Header를 구성하는 VStack의 오른쪽 하단 모서리가 둥근 것을 확인할 수 있다.

.clipShape(RoundedShape(corners: .bottomRight))

VStack에 적용한 위의 Modifier가 그 역할을 하는데,
기본적으로 clipShape나 roundedCorner는 전체 모서리에 일괄 적용된다는 특징이 있다.
따라서 지금 clipShape에 전달한 RoundedShape는 새로 Custom 한 모듈이 된다.

Source

struct RoundedShape: Shape {
    var corners: UIRectCorner

    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect, byRoundingCorners: corners, cornerRadii: CGSize(width: 80, height: 80))

        return Path(path.cgPath)
    }
}

Shape protocol을 채용한 구조체를 하나 만들고, path 함수를 정의한다.
적용할 모서리를 byRoundingCorners로 전달받아 cornerRadii에 지정된 값으로 둥글게 표시한다.
만약 곡률을 변경하고 싶다면 해당하는 변수를 하나 더 선언해 파라미터로 받으면 된다.

LoginView
| idField, pwField

header의 아래로는 id에 해당하는 email과 비밀번호를 입력받을 TextField가 자리한다.

Source

VStack(spacing: 40) {
    TextField("Email", text: $email)

    SecureField("Password", text: $password)
}
.padding(.horizontal, 32)
.padding(.top, 44)

email은 일반 TextField를 사용하고, 비밀번호는 자동으로 가려질 수 있도록 SecureField를 사용한다.
우선은 별도의 디자인을 하지 않고 기본 Api를 사용해 자리를 채워 뒀다.

LoginView
| forgot password, sign in

입력창 아래로는 버튼이 두 개 존재한다.
각각 비밀번호 찾기, 로그인 기능을 할 예정이다.

Source

HStack {
    Spacer()

    NavigationLink {
        Text("Reset password view...")
    } label: {
        Text("Forgot Password?")
            .font(.caption)
            .fontWeight(.semibold)
            .foregroundColor(Color(.systemBlue))
            .padding(.top)
            .padding(.trailing, 24)
    }
}

Button {
    print("login function")
} label: {
    Text("Sign In")
        .font(.headline)
        .foregroundColor(.white)
        .frame(width: 340, height: 50)
        .background(Color(.systemBlue))
        .clipShape(Capsule())
        .padding()
}
.shadow(color: .gray.opacity(0.5), radius: 10)

로그인 버튼에는 그림자 효과를 적용해 집중도와 입체감을 높였다.

LoginView
| registration 이동

Source

Spacer()

NavigationLink {
    RegistrationView()
        .toolbar(.hidden)
} label: {
    HStack {
        Text("Don't have an account?")

        Text("Sign Up")
            .fontWeight(.semibold)
    }
    .foregroundColor(Color(.systemBlue))
    .font(.footnote)
}
.padding(.bottom, 32)

화면 가장 아래에 위치하는 버튼은 RegistrationView로 이동하는 역할을 한다.
NavigatiopnLink를 사용해 해당 View를 호출할 수 있고,
디자인은 HStack을 활용한 TextView의 나열로 표현했다.
하단의 padding은 iPhone의 home indicator의 간섭을 피하기 위한 조치다.