[iOS] Endediting 지리게 하는법

유인호·2024년 9월 11일
1

iOS

목록 보기
64/73
post-custom-banner

0. 서론

우리 회사 앱을 쓰다가 짜증나고야 말았다. 필자는 꽤 고집이 쌔서 다음 사항 중 하나라도 지켜지지 않은 앱은 전부 삭제해버린다. 그 항목들이 뭐냐면..

  1. (중요)백버튼 커스텀해서 Swipe to dismiss를 막아놓거나 어줍짢게 구현해서 사용에 불편을 느끼게 하는 앱
  2. 백그라운드에서 재생 중인 노래를 강제로 꺼버리는 앱
  3. View에다가 Endediting 처리 안해놓은 앱
  4. 안드로이드식 UI / UX를 구현해놓은 앱

2,3,4는 솔직히 그렇게 상관 없는데, 1번만큼은 진짜 칼같이 지킨다. 우리 회사 앱 UI도 백버튼을 지우고 툴바로 커스텀해서 하지 않는 이상 다음과 같이 만들기 어려운데, 백버튼을 지켜내면서 커스텀을 해내는 똘기를 얻어낼 수 있었다.

암튼 잡소리가 길었지만 오늘 3번을 작업하다가 꽤 괜찮은 방법이 있어 포스팅 해본다.

1. ViewModifier를 이용해서 Endediting처리

struct EndeditingViewModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .onTapGesture {
                UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
            }
    }
}

extension View {
    func endEditingModifier() -> some View {
        self.modifier(EndeditingViewModifier())
    }
}

// View
struct ContentView: View {
    @State private var text: String = ""

    var body: some View {
        VStack {
            TextField("Enter something", text: $text)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Text("Tap anywhere else to hide keyboard")
                .padding()
            
            Spacer()
        }
        .endEditingModifier() // Modifier 적용
    }
}

이런식으로 구성한다면 꽤 괜찮은 대안이 될 수 있다. 그러나 이 방법엔 한가지 문제가 존재한다.

2. TextField를 터치하고 한번 더 터치하면?

텍스트에서 수정하려 한번 더 터치한 유저는 봉변을 맞을 수 밖에 없을것이다. 키보드가 내려가버리기 때문.

어떻게 수정할 수 있을까?

도와줘 GPT에몽!!!

3. 해결

struct ContentView: View {
	@State private var text: String = ""

	var body: some View {
		ScrollView {
			TextField("Enter something", text: $text)
				.textFieldStyle(RoundedBorderTextFieldStyle())
				.padding()
				.onTapGesture { }

			Text("Tap anywhere else to hide keyboard")
				.padding()
			
			Spacer()
		}
		.endEditingModifier() // Modifier 적용
	}
}

TextField위에 onTapGesture를 얹어주면 잘된다는걸 볼 수 있다!
GPT에 한번 더 감탄하게 되는 솔루션인듯

profile
🍎Apple Developer Academy @ POSTECH 2nd, 🌱SeSAC iOS 4th
post-custom-banner

0개의 댓글