آموزش iOS این جلسه : سفارشی سازی سلول های Table View
Loading
نمایش نتایج: از 1 به 1 از 1

موضوع: آموزش iOS این جلسه : سفارشی سازی سلول های Table View

  1. #1
    كاربر عادي Array
    تاریخ عضویت
    Monday 15 February 2016
    نوشته ها
    10
    Thanks
    0
    Thanked 7 Times in 5 Posts

    پیش فرض آموزش iOS این جلسه : سفارشی سازی سلول های Table View





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






    این جلسه :


    سفارشی سازی سلول های Table View برای UITableView


    در جلسه قبل از آموزش برنامه نویسی iOS ، ما یک اپ ساده Table View برای نشان دادن لیستی از دستور پخت ها با یک تصویر از پیش تعریف شده، ساختیم. در این آموزش ما کار بر روی اپ قبلی را ادامه داده و آن را بهتر خواهیم کرد:


    • نمایش تصاویر متفاوت برای هر ردیف - در نسخه قبلی، ما برای همه ردیف های جدول یک تصویر بندانگشتی نمایش دادیم. نشان دادن تصویر واحد برای هر دستور پخت کار درستی نیست!
    • سفارشی کردن سلول table view- به جای استفاده از سبک پیش فرض سلول table view، ما قصد داریم قالب خودمان را بسازیم.



    نمایش تصاویر بندانگشتی متفاوت

    قبل از این که اقدام به تغییر کد بکنیم، بیایید دوباره کد نمایش تصویر بند انگشتی در ردیف های جدول را مرور کنیم.

    ما یک خط کد به ساختار UITableView برای نمایش تصویر “creme_brelee.jpg” اضافه کردیم. بدیهی است برای نشان دادن تصاویر متفاوت، ما باید این خط کد را تغییر دهیم. همان طور که قبلاً توضیح داده شد، متد “cellForRowAtIndexPath” به صورت خودکار ، قبل از نمایش هر سطر جدول توسط iOS فراخوانی می شود.


    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath


    اگر به پارامتر متد نگاه کنید، خواهید دید که “indexPath” را زمانی که درخواست می شود، ارسال می کند. پارامتر indexPath حاوی شماره ردیف جدول (و هم چنین شماره بخش) ردیف جدول است. شما می توانید به سادگی از صفت “indexPath.row” برای پیدا کردن این که کدام ردیف در حال حاضر به آن اشاره شده است، استفاده کنید.
    آموزش کامل ios مانند آرایه، شماره ردیف جدول از صفر شروع می شود. به عبارت دیگر، صفت “indexPath.row” مقدار 0 را برای اولین ردیف از جدول برمی گرداند.
    برای نشان دان تصاویر بندانگشتی متفاوت، یک آرایه جدید ( برای مثال thumbnails) اضافه می کنیم که نام فایل thumbnailها را ذخیره می کند.


    @implementation
    SimpleTableViewController{ NSArray *tableData; NSArray *thumbnails;} - (
    void
    )viewDidLoad{ [
    super
    viewDidLoad];
    // Initialize table data
    tableData = [NSArray arrayWithObjects:@
    "Egg Benedict"
    , @
    "Mushroom Risotto"
    , @
    "Full Breakfast"
    , @
    "Hamburger"
    , @
    "Ham and Egg Sandwich"
    , @
    "Creme Brelee"
    , @
    "White Chocolate Donut"
    , @
    "Starbucks Coffee"
    , @
    "Vegetable Curry"
    , @
    "Instant Noodle with Egg"
    , @
    "Noodle with BBQ Pork"
    , @
    "Japanese Noodle with Pork"
    , @
    "Green Tea"
    , @
    "Thai Shrimp Cake"
    , @
    "Angry Birds Cake"
    , @
    "Ham and Cheese Panini"
    , nil];
    // Initialize thumbnails
    thumbnails = [NSArray arrayWithObjects:@
    "egg_benedict.jpg"
    , @
    "mushroom_risotto.jpg"
    , @
    "full_breakfast.jpg"
    , @
    "hamburger.jpg"
    , @
    "ham_and_egg_sandwich.jpg"
    , @
    "creme_brelee.jpg"
    , @
    "white_chocolate_donut.jpg"
    , @
    "starbucks_coffee.jpg"
    , @
    "vegetable_curry.jpg"
    , @
    "instant_noodle_with_egg.jpg"
    , @
    "noodle_with_bbq_pork.jpg"
    , @
    "japanese_noodle_with_pork.jpg"
    , @
    "green_tea.jpg"
    , @
    "thai_shrimp_cake.jpg"
    , @
    "angry_birds_cake.jpg"
    , @
    "ham_and_cheese_panini.jpg"
    , nil];}
    همان طور که در کد بالا می بینید، یک آرایه thumblails را با لیستی از نام تصاویر تعریف کردیم. ترتیب تصاویر مطابق با “tableData” می باشد.
    شما می توانید تصاویر مورنظر خود را دانلود کرده و آنها را به پروژه خود اضافه نمایید. مطمئن شوید که “Copy items into destination group’s folder” فعال شده باشد.

    بعد از اضافه کردن فایل های تصویری، باید آنها را در Navigator پروژه پیدا کنید، مانند شکل زیر:

    در آخر، خط کد در متد “cellForRowAtIndexPath” را تغییر دهید:


    cell.imageView.image = [UIImage imageNamed:[thumbnails objectAtIndex:indexPath.row]];[thumbnails objectAtIndex:indexPath.row] چیست؟

    این خط کد، نام تصویر را برای ردیف خاصی برمی گرداند. برای اولین ردیف، صفت indexPath.row ، مقدار صفر را برمی گرداند و ما اولین تصویر (برای مثال egg_benedict.jpg) را از آرایه ی thumbnails با استفاده از متد “objectAtIndex” می گیریم.
    بعد از ذخیره کردن همه تغییرات، سعی کنید اپ خود را دوباره اجرا کنید. الان باید تصاویر بندانگشتی متفاوتی برای ردیف های جدول نشان دهد.


    در ادامه آموزش مقدماتی برنامه نویسی iOS به نحوه سفارشی سازی سلول های جدول می پردازیم.

    سفارشی سازی کردن سلول های Table View

    آیا به نظر شما الان اپ بهتر به نظر می آید؟ می خواهیم با سفارشی سازی سلول های جدول، اپ را بهتر از این نیز بنماییم. قبلاً ما از سبک پیش فرض سلول table view استفاده کردیم. محل و اندازه تصاویر بندانگشتی ثابت هستند. اگر بخواهیم اندازه تصاویر بندانگشتی را بزرگ تر کنیم و مدت زمان آماده سازی برای هر دستور پخت را مانند شکل زیر اضافه کنیم، چه کار باید بکنیم؟

    طراحی کردن سلول

    در این مورد، ما باید یک سلول جدول برای خودمان طراحی و ایجاد کنیم. بیایید به Xcode برگردیم. در Navigator پروژه، روی پوشه “SimpleTable” کلیک راست کرده و “New File…” را انتخاب کنید.

    برای طراحی سلول جدول خود، ما نیاز داریم یک فایل جدید Interface Builder برای سلول ایجاد کنیم. برای این مورد، ما باید با یک رابط کاربری “Empty” شروع کنیم. برای ادامه روی کلید “Next” کلیک کنید.

    زمانی که device family را انتخاب می کنید، “iPhone” را وارد کنید و برای ادامه روی کلید “Next” کلیک کنید. فایل را به عنوان “SimpleTableCell” ذخیره کنید.

پاسخ با نقل قول پاسخ با نقل قول

  • The Following 2 Users Say Thank You to ostadsho For This Useful Post:

    itjobs (Sunday 22 July 2018),Sardabir (Sunday 22 July 2018)

  • علاقه مندي ها (Bookmarks)

    علاقه مندي ها (Bookmarks)

    مجوز های ارسال و ویرایش

    • شما نمیتوانید موضوع جدیدی ارسال کنید
    • شما امکان ارسال پاسخ را ندارید
    • شما نمیتوانید فایل پیوست کنید.
    • شما نمیتوانید پست های خود را ویرایش کنید
    •