SwiftUI ) listRowSeparator / listSectionSeparator

 

안녕하세요 :) Zedd입니다.

iOS 15에서 listRowSeparator가 드디어^^...나왔다길래 ^^...

SwiftUI에서 Separator없애려면 

.onAppear {  UITableView.appearance().separatorStyle = .none }
.onDisappear { UITableView.appearance().separatorStyle = .singleLine }

뭐 이런 짓을 해야한다고 해서 정말 믿기지가 않았거든요..

Separator없애려고 UITableView.appearance()까지 가는건 오바같아서 하지는 않았읍니다..

 

이제부터 소개할 modifier들은 iOS 15이상에서만 가능하다는 사실 ^^..

OS분기도 짜증나는데 iOS 버전 분기까지 해야하는 상황 OTL..

그래도 Swift 5.5들어오면서 OS분기는 편해져서 좋네요 ㅎ

 

# listRowSeparator

Separator를 안보이게 하고싶다면

let items = [1, 2, 3, 4, 5, 6, 7, 8]

List {
    ForEach(items, id: \.self) {
        Text("Row \($0)")
            .listRowSeparator(.hidden) ✅
    }
}

listRowSeparator의 visibility에 hidden을 주면 된다. 

listRowSeparator modifier의 위치에 주의할 것.

let items = [1, 2, 3, 4, 5, 6, 7, 8]

List {
    ForEach(items, id: \.self) {
        Text("Row \($0)")
    }
}.listRowSeparator(.hidden) ❌

이건줄 알고 처음에 했다가...안되가지고 살짝 헤맴

왼 visible / 오 hidden

listRowSeparator의 visibility로 3가지 값을 줄 수 있다. 

1. automatic -> visibility configuration에 따라 보이거나 숨겨질 수 있음

2. visible -> 무조건 보여줌 

3. hidden -> 무조건 숨김

 

edge 파라미터도 있는데, 이건 무슨 역할을 하는지 모르겠다 😵

 

# listRowSeparatorTint

listRowSeparatorTint도 iOS 15에서 새로 나왔다.

말 그대로 Separator에 Tint를 줄 수 있다.

let items = [1, 2, 3, 4, 5, 6, 7, 8]

List {
    ForEach(items, id: \.self) {
        Text("Row \($0)")
            .listRowSeparatorTint(.blue) ✅
    }
}

이것도 listRowSeparatorTint의 위치에 주의할 것!

 

# listSectionSeparator

이건 Row가 아니라 Section Separator에 관한 modifier다.

요거 역시 iOS 15부터 사용가능. 예제로 보자. 

let items = [1, 2, 3, 4, 5, 6, 7, 8]

List {
    Section(header: Text("안녕")) {
        ForEach(items, id: \.self) {
            Text("Row \($0)")
        }
    }

    Section(header: Text("쿡쿡")) {
        ForEach(items, id: \.self) {
            Text("Row \($0)")
                
        }
    }
}
.listStyle(.plain)

테스트를 위해 listStyle을 plain으로 했다. 위 코드를 실행하면 

Row 8 밑에 separator가 생기는데,

List {
    Section(header: Text("안녕")) {
        ForEach(items, id:\.self) {
            Text("Row \($0)")
                
        }
    }
    .listSectionSeparator(.hidden) ✅

    Section(header: Text("쿡쿡")) {
        ForEach(items, id:\.self) {
            Text("Row \($0)")
                
        }
    }
}
.listStyle(.plain)

 

listSectionSeparator에 hidden을 주게 되면, 

이렇게 Row 8밑에 Section Separator가 사라진다. 

listSectionSeparator도 edge 파라미터가 있는데 뭐가 달라지는지 모르겠다..

 

# listSectionSeparatorTint

List {
    Section(header: Text("안녕")) {
        ForEach(items, id:\.self) {
            Text("Row \($0)")
                
        }
    }
    .listSectionSeparatorTint(.blue) ✅

    Section(header: Text("쿡쿡")) {
        ForEach(items, id:\.self) {
            Text("Row \($0)")
                
        }
    }
}
.listStyle(.plain)

이건 Row랑 똑같으니까 설명 생략.

 

listSectionSeparator친구들은 모든 ListStyle에 적용되는건 아닌 것 같다. 

insetGrouped ListStyle같은 경우에는 Section Separator가 아예 없는 듯 하다. 

(tint를 blue로 줬는데도 안보임)

 

이렇게 오랫동안 글을 안쓴것도 오랜만이네요 ㅎㅎ..

뭔가 요즘 제가 다 제쳐두고 이걸 공부해야겠어!!! 라는 마음이 들게 만드는 주제가 없었어요.

그러다 오늘 오랜만에 개인 프로젝트를 iOS 15로 처음 돌려봤는데, 수정/개선할 부분들이 많이 보이네요.

화이팅..💪

 

참고 

https://developer.apple.com/documentation/swiftui/menu/listrowseparator(_:edges:) 

https://developer.apple.com/documentation/swiftui/view/listsectionseparator(_:edges:)