ggg
Amazing Categories :
Android
Node.js

دسته بندی نشده
(16)

آماده سازی محیط برنامه نویسی
(11)

آموزش ها و مباحث پایه ای اندروید
(8)

نکات پایه ای اندروید استودیو
(3)

وب سایت های مفید و کاربردی
(1)

AlertDialog
(1)

LogCat
(1)

Activity Lifecycle
(1)

Activity
(3)

Manifest
(2)

Strings
(1)

StatusBar
(1)

ActionBar
(2)

Toast
(1)

Library
(6)

ListView
(3)

آموزش های مرتبط با طراحی متریال ( Material Design )
CardView
(1)

RecyclerView
(0)

ویوها و ابزارهای موجود در محیط برنامه نویسی
MediaPlayer
(4)

WebView
(1)

VideoView
(1)

Button
(1)

ImageButton
(1)

RadioButton & RadioGroup
(1)

EditText
(0)

TextView
(1)

ScrollView
(2)

طراحی رابط کاربری و زیباسازی
Layout
(4)

Style
(2)

Shape
(2)

Animation
(2)

Typeface
(2)

آموزش های مرتبط با سخت افزار
Camera
(1)

Vibrator
(1)

Bluetooth
(0)

WiFi
(0)

ذخیره اطلاعات و پایگاه داده
SQLite Database
(0)

Shared Preferences
(0)


دسته بندی نشده
(8)


آموزش طراحی رابط کاربری (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 را با مقدار ۱ به دکمه دادیم ،

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

 

 

 

 

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

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

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

 

 




این آموزش ویدیویی برای دانلود ندارد




این آموزش فایلی برای دانلود ندارد

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

آموزش های مرتبط با موضوع انتخابی شما

برچسب‌ها : , , , , , , , , , , ,

دیدگاه ها و پرسش های دانشجویان
دیدگاه یا پرسش خود را فقط در رابطه با همین مطلب ارسال کنید .
پرسش های دیگر دانشجویان را بررسی کنید ، به پرسش های تکراری رسیدگی نمی شود .
تایپ به صورت فینگلیش تایید نخواهد شد .
لطفا قوانین را رعایت کنید .
تا الان تعداد ۱۶ دیدگاه و پرسش برای این مطلب ارسال شده است .

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

  1. omid گفت:

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

  2. asghar گفت:

    سلام و عرض ادب

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

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

  3. ابراهیم گفت:

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

  4. حسین گفت:

    با سلام

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

    با تشکر

    • سامان سلطانی پور گفت:

      سلام

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

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

      ممون

  5. رضا گفت:

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

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

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

    ممنون 

    • سامان سلطانی پور گفت:

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

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

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

  6. alireza گفت:

    ببخشید.

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

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

    • سامان سلطانی پور گفت:

      سلام

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

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

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

  7. مسعود گفت:

    سلام من دو لایه بر روی هم قرار دادم  و میخوام با کلیک بر روی دکمه یکی از لایه ها حذف بشه 

    • سامان سلطانی پور گفت:

      سلام ، 

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

      که پیشنهاد من استفاده از خاصیت  setVisibility هستش

      نمونه 

      موفق باشید

  8. سعید گفت:

    سلام .چند سال دنبال یادگیری کد نویسی هستم همه آموزش داخل بازار رو گوش کردم ولی هیچی یاد نگرفتم .شما می تونید استاد من بشید و به من یاد بدید چطور کد نویسی کنم….الخصوص داخل اندروید استادیو ….سعید قاسمی ۲۷ ساله 

دیدگاهتان را بنویسید

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