پروژه هشت - 4

حقیقتا سر طراحی لی لوت این صفحه برای ریسپانسیو بودنش دهنم سرویس شد :| مخصوصا سر چهار تا گزینش :|

 

1. 4 ضلع صفحه رو با گاید لاین به اندازه 1 درصد حاشیه گذاری کردم.

 

2. با اندازه های 10، 30، 86 درصد به چهار قسمت تبدیلش کردم.

 

 

3. توی قسمت اول که صورت سوال نوشته شده، ارتفاع رو wrap و بایاس عمودی رو صفر گذاشتم(برای اینکه جا داشته باشه برای سوالات طولانی تر). width هم match constraint داده شده.

 

4. قسمت دوم عکس قرار میگیره. این ویو در حالت کلی gone هست، چون فقط سوال دوم عکس داره. ratio این عکس به این صورت داده شده:

w,16:9 - دلیلش اینکه که فضای ارتفاع محدود است، بنابراین اول ارتفاع رو تعیین میکنه و با توجه به اون width رو ست میکنه.

 

5. ارتفاع گزینه ها رو میتونستم wrap بذارم ولی چون میخاستم کادر تکست ویوها برای همه سوالات ثابت باشه weight دادم (این سلیقه ای هست). اگر wrap بود ممکن بود واسه یه سوال یه گزینه بزرگ باشه یه گزینه کوچیک که بنظر من خوب نیست.

attribute های هر چهار تا تکست ویو مثل زیر هست. این چهار تا به صورت chain به هم وصل شدند.

نکته مهم: برای weight دادن، المان ها حتما باید chain باشند.

 

6. توی این قسمت چهار تا ایمیج ویو هم هست که gone هستند. چون فقط یک سوال گزینه هاش ایمیج هست.

 

7. آخرین قسمت باتن قرار میگیره. که width رو 0.8 درصد و ارتفاع رو wrap دادم.

 

 

این خیلی سخت بود و چند روز طول کشید تا درست بشه :((