آموزش 8: ایجاد و سفارشی سازی دکمه ها ، برچسب ها و زمینه های متن

در این آموزش ، ما یک تفریح ​​و تعاملی ایجاد خواهیم کرد “ژنراتور شوخی تصادفی” برنامه این برنامه هر بار که کاربر فشار می دهد یک شوخی تصادفی ایجاد می کند دکمه، آن را روی یک نمایش دهید برچسب، و به کاربران اجازه می دهد تا نام خود را در یک وارد کنند قسمت متن برای یک تجربه شخصی تر

نمای کلی برنامه

برنامه ما:

1. داشتن قسمت متن جایی که کاربران می توانند نام خود را وارد کنند.
2. نمایش یک دکمه دارای برچسب “به من شوخی کن!”بشر
3. پس از فشار دادن دکمه ، برنامه یک شوخی تصادفی را در یک نشان می دهد برچسبو در صورت ورود به کاربر ، کاربر را با نام خود آدرس دهید.

آنچه شما نیاز دارید

• Xcode نصب شده بر روی سیستم MACOS شما
• دانش اساسی توسعه Swift و IOS

مرحله 1: تنظیم پروژه XCode

1. باز کتیبه و یک پروژه جدید ایجاد کنید.
2. انتخاب کنید برنامه الگو و کلیک کنید طرف دیگربشر
3. پروژه خود را نام ببرید داروی تصادفی و رابط را روی تنظیم کنید صفحه داستانی و زبان به سریعبشر
4. کلیک کردن طرف دیگر و پروژه خود را ذخیره کنید.

مرحله 2: UI را طراحی کنید

1. باز کردن Main.storyboard پرونده
2. اجزای زیر را از کتابخانه هدف به کنترلر مشاهده:
   • قسمت متن برای وارد کردن نام کاربر.
   • دکمه برچسب “به من بگو شوخی!”
   • برچسب برای نمایش شوخی تصادفی.
3. آنها را به طور مرتب در نمای ترتیب دهید. قرار دادن قسمت متن در بالا ، دکمه زیر آن ، و برچسب زیر دکمه
4. خواص آنها را سفارشی کنید:
   • قسمت متن: متن نگهدارنده محل را روی “وارد نام خود” تنظیم کنید.
   • دکمه: عنوان را به “شوخی به من بگویید!”
   • برچسب: متن اولیه را روی “شوخی شما در اینجا ظاهر می شود!” و متن را متمرکز کنید.

مرحله 3: مؤلفه های UI را به کد پیوند دهید

1. باز کردن ویراستار در Xcode برای مشاهده هر دو داستان داستانی و کد.
2. CTRL در قسمت متنبا دکمهوت برچسب از صفحه داستانی تا ViewController.swift پرونده برای ایجاد ضامن وت جنجال اتصالات
   • برای قسمت متن، یک iBoutlet به نام ایجاد کنید nameTextFieldبشر
   • برای برچسب، یک iBoutlet به نام ایجاد کنید jokeLabelبشر
   • برای دکمه، یک روش iBaction به نام ایجاد کنید tellMeAJokePressedبشر

کد شما اکنون باید اتصالات زیر را داشته باشد:

@IBOutlet weak var nameTextField: UITextField!
@IBOutlet weak var jokeLabel: UILabel!

@IBAction func tellMeAJokePressed(_ sender: UIButton) {
    // We'll write the action code here in the next step
}

مرحله 4: نوشتن کد

حال بیایید وقتی دکمه فشار داده شد ، عمل را پیاده سازی کنیم. برنامه باید متن وارد شده در قسمت متن، بررسی کنید که آیا خالی نیست ، و سپس یک شوخی تصادفی را در آن نمایش دهید برچسببشر اگر کاربر نام خود را وارد کرده باشد ، ما شوخی را شخصی سازی می کنیم.

در اینجا لیستی از شوخی ها برای انتخاب وجود دارد:

let jokes = [
    "Why don't skeletons fight each other? They don't have the guts!",
    "I told my computer I needed a break, and now it won’t stop sending me Kit-Kats.",
    "Why don’t eggs tell jokes? They’d crack each other up.",
    "Why did the coffee file a police report? It got mugged!",
    "I told my wife she was drawing her eyebrows too high. She looked surprised!"
]

حال بیایید عملکرد را در tellMeAJokePressed روش:

@IBAction func tellMeAJokePressed(_ sender: UIButton) {
    // Get the user's name if available
    let userName = nameTextField.text ?? ""

    // Generate a random joke
    let randomJoke = jokes.randomElement()!

    // Personalize the joke if the user has entered their name
    if !userName.isEmpty {
        jokeLabel.text = "\(userName), here’s your joke: \(randomJoke)"
    } else {
        jokeLabel.text = "Here’s your joke: \(randomJoke)"
    }
}

مرحله 5: عناصر UI را سفارشی کنید

بیایید با شخصی سازی برنامه ، برنامه خود را سرگرم کننده و جذاب تر کنیم دکمهبا برچسبوت قسمت متنبشر

1. سفارشی سازی دکمه:
   • تنظیم کردن دکمهرنگ پس زمینه به نارنجی (برای یک نگاه شاد).
   • تغییر رنگ عنوان به سفید و متن دکمه را جسورانه کنید.
   • گوشه های گرد را برای ظاهری صاف و مدرن اضافه کنید.

tellMeAJokeButton.layer.cornerRadius = 10
tellMeAJokeButton.backgroundColor = .orange
tellMeAJokeButton.setTitleColor(.white, for: .normal)
tellMeAJokeButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 16)

1. سفارشی سازی برچسب:
   • تنظیم کردن برچسبرنگ متن به آبی تیره برای اینکه شوخی ها از هم جدا شوند.
   • اندازه و وزن قلم را افزایش دهید تا متن برجسته تر شود.

jokeLabel.textColor = .darkBlue
jokeLabel.font = UIFont.systemFont(ofSize: 20, weight: .medium)

1. سفارشی سازی زمینه متن:
   • مقداری بالشتک را در داخل اضافه کنید قسمت متن برای تجربه بهتر کاربر
   • تنظیم کردن مرز در اطراف قسمت متن تا از نظر بصری متمایز شود.

nameTextField.layer.borderColor = UIColor.gray.cgColor
nameTextField.layer.borderWidth = 1
nameTextField.layer.cornerRadius = 5
nameTextField.paddingLeft = 10

مرحله 6: برنامه خود را اجرا کنید

1. دستگاه شبیه ساز (به عنوان مثال آیفون 13) را از نوار ابزار XCode انتخاب کنید.
2. مطبوعات cmd + r برای ساخت و اجرای برنامه خود.
3. در شبیه ساز نام خود را در قسمت متن، فشار دهید به من یک شوخی بگو! دکمه ، و یک شوخی تصادفی را با نام خود ببینید.
4. اگر نامی وارد نشود ، شوخی به سادگی بدون شخصی سازی ظاهر می شود.

پایان

شما با موفقیت ساخته اید ژنراتور شوخی تصادفی برنامه با دکمهبا برچسبوت قسمتهای متنی! نه تنها یاد گرفتید که چگونه مؤلفه های اصلی UI را پیاده سازی کنید ، بلکه با اضافه کردن یک پیچ و تاب سرگرم کننده به برنامه ، این تجربه را نیز شخصی کردید. می توانید با اضافه کردن شوخی ها ، تصاویر یا انیمیشن های بیشتر برای تعامل بیشتر ، برنامه را بیشتر گسترش دهید!

این برنامه یک نقطه شروع عالی برای ایجاد برنامه های سرگرم کننده و جذاب است که به روش های خلاقانه با کاربر تعامل دارند.