SwiftUI ve GraphQL kullanan bir Instagram klonu – ProfileView
Bugün GraphQL ile Instagram klon uygulamamızın 3. bölümünde SwiftUI’nin derinliklerine inerek Profil görünümümüzü oluşturacağız.
SwiftUI’de yapıları yeniden kullanmayı öğreneceğiz ve birkaç kontrolü tartışacağız: VStack, HStack, GeometryReader, Text, Button, Spacer, Image, Divider ve diğerleri.
Önceki makalelerimizde, Instagram klon uygulamamızdaki ilgili kullanıcı arayüzleri ile bir kullanıcıyı nasıl kayded eceğimizi ve bir kullanıcıya nasıl giriş yapacağımızı öğrendik. Bugün bunu çok daha güzel hale getireceğiz.
Kemerlerinizi bağlayın ve başlayalım!
Daha iyi öğrenmek için iOS Instagram Clone projesini kaynak koduyla birlikte indirin.
Contents
- 1 Hızlı bir başlangıç mı istiyorsunuz?
- 2 Tam olarak ne inşa edeceğiz
- 3 HStack, Vstack, Zstack nedir?
- 4 Yeniden Kullanılabilirlik
- 5 Profil Görünümümüzü Oluşturma
- 6 İkinci HStack
- 7 Profili Düzenle Düğmemizi ve Bölücümüzü Ekleme
- 8 Zaman Çizelgemizi Taklit Etme
- 9 Alttan Görünüm
- 10 Ve son olarak…
- 11 Sonuç
- 12 Referans
- 13 SwiftUI’nin artı noktası nedir?
- 14 Hstack, Vstack ve Zstack Nedir?
- 15 SwiftUI’ın en iyi özelliği nedir?
Hızlı bir başlangıç mı istiyorsunuz?
Bu Uygulamayı Hub’ ımızdan klonlayın ve herhangi bir güçlük çekmeden kullanmaya başlayın!
Tam olarak ne inşa edeceğiz
Aşağıdaki görünümü oluşturacağız:
SwiftUI, çok sayıda bileşeni çok kolay ve basit bir şekilde yeniden kullanabildiğiniz için bu tür karmaşık arayüzler oluşturmayı gerçekten kolaylaştırır.
Tek şey, bu yeniden kullanılabilir bileşenleri nasıl oluşturacağımızı öğrenmemiz gerektiğidir. Bu tek görünüm aslında tek bir nihai sonuca entegre olan birden fazla görünümün birleşimidir.
Bileşenlerin basitleştirilmiş bir listesi aşağıdaki gibidir:
Nerede?
- VStack
- Hstack
- Gerçek kontroller (düğmeler, bölücüler, vb.)
HStack, Vstack, Zstack nedir?
SwiftUI, VStack (Dikey Yığın) kullanarak görünümleri dikey olarak ve HStack (Yatay Yığın) kullanarak yatay olarak hizalayarak ve Zstack (z-indeksindeki Z) ile görünümleri üst üste bindirerek kullanıcı arayüzlerini oluşturur.
Bir görünümün diğerinin altında olmasına her ihtiyaç duyduğunuzda bir VStack kullanmalısınız.
Bir görünümün diğerinin yanında olmasına her ihtiyaç duyduğunuzda, bir HStack kullanmalısınız.
Bir görünümün başka bir görünümü kaplamasına her ihtiyaç duyduğunuzda, bir ZStack kullanmalısınız.
Ana görünümümüz, biri diğerinin altına yatay olarak yerleştirilmiş birçok görünümden oluşacağından, her şeyi ana VStack’e dahil edeceğiz ve oradan başlayacağız, ancak tüm ekranı kaplamak için kullanmamız gereken bir tane daha var: GeometryReader.
Her şeyi (GeometryReader’ın) boyutunun ve koordinatlarının bir fonksiyonu olarak oluşturmamızı sağlar.
Yeniden Kullanılabilirlik
Yeniden kullanılabilirlik SwiftUI’nin güzelliklerinden biridir, bu nedenle karmaşık kontroller oluşturabilir ve bunları gereken her yerde yeniden kullanabiliriz.
Bu uygulama için, farklı görünümlerde yeniden kullanacağımız temel olarak iki bileşen var: Zaman Çizelgesi ve alt çubuk:
Bu nedenle, daha düzenli olması için bu UI kodlarını ayrı ayrı oluşturacağız. Bir görünüme özgü diğer tüm UI kodları o görünümün kod dosyasında kalabilir.
Öyleyse başlayalım…
Profil Görünümümüzü Oluşturma
Yeni bir SwiftUI dosyası ekleyin ve adını ProfileView.swift koyun.
Bileşenleri ekranı dolduracak şekilde hizalayacağımız için, bir GeometryReader eklemeye başlayalım, böylece içindeki tüm kontrollerin boyutunu ve koordinatlarını kullanmasını sağlayabiliriz:
struct ProfileView: Görüntüle {
var body: some View {
GeometryReader { geometry in
}
}
}
Şimdi, görünümümüz tüm kontrollerimizi içerecek bir ana VStack içine yerleştirilecek, bu yüzden onu da ekleyelim
struct ProfileView: Görüntüle {
var body: some View {
GeometryReader { geometry in
VStack{
}
}
}
}
Ve ilk kontrol “satırımız” en üstteki olacaktır:
Basit bir kontrol satırı gibi görünen şey aslında birden fazla kontroldür:
- “kullanıcı adı” metni
- yanındaki aşağıyı gösteren küçük ok
- Bu küçük ok ile bir sonraki kontrol arasındaki boşluğu doldurmak için bir Ara Parça
- sağda bir Hamburger düğmesi
Düğmeler için simgeler kullanacağız, bu nedenle bazı ücretsiz simgeler bulduğunuzdan emin olun. Bunları bulmak için iyi bir yer Freepik.
Şimdi HStack’imizi ekleyelim:
struct ProfileView: Görüntüle {
var body: some View {
GeometryReader { geometry in
VStack{
HStack{
}
}
}
}
}
Ve içinde, ilk Metnimiz:
struct ProfileView: Görüntüle {
var body: some View {
GeometryReader { geometry in
VStack{
HStack{
Text("kullanıcı adı")
}
}
}
}
}
Şimdiye kadar muhtemelen sizi buraya getirdi:
Pekâlâ. Bu bir başlangıç.
ekleyerek sol tarafa hizalayalım.
(alignment: .leading)
kodunu VStack’imize ekliyoruz:
struct ProfileView: Görüntüle {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Text("kullanıcı adı")
}
}
}
}
}
Tasarımımızla daha tutarlı hale getirmek için bazı Metin özellikleri de ekleyebiliriz:
Rengini AppDelegate’imizde tanımlanmış olan lightBlueColor’a ayarlamak için:
.foregroundColor(lightBlueColor)
Yazı tipi ağırlığını değiştirmek için:
.fontWeight(.semibold)
Ve son olarak önde gelen tarafa biraz dolgu (boşluk) eklemek için:
.padding(.leading, 10)
Ve kodunuz şimdi şöyle görünmelidir:
struct ProfileView: Görüntüle {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Text("kullanıcı adı")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
}
}
}
}
}
Ve kullanıcı arayüzünüz bu şekilde görünmelidir:
Şimdi şu küçük ok düğmesini ekleyelim.
Bu makalenin 2. Bölümünde öğrendiğiniz gibi, butonumuz için aşağı ok resmini ekleyelim ve butonu SwiftUI kodumuza ekleyelim:
Button(action: {}){
}
Ve içine Görselimizi ekleyin:
Button(action: {}){
Görüntü("aşağı ok")
.resizable()
.frame(genişlik: 10, yükseklik: 10)
}
Ve sadece uyum için, üst kısma biraz dolgu ekleyelim:
Button(action: {}){
Görüntü("aşağı ok")
.resizable()
.frame(genişlik: 10, yükseklik: 10)
}
.padding(.top, 5)
Tam kodumuz şimdi bu şekilde olmalıdır:
struct ProfileView: Görüntüle {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Text("kullanıcı adı")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Button(action: {}){
Görüntü("aşağı ok")
.resizable()
.frame(genişlik: 10, yükseklik: 10)
}
.padding(.top, 5)
}
}
}
}
}
Ve kullanıcı arayüzümüz:
Şimdi de hamburger butonunu aynı şekilde ekleyelim:
Button(action: {}){
Görüntü("menü")
.resizable()
.frame(genişlik: 20, yükseklik: 20)
}.padding()
Tam kodumuz:
struct ProfileView: Görüntüle {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Text("kullanıcı adı")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Button(action: {}){
Görüntü("aşağı ok")
.resizable()
.frame(genişlik: 10, yükseklik: 10)
}
.padding(.top, 5)
Button(action: {}){
Görüntü("menü")
.resizable()
.frame(genişlik: 20, yükseklik: 20)
}.padding()
}
}
}
}
}
Ve bizim görüşümüz:
Keşke bu iki düğmenin arasına koyabileceğimiz, aralarındaki tüm boşluğu alacak ve her şeyi hizalayacak bir şey olsaydı…
Spacer()
Şimdi iyi görünüyor!
Şimdiye kadarki tam kodumuz:
struct ProfileView: Görüntüle {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Text("kullanıcı adı")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Button(action: {}){
Görüntü("aşağı ok")
.resizable()
.frame(genişlik: 10, yükseklik: 10)
}
.padding(.top, 5)
Spacer()
Button(action: {}){
Görüntü("menü")
.resizable()
.frame(genişlik: 20, yükseklik: 20)
}.padding()
}
}
}
}
}
Şimdi de HStack’in yüksekliğini sabitleyelim ve ön tarafına biraz dolgu ekleyelim:
.frame(yükseklik: 50) .padding(.leading, 10)
Tam kod:
struct ProfileView: Görüntüle {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Text("kullanıcı adı")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Button(action: {}){
Görüntü("aşağı ok")
.resizable()
.frame(genişlik: 10, yükseklik: 10)
}
.padding(.top, 5)
Spacer()
Button(action: {}){
Görüntü("menü")
.resizable()
.frame(genişlik: 20, yükseklik: 20)
}.padding()
}.frame(yükseklik: 50)
.padding(.leading, 10)
}
}
}
}
Şimdi başlayabiliriz…
İkinci HStack
Her şeyi bir ana VStack içinde oluşturduğumuz için, bu ilk HStack’in dışına eklediğimiz her yeni kontrol otomatik olarak onun altına yerleştirilecektir.
Şimdi sıra ikinci HStack’imizi yapmaya ve ekranımızın ikinci bölümünü oluşturmaya geldi:
Bu da içinde 4 VStack içeren bir HStack olacak: biri Görüntü ve altındaki metin için, 3’ü de altlarında metin olan sayılar için.
Muhtemelen şimdiye kadar konsepti anladığınız için, bu yeni HStack için tam kodu vereceğim:
HStack{
VStack{
Image("logo-social")
.resizable()
.frame(genişlik: 90, yükseklik: 90)
.clipShape(Circle())
.shadow(yarıçap: 3)
.overlay(Circle().stroke(Color.pink, lineWidth: 1))
Text("Adınız")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
}.padding(.leading, 10)
VStack{
Text("10")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Yayınlar")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding(.leading, 30)
VStack{
Text("100")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Takipçiler")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Text("1000")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Takip eden")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}
}.frame(yükseklik: 100)
.padding(.leading, 10)
Ve tam kodumuz şöyle olacaktır:
struct ProfileView: Görüntüle {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Text("kullanıcı adı")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Button(action: {}){
Görüntü("aşağı ok")
.resizable()
.frame(genişlik: 10, yükseklik: 10)
}
.padding(.top, 5)
Spacer()
Button(action: {}){
Görüntü("menü")
.resizable()
.frame(genişlik: 20, yükseklik: 20)
}.padding()
}.frame(yükseklik: 50)
.padding(.leading, 10)
HStack{
VStack{
Image("logo-social")
.resizable()
.frame(genişlik: 90, yükseklik: 90)
.clipShape(Circle())
.shadow(yarıçap: 3)
.overlay(Circle().stroke(Color.pink, lineWidth: 1))
Text("Adınız")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
}.padding(.leading, 10)
VStack{
Text("10")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Yayınlar")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding(.leading, 30)
VStack{
Text("100")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Takipçiler")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Text("1000")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Takip eden")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}
}.frame(yükseklik: 100)
.padding(.leading, 10)
}
}
}
}
Böylece görünümümüz şöyle olacak:
Neat!
Profili Düzenle Düğmemizi ve Bölücümüzü Ekleme
Profili Düzenle düğmesinin ve altındaki Bölücünün bir VStack içinde olması gerektiğini düşünmek cazip gelebilir:
Ancak tüm Görünümümüz ana VStack’imizin içinde olduğu için bu gerçekten gerekli değildir, bu nedenle bunları kodumuza ekleyebiliriz:
Button(action: {}){
Text("Profili Düzenle")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(genişlik: 400)
.padding()
Bölücü()
şöyle görünecektir:
struct ProfileView: Görüntüle {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Text("kullanıcı adı")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Button(action: {}){
Görüntü("aşağı ok")
.resizable()
.frame(genişlik: 10, yükseklik: 10)
}
.padding(.top, 5)
Spacer()
Button(action: {}){
Görüntü("menü")
.resizable()
.frame(genişlik: 20, yükseklik: 20)
}.padding()
}.frame(yükseklik: 50)
.padding(.leading, 10)
HStack{
VStack{
Image("logo-social")
.resizable()
.frame(genişlik: 90, yükseklik: 90)
.clipShape(Circle())
.shadow(yarıçap: 3)
.overlay(Circle().stroke(Color.pink, lineWidth: 1))
Text("Adınız")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
}.padding(.leading, 10)
VStack{
Text("10")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Yayınlar")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding(.leading, 30)
VStack{
Text("100")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Takipçiler")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Text("1000")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Takip eden")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}
}.frame(yükseklik: 100)
.padding(.leading, 10)
Button(action: {}){
Text("Profili Düzenle")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(genişlik: 400)
.padding()
Bölücü()
}
}
}
}
ve kullanıcı arayüzümüz:
Zaman Çizelgemizi Taklit Etme
Zaman çizelgesi görünümümüz uygulamanın diğer bölümlerinde kullanılacak, bu nedenle onu farklı bir dosyada kırmak mantıklı.
ProfileView’ımızın içinden de aynı şekilde yeniden kullanılabilir, ancak kodu böldüğümüzde işleri daha düzenli tutar.
Bir TimelineView.swift dosyası oluşturun.
SwiftUI’da verileri görüntülemenin birçok farklı yolu var, ancak ben uygulamam için bunu seçtim:
- Zaman Çizelgesi görünümümüz bir LineViews VStack’idir
- Her LineView, 3 PreviewView tarafından oluşturulan bir HStack’tir
- Her PreviewView ‘da bir Resim vardır
Yapacağım ilk şey, verilerimizi tutmak için bir struct oluşturmak. Bu struct Preview’ı çağıracağım ve 2 parametresi olacak: yinelenecek bir id (Int türünde) ve ileteceğim bir Görüntünün URL’sini tutacak bir imageURL (String türünde):
struct Önizleme {
var id: Int
imageUrl olsun: String
}
Dediğim gibi, verilerinizi görüntülemek için başka bir yol seçebilirsiniz, ancak ben bunu anlamayı çok kolay buldum, bu yüzden önce PreviewView’ımız için yapıyı ekleyelim.
Yapımız daha sonra ayarlayacağım bir Preview özelliğine sahiptir, ancak görüntüyü oluşturmak için imageURL özelliğini kullanacaktır:
struct PreviewView: Görünüm {
önizleme yapalım: Önizleme
var body: some View {
Image(preview.imageUrl)
.resizable()
.frame(genişlik: 136, yükseklik: 136)
}
}
Bunu yaptıktan sonra, satırda görüntülenecek 3 Önizleme dizisini alan LineView’ımız için struct ekleyebiliriz.
Bunu gelecekte gerçek verileri yansıtacak şekilde değiştireceğim, ancak şimdilik sorun yok:
struct LineView: Görüntüle {
let previewArray:[Preview]
var body: some View {
HStack(aralık: 2){
PreviewView(preview: previewArray[0])
PreviewView(preview: previewArray[1])
PreviewView(preview: previewArray[2])
}
}
}
Son olarak, içinde döngü yapacağımız Preview nesnelerinden oluşan bir Array oluşturabiliriz:
let previews:[Önizleme] = [
Preview(id: 0, imageUrl: "1"),
Preview(id: 1, imageUrl: "2"),
Preview(id: 2, imageUrl: "3"),
Preview(id: 3, imageUrl: "4"),
Preview(id: 4, imageUrl: "5"),
Preview(id: 5, imageUrl: "6"),
Preview(id: 6, imageUrl: "7"),
Preview(id: 7, imageUrl: "8"),
Preview(id: 8, imageUrl: "9"),
Preview(id: 9, imageUrl: "10"),
Preview(id: 10, imageUrl: "11"),
Preview(id: 11, imageUrl: "12"),
Önizleme(id: 12, imageUrl: "13")
]
Bu Array’de 13 nesne var ve kullanacağım resimlere 1’den 13’e kadar isimlerle referans verdim. Ayrıca bu görüntüleri Assets klasörüme kaydettim, ancak bunu ileride değiştireceğim:
Artık her şeyi tamamladığımıza göre, Array’imizde yineleme yapabilir ve 3 önizleme nesnesi geçirerek LinePreviews’ımızı oluşturabiliriz.
Aynı nesneyi geçirdiğime dikkat edin, ancak bir kez daha, bu görüntüleme için geçicidir ve değiştirilecektir:
var body: some View {
ScrollView{
VStack(alignment: .leading, spacing: 2){
ForEach(önizlemeler, id: \.id) { önizleme içinde
LineView(previewArray: [preview, preview, preview])
}
}
}
}
Yani tam kodumuz şöyle bir şey olacaktır:
struct TimelineView: Görüntüle {
let previews:[Önizleme] = [
Preview(id: 0, imageUrl: "1"),
Preview(id: 1, imageUrl: "2"),
Preview(id: 2, imageUrl: "3"),
Preview(id: 3, imageUrl: "4"),
Preview(id: 4, imageUrl: "5"),
Preview(id: 5, imageUrl: "6"),
Preview(id: 6, imageUrl: "7"),
Preview(id: 7, imageUrl: "8"),
Preview(id: 8, imageUrl: "9"),
Preview(id: 9, imageUrl: "10"),
Preview(id: 10, imageUrl: "11"),
Preview(id: 11, imageUrl: "12"),
Önizleme(id: 12, imageUrl: "13")
]
var body: some View {
ScrollView{
VStack(alignment: .leading, spacing: 2){
ForEach(önizlemeler, id: \.id) { önizleme içinde
LineView(previewArray: [preview, preview, preview])
}
}
}
}
}
struct TimelineView_Previews: PreviewProvider {
static var previews: some View {
TimelineView()
}
}
struct Önizleme {
var id: Int
imageUrl olsun: String
}
struct LineView: Görüntüle {
let previewArray:[Preview]
var body: some View {
HStack(aralık: 2){
PreviewView(preview: previewArray[0])
PreviewView(preview: previewArray[1])
PreviewView(preview: previewArray[2])
}
}
}
struct PreviewView: Görüntüle {
önizleme yapalım: Önizleme
var body: some View {
Image(preview.imageUrl)
.resizable()
.frame(genişlik: 136, yükseklik: 136)
}
}
Ve bunu ProfileView.swift dosyamızdan Divider’ımızın hemen altına çağırırsak:
...
Button(action: {}){
Text("Profili Düzenle")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(genişlik: 400)
.padding()
Bölücü()
TimelineView().padding(.leading, 10)
...
Ayrıca hemen altına başka bir Bölücü ekleyerek neredeyse istediğimiz nihai sonucu elde edebiliriz:
...
Button(action: {}){
Text("Profili Düzenle")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(genişlik: 400)
.padding()
Bölücü()
TimelineView().padding(.leading, 10)
Bölücü()
...
Nasıl görünüyor?
Şimdiden güzel görünüyor mu?
Ekleyerek bitirelim…
Alttan Görünüm
Alt görünüm, uygulamanın birden fazla bölümünde kullanacağımız için başka bir dosya olacaktır.
BottomView.swift dosyanızı oluşturun ve içinde aralarında Spacers bulunan 4 düğmeden oluşan bir HStack (düğmeler yan yana olacağı için) oluşturun. Simgeleri unutmayın!
struct BottomView: Görüntüle {
var body: some View {
HStack{
Button(action: {}){
Resim("home")
.resizable()
.frame(genişlik: 30, yükseklik: 30)
}.padding()
Spacer()
Button(action: {}){
Görüntü("arama")
.resizable()
.frame(genişlik: 30, yükseklik: 30)
}.padding()
Spacer()
Button(action: {}){
Image("plus-button")
.resizable()
.frame(genişlik: 30, yükseklik: 30)
}.padding()
Spacer()
Button(action: {}){
Görüntü("kalp")
.resizable()
.frame(genişlik: 30, yükseklik: 30)
}.padding()
Spacer()
Button(action: {}){
Resim("kullanıcı")
.resizable()
.frame(genişlik: 30, yükseklik: 30)
}.padding()
}.frame(yükseklik: 35)
}
}
Bu çok kolay oldu! Bunu ProfileView.swift dosyamıza, son Bölücümüzün hemen altına entegre edelim:
...
Bölücü()
TimelineView().padding(.leading, 10)
Bölücü()
BottomView()
...
Yani ProfileView’in tam kodu şöyle olacaktır:
import SwiftUI
struct ProfileView: Görüntüle {
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading){
HStack{
Text("kullanıcı adı")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
.padding(.leading, 10)
Button(action: {}){
Görüntü("aşağı ok")
.resizable()
.frame(genişlik: 10, yükseklik: 10)
}
.padding(.top, 5)
Spacer()
Button(action: {}){
Görüntü("menü")
.resizable()
.frame(genişlik: 20, yükseklik: 20)
}.padding()
}.frame(yükseklik: 50)
.padding(.leading, 10)
HStack{
VStack{
Image("logo-social")
.resizable()
.frame(genişlik: 90, yükseklik: 90)
.clipShape(Circle())
.shadow(yarıçap: 3)
.overlay(Circle().stroke(Color.pink, lineWidth: 1))
Text("Adınız")
.foregroundColor(lightBlueColor)
.fontWeight(.semibold)
}.padding(.leading, 10)
VStack{
Text("10")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Yayınlar")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding(.leading, 30)
VStack{
Text("100")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Takipçiler")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}.padding()
VStack{
Text("1000")
.font(.system(size: 30))
.foregroundColor(lightBlueColor)
.fontWeight(.bold)
Text("Takip eden")
.font(.system(size: 13))
.foregroundColor(lightBlueColor)
}
}.frame(yükseklik: 100)
.padding(.leading, 10)
Button(action: {}){
Text("Profili Düzenle")
.fontWeight(.bold)
.foregroundColor(lightBlueColor)
}.frame(genişlik: 400)
.padding()
Bölücü()
TimelineView().padding(.leading, 10)
Bölücü()
BottomView()
}
}
}
}
struct ProfileView_Previews: PreviewProvider {
static var previews: some View {
ProfileView()
}
}
Ve son olarak…
Tam ProfileView’ımız var:
Şimdi, bu ne kadar harikaydı!
Sonuç
Bugün uygulamanıza bir Profil Görünümünü nasıl taklit edeceğinizi öğrendiniz. Bu hala sadece bir mock, ancak zaman içinde ona bazı işlevler kazandıracağız.
SwiftUI’de bileşenleri nasıl oluşturacağınızı ve yeniden kullanacağınızı ve bunları karmaşık bir görünüm oluşturmak için ne kadar güzel kullanacağınızı öğrendiniz. Harika!
Bir sonraki makalede birkaç başka Görünüm daha oluşturacağız!
Bizi izlemeye devam edin!
Referans
- Bu serinin 1 . Bölümü Instagram Clone makalesidir .
- Bölüm 2 Swift Instagram Klonu makalesidir.
- Bölüm 3, Instagram Klon Profili makalesidir.
- Bölüm 4, Insta Clone Homeview makalesidir.
- Kaynak kodlu bir iOS Instagram Clone projesi indirin ve Back4App kullanmaya başlayın.
Back4App’a şimdi kaydolun ve Instagram Klon Uygulamanızı oluşturmaya başlayın.
SwiftUI’nin artı noktası nedir?
Instagram uygulaması gibi klonlar oluşturmak istiyorsanız, SwiftUI sihrini gösterecektir.
-Karmaşık arayüzler oluşturmaya yardımcı olur
-Bileşenlerin yeniden kullanımı
-Arayüzleri yeniden kullanma süreci basit ve kolaydır
Sadece bu bileşenleri birlikte yeniden kullanma bilgisine sahip olmalısınız.
Hstack, Vstack ve Zstack Nedir?
Bu isimler ABD temsili nedeniyle bağlantılıdır. SwiftUI kullanıcı arayüzlerini aşağıdaki kalıplarla oluşturur.
-Kullanıcı arayüzü, Dikey Yığın kullanılarak dikey olarak oluşturulur
-Yatay yığın kullanılarak yatay olarak oluşturulur
-Üst üste binen görünümler ZStack ile oluşturulur
SwiftUI’ın en iyi özelliği nedir?
SwiftUI’nin en iyi özelliği yeniden kullanılabilirliktir. Görünümleri oluşturmak için bileşenleri tekrar tekrar kullanabilirsiniz. Tüm uygulamalar için geçerlidir. Bu bileşenlerle nasıl oynayacağınızı bilmeniz gerekir.
