সুইফট ইউআই – টেক্সট

আমরা একটা আইওএস প্রজেক্ট তৈরি করে নিব। প্রজেক্টটি Xcode এ ওপেন করলে দেখব project_nameApp.swift এবং ContentView.swift ফাইল। আমরা কোড লিখব মূলত ContentView.swift ফাইলে। এখানে ডিফল্ট ভাবে কিছু কোড লেখা থাকে। সেগুলো রিমুভ করে আমরা শুধু একটা টেক্সট ভিউ নিয়ে কাজ করব শুরুতে। তাই নিচের মত করে লিখিঃ

import SwiftUI

struct ContentView: View {
    var body: some View {
  
            Text("Hello, world!")
 
    }
}

#Preview {
    ContentView()
}

উপরের কোড থেকে বুঝতে পেরেছি যে অ্যাপে কোন টেক্সট দেখানোর জন্য Text() ব্যবহার করা হয়। এই টেক্সট ভিউর প্রিভিউ আমরা পাশে থাকা প্রিভিউ উইন্ডোতে দেখতে পাবো। যাকে বলে ক্যানভাস। যদি ক্যানভাস না দেখা যায়, তাহলে Editor > Canvas এ ক্লিক করে ক্যানভাস ওপেন করা যাবে।

ফন্ট সাইজ

ডিফল্ট কিছু ফন্ট সাইজ রয়েছে যেগুলো আমরা ব্যবহার করতে পারি। যেমন title, largeTitle, Headline, Body, Footnote ইত্যাদি। যেমনঃ

Text("Hello, world!") 
    .font(.largeTitle)

আমরা চাইলে ফিক্সড ফন্ট সাইজ ব্যবহার করতে পারি। যেমনঃ

Text("Hello, world!") 
     .font(.system(size: 40))

এলাইনমেন্টঃ

Text("Hello World") .multilineTextAlignment(.center)

কালারঃ

 Text("Hello, world!")
            .font(.largeTitle)
            .foregroundColor(.blue)

কাস্টম কালারও ব্যবহার করা যায়। যেমনঃ

Text("Hello, world!")
  .font(.largeTitle)
  .foregroundColor(Color(red: 0.799, green: 0.727, blue: 0.727))

ব্যাকগ্রাউন্ড কালারঃ

আমরা চাইলে টেক্সট এর ব্যাকগ্রাউন্ড কালার দিতে পারি এভাবেঃ

Text("Hello, world!")
  .font(.largeTitle)
  .background(.gray)

ফন্ট ডিজাইনঃ
কোন ডিজাইনের ফন্ট ব্যবহার করব, তা সিলেক্ট করে দিতে পারি এভাবেঃ

Text("Hello, world!")
            .font(.largeTitle)
            .fontDesign(.monospaced)

উপড়ে monospaced ডিজাইন ব্যবহার করেছি। চাইলে serif, rounded এসব ডিজাইনের ফন্টও ব্যবহার করা যাবে।

ফন্টঃ
আমরা চাইলে যে কোন ফন্ট ব্যবহার করতে পারি এভাবেঃ

        Text("Hello, world!")
            .font(.custom( "Roboto", size: 40))

ফন্ট ওয়েটঃ
ফন্টের থিকনেস কত হবে, তা বলে দিতে পারি fontWeight এর মাধ্যমে। যেমন bold, light, thin ইত্যাদি ব্যবহার করতে পারি।

     Text("Hello World!")
            .fontWeight(.bold)

লাইন লিমিটঃ
টেক্সট ভিউতে ম্যাক্স কতগুলো লাইন দেখাবে, তা লিমিট করে দিতে পারি lineLimit দিয়ে।

Text("Words have weight. However, their weight lies not in their physicality.")
            .lineLimit(2)

ফ্রেম সাইজঃ
টেক্সট ভিউর সাইজ উল্লেখ করে দিতে পারি এভাবেঃ

        Text("Words have weight. However, their weight lies not in their physicality.")
            .frame(width: 200, height: 200)

এখন কোডের পাশা পাশি আমরা চাইলে ইনসফেক্টর ব্যবহার করেও এই টেক্সট ভিউতে বিভিন্ন মডিফায়ার ব্যবহার করতে পারি।

যে ভিউর মডিফায়ার পরিবর্তন করব, তা সিলেক্ট করলে ইনসফেক্টরে ঐ ভিউর বিভিন্ন মডিফিকেশনের অপশন দেখাবে। সেখান থেকে আমরা বিভিন্ন প্রোপার্টি পরিবর্তন করতে পারব।