دوست داری برنامه اندروید بسازی ...!؟
نمی دونی از کجا شروع کنی ... !؟
یادگیری گام به گام و کاملا رایگان در
آکادمی همیار اندروید
شروع یادگیری
همکاران ما
تبلیغات
مطلب انتخابی شما

تاریخ ارسال : ۲۹ , ۰۳ , ۱۳۹۵
تعداد نظرات : ۱۲ نظر
دسته بندی : Android Studio, Layout

آموزش طراحی رابط کاربری (UI) و صفحه بندی در اندروید استودیو – Table Layout

سلام بر دوستان همیار اندروید ،

امروز میخوایم به یکی از مباحث بسیار کاربردی با موضوع طراحی رابط کاربری و صفحه بندی با استفاده از TableLayout در برنامه نویسی اندروید بپردازیم ،

من خودم عاشق طراحی رابط کاربری (UI) هستم از این رو مباحثی که به طراحی مربوط میشن رو با دقت بالا تری تهیه میکنم ، پس امروز هم مثل همیشه با ما همرا باشید …

 

اول یه توضیح در مورد View و ViewGroup بدم …

View به زبان ساده میشه گفت که یک شی است که یک ناحیه مستطیل شکل را در صفحه ایجاد می کند

و مسئول ایجاد و ترسیم قسمت های مختلف رابط کاربری در صفحه ی نمایش ؛ و رسیدگی به تعاملات کاربر با آن قسمت ها می باشد

ViewGroup هم یک زیر مجموعه یا زیر کلاس از View می باشد

که یک فضای نامرئی را ایجاد میکند و سایر Viewها و ViewGroupها را نگه می دارد و ویژگی های صفحه بندی آن ها را تعریف می کند.

منظور از صفحه بندی اینه که مثلا ما سه دکمه داریم حالا این دکمه ها رو بیا و چینششون رو زیر هم قرار بده

از این به بعد نام این صفحه بندی لایوت (Layout) هستش و ما با استفاده از Layoutها چیدمان و صفحه بندی را انجام می دهیم

 

صفحه بندی از نوع TableLayout

ما صفحه بندی ها یا بهتر است بگویم لایوت های زیادی داریم ( همش ۷ تاست ) که امروز می خوایم رو صفحه بندی از نوع TableLayout کار کنیم .

 

روش کار صفحه بندی از نوع TableLayout چی جوریاست ؟

به تصویر زیر دقت کنید

دقیقا مثل یک جدول معمولی هستش که در اینجا اسم سطرها (Row) هستش و اسم ستون ها (Column) می باشد

در تصویر بالا ما از چهار سطر و دو ستون استفاده کردیم و درون آنها تعدادی دکمه و تکست باکس قرار دادیم

نکته : در تصویر بالا شمارش ستون ها از صفر شروع می شود ، علت را جلوتر یادخواهید گرفت …

 

ایجاد یک صفحه بندی از نوع TableLayout

ما برای صفحه بندی اپلیکیشنمون به یک فایل layout.xml خام نیاز داریم به طوری که می خوایم درون اون یک TableLayout قرار بدیم و با استفاده از TableLayout ، چینش و صفحه بندی دکمه ها و … را انجام بدیم.

آموزش اضافی : آموزش ساخت یک لایوت در اندروید استودیو

ما در حالی که یک لایوت خام داریم برای اضافه کردن صفحه بندی از نوع TableLayout باید کدهای زیر را به فایل layout.xml اضافه کنیم

حالا ما می خوایم  که چهار سطر یا بهتر است بگویم چهار Row ایجاد کنیم که برای این کار باید چهار بار از کد زیر استفاده کنیم

خوب حالا ما می خوایم دو ستون داشته باشیم برای این کار کدی وجود ندارد ، فقط کافیست به روش زیر عمل کنید

مثلا من می خوام دو دکمه رو کنار هم بزارم ( که بشود دو ستون ) کافیست درون کد TableRow دو دکمه قرار بدهیم برای این کار دو بار کد زیر که مربوط به ساخت دکمه می باشد رو درون کد TableRow قرار دهید

کد زیر مربوط به تمام کدهایی است که تا الان استفاده کردیم ( یک جا )

و نتیجه کار هم در تصویر زیر نمایش داده شده است

 

چند خاصیت بسیار کاربردی و کلیدی مربوط به TableLayout

شما فرض کنید که می خواهید در سطر اول یکی از دکمه ها به اندازه دو ستون کشیده شود برای این کار خاصیت layout_span را با مقدار ۲ به دکمه مورد نظر می دهیم ( کد زیر می باشد )

ما در سطر چهارم ، دو دکمه داشتیم حالا می خوایم دکمه اولی ، در ستون دوم قرار بگیرد برای این کار باید خاصیت layout_column را با مقدار ۱ به دکمه مورد نظر بدهیم ( کد زیر می باشد )

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

نکته مهم : ما برای اینکه دکمه مورد نظر را به ستون دوم انتقال دهیم خاصیت layout_column را با مقدار ۱ به دکمه دادیم ،

چرا ۱ ، ما که می خواستیم به ستون ۲ برود ، زیرا شمارش ستون ها از صفر شروع می شود و ستون ۲ درواقع همان ستون ۱ می باشد .

 

 

 

 

خیلی خوب دوستان تا جایی که تونستم روان و مرحله به مرحله توضیح دادم ،

برای همراهی من و انگیزه برای تهیه آموزش های بعدی می تونید نظرات خودتون رو به من برسونید …

پیروز باشید ؛ بدرود

 

 

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

همیار اندروید را در شبکه های اجتماعی دنبال کنید
یــــــک راه آسان برای ارتباط با هـــــــم :)
مطالب مرتبط با موضوع شما


نظرات کاربران

لطفا نظر ، پیشنهاد و انتقاد خود را فقط در ارتباط با موضوع بالا ذکر کنید و از سوالات پراکنده خود داری کنید
برای حفظ و برقراری نظم در سایت به سوالات پراکنده پاسخ داده نمی شود
در آینده سیستم پرسش و پاسخ راه اندازی خواهد شد
لطفا به قوانین احترام بگذارید

12 پاسخ به “آموزش طراحی رابط کاربری (UI) و صفحه بندی در اندروید استودیو – Table Layout”

  1. omid می‌گه:

    عالی هستش. ممنون.

  2. asghar می‌گه:

    سلام و عرض ادب

    آموزش ها بسیار عالی و روان هست.من واقعا استفاده میکنم.

    بسیار ممنون از زحمات خوبتون

  3. ابراهیم می‌گه:

    دمتون گرم واقعا

  4. حسین می‌گه:

    با سلام

    برای اینکه لایه طراحی شده در تمام صفحه نمایش ها یکسان باشد، چیکار باید بکنیم؟

    با تشکر

    • سامان سلطانی پور می‌گه:

      سلام

      لایه ها و دکمه ها متناسب با چگالی و رزولوشن صفحه نمایش  باید تغییر اندازه کنند

      که قبلا توضیح داده بودم ، می تونید این آموزش ها رو مطالعه کنید : ۱ و ۲

      ممون

  5. رضا می‌گه:

    سلام سلاااااااااااااااااااام

    آفرین آفرین به این آموزش دادنتون
    ایشالا با انشار علمتون علم جدید تری به دست بیارید

    به نظر من حاصل تلاش و زحماتتون رو به صورت کتاب کنید و انتشار بدید بعد کامل شدن خیلی عالیه 
     

    ممنون 

    • سامان سلطانی پور می‌گه:

      سلام دوست عزیز

      چشم ، طرح های زیادی هستند از جمله طرح شما که در آینده اجرای خواهد شد

      ممنون از توجه و پیگیری شما

  6. alireza می‌گه:

    ببخشید.

    من یک مشکلی  داشتم

    این خطا رو میداد multiple root tags

    • سامان سلطانی پور می‌گه:

      سلام

      تمام آموزش ها با دقت بالایی تهیه می شوند پس اگر مطابق آموزش مرحله به مرحله پیش بروید به مشکل بر نمی خورید

      یه بار دیگه امتحان کنید ، اگه بازم مشکل داشتید لطفا از کدهای خود تصویر گرفته و برای ما ارسال کنید تا بتوانیم شما را راهنمایی کنیم

      ممنون از همراهی شما

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


ما را محبوب کنید