طراحی سایت و برنامه نویسی
آموزش طراحی سایت و برنامه نویسیطراحی سایت و برنامه نویسی
آموزش طراحی سایت و برنامه نویسیآموزش ساخت یک اپلیکیشن آیفون (بخش هفتم) — به زبان ساده
در بخش‌های قبلی این سری مقالات از طرح‌بندی‌های پیش‌فرض Xcode برای صحنه‌ها و سلول‌ها استفاده کردیم. در انتهای بخش ششم (+) همه تصاویر و متن‌های نمونه اپلیکیشن خود را به آن وارد کرده و آن‌ها را دیدیم، اما طرح‌بندی سلول‌ها هنوز در لیست‌های News ،Products و Chat همگی مشابه هم هستند. برای مطالعه بخش قبلی این مقاله به لینک زیر مراجعه کنید:
در بخش حاضر از سری مقالات آموزش ساخت اپلیکیشن آیفون که بخش هفتم است، شروع به ایجاد نوعی طرح‌بندی‌های سفارشی در اپلیکیشن خودمان می‌کنیم. یکی از مهم‌ترین جنبه‌ها و مزیت‌های ایجاد طرح‌بندی به روش نیتیو (به جای استفاده از ابزارهای پروتو تایپ‌سازی) این است که می‌توان از ابزارهای واقعی تعیین حدود طرح‌بندی که iOS از طریق Xcode ارائه می‌کند، استفاده کرد. گفتنی است که در این راهنما، قصد داریم جزییات زیادی را در این خصوص بررسی کنیم.
سلول نمای جدولی News
سلول‌های نماهای ما که با استفاده از سبک subtitle در Xcode طراحی شده‌اند در حال حاضر به صورت زیر هستند:
هر سلول شامل یک نمای فرعی از نمای تصویر و دو برچسب است که مانند بلوک‌های لِگو روی صفحه مبنای سلول قرار گرفته‌اند.
ما می‌خواهیم در نهایت در انتهای این مقاله سلول‌های اپلیکیشن ظاهری مانند تصویر زیر داشته باشند:
چنان که می‌بینید در طرح‌بندی مطلوب متن جزییات/عنوان فرعی به جای این که کنار تصویر نخست ظاهر شود، زیر آن قرار می‌گیرد. یک برچسب متنی سوم هم وجود دارد که تاریخ را نشان می‌دهد. دست‌کم یک برچسب متنی امکان شکستن به چند خط را خواهد داشت. فونت‌ها استایل‌های متفاوتی را نمایش می‌دهند. ارتفاع سلول بر مبنای محتوای آن افزایش می‌یابد. یک تصویر جزییات دوم نیز وجود دارد که زیر محتوای دیگر قرار می‌گیرد.
برای رسیدن به این وضعیت باید طرح‌بندی سفارشی خودمان را داشته باشیم که شامل نماهای فرعی دیگری است.
ایجاد یک فایل Xib
چند روش برای ایجاد این طرح‌بندی سلولی سفارشی وجود دارد. در این راهنما یک فایل جداگانه ایجاد می‌کنیم که صرفاً شامل این طرح‌بندی سلولی است و بدین ترتیب قادر خواهیم بود از آن به عنوان یک سلول در هر نمای جدولی استفاده کنیم. روی پوشه گروهی زردرنگ Social راست-کلیک یا کنترل-کلیک کنید. در منوی بازشدنی که ظاهر می‌شود گزینه New File را انتخاب کنید.
گزینه iOS و Cocoa Touch Class را انتخاب کرده و روی Next کلیک کنید.
در منوی بازشدنی Subclass of، گزینه UITableViewCell را انتخاب کنید. برای Class مقدار UITableViewCell را وارد کنید. گزینه Also create XIB file را انتخاب کنید و زبان را نیز روی Swift قرار دهید.
زمانی که فرم به طرز صحیحی تکمیل شد، روی دکمه Next کلیک کنید. کادر محاوره‌ای Save به صورت پیش‌فرض به موقعیت فایل‌های پروژه اشاره می‌کند.
روی دکمه Create کلیک کنید. در این زمان دو فایل جدید می‌بینید که به پروژه اضافه شده‌اند.
NewsTableViewCell.swift کد فایل است. ما فعلاً نیازی برای پرداختن به آن نداریم. فایل NewsTableViewCell.xib شامل طرح‌بندی سلول سفارشی ما است.
XIB را می‌توان اختصاری برای عبارت «سازنده اینترفیس ایکس کد» (Xcode Interface Builder) دانست. هر فایل xib به طور معمول شامل یک نمای منفرد است. شما می‌توانید طرح‌بندی و خصوصیت‌های آن را با استفاده از ابزارهای سازنده اینترفیس سفارشی‌سازی کنید و روش آن مشابه اصلاح صحنه‌ای در یک استوری‌بورد است که قبلاً مشاهده کرده‌ایم. زمانی که Xcode یک پروژه را ایجاد می‌کند، هر فایل xib را کامپایل می‌کند تا یک فایل nib بسازد. البته واژه‌های xib و nib غالباً به جای هم استفاده می‌شوند.
افزودن یک نمای تصویر
یک بار روی فایل NewsTableViewCell.xib کلیک کنید. در این زمان یک سلول نمای جدولی خالی را مشاهده می‌کنید.
لبه پایینی سلول را به سمت پایین بکشید. تا Xcode در زمان درگ کردن اندازه‌های آن را نمایش دهد. ارتفاع آن را حدوداً 170 پوینت تنظیم کنید. نیازی نیست این عدد دقیق باشد، چون ما صرفاً می‌خواهیم فضایی برای افزودن محتوای جدید ایجاد کنیم.
روی دکمه Library در نوار ابزار کلیک کنید. مقدار Image را در فیلد جستجو وارد کنید.
Image View را از لیست به سلول خالی درگ کنید تا تقریباً در مرکز آن قرار گیرد.
همان طور که توضیح موجود در Object Library اشاره کرده است، یک نمای تصویر برای نمایش تصاویر استفاده می‌شود. برای این که بتوانیم تصویر را در طرح‌بندی خود با سهولت ببینیم، یک placeholder برای آن ایجاد می‌کنیم.
ابتدا نمای تصویر فوق را انتخاب کنید. سپس در پنل Attributes Inspector مقدار Image را برابر با placeholder قرار دهید. ما می‌خواهیم ابعاد طول و عرض تصویر حفظ شود و درون نمای تصویر جای بگیرد. بنابراین مقدار Content Mode را به صورت Aspect Fit تنظیم می‌کنیم.
دستگیره پایین-راست نمای تصویر را می‌کشیم تا ابعاد آن تا حدود 44 در 44 پوینت کاهش یابد.
افزودن برچسب
روی دکمه Library کلیک کرده و عبارت label را در فیلد جستجو وارد کنید.
Label را از سوی لیست Object Library به روی سلول و سمت راست نمای تصویر بکشید.
این فرایند را برای افزودن برچسب دوم به سلول و درست زیر برچسب اول تکرار کنید.
نماهای پشته‌ای
در این بخش برخی قواعد طرح‌بندی را به اپلیکیشن خود اضافه می‌کنیم. کار خود را با جاسازی دو برچسب در یک «نمای پشته‌ای» (stack view) آغاز می‌کنیم. نمای پشته‌ای محتوای خود را به صورت همراستا در یک ردیف افقی یا عمودی نگه می‌دارد.
روی یکی از برچسب‌ها کلیک کنید. برچسب دوم را نیز با Shift+Click انتخاب کنید. زمانی که هر دو برچسب انتخاب شدند، روی دکمه Embed In در انتهای بوم کلیک کرده و گزینه Stack View را از منوی بازشدنی انتخاب کنید.
Xcode بنا بر اطلاعات مفروض قبلی حدس‌هایی در مورد مقصد مطلوب شما درون نمای پشته‌ای می‌زند. این حدس‌ها مبتنی بر موقعیت نسبی دو برچسب هستند.
زمانی که نمای پشته‌ای ایجاد شده همچنان در حالت انتخاب قرار دارد، بررسی کنید که خصوصیت‌ها با مواردی که در تصویر زیر مشاهده می‌کنید، مطابقت داشته باشند و در صورت نیاز تغییرات لازم را وارد کنید.
ما دو برچسب داریم که مانند لگو روی هم دیگر پشته شده‌اند.
سپس نمای پشته‌ای دارای دو برچسب را با نمای تصویر در یک نمای پشته‌ای افقی ترکیب می‌کنیم.
در حالی که نمای پشته‌ای برچسب‌ها در حالت انتخاب قرار دارد، روی نمای تصویر Shift+Click کنید. روی دکمه Embed In کلیک کرده و مجدداً گزینه Stack View را انتخاب کنید.
این بار Xcode باید نتیجه‌گیری کند که می‌خواهید یک نمای پشته‌ای افقی بسازید. بنابراین، هر خصوصیت مورد نیاز را ویرایش کنید تا با این تنظیمات مطابقت داشته باشند. توجه داشته باشید که باید مقدار Spacing را به صورت Standard تنظیم کنید. هر عددی که در فیلد متن ظاهر می‌شود را حذف کنید. همچنین می‌توانید Use Standard Value را از منوی بازشدنی انتخاب کنید.
اندازه محتوای ذاتی
احتمالاً متوجه شده‌اید که وقتی این نمای تصویر را در یک نمای پشته‌ای جاسازی می‌کنیم، اندازه نمای تصویر تغییر می‌یابد. به صورت پیش‌فرض یک نمای پشته‌ای تلاش می‌کند تا اشیای نمایی که در آن قرار دارند تا حدی که محتوایشان ایجاب می‌کند بزرگ‌تر شوند. این وضعیت به نام «اندازه محتوای ذاتی» (intrinsic content size) شناخته می‌شود. در این حال می‌توان دید که نماهای پشته‌ای فضای کافی برای هر برچسب فراهم می‌سازند تا محتوای متنی خود را نمایش دهد.
تصویر placeholder نمای تصویر کنونی اندازه‌ای برابر با 64 در 64 پوینت دارد. بنابراین اگر چه کران‌های نمای تصویر را قبلاً تا حدود 44 در 44 پوینت کشیده‌ایم، اما نمای پشته‌ای امکان رشد تا اندازه محتوای ذاتی را به ما می‌دهد.
محدودیت عرض و ارتفاع
مقصود ما این است که این طرح‌بندی سلولی برای آیتم‌های news مختلفی مورد استفاده قرار گیرد که هر یک تصاویر متفاوتی در نمای تصویر خواهند داشت. آن تصاویر می‌توانند ابعاد کاملاً گوناگونی داشته باشند.
اگر این طرح‌بندی را چنان که هست دست‌نخورده باقی بگذاریم، هر سلول نمای تصویر را در اندازه متفاوتی نمایش می‌دهد و این حالت ظاهر مطلوبی ندارد. ما می‌خواهیم این نمای تصویر صرفنظر از اندازه فایل تصویری که در آن بارگذاری می‌شود، همواره مقید به اندازه 44 در 44 باشد. از آنجا که قبلاً مقدار content mode را برای این نمای تصویر به صورت aspect fit تعیین کرده‌ایم، باید مطمئن شویم که وقتی اندازه نمای تصویر محدود می‌شود، نمای تصویر، عملاً اندازه تصویر درون خود را تغییر می‌دهد تا ابعاد تصویر حفظ شود.
یک بار روی نمای تصویر کلیک کنید تا انتخاب شود. زیر بخش انتهای بوم روی دکمه Add New Constraints کلیک کنید.
کادر بازشونده Add New Constraints حدود لبه‌ها را نمایش می‌دهد. البته ما برای یک شیء که درون نمای پشته‌ای قرار دارد، عموماً این مقادیر را تنظیم نمی‌کنیم. این کادر همچنین مقادیر width و height را نیز نشان می‌دهد.
مقدار 44 را درون فیلدهای width و height وارد کنید. سپس روی دکمه Add 2 Constraints در انتها کلیک کنید. Xcode حدود جدید را هر زمان که نمای تصویر انتخاب شود با خطوط آبی نمایش می‌دهد.
از آنجا که ارتفاع نمای تصویر کاهش یافته است، اندازه نمای پشته‌ای متناظر نیز کاهش یافته است.
Size Inspector
در پنل Inspector در سمت راست IDE در کنار آیکون attributes inspector یک آیکون خط کش وجود دارد که متعلق به بخش «بازبینی اندازه» (Size Inspector) است، روی آن کلیک کنید.
بخش نمای View فوقانی عرض و ارتفاع کنونی نمای تصویر انتخابی را نشان می‌دهد. این موارد قابل ویرایش نیستند، چون از روی «حدود» (Constraints) تعیین می‌شوند. در بخش زیرین به بخش Constraints نگاه می‌کنیم.
این بخشِ Constraints دو حد را نمایش می‌دهد که به تازگی اضافه شدند: Width Equals: 44 و Height Equals: 44.
افزودن برچسب دیگر
سپس همه آن چیزی را که تا به این جا داریم، همراه با یک برچسب جدید به صورت عمودی پشتهسازی می‌کنیم.
روی دکمه Library کلیک کنید و label دیگری درست زیر نمای تصویر به سلول اضافه کنید. Xcode راهنماهای آبی‌رنگی جهت کمک به همراستا کردن و فاصله‌بندی بین اشیا نمایش می‌دهد.
روی نمای پشته‌ای افقی موجود یا هر چیزی درون آن Shift+Click کنید به طوری که نمای پشته‌ای و برچسب جدید زیر آن انتخاب شوند. روی دکمه Embed In کلیک کرده و گزینه Stack View را مجدداً انتخاب کنید.
بررسی کنید که خصوصیت‌های نمای پشته‌ای جدید با آن چه در تصویر زیر می‌بینید مطابقت داشته باشند:
افزودن یک نمای پشته‌ای موجود
تا به اینجا نماهای موجود (یک نمای تصویر و برچسب‌ها) را در نماهای پشته‌ای جدیدی جاسازی کرده‌ایم. همچنین می‌توانیم نماهای جدید را مستقیماً درون یک نمای پشته‌ای موجود درگ کنیم.
طراحی ما نیازمند تصویر دومی نیز هست. این تصویر مستقیماً زیر برچسب سوم که اضافه کرده‌ایم قرار می‌گیرد:
روی دکمه Library کلیک کنید. یک Image View جدید درون سلول بکشید و مستقیماً زیر برچسب انتهایی قرار دهید. قبل از رها کردن ماوس مطمئن شوید که درون نمای پشته‌ای قرار دارد.
ایجاد امکان افزایش اندازه تصویر
توجه داشته باشید که نمای تصویر جدید به رنگ قرمز در آمده است و نشان می‌دهد که یک خطای طرح‌بندی وجود دارد، چون نمی‌تواند ارتفاع این نمای تصویر را تشخیص دهد.
نمای تصویر هنوز تصویری ندارد (که اندازه محتوای ذاتی داشته باشد). همچنین حدود عرض و ارتفاع صریحی هم ندارد. در این حالت، می‌خواهیم این تصویر به اندازه محتوای تصویر رشد یابد. بنابراین اجازه خواهیم داد که عرض آن به اندازه لبه سلول و همچنین ارتفاع آن تا حدی که لازم است افزایش پیدا کند تا محتوا بتواند نمایش بیابد. همچنین باید حالت محتوا را روی حفظ ابعاد تصویر قرار دهیم، اما طوری که کل فضای نمای تصویر را اشغال کند.
در حالی که نمای تصویر انتهایی انتخاب شده است در پنل Attributes Inspector مقدار Image را برابر با placeholder و مقدار Content Mode را برابر با Aspect Fill تنظیم کنید.
محدودسازی به لبه‌ها
تا به اینجا سه پشته‌ی تودرتو داریم که وظیفه طرح‌بندی نمای فرعی درون نمای سلول را بر عهده دارند. ما هنوز هیچ قیودی روی چگونگی محدودسازی نمای پشته بیرونی از سوی کران‌های سلول تعیین نکرده‌ایم. نمای پشته‌ای به همراه برچسب‌ها و تصاویر درون آن می‌توانند به سادگی از لبه‌های سلول بزرگ‌تر شوند و از آن عبور کنند که باعث برش یافتن محتوا می‌شود. به جای آن باید به نمای پشته‌ای اعلام کنیم که در حدود لبه‌های سلول باقی بماند.
یک بار روی هر کجای نمای پشته بیرونی در فضای سفید کلیک کنید. برای مثال می‌توانید روی سمت راست نمای تصویر انتهایی کلیک کنید. همچنین می‌توانید نمای پشته بیرونی را از بخش document outline (پنلی که در سمت بوم قرار دارد) انتخاب کنید. در این حالت می‌بینید که یک خط بیرونی آبی‌رنگ پیرامون آن ایجاد می‌شود.
روی دکمه Add New Constraints زیر بوم کلیک کنید. در کادر بازشدنی گزینه Constrain to margins را انتخاب کرده و مقدار 0 را برای هر چهار لبه وارد کنید.
روی دکمه Add 4 Constraints کلیک کنید. چنان که می‌بینید Xcode نمای پشته‌ای را بزرگ می‌کند تا سلول را تا لبه‌هایش پر کنند.
همراستا کردن نمای پشته‌ای
تصویر انتهایی هنوز آن چه را می‌خواهیم به طور کامل اجرا نمی‌کند. برای رسیدن به هدف، این تصویر باید عرض سلول را (تا لبه‌ها) پر کند. چنان که می‌بینید نمای پشته‌ای بیرونی در حال حاضر طوری تنظیم شده که محتوای خود را با لبه Leading همراستا کند.
در حالی که نمای پشته بیرونی انتخاب شده است، در Attributes Inspector مقدار Alignment را از Leading به Fill تغییر دهید.
برش کران‌ها
چنان که می‌بینید این تکنیک جواب می‌دهد و نمای تصویر اینک عرض نمای پشته‌ای را پر می‌کند. با این حال، تصویر از نظر عمودی از کران‌های مستطیل نمای تصویر خود بیرون می‌زند. ما باید به نمای تصویر بگوییم که تصویر را بر اساس کران‌هایش برش دهد.
به این منظور یک بار روی نمای تصویر انتهایی زیر برچسب انتهای کلیک کنید. توجه کنید که دستگیره‌های لبه نمای تصویر در ناحیه مستطیلی مورد نظر هستند، گرچه تصویر درون آن از کران‌های نمای تصویر گذر کرده است.
در حالی که نمای تصویر همچنان در حالت انتخاب است، به پنل Attributes Inspector در ادامه بخش View نگاه کنید. کادر Clip to Bounds را انتخاب کنید.
کامیت کردن تغییرها
همان طور که در بخش‌های قبلی انجام دادیم، در انتهای کار باید تغییرهایی را که در پروژه ایجاد کرده‌ایم کامیت کنیم. مراحل کار به صورت زیر است:
- گزینه Commit Changes را از منوی Source Control انتخاب کنید.
- یک توضیح مانند: Created NewsTableViewCell with custom layout، را وارد کنید.
- روی دکمه Commit کلیک کنید.
جمع‌بندی
ما در این مقاله یک طرح‌بندی سفارشی برای سلول News اپلیکیشن خود ساختیم. همچنین نماهای پشته‌ای و قیودی را اضافه کردیم که همه موارد با فرض هر محتوای متن و تصویری به طرز صحیحی قرار گیرند. برای این که این طرح‌بندی کار کند، باید به استوری‌بورد بگوییم که از این سلول به جای سلول استاندارد اپل استفاده کند. همچنین باید برخی موارد قالب‌بندی مانند فونت‌ها را دستکاری کنیم. برای مطالعه بخش بعدی این مطلب به لینک زیر رجوع کنید:
منبع: فرادرس
آموزش ساخت یک اپلیکیشن آیفون (بخش هفتم) — به زبان ساده
در بخش‌های قبلی این سری مقالات از طرح‌بندی‌های پیش‌فرض Xcode برای صحنه‌ها و سلول‌ها استفاده کردیم. در انتهای بخش ششم (+) همه تصاویر و متن‌های نمونه اپلیکیشن خود را به آن وارد کرده و آن‌ها را دیدیم، اما طرح‌بندی سلول‌ها هنوز در لیست‌های News ،Products و Chat همگی مشابه هم هستند. برای مطالعه بخش قبلی این مقاله به لینک زیر مراجعه کنید:
در بخش حاضر از سری مقالات آموزش ساخت اپلیکیشن آیفون که بخش هفتم است، شروع به ایجاد نوعی طرح‌بندی‌های سفارشی در اپلیکیشن خودمان می‌کنیم. یکی از مهم‌ترین جنبه‌ها و مزیت‌های ایجاد طرح‌بندی به روش نیتیو (به جای استفاده از ابزارهای پروتو تایپ‌سازی) این است که می‌توان از ابزارهای واقعی تعیین حدود طرح‌بندی که iOS از طریق Xcode ارائه می‌کند، استفاده کرد. گفتنی است که در این راهنما، قصد داریم جزییات زیادی را در این خصوص بررسی کنیم.
سلول نمای جدولی News
سلول‌های نماهای ما که با استفاده از سبک subtitle در Xcode طراحی شده‌اند در حال حاضر به صورت زیر هستند:
هر سلول شامل یک نمای فرعی از نمای تصویر و دو برچسب است که مانند بلوک‌های لِگو روی صفحه مبنای سلول قرار گرفته‌اند.
ما می‌خواهیم در نهایت در انتهای این مقاله سلول‌های اپلیکیشن ظاهری مانند تصویر زیر داشته باشند:
چنان که می‌بینید در طرح‌بندی مطلوب متن جزییات/عنوان فرعی به جای این که کنار تصویر نخست ظاهر شود، زیر آن قرار می‌گیرد. یک برچسب متنی سوم هم وجود دارد که تاریخ را نشان می‌دهد. دست‌کم یک برچسب متنی امکان شکستن به چند خط را خواهد داشت. فونت‌ها استایل‌های متفاوتی را نمایش می‌دهند. ارتفاع سلول بر مبنای محتوای آن افزایش می‌یابد. یک تصویر جزییات دوم نیز وجود دارد که زیر محتوای دیگر قرار می‌گیرد.
برای رسیدن به این وضعیت باید طرح‌بندی سفارشی خودمان را داشته باشیم که شامل نماهای فرعی دیگری است.
ایجاد یک فایل Xib
چند روش برای ایجاد این طرح‌بندی سلولی سفارشی وجود دارد. در این راهنما یک فایل جداگانه ایجاد می‌کنیم که صرفاً شامل این طرح‌بندی سلولی است و بدین ترتیب قادر خواهیم بود از آن به عنوان یک سلول در هر نمای جدولی استفاده کنیم. روی پوشه گروهی زردرنگ Social راست-کلیک یا کنترل-کلیک کنید. در منوی بازشدنی که ظاهر می‌شود گزینه New File را انتخاب کنید.
گزینه iOS و Cocoa Touch Class را انتخاب کرده و روی Next کلیک کنید.
در منوی بازشدنی Subclass of، گزینه UITableViewCell را انتخاب کنید. برای Class مقدار UITableViewCell را وارد کنید. گزینه Also create XIB file را انتخاب کنید و زبان را نیز روی Swift قرار دهید.
زمانی که فرم به طرز صحیحی تکمیل شد، روی دکمه Next کلیک کنید. کادر محاوره‌ای Save به صورت پیش‌فرض به موقعیت فایل‌های پروژه اشاره می‌کند.
روی دکمه Create کلیک کنید. در این زمان دو فایل جدید می‌بینید که به پروژه اضافه شده‌اند.
NewsTableViewCell.swift کد فایل است. ما فعلاً نیازی برای پرداختن به آن نداریم. فایل NewsTableViewCell.xib شامل طرح‌بندی سلول سفارشی ما است.
XIB را می‌توان اختصاری برای عبارت «سازنده اینترفیس ایکس کد» (Xcode Interface Builder) دانست. هر فایل xib به طور معمول شامل یک نمای منفرد است. شما می‌توانید طرح‌بندی و خصوصیت‌های آن را با استفاده از ابزارهای سازنده اینترفیس سفارشی‌سازی کنید و روش آن مشابه اصلاح صحنه‌ای در یک استوری‌بورد است که قبلاً مشاهده کرده‌ایم. زمانی که Xcode یک پروژه را ایجاد می‌کند، هر فایل xib را کامپایل می‌کند تا یک فایل nib بسازد. البته واژه‌های xib و nib غالباً به جای هم استفاده می‌شوند.
افزودن یک نمای تصویر
یک بار روی فایل NewsTableViewCell.xib کلیک کنید. در این زمان یک سلول نمای جدولی خالی را مشاهده می‌کنید.
لبه پایینی سلول را به سمت پایین بکشید. تا Xcode در زمان درگ کردن اندازه‌های آن را نمایش دهد. ارتفاع آن را حدوداً 170 پوینت تنظیم کنید. نیازی نیست این عدد دقیق باشد، چون ما صرفاً می‌خواهیم فضایی برای افزودن محتوای جدید ایجاد کنیم.
روی دکمه Library در نوار ابزار کلیک کنید. مقدار Image را در فیلد جستجو وارد کنید.
Image View را از لیست به سلول خالی درگ کنید تا تقریباً در مرکز آن قرار گیرد.
همان طور که توضیح موجود در Object Library اشاره کرده است، یک نمای تصویر برای نمایش تصاویر استفاده می‌شود. برای این که بتوانیم تصویر را در طرح‌بندی خود با سهولت ببینیم، یک placeholder برای آن ایجاد می‌کنیم.
ابتدا نمای تصویر فوق را انتخاب کنید. سپس در پنل Attributes Inspector مقدار Image را برابر با placeholder قرار دهید. ما می‌خواهیم ابعاد طول و عرض تصویر حفظ شود و درون نمای تصویر جای بگیرد. بنابراین مقدار Content Mode را به صورت Aspect Fit تنظیم می‌کنیم.
دستگیره پایین-راست نمای تصویر را می‌کشیم تا ابعاد آن تا حدود 44 در 44 پوینت کاهش یابد.
افزودن برچسب
روی دکمه Library کلیک کرده و عبارت label را در فیلد جستجو وارد کنید.
Label را از سوی لیست Object Library به روی سلول و سمت راست نمای تصویر بکشید.
این فرایند را برای افزودن برچسب دوم به سلول و درست زیر برچسب اول تکرار کنید.
نماهای پشته‌ای
در این بخش برخی قواعد طرح‌بندی را به اپلیکیشن خود اضافه می‌کنیم. کار خود را با جاسازی دو برچسب در یک «نمای پشته‌ای» (stack view) آغاز می‌کنیم. نمای پشته‌ای محتوای خود را به صورت همراستا در یک ردیف افقی یا عمودی نگه می‌دارد.
روی یکی از برچسب‌ها کلیک کنید. برچسب دوم را نیز با Shift+Click انتخاب کنید. زمانی که هر دو برچسب انتخاب شدند، روی دکمه Embed In در انتهای بوم کلیک کرده و گزینه Stack View را از منوی بازشدنی انتخاب کنید.
Xcode بنا بر اطلاعات مفروض قبلی حدس‌هایی در مورد مقصد مطلوب شما درون نمای پشته‌ای می‌زند. این حدس‌ها مبتنی بر موقعیت نسبی دو برچسب هستند.
زمانی که نمای پشته‌ای ایجاد شده همچنان در حالت انتخاب قرار دارد، بررسی کنید که خصوصیت‌ها با مواردی که در تصویر زیر مشاهده می‌کنید، مطابقت داشته باشند و در صورت نیاز تغییرات لازم را وارد کنید.
ما دو برچسب داریم که مانند لگو روی هم دیگر پشته شده‌اند.
سپس نمای پشته‌ای دارای دو برچسب را با نمای تصویر در یک نمای پشته‌ای افقی ترکیب می‌کنیم.
در حالی که نمای پشته‌ای برچسب‌ها در حالت انتخاب قرار دارد، روی نمای تصویر Shift+Click کنید. روی دکمه Embed In کلیک کرده و مجدداً گزینه Stack View را انتخاب کنید.
این بار Xcode باید نتیجه‌گیری کند که می‌خواهید یک نمای پشته‌ای افقی بسازید. بنابراین، هر خصوصیت مورد نیاز را ویرایش کنید تا با این تنظیمات مطابقت داشته باشند. توجه داشته باشید که باید مقدار Spacing را به صورت Standard تنظیم کنید. هر عددی که در فیلد متن ظاهر می‌شود را حذف کنید. همچنین می‌توانید Use Standard Value را از منوی بازشدنی انتخاب کنید.
اندازه محتوای ذاتی
احتمالاً متوجه شده‌اید که وقتی این نمای تصویر را در یک نمای پشته‌ای جاسازی می‌کنیم، اندازه نمای تصویر تغییر می‌یابد. به صورت پیش‌فرض یک نمای پشته‌ای تلاش می‌کند تا اشیای نمایی که در آن قرار دارند تا حدی که محتوایشان ایجاب می‌کند بزرگ‌تر شوند. این وضعیت به نام «اندازه محتوای ذاتی» (intrinsic content size) شناخته می‌شود. در این حال می‌توان دید که نماهای پشته‌ای فضای کافی برای هر برچسب فراهم می‌سازند تا محتوای متنی خود را نمایش دهد.
تصویر placeholder نمای تصویر کنونی اندازه‌ای برابر با 64 در 64 پوینت دارد. بنابراین اگر چه کران‌های نمای تصویر را قبلاً تا حدود 44 در 44 پوینت کشیده‌ایم، اما نمای پشته‌ای امکان رشد تا اندازه محتوای ذاتی را به ما می‌دهد.
محدودیت عرض و ارتفاع
مقصود ما این است که این طرح‌بندی سلولی برای آیتم‌های news مختلفی مورد استفاده قرار گیرد که هر یک تصاویر متفاوتی در نمای تصویر خواهند داشت. آن تصاویر می‌توانند ابعاد کاملاً گوناگونی داشته باشند.
اگر این طرح‌بندی را چنان که هست دست‌نخورده باقی بگذاریم، هر سلول نمای تصویر را در اندازه متفاوتی نمایش می‌دهد و این حالت ظاهر مطلوبی ندارد. ما می‌خواهیم این نمای تصویر صرفنظر از اندازه فایل تصویری که در آن بارگذاری می‌شود، همواره مقید به اندازه 44 در 44 باشد. از آنجا که قبلاً مقدار content mode را برای این نمای تصویر به صورت aspect fit تعیین کرده‌ایم، باید مطمئن شویم که وقتی اندازه نمای تصویر محدود می‌شود، نمای تصویر، عملاً اندازه تصویر درون خود را تغییر می‌دهد تا ابعاد تصویر حفظ شود.
یک بار روی نمای تصویر کلیک کنید تا انتخاب شود. زیر بخش انتهای بوم روی دکمه Add New Constraints کلیک کنید.
کادر بازشونده Add New Constraints حدود لبه‌ها را نمایش می‌دهد. البته ما برای یک شیء که درون نمای پشته‌ای قرار دارد، عموماً این مقادیر را تنظیم نمی‌کنیم. این کادر همچنین مقادیر width و height را نیز نشان می‌دهد.
مقدار 44 را درون فیلدهای width و height وارد کنید. سپس روی دکمه Add 2 Constraints در انتها کلیک کنید. Xcode حدود جدید را هر زمان که نمای تصویر انتخاب شود با خطوط آبی نمایش می‌دهد.
از آنجا که ارتفاع نمای تصویر کاهش یافته است، اندازه نمای پشته‌ای متناظر نیز کاهش یافته است.
Size Inspector
در پنل Inspector در سمت راست IDE در کنار آیکون attributes inspector یک آیکون خط کش وجود دارد که متعلق به بخش «بازبینی اندازه» (Size Inspector) است، روی آن کلیک کنید.
بخش نمای View فوقانی عرض و ارتفاع کنونی نمای تصویر انتخابی را نشان می‌دهد. این موارد قابل ویرایش نیستند، چون از روی «حدود» (Constraints) تعیین می‌شوند. در بخش زیرین به بخش Constraints نگاه می‌کنیم.
این بخشِ Constraints دو حد را نمایش می‌دهد که به تازگی اضافه شدند: Width Equals: 44 و Height Equals: 44.
افزودن برچسب دیگر
سپس همه آن چیزی را که تا به این جا داریم، همراه با یک برچسب جدید به صورت عمودی پشتهسازی می‌کنیم.
روی دکمه Library کلیک کنید و label دیگری درست زیر نمای تصویر به سلول اضافه کنید. Xcode راهنماهای آبی‌رنگی جهت کمک به همراستا کردن و فاصله‌بندی بین اشیا نمایش می‌دهد.
روی نمای پشته‌ای افقی موجود یا هر چیزی درون آن Shift+Click کنید به طوری که نمای پشته‌ای و برچسب جدید زیر آن انتخاب شوند. روی دکمه Embed In کلیک کرده و گزینه Stack View را مجدداً انتخاب کنید.
بررسی کنید که خصوصیت‌های نمای پشته‌ای جدید با آن چه در تصویر زیر می‌بینید مطابقت داشته باشند:
افزودن یک نمای پشته‌ای موجود
تا به اینجا نماهای موجود (یک نمای تصویر و برچسب‌ها) را در نماهای پشته‌ای جدیدی جاسازی کرده‌ایم. همچنین می‌توانیم نماهای جدید را مستقیماً درون یک نمای پشته‌ای موجود درگ کنیم.
طراحی ما نیازمند تصویر دومی نیز هست. این تصویر مستقیماً زیر برچسب سوم که اضافه کرده‌ایم قرار می‌گیرد:
روی دکمه Library کلیک کنید. یک Image View جدید درون سلول بکشید و مستقیماً زیر برچسب انتهایی قرار دهید. قبل از رها کردن ماوس مطمئن شوید که درون نمای پشته‌ای قرار دارد.
ایجاد امکان افزایش اندازه تصویر
توجه داشته باشید که نمای تصویر جدید به رنگ قرمز در آمده است و نشان می‌دهد که یک خطای طرح‌بندی وجود دارد، چون نمی‌تواند ارتفاع این نمای تصویر را تشخیص دهد.
نمای تصویر هنوز تصویری ندارد (که اندازه محتوای ذاتی داشته باشد). همچنین حدود عرض و ارتفاع صریحی هم ندارد. در این حالت، می‌خواهیم این تصویر به اندازه محتوای تصویر رشد یابد. بنابراین اجازه خواهیم داد که عرض آن به اندازه لبه سلول و همچنین ارتفاع آن تا حدی که لازم است افزایش پیدا کند تا محتوا بتواند نمایش بیابد. همچنین باید حالت محتوا را روی حفظ ابعاد تصویر قرار دهیم، اما طوری که کل فضای نمای تصویر را اشغال کند.
در حالی که نمای تصویر انتهایی انتخاب شده است در پنل Attributes Inspector مقدار Image را برابر با placeholder و مقدار Content Mode را برابر با Aspect Fill تنظیم کنید.
محدودسازی به لبه‌ها
تا به اینجا سه پشته‌ی تودرتو داریم که وظیفه طرح‌بندی نمای فرعی درون نمای سلول را بر عهده دارند. ما هنوز هیچ قیودی روی چگونگی محدودسازی نمای پشته بیرونی از سوی کران‌های سلول تعیین نکرده‌ایم. نمای پشته‌ای به همراه برچسب‌ها و تصاویر درون آن می‌توانند به سادگی از لبه‌های سلول بزرگ‌تر شوند و از آن عبور کنند که باعث برش یافتن محتوا می‌شود. به جای آن باید به نمای پشته‌ای اعلام کنیم که در حدود لبه‌های سلول باقی بماند.
یک بار روی هر کجای نمای پشته بیرونی در فضای سفید کلیک کنید. برای مثال می‌توانید روی سمت راست نمای تصویر انتهایی کلیک کنید. همچنین می‌توانید نمای پشته بیرونی را از بخش document outline (پنلی که در سمت بوم قرار دارد) انتخاب کنید. در این حالت می‌بینید که یک خط بیرونی آبی‌رنگ پیرامون آن ایجاد می‌شود.
روی دکمه Add New Constraints زیر بوم کلیک کنید. در کادر بازشدنی گزینه Constrain to margins را انتخاب کرده و مقدار 0 را برای هر چهار لبه وارد کنید.
روی دکمه Add 4 Constraints کلیک کنید. چنان که می‌بینید Xcode نمای پشته‌ای را بزرگ می‌کند تا سلول را تا لبه‌هایش پر کنند.
همراستا کردن نمای پشته‌ای
تصویر انتهایی هنوز آن چه را می‌خواهیم به طور کامل اجرا نمی‌کند. برای رسیدن به هدف، این تصویر باید عرض سلول را (تا لبه‌ها) پر کند. چنان که می‌بینید نمای پشته‌ای بیرونی در حال حاضر طوری تنظیم شده که محتوای خود را با لبه Leading همراستا کند.
در حالی که نمای پشته بیرونی انتخاب شده است، در Attributes Inspector مقدار Alignment را از Leading به Fill تغییر دهید.
برش کران‌ها
چنان که می‌بینید این تکنیک جواب می‌دهد و نمای تصویر اینک عرض نمای پشته‌ای را پر می‌کند. با این حال، تصویر از نظر عمودی از کران‌های مستطیل نمای تصویر خود بیرون می‌زند. ما باید به نمای تصویر بگوییم که تصویر را بر اساس کران‌هایش برش دهد.
به این منظور یک بار روی نمای تصویر انتهایی زیر برچسب انتهای کلیک کنید. توجه کنید که دستگیره‌های لبه نمای تصویر در ناحیه مستطیلی مورد نظر هستند، گرچه تصویر درون آن از کران‌های نمای تصویر گذر کرده است.
در حالی که نمای تصویر همچنان در حالت انتخاب است، به پنل Attributes Inspector در ادامه بخش View نگاه کنید. کادر Clip to Bounds را انتخاب کنید.
کامیت کردن تغییرها
همان طور که در بخش‌های قبلی انجام دادیم، در انتهای کار باید تغییرهایی را که در پروژه ایجاد کرده‌ایم کامیت کنیم. مراحل کار به صورت زیر است:
- گزینه Commit Changes را از منوی Source Control انتخاب کنید.
- یک توضیح مانند: Created NewsTableViewCell with custom layout، را وارد کنید.
- روی دکمه Commit کلیک کنید.
جمع‌بندی
ما در این مقاله یک طرح‌بندی سفارشی برای سلول News اپلیکیشن خود ساختیم. همچنین نماهای پشته‌ای و قیودی را اضافه کردیم که همه موارد با فرض هر محتوای متن و تصویری به طرز صحیحی قرار گیرند. برای این که این طرح‌بندی کار کند، باید به استوری‌بورد بگوییم که از این سلول به جای سلول استاندارد اپل استفاده کند. همچنین باید برخی موارد قالب‌بندی مانند فونت‌ها را دستکاری کنیم. برای مطالعه بخش بعدی این مطلب به لینک زیر رجوع کنید:
منبع: فرادرس
قابلیت های پیشرفته جداول HTML — راهنمای کاربردی
در بخش قبلی این سری مقالات به بررسی جداول HTML پرداختیم. در این بخش برخی از قابلیت‌های پیشرفته‌تر جداول HTML مانند کپشن، جمع‌بندی و گروه‌بندی ردیف‌ها در عنوان جدول یا بخش‌های بدنه و فوتر را بررسی می‌کنیم. همچنین بحث دسترس پذیری جداول HTML برای کاربران دچار نقص بینایی را بیشتر مورد بررسی قرار می‌دهیم. برای مطالعه بخش قبلی این مجموعه مطلب آموزشی، روی لینک زیر کلیک کنید:
پیش‌نیاز مطالعه این مقاله آشنایی با مبانی HTML است. انتظار می‌رود با مطالعه این مطلب با قابلیت‌های پیشرفته‌تر جداول HTML و دسترس‌پذیری جداول آشنا شوید.
ارائه توضیح مختصر راجع به جدول با <caption>
با قرار دادن عنصر <caption> و تعریف تودرتوی آن در عنصر <HTML> می‌توان یک کپشن (توصیف کوتاه راجع به محتوای جدول) برای جدول تعریف کرد. این عنصر باید درست پس از تگ باز <table> قرار گیرد.
چنان که از مثال کوتاه فوق مشخص است، کپشن به منظور ارائه توصیفی کوتاه از محتوای جدول ارائه می‌شود. این وضعیت برای همه خوانندگانی که قصد دارند ایده سریعی از فایده جدول داشته باشند، مفید خواهد بود و می‌توانند به سرعت با محتوای جدول آشنا شوند. همچنین افراد نابینا نیز می‌توانند از محتوای جدول آگاه شوند. به جای این که یک ابزار قرائت صفحه محتوای سلول‌های مختلف را بخواند تا این افراد بتوانند در مورد جدول کسب اطلاع بکنند، می‌توانند از کپشن استفاده کنند و تصمیم بگیرند که می‌خواهند جزییات بیشتری از راجع به آن بخوانند یا نه. مجدداً تأکید می‌کنیم که یک کپشن مستقیماً زیر تگ <table> قرار می‌گیرد.
نکته: خصوصیت summary روی عنصر <table> نیز می‌تواند مفید باشد و توصیفی از جدول ارائه کند. این خصوصیت نیز از سوی ابزارهای قرائت صفحه خوانده می‌شود، اما ما توصیه می‌کنیم از <caption> استفاده کنید. summary در HTML5 منسوخ شده و کاربران بینا نمی‌توانند آن را بخوانند، چون روی صفحه نمایش پیدا نمی‌کند.
مثال کاربردی: افزودن <caption>
در این بخش به بررسی مجدد مثالی می‌پردازیم که در بخش قبلی این مقاله ملاحظه کردیم. جدول زمانی مدرسه معلم زبان را از کد زیر کپی کرده و روی سیستم خود در فایلی به نام timetable-fixed.html بچسبانید:
یک کپشن مناسب برای جدول درج کنید. کد را ذخیره کرده و آن را در یک مرورگر باز کنید تا تغییرات حاصل شده را مشاهده کنید.
افزودن ساختار با <thead> ،<tfoot> و <tbody>
زمانی که جدول‌ها ساختار پیچیده‌تری می‌یابند، بهتر است از تعاریف ساختاری بیشتری در ایجاد آن‌ها بهره بگریم. یک روش مشخص استفاده از عناصر <thead> ،<tfoot> و <tbody> است که امکان نشانه‌گذاری بخش‌های هدر، فوتر و بدنه جدول را فراهم می‌سازد.
این عناصر موجب نمی‌شوند که جداول دسترس‌پذیری بیشتری برای ابزارهای قرائت صفحه پیدا کنند و از این نظر ذاتاً ارزش چندانی برای بهبود دیداری ندارند. با این حال، برای استایل‌دهی و طرح‌بندی جداول کاملاً مفید هستند و به عنوان قلاب‌هایی برای افزودن CSS به جدول عمل می‌کنند. برای این که برخی مثال‌های جالب در اختیار شما قرار دهیم، باید بگوییم که وقتی جدولی بسیار طولانی می‌شود، می‌توانید در هر بازه نمایشی از جدول یک هدر و یک فوتر قرار دهید. همچنین می‌توانید بدنه جدول را در یک صفحه منفرد نمایش دهید و محتوای یکسانی را با اسکرول به سمت بالا و پایین داشته باشید.
برای استفاده از آن‌ها به صورت زیر می‌توان عمل کرد:
- عنصر <thead> باید بخشی از جدول را که هدر نام دارد در بربگیرد. این بخش به طور معمول نخستین ردیفی است که عناوین ستون‌ها را شامل می‌شود، اما لزوماً همیشه چنین نیست. اگر از عنصر استفاده کنید، هدر جدول باید درست زیر آن‌ها قرار گیرد.
- عنصر <tfoot> باید بخشی از جدول را که فوتر نام دارد در بر بگیرد. برای نمونه این بخش می‌تواند ردیف نهایی باشد که جمع‌بندی ردیف‌های قبلی محسوب می‌شود. می‌توان فوتر جدول را درست در انتهای جدول یا آن را دقیقاً زیر هدر قرار دارد. در هر حال مرورگر آن را در انتهای جدول رندر خواهند کرد.
- عنصر <tbody> باید بخش‌هایی از جدول را در بر بگیرد که در هدر یا فوتر جدول قرار ندرند. این بخش دقیقاً زیر هدر یا گاهی اوقات زیر فوتر قرار می‌گیرد و این حالت به تصمیم شما در مورد ساختاربندی جدول بستگی دارد.
نکته: <tbody> همواره و در همه جدول‌ها وجود دارد، هرچند آن را در کد خود به صراحت نیاورده باشید. برای بررسی این موضوع یکی از مثال‌های قبلی را که شامل <tbody> نیست باز کنید و به کد HTML در بخش ابزارهای توسعه‌دهنده مرورگر نگاه کنید. در این حالت مشاهده خواهید کرد که مرورگر این عنصر را به جای شما اضافه می‌کند. ممکن است کنجکاو باشید که چه لزومی برای گنجاندن این عنصر وجود دارد، دلیل آن این است که بدین ترتیب کنترل بیشتری روی ساختاربندی و استایل‌دهی جدول خواهید داشت.
مثال کاربردی: افزودن ساختار جدول
در این بخش عناصری جدیدی را که بررسی کردیم، در عمل مورد استفاده قرار می‌دهیم. قبل از هر چیز یک کپی از کدهای زیر برداشته و روی سیستم خود در فایل‌هایی با نام‌های spending-record.html و minimal-table.css بچسبانید:
فایل spending-record.html
فایل minimal-table.css
این فایل HTML را در مرورگر باز کنید. چنان که می‌بینید ظاهر مناسبی دارد، اما همچنان نیاز به بهبود دارد. ردیف SUM شامل جمع‌بندی مقادیر صرف شده است و به نظر می‌رسد در مکان نامناسبی قرار گرفته است. برخی جزییات کد نیز مفقود هستند.
ردیف هدرها را در یک عنصر <thead> قرار دهید و ردیف SUM را نیز درون عنصر <tfoot> قرار دهید و بقیه کد درون عنصر <tbody> قرار می‌گیرد. کد را ذخیره و صفحه را رفرش کنید. در ادامه می‌بینید که افزودن عنصر <tfoot> موجب می‌شود که ردیف SUM به انتهای جدول برود. سپس خصوصیت colspan را اضافه کنید تا سلول SUM روی چهار ستون نخست گسترش یابد، بنابراین تعداد واقعی در انتهای ستون Cost ظاهر می‌شود.
در ادامه استایل‌دهی اضافی ساده‌ای به جدول اضافه می‌کنیم تا ایده‌ای از میزان مفید بودن این عناصر برای به‌کارگیری کد CSS به دست آوریم. درون بخش عنوان سند HTML یک عنصر <style> خالی می‌بینیم. درون این عنصر خطوط کد CSS زیر را اضافه کنید:
کد را ذخیره و صفحه را رفرش کنید و نگاهی به نتیجه بیندازید. اگر عناصر <tbody> و <tfoot> در مکان خود نباشند باید سلکتورها و قواعد پیچیده‌ای برای اعمال استایل ها بنویسید.
جدول تکمیل‌شده شما چیزی مانند زیر خواهد بود:
کد جدول فوق به صورت زیر است:
جداول تودرتو
امکان تعریف تودرتوی یک جدول درون جدول دیگر وجود دارد و به این منظور کافی است که ساختار کامل را شامل عنصر <html> تعریف کنید. البته این روش چندان توصیه نمی‌شود، چون موجب خواهد شد که نشانه‌گذاری پیچیده‌تر شود و ابزارهای قرائت صفحه دسترس‌پذیری کمتری به جدول داشته باشند. در موارد زیادی می‌توان سلول/ردیف/ستون‌های بیشتری در همان جدول موجود درج کرد. با این حال در پاره‌ای موارد برای نمونه در صورتی که بخواهید محتوا را به سادگی از منابع دیگر ایمپورت کنید، این وضعیت ناگزیر خواهد بود.
در ادامه کد نشانه‌گذاری یک جدول تودرتوی ساده را ملاحظه می‌کنید:
خروجی کد فوق چیزی مانند زیر خواهد بود:
| title1 | title2 | title3 | |||
|---|---|---|---|---|---|
| cell2 | cell3 | |||
| cell4 | cell5 | cell6 |
جداول HTML برای کاربران دچار نقص بینایی
در این بخش شیوه استفاده از جدول‌های داده را جمع‌بندی می‌کنیم. یک جدول می‌تواند ابزار کارآمدی باشد و دسترسی سریعی به داده‌ها بدهد. همچنین امکان بررسی و مقایسه مقادیر مختلف را فراهم می‌سازد. با صرفاً یک نگاه گذرا به جدول زیر می‌توان دریافت که چند عدد حلقه در ماه آگوست اخیر در Gent فروخته شده است. برای درک این اطلاعات باید اتصال دیداری بین داده‌های این و هدرهای ردیف و / یا ستون‌های آن برقرار کنیم.
| Clothes | Accessories | |||||
|---|---|---|---|---|---|---|
| Trousers | Skirts | Dresses | Bracelets | Rings | ||
| Belgium | Antwerp | 56 | 22 | 43 | 72 | 23 |
| Gent | 46 | 18 | 50 | 61 | 15 | |
| Brussels | 51 | 27 | 38 | 69 | 28 | |
| The Netherlands | Amsterdam | 89 | 34 | 69 | 85 | 38 |
| Utrecht | 80 | 12 | 43 | 36 | 19 | |
اما اگر شما نتوانید آن ارتباط‌های دیداری را ایجاد کنید چطور؟ در این صورت چگونه می‌توانید یک جدول مانند جدول فوق را بخوانید؟ افراد دچار نقص بینایی غالباً از یک ابزار قرائت صفحه استفاده می‌کنند که اطلاعات روی صفحه وب را برای آن‌ها می‌خواند. این وضعیت زمانی که متن ساده باشد هیچ مشکلی ایجاد نمی‌کند، اما تفسیر یک جدول برای فرد نابینا می‌تواند چالشی جدی محسوب شود. در هر حال، نشانه‌گذاری صحیح می‌تواند آن ارتباط‌های دیداری را با ارتباط‌های برنامه‌نویسی شده جایگزین کند.
نکته: بر اساس آمار سازمان بهداشت جهانی در سال 2017، حدود 235 میلیون فرد در دنیا با نوعی نقص بینایی زندگی می‌کرده‌اند. در همین راستا در این بخش از مقاله تکنیک‌های بیشتری معرفی می‌کنیم که به کمک آن‌ها می‌توانید جدول‌ها را تا بیشترین حد ممکن دسترس‌پذیر کنید.
استفاده از هدرهای ردیف و ستون
ابزارهای قرائت صفحه همه هدرها را شناسایی می‌کنند و از آن‌ها برای ایجاد ارتباط برنامه‌نویسی شده بین هدرها و سلول‌هایی که با آن‌ها ارتباط دارند کمک می‌گیرند. ترکیب هدرهای ردیف و ستون می‌تواند جدول را مانند روشی که فرد بینا جدول را تفسیر می‌کند، ارائه دهد.
در بخش قبلی (+) این مقاله با روش درج هدر در جدول آشنا شدیم.
خصوصیت scope
مبحث جدیدی که در این مقاله بررسی می‌کنیم خصوصیت scope است که می‌توان با استفاده از عنصر <th> به جدول اضافه کرد. این خصوصیت به ابزارهای قرائت صفحه اعلام می‌کند که هدر مربوط به کدام سلول‌ها است و آیا هدری برای ردیف یا ستون خاص محسوب می‌شود یا نه. اگر به مثال سوابق مصارف خود بازگردیم بدین ترتیب می‌توانیم بدون هیچ ابهامی هدرهای ستون را به صورت زیر تعریف کنیم:
هر ردیف یک هدر دارد که به صورت زیر تعریف می‌شود (در صورتی که خواسته باشیم علاوه بر هدر ستون، هدر ردیف نیز اضافه کنیم):
ابزارهای قرائت صفحه نشانه‌گذاری‌هایی که به این صورت ساختاربندی شده باشند را شناسایی می‌کنند و برای نمونه به کاربران خود اجازه می‌دهند که کل ستون یا ردیف را به صورت یک‌باره بخوانند.
scope دو مقدار ممکن دیگر نیز دارد که colgroup و rowgroup نام دارند. این مقادیر برای عناوینی استفاده می‌شوند که روی چندین ستون یا ردیف قرار می‌گیرند. اگر نگاهی دوباره به جدول Items Sold August 2016 در آغاز این بخش از جدول داشته باشیم، می‌بینیم که سلول Clothes روی سلول‌های rousers ،Skirts و Dresses قرار می‌گیرند. همه این سلول‌ها باید به صورت هدر <th> نشانه‌گذاری شوند. از این رو Clothes عنوانی است که در ابتدای جدول قرار می‌گیرد و سه زیرعنوان دیگر را تعریف می‌کند. بدین ترتیب Clothes می‌تواند یک خصوصیت بگیرد، در حالی که سلول‌های دیگر دارای خصوصیت scope=”col”هستند.
خصوصیت‌های id و headers
یک جایگزین برای استفاده از خصوصیت scope استفاده از خصوصیت‌های id و headers برای ایجاد ارتباط بین هدرها و سلول‌ها است. این روش به صورت زیر مورد استفاده قرار می‌گیرد:
- یک id یکتا به هر عنصر <th> اضافه می‌شود.
- یک خصوصیت headers به هر عنصر <td> اضافه شود. هر خصوصیت headers باید شامل فهرستی از id-ها برای همه عناصر <th> باشد که به عنوان یک هدر برای سلول عمل می‌کنند و با فاصله از هم جدا می‌شوند.
- بدین ترتیب جدول HTML یک تعریف صریح از موقعیت هر سلول در جدول پیدا می‌کند که به وسیله هدر (های) هر ستون و ردیف که بخشی از آن هستند تعریف می‌شود و تا حدودی شبیه به یک «صفحه گسترده» (Spreadsheet) است. برای این که این تکنیک به درستی کار کند، جدول باید واقعاً به هر دو هدر ردیف و ستون نیاز داشته باشد.
اگر به مثال «هزینه‌های مصرفی» بازگردیم، دو قطعه کد قبلی را می‌توان به صورت زیر بازنویسی کرد:
نکته: این روش ارتباط بسیار دقیقی بین سلول‌های هدر و داده برقرار می‌کند، اما از نشانه‌گذاری بسیار زیادی استفاده شده است و هیچ پیش‌بینی برای خطا وجود ندارد. رویکرد scope برای اغلب جدول‌ها کافی به نظر می‌رسد.
مثال کاربردی: کار کردن با scope و headers
در این تمرین نهایی ابتدا یک کپی از فایل زیر برداشته و در سیستم خود در فایلی با نام items-sold.html درج کنید.
فایل items-sold.html
همچنین کد زیر را در فایلی با نام minimal-table.css ذخیره کنید:
اکنون تلاش کنید، خصوصیت scope مناسب را اضافه کنید تا جدول به شکل صحیح‌تری نمایش پیدا کند. در نهایت کپی دیگری از فایل‌های اولیه ایجاد کنید و این بار با استفاده از خصوصیت‌های id و headers جدول را دسترس‌پذیر تر بسازید.
نکته: در نهایت کار خود را با دو کد زیر مقایسه کنید:
فایل کامل شده مثال هزینه‌های مصرفی با استفاده از scope
فایل کامل شده مثال هزینه‌های مصرفی با استفاده از headers
جمع‌بندی
چند نکته دیگر نیز وجود دارند که باید در مورد جداول HTML بدانید، اما همه موارد مهمی که تا به این جا واقعاً باید می‌دانستید در این مقاله ارائه کرده‌ایم. در بخش بعدی این سری مقالات به بررسی روش‌های استایل‌دهی جداول خواهیم پرداخت.
ب
منبع: فرادرس
قابلیت های پیشرفته جداول HTML — راهنمای کاربردی
در بخش قبلی این سری مقالات به بررسی جداول HTML پرداختیم. در این بخش برخی از قابلیت‌های پیشرفته‌تر جداول HTML مانند کپشن، جمع‌بندی و گروه‌بندی ردیف‌ها در عنوان جدول یا بخش‌های بدنه و فوتر را بررسی می‌کنیم. همچنین بحث دسترس پذیری جداول HTML برای کاربران دچار نقص بینایی را بیشتر مورد بررسی قرار می‌دهیم. برای مطالعه بخش قبلی این مجموعه مطلب آموزشی، روی لینک زیر کلیک کنید:
پیش‌نیاز مطالعه این مقاله آشنایی با مبانی HTML است. انتظار می‌رود با مطالعه این مطلب با قابلیت‌های پیشرفته‌تر جداول HTML و دسترس‌پذیری جداول آشنا شوید.
ارائه توضیح مختصر راجع به جدول با <caption>
با قرار دادن عنصر <caption> و تعریف تودرتوی آن در عنصر <HTML> می‌توان یک کپشن (توصیف کوتاه راجع به محتوای جدول) برای جدول تعریف کرد. این عنصر باید درست پس از تگ باز <table> قرار گیرد.
چنان که از مثال کوتاه فوق مشخص است، کپشن به منظور ارائه توصیفی کوتاه از محتوای جدول ارائه می‌شود. این وضعیت برای همه خوانندگانی که قصد دارند ایده سریعی از فایده جدول داشته باشند، مفید خواهد بود و می‌توانند به سرعت با محتوای جدول آشنا شوند. همچنین افراد نابینا نیز می‌توانند از محتوای جدول آگاه شوند. به جای این که یک ابزار قرائت صفحه محتوای سلول‌های مختلف را بخواند تا این افراد بتوانند در مورد جدول کسب اطلاع بکنند، می‌توانند از کپشن استفاده کنند و تصمیم بگیرند که می‌خواهند جزییات بیشتری از راجع به آن بخوانند یا نه. مجدداً تأکید می‌کنیم که یک کپشن مستقیماً زیر تگ <table> قرار می‌گیرد.
نکته: خصوصیت summary روی عنصر <table> نیز می‌تواند مفید باشد و توصیفی از جدول ارائه کند. این خصوصیت نیز از سوی ابزارهای قرائت صفحه خوانده می‌شود، اما ما توصیه می‌کنیم از <caption> استفاده کنید. summary در HTML5 منسوخ شده و کاربران بینا نمی‌توانند آن را بخوانند، چون روی صفحه نمایش پیدا نمی‌کند.
مثال کاربردی: افزودن <caption>
در این بخش به بررسی مجدد مثالی می‌پردازیم که در بخش قبلی این مقاله ملاحظه کردیم. جدول زمانی مدرسه معلم زبان را از کد زیر کپی کرده و روی سیستم خود در فایلی به نام timetable-fixed.html بچسبانید:
یک کپشن مناسب برای جدول درج کنید. کد را ذخیره کرده و آن را در یک مرورگر باز کنید تا تغییرات حاصل شده را مشاهده کنید.
افزودن ساختار با <thead> ،<tfoot> و <tbody>
زمانی که جدول‌ها ساختار پیچیده‌تری می‌یابند، بهتر است از تعاریف ساختاری بیشتری در ایجاد آن‌ها بهره بگریم. یک روش مشخص استفاده از عناصر <thead> ،<tfoot> و <tbody> است که امکان نشانه‌گذاری بخش‌های هدر، فوتر و بدنه جدول را فراهم می‌سازد.
این عناصر موجب نمی‌شوند که جداول دسترس‌پذیری بیشتری برای ابزارهای قرائت صفحه پیدا کنند و از این نظر ذاتاً ارزش چندانی برای بهبود دیداری ندارند. با این حال، برای استایل‌دهی و طرح‌بندی جداول کاملاً مفید هستند و به عنوان قلاب‌هایی برای افزودن CSS به جدول عمل می‌کنند. برای این که برخی مثال‌های جالب در اختیار شما قرار دهیم، باید بگوییم که وقتی جدولی بسیار طولانی می‌شود، می‌توانید در هر بازه نمایشی از جدول یک هدر و یک فوتر قرار دهید. همچنین می‌توانید بدنه جدول را در یک صفحه منفرد نمایش دهید و محتوای یکسانی را با اسکرول به سمت بالا و پایین داشته باشید.
برای استفاده از آن‌ها به صورت زیر می‌توان عمل کرد:
- عنصر <thead> باید بخشی از جدول را که هدر نام دارد در بربگیرد. این بخش به طور معمول نخستین ردیفی است که عناوین ستون‌ها را شامل می‌شود، اما لزوماً همیشه چنین نیست. اگر از عنصر استفاده کنید، هدر جدول باید درست زیر آن‌ها قرار گیرد.
- عنصر <tfoot> باید بخشی از جدول را که فوتر نام دارد در بر بگیرد. برای نمونه این بخش می‌تواند ردیف نهایی باشد که جمع‌بندی ردیف‌های قبلی محسوب می‌شود. می‌توان فوتر جدول را درست در انتهای جدول یا آن را دقیقاً زیر هدر قرار دارد. در هر حال مرورگر آن را در انتهای جدول رندر خواهند کرد.
- عنصر <tbody> باید بخش‌هایی از جدول را در بر بگیرد که در هدر یا فوتر جدول قرار ندرند. این بخش دقیقاً زیر هدر یا گاهی اوقات زیر فوتر قرار می‌گیرد و این حالت به تصمیم شما در مورد ساختاربندی جدول بستگی دارد.
نکته: <tbody> همواره و در همه جدول‌ها وجود دارد، هرچند آن را در کد خود به صراحت نیاورده باشید. برای بررسی این موضوع یکی از مثال‌های قبلی را که شامل <tbody> نیست باز کنید و به کد HTML در بخش ابزارهای توسعه‌دهنده مرورگر نگاه کنید. در این حالت مشاهده خواهید کرد که مرورگر این عنصر را به جای شما اضافه می‌کند. ممکن است کنجکاو باشید که چه لزومی برای گنجاندن این عنصر وجود دارد، دلیل آن این است که بدین ترتیب کنترل بیشتری روی ساختاربندی و استایل‌دهی جدول خواهید داشت.
مثال کاربردی: افزودن ساختار جدول
در این بخش عناصری جدیدی را که بررسی کردیم، در عمل مورد استفاده قرار می‌دهیم. قبل از هر چیز یک کپی از کدهای زیر برداشته و روی سیستم خود در فایل‌هایی با نام‌های spending-record.html و minimal-table.css بچسبانید:
فایل spending-record.html
فایل minimal-table.css
این فایل HTML را در مرورگر باز کنید. چنان که می‌بینید ظاهر مناسبی دارد، اما همچنان نیاز به بهبود دارد. ردیف SUM شامل جمع‌بندی مقادیر صرف شده است و به نظر می‌رسد در مکان نامناسبی قرار گرفته است. برخی جزییات کد نیز مفقود هستند.
ردیف هدرها را در یک عنصر <thead> قرار دهید و ردیف SUM را نیز درون عنصر <tfoot> قرار دهید و بقیه کد درون عنصر <tbody> قرار می‌گیرد. کد را ذخیره و صفحه را رفرش کنید. در ادامه می‌بینید که افزودن عنصر <tfoot> موجب می‌شود که ردیف SUM به انتهای جدول برود. سپس خصوصیت colspan را اضافه کنید تا سلول SUM روی چهار ستون نخست گسترش یابد، بنابراین تعداد واقعی در انتهای ستون Cost ظاهر می‌شود.
در ادامه استایل‌دهی اضافی ساده‌ای به جدول اضافه می‌کنیم تا ایده‌ای از میزان مفید بودن این عناصر برای به‌کارگیری کد CSS به دست آوریم. درون بخش عنوان سند HTML یک عنصر <style> خالی می‌بینیم. درون این عنصر خطوط کد CSS زیر را اضافه کنید:
کد را ذخیره و صفحه را رفرش کنید و نگاهی به نتیجه بیندازید. اگر عناصر <tbody> و <tfoot> در مکان خود نباشند باید سلکتورها و قواعد پیچیده‌ای برای اعمال استایل ها بنویسید.
جدول تکمیل‌شده شما چیزی مانند زیر خواهد بود:
کد جدول فوق به صورت زیر است:
جداول تودرتو
امکان تعریف تودرتوی یک جدول درون جدول دیگر وجود دارد و به این منظور کافی است که ساختار کامل را شامل عنصر <html> تعریف کنید. البته این روش چندان توصیه نمی‌شود، چون موجب خواهد شد که نشانه‌گذاری پیچیده‌تر شود و ابزارهای قرائت صفحه دسترس‌پذیری کمتری به جدول داشته باشند. در موارد زیادی می‌توان سلول/ردیف/ستون‌های بیشتری در همان جدول موجود درج کرد. با این حال در پاره‌ای موارد برای نمونه در صورتی که بخواهید محتوا را به سادگی از منابع دیگر ایمپورت کنید، این وضعیت ناگزیر خواهد بود.
در ادامه کد نشانه‌گذاری یک جدول تودرتوی ساده را ملاحظه می‌کنید:
خروجی کد فوق چیزی مانند زیر خواهد بود:
| title1 | title2 | title3 | |||
|---|---|---|---|---|---|
| cell2 | cell3 | |||
| cell4 | cell5 | cell6 |
جداول HTML برای کاربران دچار نقص بینایی
در این بخش شیوه استفاده از جدول‌های داده را جمع‌بندی می‌کنیم. یک جدول می‌تواند ابزار کارآمدی باشد و دسترسی سریعی به داده‌ها بدهد. همچنین امکان بررسی و مقایسه مقادیر مختلف را فراهم می‌سازد. با صرفاً یک نگاه گذرا به جدول زیر می‌توان دریافت که چند عدد حلقه در ماه آگوست اخیر در Gent فروخته شده است. برای درک این اطلاعات باید اتصال دیداری بین داده‌های این و هدرهای ردیف و / یا ستون‌های آن برقرار کنیم.
| Clothes | Accessories | |||||
|---|---|---|---|---|---|---|
| Trousers | Skirts | Dresses | Bracelets | Rings | ||
| Belgium | Antwerp | 56 | 22 | 43 | 72 | 23 |
| Gent | 46 | 18 | 50 | 61 | 15 | |
| Brussels | 51 | 27 | 38 | 69 | 28 | |
| The Netherlands | Amsterdam | 89 | 34 | 69 | 85 | 38 |
| Utrecht | 80 | 12 | 43 | 36 | 19 | |
اما اگر شما نتوانید آن ارتباط‌های دیداری را ایجاد کنید چطور؟ در این صورت چگونه می‌توانید یک جدول مانند جدول فوق را بخوانید؟ افراد دچار نقص بینایی غالباً از یک ابزار قرائت صفحه استفاده می‌کنند که اطلاعات روی صفحه وب را برای آن‌ها می‌خواند. این وضعیت زمانی که متن ساده باشد هیچ مشکلی ایجاد نمی‌کند، اما تفسیر یک جدول برای فرد نابینا می‌تواند چالشی جدی محسوب شود. در هر حال، نشانه‌گذاری صحیح می‌تواند آن ارتباط‌های دیداری را با ارتباط‌های برنامه‌نویسی شده جایگزین کند.
نکته: بر اساس آمار سازمان بهداشت جهانی در سال 2017، حدود 235 میلیون فرد در دنیا با نوعی نقص بینایی زندگی می‌کرده‌اند. در همین راستا در این بخش از مقاله تکنیک‌های بیشتری معرفی می‌کنیم که به کمک آن‌ها می‌توانید جدول‌ها را تا بیشترین حد ممکن دسترس‌پذیر کنید.
استفاده از هدرهای ردیف و ستون
ابزارهای قرائت صفحه همه هدرها را شناسایی می‌کنند و از آن‌ها برای ایجاد ارتباط برنامه‌نویسی شده بین هدرها و سلول‌هایی که با آن‌ها ارتباط دارند کمک می‌گیرند. ترکیب هدرهای ردیف و ستون می‌تواند جدول را مانند روشی که فرد بینا جدول را تفسیر می‌کند، ارائه دهد.
در بخش قبلی (+) این مقاله با روش درج هدر در جدول آشنا شدیم.
خصوصیت scope
مبحث جدیدی که در این مقاله بررسی می‌کنیم خصوصیت scope است که می‌توان با استفاده از عنصر <th> به جدول اضافه کرد. این خصوصیت به ابزارهای قرائت صفحه اعلام می‌کند که هدر مربوط به کدام سلول‌ها است و آیا هدری برای ردیف یا ستون خاص محسوب می‌شود یا نه. اگر به مثال سوابق مصارف خود بازگردیم بدین ترتیب می‌توانیم بدون هیچ ابهامی هدرهای ستون را به صورت زیر تعریف کنیم:
هر ردیف یک هدر دارد که به صورت زیر تعریف می‌شود (در صورتی که خواسته باشیم علاوه بر هدر ستون، هدر ردیف نیز اضافه کنیم):
ابزارهای قرائت صفحه نشانه‌گذاری‌هایی که به این صورت ساختاربندی شده باشند را شناسایی می‌کنند و برای نمونه به کاربران خود اجازه می‌دهند که کل ستون یا ردیف را به صورت یک‌باره بخوانند.
scope دو مقدار ممکن دیگر نیز دارد که colgroup و rowgroup نام دارند. این مقادیر برای عناوینی استفاده می‌شوند که روی چندین ستون یا ردیف قرار می‌گیرند. اگر نگاهی دوباره به جدول Items Sold August 2016 در آغاز این بخش از جدول داشته باشیم، می‌بینیم که سلول Clothes روی سلول‌های rousers ،Skirts و Dresses قرار می‌گیرند. همه این سلول‌ها باید به صورت هدر <th> نشانه‌گذاری شوند. از این رو Clothes عنوانی است که در ابتدای جدول قرار می‌گیرد و سه زیرعنوان دیگر را تعریف می‌کند. بدین ترتیب Clothes می‌تواند یک خصوصیت بگیرد، در حالی که سلول‌های دیگر دارای خصوصیت scope=”col”هستند.
خصوصیت‌های id و headers
یک جایگزین برای استفاده از خصوصیت scope استفاده از خصوصیت‌های id و headers برای ایجاد ارتباط بین هدرها و سلول‌ها است. این روش به صورت زیر مورد استفاده قرار می‌گیرد:
- یک id یکتا به هر عنصر <th> اضافه می‌شود.
- یک خصوصیت headers به هر عنصر <td> اضافه شود. هر خصوصیت headers باید شامل فهرستی از id-ها برای همه عناصر <th> باشد که به عنوان یک هدر برای سلول عمل می‌کنند و با فاصله از هم جدا می‌شوند.
- بدین ترتیب جدول HTML یک تعریف صریح از موقعیت هر سلول در جدول پیدا می‌کند که به وسیله هدر (های) هر ستون و ردیف که بخشی از آن هستند تعریف می‌شود و تا حدودی شبیه به یک «صفحه گسترده» (Spreadsheet) است. برای این که این تکنیک به درستی کار کند، جدول باید واقعاً به هر دو هدر ردیف و ستون نیاز داشته باشد.
اگر به مثال «هزینه‌های مصرفی» بازگردیم، دو قطعه کد قبلی را می‌توان به صورت زیر بازنویسی کرد:
نکته: این روش ارتباط بسیار دقیقی بین سلول‌های هدر و داده برقرار می‌کند، اما از نشانه‌گذاری بسیار زیادی استفاده شده است و هیچ پیش‌بینی برای خطا وجود ندارد. رویکرد scope برای اغلب جدول‌ها کافی به نظر می‌رسد.
مثال کاربردی: کار کردن با scope و headers
در این تمرین نهایی ابتدا یک کپی از فایل زیر برداشته و در سیستم خود در فایلی با نام items-sold.html درج کنید.
فایل items-sold.html
همچنین کد زیر را در فایلی با نام minimal-table.css ذخیره کنید:
اکنون تلاش کنید، خصوصیت scope مناسب را اضافه کنید تا جدول به شکل صحیح‌تری نمایش پیدا کند. در نهایت کپی دیگری از فایل‌های اولیه ایجاد کنید و این بار با استفاده از خصوصیت‌های id و headers جدول را دسترس‌پذیر تر بسازید.
نکته: در نهایت کار خود را با دو کد زیر مقایسه کنید:
فایل کامل شده مثال هزینه‌های مصرفی با استفاده از scope
فایل کامل شده مثال هزینه‌های مصرفی با استفاده از headers
جمع‌بندی
چند نکته دیگر نیز وجود دارند که باید در مورد جداول HTML بدانید، اما همه موارد مهمی که تا به این جا واقعاً باید می‌دانستید در این مقاله ارائه کرده‌ایم. در بخش بعدی این سری مقالات به بررسی روش‌های استایل‌دهی جداول خواهیم پرداخت.
ب
منبع: فرادرس