Build the unofficial Udemy Home Screen (4)
지금까지 빨간색 테두리로 된 부분을 만들었다.
주황색 테두리가 이제 만들 CourseView이다.
그전에 조금 수정을 한다.
Textheader 간격주기
private func makeMainBannerSection() -> NSCollectionLayoutSection {
let itemSize = NSCollectionLayoutSize(
widthDimension: .fractionalWidth(1.0),
heightDimension: .fractionalHeight(1.0))
let item = NSColle...
Build the unofficial Udemy Home Screen (3)
이전에 Background Color를 Green으로 했던걸 지워준다.
private func setup() {
register(MainBannerCollectionViewCell.self, forCellWithReuseIdentifier: MainBannerCollectionViewCell.namedIdentifier)
}
TextHeaderCollectionViewCell 세팅
final class TextHeaderCollectionViewCell: UICollectionViewCell {
private let label = AttributedTappableLabe...
Build the unofficial Udemy Home Screen (2)
MainBannerCollectionViewCell 추가하기
이 파일은 View에 있지만, SwiftUI를 import 해주었다.
import SwiftUI를 하게되면 UIkit 을 별도로 import를 해야하나?
이렇게 Definition을 보게되면 SwiftUI안에 UIKit을 이미 import한게 내장이 되어있다는걸 알 수 있다. 즉 import를 할 필요가 없다.
Swift Style Guide에 코드 컨벤션 관련한 내용이 있으니 한번 확인해보자.
import SwiftUI
final class MainBannerCollectionViewCel...
Build the unofficial Udemy Home Screen (1)
시작전 기본 세팅
우선 스냅킷을 설치.
Snapkit Dynamic은 여전히 에러가 발생하는듯하니 설치하지 말자.
Xcode Project 생성시 생기는 파일에서 Info.plist, VC 빼고 나머지 파일들을 모두 Supporting Files에 넣어주었다.
그리고 이번엔 JSON을 사용하여 구성을하기에 JSON 파일을 하나 만들어 준다.
{
"layout" : {
"name" : "Hello"
}
}
그리고 내용은 간단하게 이렇게만 한다.
그리고 SwiftUIView 디렉토리엔 반드시 위와 같이 SwiftUI 에 해당하는 파일로 선택해서 만들자.
컬렉션뷰 ...
Hike (1)
1. 기본 세팅
1. Asset에 이미지 파일 추가
설명은 생략한다.
그냥 드래그 앤 드롭으로 끝.
2. 이미지 로드
struct ContentView: View {
var body: some View {
Image("image-1")
.resizable()
.scaledToFit()
}
}
이렇게 파일 명만 적어도 로드가 된다.
작동 사진은 생략.
3. CardView 생성
새로운 SwiftUI File을 만들고 image 관련코드를 넣어준다.
LinearGradient를 사용하여 그라데이션 효과를 줄 수 있다.
Exte...
How to load a remote image from the Internet?
AsyncImage
AsyncImage는 비동기로 이미지를 로드할때 사용한다.
로드중일때는 보통 Placeholder를 사용한다.
1. 뼈대 작성
struct ContentView: View {
private let imageURL: String = "https://credo.academy/credo-academy@3x.png"
var body: some View {
// MARK: - 1. BASIC
AsyncImage(url: URL(string: imageURL))
}
}
이것이 바로 기본 틀이다.
실행...
LOTR Converter (4)
Info Button 기능 추가하기
Info Button을 누르면 Exchange Info 화면이 나오게 할 것이다.
// Info Button
HStack {
Spacer()
Button {
showExchangeInfo.toggle()
} label: {
Image...
631 post articles, 79 pages.