[만쥬네 동아리 가게] ToDoList (2) : DetailView, NavigationBar, tabBar

shstl98·2022년 3월 6일
0

Swift 어플 개발

목록 보기
2/2
post-thumbnail

View

구성

  • 대표 이미지
  • 동아리명
  • 동아리 주제

참고 디자인

스타벅스

Views

업데이트가 됨에 따라서 stackoverflow에서 가장 많은 추천수를 받은 글들의 방법을 사용해도 적용되지 않았다.
(알고보니 newest 순서대로 보면 됐음)
어쩌면 남들은 신경 안 쓸 굉장히 사소한 것들이지만 완벽하게 하고 싶어서 계속 시간을 부으며 찾아서 결국 구현했다.

var body: some View {
        TabView {
            NavigationView{
                ZStack {
                    themeColor.ignoresSafeArea()
                    SelectView()
                }
                .navigationBarHidden(true)
            }
            .tabItem {
                Image(systemName: "house.fill")
            }
            
            Text("Hello")
                .tabItem {
                    Image(systemName: "magnifyingglass")
                }

            
            Text("Hello")
                .tabItem {
                    Image(systemName: "person.fill")
                }
        }
        .onAppear() {
            UITabBar.appearance().backgroundColor = .init(themeColor)
            UITabBar.appearance().shadowImage = UIImage()
            UITabBar.appearance().unselectedItemTintColor = .init(Color.secondary.opacity(0.5))
            UITabBar.appearance().backgroundImage = UIImage()
            
            UINavigationBar.appearance().barTintColor = .init(themeColor)
            UINavigationBar.appearance().backgroundColor = .init(themeColor)
            UINavigationBar.appearance().shadowImage = UIImage()
        }
    }
}

SocietyView

import SwiftUI

struct SocietyView: View {
    
    @EnvironmentObject private var mainViewModel : MainViewModel
    @Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
    let themeColor = Color("ThemeColor")
    
    let category: Category
    
    var body: some View {
        ZStack {
            themeColor.ignoresSafeArea()
            
            List{
                ForEach(mainViewModel.societies) { society in
                    if category == society.category || category == mainViewModel.categories.first! {
                        // || 이후 코드 : 전체 카테고리에 해당할 경우 동아리 전부를 불러옴
                        NavigationLink {
                            DetailView(society: society)
                        } label: {
                            SocietyItem(society: society)
                        }
                        .listRowSeparator(.hidden)
                        .listRowBackground(Color.accentColor.opacity(0.0))
                    }
                }
            }
            .listStyle(.plain)
        }
        .navigationTitle(Text("\(category.name) 동아리"))
        .navigationBarBackButtonHidden(true)
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                backButton
            }
            ToolbarItem(placement: .navigationBarTrailing) {
                heartButton
            }
        }
        .navigationBarTitleDisplayMode(.inline)
    }
}

struct SocietyView_Previews: PreviewProvider {
    static var previews: some View {
        NavigationView {
            SocietyView(category: MainViewModel().categories.first!)
                .environmentObject(MainViewModel())
        }
    }
}

extension SocietyView{
    
    func SocietyItem(society: Society) -> some View {
        
        HStack(spacing: 25){
            society.mainImage
                .resizable()
                .scaledToFill()
                .frame(width: 100, height: 100)
                .cornerRadius(10)
            
            VStack(alignment: .leading, spacing: 5){
                Spacer()
                
                Text(society.name)
                    .font(.headline)
                    .fontWeight(.bold)
//                    .padding(.bottom, 0.5)
                Text("\(society.theme) 동아리")
                    .font(.subheadline)
                    .foregroundColor(.secondary)
                    
                Spacer()

                Text("03.02 ~ 03.16")
                    .font(.headline)
                    .fontWeight(.semibold)
                
                Spacer()
            }
        }
    }
    
    private var backButton: some View{
        Button {
            self.presentationMode.wrappedValue.dismiss()
        } label: {
            Image(systemName: "arrow.left")
                .tint(.red)
        }
    }
    
    private var heartButton: some View{
        Button {
            self.presentationMode.wrappedValue.dismiss()
        } label: {
            Image(systemName: "heart.fill")
                .tint(.red)
        }
    }
}

// toolbar에서는 swipe하여 이전 화면으로 되돌아갈 수 없는 것을 확인
// 즉 navigationBarBackButton을 customize하여 swipe하는것은 불가
// stack overflow 검색 결과, UINavigationController을 확장하면 가능
extension UINavigationController: UIGestureRecognizerDelegate {
    override open func viewDidLoad() {
        super.viewDidLoad()
        interactivePopGestureRecognizer?.delegate = self
    }

    public func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
        return viewControllers.count > 1
    }
}

최종

Next ToDoList

  • 주석 꼼꼼하게 달고 코드 정리

    오른팔 골절과 개강이 겹치다보니 한동안 swift를 안 하다가 오랜만에 코드를 봤을 때 완전히 까먹었다.
    코드 정리 후 주석을 깔끔하게 달아야겠다.

  • 동아리 세부 View
  • String to Date
profile
허쓸하는 좀비

0개의 댓글