آموزش کامل relativelayout در اندروید استودیو

با نام و یاد خدا
همانطور که قبلا گفتیم layout ها واسط بین کاربر و activity ها می باشند و از این حیث نقش مهمی را ایفا می کنند. Layout ها انواع متعددی دارند که می توانیم برحسب نیاز از آن ها استفاده کنیم. امروز قصد داریم تگ Relativelayout را در قالب یک پروژه به شما آموزش دهیم. سپس نحوه انتقال از یک اکتیویتی به اکتیویتی دیگر را توضیح می دهیم.

RelativLayout چیست؟

نوعی چیدمان عناصر است که در آن می توان هر شی را در مکان های دلخواه قرار داد ما در ادامه با یک پروژه این مفهوم را بیشتر توضیح می دهیم.

توصیف پروژه

فرض کنید می خواهیم یک اپلیکیشن بنویسیم که ابتدا یک splash که شامل عکس می باشد نمایش داده شود. سپس یک فهرست داشته باشیم که شامل متن و تصویر باشد و با کلیک روی هر تیتر یا تصویر، صفحه (اکتیویتی) دیگری نمایش داده شود.

برای درک بیشتر این پروژه، ابتدا بلوک بندی این صفحه(یا اکتیویتی) را با کمک relativelayout ها در شکل زیر می بینیم:

ما همچین چیزی را می خواهیم با کمک Relativelayout ایجاد کنیم. همانطور که می بینید یک Relativelayout کلی داریم که داخل آن می خواهیم فهرستی شامل 4 بخش تعریف کنیم.(با رنگ مشکی مشخص شده است) برای تعریف هر بخش یک Relativelayout دیگر تعریف می کنیم.(که در شکل با رنگ قرمز نشان دادیم)
سپس در داخل هر Relativelayout مربوط به بخش ها، دوتا Relativelayout ؛ یکی برای تصویر و یکی برای متنِ عنوان تعریف می کنیم.(با رنگ آبی و سبز مشخص شده اند)

کدنویسی پروژه

ابتدا یک پروژه در اندروید استودیو ایجاد می کنیم(آموزش جلسه 6) سپس یک اکتیویتی دیگری ایجاد می کنیم تا نقش splash را برای ما بازی کند (آموزش جلسه 8)
حالا می خواهیم layout مربوط به اولین اکتیویتی که بعد از اسپلش نمایش داده می شود را طراحی کنیم.(در اینجا ما نام LearningComputer را برای این اکتیویتی انتخاب کردیم)

در ابتدا از پوشه layout فایل xml مربوط به اولین اکتیویتی بعد اسپلش را باز می کنیم.(مثلا برای ما activity_learning_computer.xml می باشد) به جز خط زیر تمام تگ هایی که به صورت پیش فرض وجود دارند را پاک می کنیم.

<?xml version=”1.0″ encoding=”utf-8″?>

کدهایی که کلا برای طراحی این layout نوشته می شود به صورت زیر است. در ادامه یک به یک کدها را توضیح می دهیم.(رنگ کدها را با تصویر بالا مطابقت دهید-اینجا کد فقط برای دو بخش نوشتیم)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  xmlns:android="http://schemas.android.com/apk/res/android" >
		<!-- Relativelayout اصلی -->
     <RelativeLayout
	android:layout_width="match_parent"</strong>
	android:layout_height="match_parent"</strong>
	android:background="@color/black"</strong>
	 android:id="@+id/fehrest">
		 <!-- Relativelayout مربوط به بخش اول -->
        <RelativeLayout
            android:layout_width="match_parent"
           android:layout_height="80dp"
           android:background="@color/colorPrimary"
            android:layout_marginTop="5dp"
           android:id="@+id/bakhsh_Soft">
	                    <!--RelativeLayout مربوط به تصویر بخش اول -->

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

xmlns:android="http://schemas.android.com/apk/res/android" >

<RelativeLayout

android:layout_width="match_parent"</strong>

android:layout_height="match_parent"</strong>

android:background="@color/black"</strong>

android:id="@+id/fehrest">

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="80dp"

android:background="@color/colorPrimary"

android:layout_marginTop="5dp"

android:id="@+id/bakhsh_Soft">

RelativeLayout
 android:layout_width="100dp" 
android:layout_height="match_parent"
 android:id="@+id/pic_bakhsh_Soft" >
 <Button 
android:layout_width="100dp" 
android:layout_height="match_parent" 
android:gravity="center" 
android:layout_centerInParent="true" 
android:id="@+id/btnbakhshsoft"
 android:background="@drawable/picsofta" />
 </RelativeLayout>
 <!-- Relativelayout مربوط به عنوان بخش اول -->
 <RelativeLayout 
android:layout_width="fill_parent"
 android:layout_height="match_parent"
 android:id="@+id/txt_bakhsh_Soft"
 android:layout_toRightOf="@id/pic_bakhsh_Soft"
 android:background="@color/white">
 <TextView android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:text="@string/txtsoft" 
android:textSize="30dp" 
android:gravity="center" 
android:layout_centerInParent="true" 
android:textColor="@color/black" 
android:id="@+id/txtbakhsh_Soft" /> 
</RelativeLayout>
 </RelativeLayout>
 <!--RelativeLayout مربوط به بخش دوم -->
 <RelativeLayout 
android:layout_width="match_parent" 
android:layout_height="80dp" 
android:background="@color/colorPrimary"
 android:layout_marginTop="5dp" 
android:id="@+id/bakhsh_hard"
 android:layout_below="@+id/bakhsh_Soft">
 <!--RelativeLayout مربوط به تصویر بخش دوم -->
 <RelativeLayout 
android:layout_width="100dp" 
android:layout_height="match_parent"
 android:id="@+id/pic_bakhsh_hard" > 
<Button 
android:layout_width="100dp" 
android:layout_height="match_parent" 
android:gravity="center" 
android:layout_centerInParent="true"
 android:id="@+id/btnbakhshhard"
 android:background="@drawable/pichard" /> 
</RelativeLayout>
 <!-- Relativelayout مربوط به عنوان بخش دوم -->
 <RelativeLayout 
android:layout_width="fill_parent" 
android:layout_height="match_parent" 
android:id="@+id/txt_bakhsh_hard" 
android:layout_toRightOf="@id/pic_bakhsh_hard" 
android:background="@color/white"> 
<TextView 
android:layout_width="wrap_content" 
android:layout_height="match_parent" 
android:text="@string/txthard" 
android:textSize="30dp" 
android:gravity="center" 
android:layout_centerInParent="true" 
android:textColor="@color/black"
 android:id="@+id/txtbakhsh_hard" />
 </RelativeLayout> 
</RelativeLayout> 
</RelativeLayout> 
</RelativeLayout>

RelativeLayout

android:layout_width="100dp"

android:layout_height="match_parent"

android:id="@+id/pic_bakhsh_Soft" >

<Button

android:layout_width="100dp"

android:layout_height="match_parent"

android:gravity="center"

android:layout_centerInParent="true"

android:id="@+id/btnbakhshsoft"

android:background="@drawable/picsofta" />

</RelativeLayout>

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="match_parent"

android:id="@+id/txt_bakhsh_Soft"

android:layout_toRightOf="@id/pic_bakhsh_Soft"

android:background="@color/white">

<TextView android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="@string/txtsoft"

android:textSize="30dp"

android:gravity="center"

android:layout_centerInParent="true"

android:textColor="@color/black"

android:id="@+id/txtbakhsh_Soft" />

</RelativeLayout>

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="80dp"

android:background="@color/colorPrimary"

android:layout_marginTop="5dp"

android:id="@+id/bakhsh_hard"

android:layout_below="@+id/bakhsh_Soft">

<RelativeLayout

android:layout_width="100dp"

android:layout_height="match_parent"

android:id="@+id/pic_bakhsh_hard" >

<Button

android:layout_width="100dp"

android:layout_height="match_parent"

android:gravity="center"

android:layout_centerInParent="true"

android:id="@+id/btnbakhshhard"

android:background="@drawable/pichard" />

</RelativeLayout>

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="match_parent"

android:id="@+id/txt_bakhsh_hard"

android:layout_toRightOf="@id/pic_bakhsh_hard"

android:background="@color/white">

<TextView

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:text="@string/txthard"

android:textSize="30dp"

android:gravity="center"

android:layout_centerInParent="true"

android:textColor="@color/black"

android:id="@+id/txtbakhsh_hard" />

</RelativeLayout>

همانطور که می دانید ساختار کلی تگ های xml به شکل زیر است:

تگ relativelayout با رنگ بنفش

اولین relativelayout که با رنگ بنفش مشخص کردیم .

خصوصیات:

دو خصوصیت layout_width و layout_height برای مشخص کردن عرض و ارتفاع تگ می باشد که می توانند یکی از سه مقادیر fill_parent / match_parent / wrap_content داشته باشند.

fill parent یا match parent یعنی به اندازه کل والد خودش رشد کند و تفاوتی باهم ندارد.
wrap_content یعنی به اندازه محتوا رشد کند.

و خصوصیت آخر خود به خود با نوشتن دو خصوصیت اول؛ توسط اندروید استودیو اضافه می شود ( همیشه اولین تگ در این صفحه این خصوصیت را دارد.)

xmlns:android=”http://schemas.android.com/apk/res/android”

آبجکت ها:

تمام relativeLayout هایی که در ادامه مینویسیم.

تگ relativelayout با رنگ مشکی

این همان relativelayout اصلی است که در اولین تصویر دیدیم و تمام relativelayout ها در آن قرار می گیرند.

خصوصیات:

دو خصوصیت layout_width و layout_height
خصوصیت background : برای اضافه کردن رنگ یا تصویر به پس زمینه استفاده می شود. در اینجا ما رنگ مشکی را از پوشه color صدا زدیم.(رنگ مشکی را در res زیرشاخه color تعریف کردیم. طبق آموزش جلسه ششم)
خصوصیت id: باید برای هر تگی یک id تعریف کنیم تا بعدا در صورت نیاز آن را صدا بزنیم.id ها باید یکتا باشند.

آبجکت ها:

۲ تا relativelayout مربوط به هر بخش

تگ relativelayout با رنگ قرمز

این relativelayout است که برای مشحص کردن بلوک هر بخش تعریف کردیم.(در اینجا بخش اول)

خصوصیات:

layout_marginTop: برای مشخص کردن فاصله قرارگیری شی از بالا
باقی خصوصیات مشابه قبل

آبجکت ها:

یک RelativLayout برای تصویر (با رنگ آبی مشخص شده است)
یک RelativLayout برای متن (با رنگ سبز مشخص شده است)

تگ relativelayout با رنگ آبی

این relativelayout است که برای مشحص کردن بلوک تصویر در هر بخش تعریف کردیم.

خصوصیات:

خصوصیات مشابه قبل

آبجکت ها:

تگ Button :

خصوصیت background:مقدار آن را یک تصویر قرار می دهیم.(در آموزش جلسه قبل گفتیم که برای اضافه کردن تصویر باید تصویر را کپی کرده و در پوشه drawable قرار دهید.سپس بر حسب نیاز به صورت نام تصویر/drawable@‌ آن را صدا بزنید )
خصوصیت gravity: برای مشخص کردن مکان قرار گیری آبجکت -مقدار آن را center‌ قرار دادیم تا وسط بایستد.
خصوصیت layout_centerInParent : برای اینکه آبجکت در وسط والد خود قرار بگیرد یعنی (Relativelayout خودش)

(نکته:ما از باتن استفاده کردیم شما می توانید از تگ های دیگر استفاده کنید و پس زمینه آن را تصویر بگذارید.)

تگ relativelayout با رنگ سبز

این relativelayout است که برای مشحص کردن بلوک عنوان در هر بخش تعریف کردیم.

خصوصیات:

خصوصیت layout_toRightOf : مقدارش را برابر با آی دی RelativeLayout تصویر گذاشتیم. با این کار این RelativeLayout از سمت راست RelativeLayout تصویر شروع شود. اگر این خصوصیت را اضافه نکنیم این relativeLayout روی relativeLayout قبلی می افتد.
باقی خصوصیات مشابه قبل

آبجکت ها:

تگ TextView :

خصوصیت Text: متن دلخواه خود را اضافه می کنیم. (توجه: بهتر است رشته ها در پوشه values زیرشاخه strings.xml اضافه کنیم-آموزش جلسه ششم)
خصوصیت textSize: برای مشخص کردن سایز متن
خصوصیت textColor : برای مشخص کردن رنگ متن (توجه: بهتر است رنگ ها در پوشه values زیر شاخه colors.xml اضافه شوند)
باقی خصوصیات مشابه قبل

حالا بخش های بعدی مطابق همین بخش اول ایجاد می کنیم .(در کد بالا دو بخش نوشتیم) فقط یک خصوصیت اضافه تر برای هر RelativeLayout قرمز رنگ بعدی اضافه می کنیم ؛ به نام layout_below و مقدار آن را برابر با آی دی relativeLayout بخش بالایی قرار می دهیم. این یعنی بلوک بخش بعدی زیر بخش قبلی قرار گیرد و روی RelativeLayout قبلی نمی افتد.

اسکرول

اگر تعداد بخش های خیلی بود و نیاز به اسکرول داشتیم باید از تگ <ScrollView> استفاده کنیم و چون این تگ فقط یک ورودی می گیرد؛ تمام RelativLayout ها را به جز تگ RelativLayout بنفش رنگ داخل یک RelativeLayout قرار می دهیم و آن RelativeLayout‌ را داخل تگ <ScrollView> قرار می دهیم.مثلا شکل زیر :

String هایی که در اپلیکیشن استفاده کردیم در پوشه values زیرشاخه strings.xml تعریف کردیم:

رنگ هایی که در اپلیکیشن استفاده کردیم در پوشه values زیرشاخه colors.xml تعریف کردیم:

انتقال از یک اکتیویتی به اکتیویتی دیگر

حالا یک اکتیویتی خام دیگر ایجاد می کنیم (مثلا با نام TitelSoftware) تا با کلیک روی بخش اول , آن اکتیویتی نمایش داده شود.

برای این باید در پوشه java‌ زیر شاخه LearningComputer.java کد بنویسیم.

ابتدا یک متغیر از نوع RelativeLayout تعریف می کنید با سطح دسترسی public و با نام دلخواه – مثلا rel_Soft.

نکته:چون میخواهیم با کلیک روی RelativeLayout‌ بخش اول(با رنگ قرمز مشحص کردیم) انتقال به اکتیویتی دیگر صورت بگیرد بنابراین متغیر از نوع RelativeLayout تعریف شد.

نکته: در این صورت کاربر چه روی عنوان و چه روی تصویر کلیک شود انتقال صورت می گیرد.

public RelativeLayout rel_Soft;

حالا باید این متغیر را با تگ RelativeLayout موجود در پوشه layout‌ ها پیوند دهیم تا هر تغییری که روی این متغیر انجام دادیم روی آن تگ اعمال شود.(در واقع با این کار ما ارتباط بین layout و activity را ایجاد می کنیم).

rel_Soft=findViewById(R.id.bakhsh_Soft);

از تابع findViewById برای جستجو براساس id استفاده می کنیم.
R.id.bakhsh_Soft : این یعنی در منابع(R) دنبال id با نام bakhsh_Soft‌ بگرد و آن را برابر با متغیر rel_Soft‌قرار بده. (این آی دی RelativeLayout‌بخش اول است)

حالا تابع setOnClickListener استفاده شد تا بگوییم هر موقع متغیر rel_Soft (که با تگ RelativeLayout با آی دی bakhsh_Soft پیوند دارد) کلیک شد به اکتیویتی با نام TitelSoftware برو.
داخل تابع OnClick از Intent استفاده کردیم( که در جلسه هشتم توضیح دادیم) تا وقتی روی RelativeLayout اول کلیک شد از اکتیویتی فعلی(LearningComputer) به اکتیویتی(TitelSoftware) برویم.

rel_Soft.setOnClickListener(new View.OnClickListener()
 { 
@Override 
public void onClick(View v) 
{
 startActivity(new Intent(LearningComputer.this,TitelSoftware.class)); 
}
 });

rel_Soft.setOnClickListener(new View.OnClickListener()

{

@Override

public void onClick(View v)

{

startActivity(new Intent(LearningComputer.this,TitelSoftware.class));

}

});

اجرای برنامه

حالا برنامه را اجرا می کنیم(با کمک Genymotion)

ابتدا صفحه اکتیویتی splash نمایش داده می شود:

سپس بعد از ۳ ثانیه وارد اکتیویتی LearningComputer می شود.

حالا با کلیک روی آموزش نرم افزار یا تصویر آن (RelativeLayout بخش اول) به اکتیویتی بعدی یعنی TitelSoftware منتقل می شویم.(ما بک گراند این اکتیویتی را مشکی کردیم)

امیدواریم از این آموزش لذت و استفاده کامل برده باشید. لطفا نظرات و سوالات خود را در قسمت دیدگاه ها وارد کنید.

مدرس: مهندس مهدی نیکخواه

به این مقاله چند تا ستاره میدی؟

[تعداد رای: 4 امتیاز: 4]

۶ دیدگاه

مجید شهریور ۷, ۱۳۹۸ در ۷:۰۹ ب٫ظ - پاسخ

سلام وقتتون بخیر
من واقعا کد های بالارو نمیفهمم. همونطور که بالا گفته بودید من تگ های پیش فرض رو بجز اون خط پاک کردم، اما کدهای داخل کادر رو متوجه نمیشم حتی کپی پیست هم میکنم خود اندروید استودیو کلشو خطا میگیره
احمدی فروردین ۹, ۱۳۹۹ در ۹:۰۹ ب٫ظ - پاسخ

اصلاح شده کد های بالا
- آقایی فروردین ۹, ۱۳۹۹ در ۱۰:۰۵ ب٫ظ - پاسخ
  
  سلام و عرض ادب
  کدی دریافت نشد. مجدد آموزش را بررسی نمایید اگر مشکلی مشاهده شد از طریق آدرس ایمیل info@dazhyarco.net ما را در مطلع فرمایید.
  با تشکر از همراهی شما
احمدی فروردین ۹, ۱۳۹۹ در ۹:۰۹ ب٫ظ - پاسخ
احمد بهمن ۶, ۱۴۰۰ در ۱۰:۴۵ ب٫ظ - پاسخ

سلام و عرض خسته نباشید .
کد هایی که گذاشتید بخش اول و دوم باید خودمون بنویسیم یا کپی پیس هم میشه ؟ کلمات فارسی هم که داخل کد ها هست را باید حذف کنیم یا باید باشن . البته من طبق آموزش بجز خط اول همه را پاک کردم و کدهای شما کپی کردم ولی اکثر نوشته با اخطار قرمز نشان داده میشن .
ahnad46 بهمن ۱۴, ۱۴۰۰ در ۶:۱۲ ب٫ظ - پاسخ

سلام خسته نباشید
اگر امکان داره قسمت انتقال از یک اکتیویتی به اکتیویتی دیگر را با عکس از زمینه اندرید استودیو توی سایت قرار بدید آموزش جلسات قبل همراه با عکس از صفحه اندرید استودیو بود خیلی راحت و قابل درک بود اما جلسه آموزش کامل تگ مخصوصا قسمت آخر مفهوم نیست چون با عکس نیست نمی دانیم کدها را کجا بنویسیم . نمی دانیم کد آخر را در TitelSoftware قرار بدیم یا LearningComputer.java ؟

آموزش کامل relativelayout در اندروید استودیو

RelativLayout چیست؟

توصیف پروژه

کدنویسی پروژه

تگ relativelayout با رنگ بنفش

تگ relativelayout با رنگ مشکی

تگ relativelayout با رنگ قرمز

تگ relativelayout با رنگ آبی

تگ relativelayout با رنگ سبز

اسکرول

String هایی که در اپلیکیشن استفاده کردیم در پوشه values زیرشاخه strings.xml تعریف کردیم:

رنگ هایی که در اپلیکیشن استفاده کردیم در پوشه values زیرشاخه colors.xml تعریف کردیم:

انتقال از یک اکتیویتی به اکتیویتی دیگر

اجرای برنامه

۶ دیدگاه

دیدگاه خود را بنویسید لغو پاسخ

داژیار پردازش ایساتیس

ارتباط با ما

اطمینان به اعتبار ما

آموزش کامل relativelayout در اندروید استودیو

RelativLayout چیست؟

توصیف پروژه

کدنویسی پروژه

تگ relativelayout با رنگ بنفش

تگ relativelayout با رنگ مشکی

تگ relativelayout با رنگ قرمز

تگ relativelayout با رنگ آبی

تگ relativelayout با رنگ سبز

اسکرول

String هایی که در اپلیکیشن استفاده کردیم در پوشه values زیرشاخه strings.xml تعریف کردیم:

رنگ هایی که در اپلیکیشن استفاده کردیم در پوشه values زیرشاخه colors.xml تعریف کردیم:

انتقال از یک اکتیویتی به اکتیویتی دیگر

اجرای برنامه

این مطلب رو با دوستانتون به اشتراک بگذارید

مطالب مرتبط

۶ دیدگاه

دیدگاه خود را بنویسید لغو پاسخ

داژیار پردازش ایساتیس

ارتباط با ما

اطمینان به اعتبار ما