SwiftUI로 친구목록 화면 만들기

 

 

Introduction

---

  두번째 포스팅에서는 SwiftUI를 이용하여 친구목록 화면을 만들어려고 합니다.  앞서 포스팅한 채팅 로그인화면은 보지 않더라도 처음 접하시는 분들은 이전 포스팅(Xcode에서 SwiftUI시작하기)을 확인 해주시기 바랍니다.

 

 

SwiftUI로 친구목록 화면 만들기 프롤로그

---

 

 

 

Balsamiq Mockups를 이용하여 친구목록화면UI를 위와 같이 구성을 해보았습니다. 상위 화면 중 이름 우측편은 아이콘으로 변경하여 만들도록 하겠습니다. 

 

• 참고: Balsamiq Mockups는 위 연결된 링크를 따라 들어가서 다운받아 Win/Mac에서 사용할 수 있습니다.

 

 

#무엇이 필요할까?

  앞서 포스팅한 채팅 로그인화면과 유사하여 조금씩 수정하여 만드시면 됩니다. 그리고 반복되는 UI를 나타내기 위해 또 다른 콘트롤이 필요합니다.  그리고, 앱 내부에서 화면 전환을 위해서 하단에 있는 TabView는 이후 따로 포스팅을 할 예정입니다. 

 

• Text
• system Icon
• Image
• ScrollView
• NavigationView
• VStack, HStack

 

 

 

SwiftUI로 친구목록 화화면 결과 및 레이아웃 미리 보기 

---

 

반복적인 내용이 포스팅 앞을 차지하고 있어 본론이 조금 늦었네요. 이전 포스팅 "프로필 만들기”에 이어 친구목록 화면 만들기를 할 예정입니다. 생각보다 간단한 UI를 가지고 있죠? 추가적인 설명은 이미지에 작성하지는 않았지만, List내부에 이미지,이름, 남깃말 3가지만 들어가면 되겠네요? 

 

다른 책을 찾아보면 아시겠지만, List를 출력할 때, 기본적으로 10개만 사용가능 하기때문에 동적으로 연결하는 방법을 살펴보아야 합니다. 이번 포스팅 역시, 동적으로 작성하니 걱정하지 마세요~^^

 

 

친구 목록 Sample Data 추가

---

 

가장먼저 화면에 보이지는 않지만, 꼭 필요한 친구목록 데이터를 먼저 작성하도록 하겠습니다. 데이터작성을 위해 FriendList.swift 를 추가하도록 합니다. 

 

그리고 다음의 코드를 추가하도록 하겠습니다. 

 

FriendList.swift

struct Friend {
    let id: UUID = UUID()
    let UserName: String
    let ImgName: String
    var message:String
}
extension Friend: Codable {}
extension Friend: Identifiable {}
extension Friend: Equatable {}

 

아직은 필요없지만 extension을 이용하여 Friend 구조체에 codable, Identificable, Equatable을 추가해두었습니다. 궁금하신 분들은 Apple Document를 참조해주시기 바랍니다. 내용이 길어질 것 같아 이번포스팅에는 담지 않도록 하겠습니다. 

 

코드 작성이 완료되면, 아래와 같이 Sample Code를 작성하도록 합니다. 

let FriendSamples = [
    Friend(UserName: "김민석", ImgName: "User_01", message: "좋은하루되세요^^"),
    Friend(UserName: "박민호", ImgName: "User_02", message: "말걸지마세요"),
    Friend(UserName: "박태영", ImgName: "User_03", message: "D+998"),
    Friend(UserName: "소지영", ImgName: "User_04", message: "오늘만큼 행복하자^^"),
    Friend(UserName: "노은지", ImgName: "User_05", message: "..."),
    Friend(UserName: "고철수", ImgName: "User_06", message: "아는만큼 보인다"),
    Friend(UserName: "판유지", ImgName: "User_07", message: "쓰파르타~!!"),
    Friend(UserName: "김희나", ImgName: "User_08", message: "쩜쩜쩜..."),
    Friend(UserName: "조성기", ImgName: "User_09", message: "귀요미😍"),
    Friend(UserName: "최석구", ImgName: "User_10", message: "긍정적인 생각은 새로운 현실을 창조한다"),
    Friend(UserName: "크리스", ImgName: "User_11", message: "hic et nunc"),
    Friend(UserName: "김준태", ImgName: "User_12", message: "여행❤️"),
    Friend(UserName: "이현수", ImgName: "User_13", message: "전화안되면 카톡주세요~"),
    Friend(UserName: "신태자", ImgName: "User_14", message: "좀편하게 살자...")
]

 

포스팅에 추가된 예제코드로서 향후 작업을 할 때, 웹서버 및 DB와 연동을 하여 실시간으로 친구목록 리스트 관리하는 방법도 알아봐야하겠죠? 그리고 실시간으로 값을 변경해야하지만, iOS 기기에 저장되어있어야 하는 데이터들도 있겠죠? 이런 부분들까지 포스팅으로 추후 다룰 예정이오니 기대해주세요~^^

 

상위 코드에서는 Friend 구조체를 초기화 하기 위하여 사용자 이름, 이미지 이름, 메시지를 파라미터로 전달하여 생성 하도록 합니다. 

 

 

 

 

친구목록 화면 만들기

---

 

이번에는 친구목록을 만들어 보도록 하겠습니다. 가장 먼저 body 내용은 다음과 같습니다. 

struct ContentView: View {
    var body: some View {
        List {
            ForEach(FriendSamples) {
                FriendListView($0.UserName, $0.ImgName, $0.message)
            }
        }
    }
}

코드를 살펴보면 FriendListView를 통해서 추가하는게 끝이네요!? 

이렇게 List를 동적으로 이용하기위해서는 상위 코드와 같이 사용하시면 됩니다. 이렇게 응용을 하면 서버로부터 데이터를 획득 후 메모리 공간 혹은 iOS 기기 내부에 데이터를 저장합니다. 그리고 사용자의 인터랙션에 따라 데이터를 추가/삭제를 진행하시면 됩니다. 이때, 서버와의 연동시 같이 변경해야하는 것 잊어버리시면 안됩니다. 

 

이제 그럼 FriendListView의 코드를 살펴볼까요?

struct FriendListView: View {
    
    let widthText:CGFloat = 300
    let ImageWH:CGFloat = 40
    
    var UserName:String
    var ImgName:String
    var Message:String

// 생략… 
}

 

  코드를 조금씩 끊어서 보도록 하겠습니다. widthText는 이미지 우측으로 사용자의 이름 및 메시지의 길이를 나타냅니다. 이때, 모바일 기기에 따라 크기가 달라지겠죠? 그러니 꼭 에뮬레이터에서 확인 해보셔야 합니다. 이 방법도 조금씩 정리해서 포스팅 하도록 할께요^^

 

ImageWH는 친구목록의 사진크기를 나타냅니다. 그외 친구목록의 정보를 저장하기위해, UserName, ImgName, Message를 사용하고 있습니다. 

struct FriendListView: View {
    
// 생략…
    init(_ UserName:String = "NoName”, _ imageName:String, _ Msg:String = "NoMsg") {
        self.UserName = UserName
        self.ImgName = imageName
        self.Message = Msg
    }
// 생략…
}

 

다음은 초기화를 살펴보도록 하겠습니다. 별 어려움이 없죠? (기본적인 문법은 조금씩 찾아보면서 해주세요~^^)

struct FriendListView: View {

// 생략 …
    
    var body: some View {
        HStack {
            Image(ImgName) // "01"
                .resizable()
                .frame(width: ImageWH, height: ImageWH)
                .clipShape(Circle())
            
            VStack {
                Text(UserName) // "홍길동"
                    .font(.headline)
                    .frame(width: widthText, height: 20, alignment: .leading)
                
                Text(Message) // "모두 좋은 하루 되세요~^^"
                    .font(.footnote)
                    .frame(width: widthText, height: 20, alignment: .leading)
            }
        }
    }
}

 

본문의 내용이 들어가는 것도 엄청 간단하네요!!

HStack을 이용하여 이미지와 텍스트가 들어가는 VStack을 추가하기만 하면 됩니다. 이때, 프로필 이미지와 같이 친구목록에도 사용자의 이미지를 수정하고 싶다면 살짝 코드만 바꾸기만 하면됩니다. 

 

그리고 List가 동적으로 수행이 제대로 되는지 확인하기위해서 데이터를 임의로 100개 이상 늘려서 에뮬레이터를 실행해보세요~^^

 

• 숙제: SampleData의 수를 100개 이상늘려서 실행해보세요. 

 

 

향후 포스팅 예고

---

 

 

다음 포스팅은 채팅방 리스트 입니다. 사실 Balsamiq Mockups을 이용하여 화면을 만들 때, 친구목록이랑 화면이 동일하다보니 따로 작성하지 않아서 포스팅에 사용하였습니다. 그래서 다음 포스팅에서는 조금 더 화면은 익숙하겠죠^^? 

 

이제 siwftUI를 이용하여 채팅 앱 UI도 다 만들어가니 힘내서 다음 포스팅을 보도록 할까요?^^