Thuta Learning
ရှာဖွေရန်
IntermediateMobile Developmentintermediate

Images & Resources (SF Symbols)

စိတ်လျှော့ပါ။ ဒီခန်းကို စာအုပ်လိုမဟုတ်ဘဲ စကားပြောသလိုပဲ၊ နားလည်လွယ်အောင် ရှင်းပါမယ်။

ဒီခန်းပြီးရင် ဘာတတ်သွားမလဲ

  • Images & Resources (SF Symbols) ကို ကြောက်စရာမလိုအောင် နားလည်မယ်
  • ကိုယ်တိုင် Xcode/SwiftUI code ကို run ကြည့်တတ်မယ်
  • Real project ထဲမှာ ဒီ concept ကို ချက်ချင်း အသုံးချတတ်မယ်

ခဏလေး ဒီလိုပဲ စဉ်းစားကြည့်

`Assets.xcassets` ထဲက custom image ကို `Image("logo")` လို့ ခေါ်သုံးနိုင်ပါတယ် — device resolution (1x/2x/3x) auto-select ပါဝင်ပါတယ်။ SF Symbols ကတော့ Apple ကိုယ်တိုင် ပေးထားတဲ့ icon library ပါ (icon ၅၀၀၀ ကျော်) — `Image(systemName: "heart.fill")` လို့ ခေါ်ရင် custom asset ထည့်စရာ မလိုဘဲ, dark mode/accessibility (Dynamic Type) ကို automatic support လုပ်ထားတဲ့ icon ကို ရရှိနိုင်ပါတယ်.

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

Like button တစ်ခုမှာ `Image(systemName: isLiked ? "heart.fill" : "heart")` လို့ ရေးရင် — state ပေါ်မူတည်ပြီး filled/outline heart icon ကို ပြောင်းလဲပြသနိုင်ပါတယ်, custom asset ဘာမှ ထည့်စရာ မလိုပါ။ `accessibilityLabel("Like this post")` ကို ထည့်ရင် VoiceOver (screen reader) အတွက် support ရပါတယ်.

အတူတူ ကြည့်မယ်

swift
struct LikeButton: View {
    @State private var isLiked = false

    var body: some View {
        Button {
            isLiked.toggle()
        } label: {
            Image(systemName: isLiked ? "heart.fill" : "heart")
                .foregroundColor(isLiked ? .red : .gray)
        }
        .accessibilityLabel(isLiked ? "Unlike this post" : "Like this post")
    }
}
You should see
Button ကို tap တိုင်း heart icon က outline ↔ filled ဆိုပြီး toggle ဖြစ်နေတာ တွေ့ရမည်။

၅ မိနစ် စမ်းကြည့်

`LikeButton` ကို run ကြည့်ပြီး tap ကြည့်ပါ — SF Symbols app (Mac ပေါ်မှာ Apple ကပေးထားတဲ့ browser tool) ကို ဖွင့်ပြီး icon name အသစ်တစ်ခု ရှာကြည့်ပါ။

သတိလေးတစ်ချက်

Custom image (high resolution photo) ကို optimize မလုပ်ဘဲ `Assets.xcassets` ထဲ တိုက်ရိုက် ထည့်ခြင်း — app size ကြီးလာပြီး, App Store download/install time ကို ထိခိုက်နိုင်ပါတယ်။

ဒီနေရာမှာ လူအများမှားတတ်တယ်

  • Meaningful image (decorative မဟုတ်တဲ့) မှာ `accessibilityLabel` ထည့်ဖို့ မေ့ခြင်း — VoiceOver user တွေအတွက် accessibility ချို့ယွင်းစေပါတယ်
  • SF Symbols ရှိပြီးသား icon ကို custom asset အနေနဲ့ ပြန်ဆွဲထည့်ခြင်း — dark mode/Dynamic Type support ဆုံးရှုံးနိုင်ပါတယ်

အခု ကိုယ်တိုင် စမ်းကြည့်

`LikeButton` ကို run ကြည့်ပြီး tap ကြည့်ပါ — SF Symbols app (Mac ပေါ်မှာ Apple ကပေးထားတဲ့ browser tool) ကို ဖွင့်ပြီး icon name အသစ်တစ်ခု ရှာကြည့်ပါ။

You'll know it worked when: Button ကို tap တိုင်း heart icon က outline ↔ filled ဆိုပြီး toggle ဖြစ်နေတာ တွေ့ရမည်။

Images & Resources (SF Symbols) | Thuta Learning