프로젝트/Twitter Clone App (w∕Firebase) (27) 썸네일형 리스트형 06. 기본 UI 구성하기 #6 기본 UI 구성하기 #6 FloatingButton & NewTweetView FloatingButton 메인 화면 어디서든 새 글을 작성할 수 있도록 FeedView 위에 표시되는 FloatingButton을 생성한다. 더보기 Source struct FeedView: View { var body: some View { ZStack(alignment: .bottomTrailing) { ScrollView { LazyVStack { ForEach(0 ... 20, id: \.self) { _ in TweetRowView() .padding() } } } Button { print("this is Floating Button Function") } label: { Image("tweet") .resizab.. 05. 기본 UI 구성하기 #5 기본 UI 구성하기 #5 SideMenuView & ContentView SideMenuView | UserStatsView var userInfoDetails: some View { VStack(alignment: .leading, spacing: 4) { HStack { Text("Archimedes") .font(.title2).bold() Image(systemName: "checkmark.seal.fill") .foregroundColor(Color(.systemBlue)) } Text("@mathematician") .font(.subheadline) .foregroundColor(.gray) Text("Eureka!") .font(.subheadline) .padding(.vertical) .. 04. 기본 UI 구성하기 #4 기본 UI 구성하기 #4 ExplorerView, UserRowView 사용자 검색을 위한 화면을 구성한다. UserRowView 더보기 Source struct UserRowView: View { var body: some View { HStack(spacing: 12) { Circle() .frame(width: 45, height: 45) VStack(alignment: .leading, spacing: 4) { Text("user1") .font(.subheadline).bold() .foregroundColor(.black) Text("almost admin") .font(.subheadline) .foregroundColor(.gray) } Spacer() } .padding(.horizont.. 03. 기본 UI 구성하기 #3 기본 UI 구성하기 #3 ProfileView ProfileView | tweetFilterBar 향후 해당 계정의 Tweet을 불러올 때 사용할 버튼을 구상한다. 세 개의 항목이 존재하고, 바로 아래에는 밑줄과 같은 인디케이터가 존재하는 것이 특징이다. 더보기 Source var tweetFilterBar: some View { HStack { ForEach(TweetFilterViewModel.allCases, id: \.rawValue) { item in VStack { Text(item.title) .font(.subheadline) .fontWeight(selectedFilter == item ? .semibold : .regular) .foregroundColor(selectedFilter =.. 02. 기본 UI 구성하기 #2 기본 UI 구성하기 #2 MainTabView & ProfileView MainTabView 이전에 구현한 FeedView를 시작으로, 이후에 구현할 SearchView, NotificationView, MessageView를 포함한 TabView를 추가한다. 더보기 Source struct MainTabView: View { @State private var selectedIndex = 0 var body: some View { TabView(selection: $selectedIndex) { FeedView() .onTapGesture { self.selectedIndex = 0 } .tabItem { Image(systemName: "house") }.tag(0) ExploreView() .onTa.. 01. 기본 UI 구성하기 #1 기본 UI 구성하기 #1 TweetRowView & FeedView TweetRowView Twitter의 글들은 Tweet으로 불리고, 위와 같은 레이아웃을 가진다. 더보기 Source struct TweetRowView: View { var body: some View { VStack(alignment: .leading) { //profile image & user info & tweet HStack(alignment: .top, spacing: 12) { Circle() .frame(width: 56, height: 56) .foregroundColor(Color(.systemBlue)) //user info & tweet caption VStack(alignment: .leading, spacin.. 00. 시작하며 백엔드 Firebase Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com DB를 혼자 구성할 능력도, 생각도 없기 때문에 이 부분은 클라우드 서비스를 적극적으로 사용한다. 이번에도 가장 익숙한 Firebase를 활용하는 방향으로 계획했다. 앱 UI Apple Developer Documentation developer.apple.com 역시나 SwiftUI를 사용한다. 22년 iOS16 및 여러 새 OS들의 배포와 함께 SwiftUI 4.0도 함께 출시됐다. 여러 API들이 새로 생겼고, 기존의 API 중 일부가 deprecated 되는 등 변화가 있다. 아직 관련 자료들이 최신화되지.. 이전 1 2 3 다음
