در این مقاله میخواهیم راجع به layoutها در اندروید صحبت کنیم.
فایلهای layout در پوشه res/layout قرار دارند
layout از طریق دستور set content view که در متد oncreate نوشته میشود به Activity وصل میشود.
در دوره رایگان آموزش برنامه نویسی اندروید با کاتلین نحوه استفاده از layout را آموزش می دهیم.
هر layout شامل عناصری مثل TextView Edittext , , Button و یا هر عنصر دیگر است.
هر اکتیویتی Viewها و ViewGroupهایی دارد. View عنصری است که در صفحهنمایش داده میشود که از کلاس View ارثبری میکند.
ViewGroup یک View است که میتواند یک یا چند View را در خودش نمایش بدهد و یک طرح به ما میدهد که میتوانیم View هارا کنار هم قرار بدهیم.
ViewGroupهای اندروید کداماند؟
LinearLayout,R elativelayout,FrameLayout, Constraintlayout, Tablelayout,ScrollView
اول از LinearLayout استفاده میکنیم
در این ViewGroup عنصر بهصورت سطری یا ستونی قرار میگیرند.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<AutoCompleteTextView
android:id="@+id/autoTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/et_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
اگر orientation روی مقدار vertical ست شده باشد عناصر بهصورت عمودی و زیر هم نمایش داده میشوند.
android:orientation="vertical"
و اگر روی مقدار horizontal ست شده باشد عناصر بهصورت افقی و کنار هم نمایش داده میشوند.
android:orientation="horizontal"
Viewها و ViewGroupها پارامترهای مشترکی با همدیگر دارند.
پارامتر Layout_with طول View یا ViewGroup رو مشخص میکند.
این پارامتر دو مقدار wrapcontent و matchparent دارد که wrapcontent یعنی بهاندازه محتوا بستگی دارد و هرچند محتوای داخلی بیشتر باشد عرض این View هم بیشتر میشود و اگر از matchparent استفاده کنیم عرض View اندازه کل صفحه میشود.
پارامتر Layout_height ارتفاع View را مشخص میکند.
Margin top فاصله View از بالا را مشخص میکند
Margin_left فاصله View از چپ را مشخص میکند
Margin_right فاصله View از راست را مشخص میکند
Margin_bottom فاصله View از پایین را مشخص میکند.
اگر از کلمه margin بهتنهایی استفاده کنیم از چهار جهت فاصله را اعمال میکند.
نکته: دقت کنید که margin از بیرون فاصله میدهد به Viewها
یک خاصیت دیگر هم داریم به اسم padding که فاصله از داخل را اعمال میکند و تمام پارامترهای margin را هم دارد.
اگر از کلمه padding بهتنهایی استفاده کنیم از چهار جهت فاصله را اعمال میکند.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<AutoCompleteTextView
android:layout_margin="10dp"
android:id="@+id/autoTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<EditText
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:id="@+id/et_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<EditText
android:paddingRight="10dp"
android:layout_paddingLeft="10dp"
android:layout_paddingBottom="10dp"
android:layout_paddingTop="10dp"
android:id="@+id/et_lastName"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<EditText
android:padding="10dp"
android:id="@+id/et_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
layout_gravity چگونگی قرارگیری Viewهای فرزند را مشخص میکند که برای برخی از ViewGroupها استفاده میشود.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<AutoCompleteTextView
android:layout_gravity="center"
android:layout_margin="10dp"
android:id="@+id/autoTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
واحد اندازهگیری در ui اندروید
Dp : پیکسل مستقل از ضخامت هر 160dp برابر با یک اینچ از سایز فیزیکی صفحهنمایش است.
Sp : پیکسل مستقل از مقیاس شبیه به dp است اما برای مشخصکردن اندازه فونت به کار میرود.
Px : پیکسل مطابق ابعاد واقعی صفحهنمایش است. توصیه میکنم از پیکسل استفاده نکنید چون که ممکن است ui در ابزارهایی که صفحهنمایش متفاوتی دارند بهدرستی ترسیم نشود.
ViewGroup بعدی tablelayout است این ViewGroup ویوها را در قالب سطر و ستون دستهبندی میکند. برای مشخصکردن یک سطر از عنصر tablerow استفاده میشود و هر سطر میتواند شامل یک یا چند View باشد، هر View داخل سلول موجود در این سطر قرار میگیرد و پهنای هر ستون بهوسیله بزرگترین سلول موجود در ستون مشخص میشود
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow>
<TextView
android:textSize="20sp"
android:text="Test"
android:textAlignment="center"
android:layout_width="120dp"
android:layout_height="wrap_content" />
<EditText android:layout_width="wrap_content"
android:hint="test1 02152"
android:layout_height="wrap_content"/>
</TableRow>
<TableRow>
<TextView
android:textSize="20sp"
android:text="Test"
android:textAlignment="center"
android:layout_width="180dp"
android:layout_height="wrap_content" />
<EditText android:layout_width="wrap_content"
android:hint="test1 02152"
android:layout_height="wrap_content"/>
</TableRow>
</TableLayout>
Relativelayout در این ViewGroup میتوانیم موقعیت Viewهای فرزند را بر اساس همدیگر مشخص کنیم.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tv_comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_margin="10dp"
android:padding="5dp"
android:text="Comment"
android:textSize="20sp" />
<EditText
android:id="@+id/et_comment"
android:layout_width="match_parent"
android:layout_height="170dp"
android:layout_below="@+id/tv_comment"
android:layout_centerHorizontal="true"
android:textSize="20sp" />
<Button
android:id="@+id/bt_save"
android:layout_width="125dp"
android:layout_height="wrap_content"
android:layout_below="@+id/et_comment"
android:layout_alignRight="@+id/et_comment"
android:layout_marginTop="5dp"
android:text="save" />
<Button
android:layout_marginTop="5dp"
android:layout_alignLeft="@+id/et_comment"
android:layout_below="@+id/et_comment"
android:text="Cancel"
android:layout_width="124dp"
android:layout_height="wrap_content"/>
</RelativeLayout>
Viewهایی که داخل relativelayout قرار دارند از ویژگیهای layout_align_parent_top
layout_align_parent_left
layout_align_left
layout_align_right
layout_below
layout_center_horizontal
برای تراز کردن خود با دیگر ویوها استفاده میکنند.
و همچنین از ویژگی layout_below برای این است که مشخص کنیم View پایینتر از یک View دیگر قرار بگیرد.
یکی ویژگی دیگر هم داریم به اسم layout_above برای این است که مشخص کنیم View بالاتر از کدام ویو قرار بگیرد.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<AutoCompleteTextView
android:layout_alignParentRight="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_gravity="center"
android:layout_margin="10dp"
android:id="@+id/autoTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:layout_alignLeft="@+id/autoTv"
android:layout_alignRight="@+id/autoTv"
android:layout_below="@+id/autoTv"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:id="@+id/et_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:layout_alignLeft="@+id/autoTv"
android:layout_alignRight="@+id/autoTv"
android:layout_below="@+id/et_name"
android:paddingRight="10dp"
android:layout_paddingLeft="10dp"
android:layout_paddingBottom="10dp"
android:layout_paddingTop="10dp"
android:id="@+id/et_lastName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:layout_alignLeft="@+id/autoTv"
android:layout_alignRight="@+id/autoTv"
android:layout_below="@+id/et_lastName"
android:padding="10dp"
android:id="@+id/et_phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
ViewGroup بعدی frame layout است.
از FrameLayout برای نمایش یک View استفاده میکنیم که بهصورت پیشفرض View در گوشه بالا سمت چپ قرار میگیرد.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/bt_save"
android:layout_width="125dp"
android:layout_height="wrap_content"
android:layout_below="@+id/et_comment"
android:layout_alignRight="@+id/et_comment"
android:layout_marginTop="5dp"
android:text="save" />
</FrameLayout>
اگر دو View را در FrameLayout قرار بدیم روی همدیگر قرار میگیرند.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/bt_save"
android:layout_width="125dp"
android:layout_height="wrap_content"
android:layout_below="@+id/et_comment"
android:layout_alignRight="@+id/et_comment"
android:layout_marginTop="5dp"
android:text="save" />
<Button
android:id="@+id/bt_cancel"
android:layout_width="125dp"
android:layout_height="wrap_content"
android:layout_below="@+id/et_comment"
android:layout_alignRight="@+id/et_comment"
android:layout_marginTop="5dp"
android:text="cancel" />
</FrameLayout>
ViewGroup دیگر scrollview است.
این ViewGroup یک نوع ویژهای از FrameLayout است که این امکان را به کاربر میدهد تا بین Viewهایی که بیشتر از فضای صفحه فیزیکی است بتواند حرکت کند. ScrollView فقط میتواند یک View یا ViewGroup فرزند داشته باشد.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_width="125dp"
android:layout_height="wrap_content"
android:layout_below="@+id/et_comment"
android:layout_alignRight="@+id/et_comment"
android:layout_marginTop="80dp"
android:text="save" />
<Button
android:layout_width="125dp"
android:layout_height="wrap_content"
android:layout_below="@+id/et_comment"
android:layout_alignRight="@+id/et_comment"
android:layout_marginTop="80dp"
android:text="cancel" />
<Button
android:layout_width="125dp"
android:layout_height="wrap_content"
android:layout_below="@+id/et_comment"
android:layout_alignRight="@+id/et_comment"
android:layout_marginTop="80dp"
android:text="cancel" />
<Button
android:layout_width="125dp"
android:layout_height="wrap_content"
android:layout_below="@+id/et_comment"
android:layout_alignRight="@+id/et_comment"
android:layout_marginTop="80dp"
android:text="cancel" />
<Button
android:layout_width="125dp"
android:layout_height="wrap_content"
android:layout_below="@+id/et_comment"
android:layout_alignRight="@+id/et_comment"
android:layout_marginTop="80dp"
android:text="cancel" />
<Button
android:layout_width="125dp"
android:layout_height="wrap_content"
android:layout_below="@+id/et_comment"
android:layout_alignRight="@+id/et_comment"
android:layout_marginTop="90dp"
android:text="cancel" /></LinearLayout>
</ScrollView>
و اما مهمترین ViewGroup که ما قرار است با آن کار کنیم constraint layout است. این ViewGroup جدیدترین و بهروزترین ViewGrup معرفی شده اندروید است.
در آموزشهای سایت باگتو بیشتر از این ViewGroup استفاده میکنیم. دوره رایگان آموزش کامل این ViewGroup در سایت باگتو وجود دارد و میتوانید از این دوره استفاده کنید.
با استفاده از constraintlayout میتوانیم لایههای بزرگ و پیچیدهای را ایجاد کنیم و این اجازه را به ما میدهد که بتوانیم Viewها را خیلی انعطافپذیرتر بسازیم.
این ViewGroup برای کمک به کاهش ViewGroupهای تودرتو و بهبود عملکرد فایلهای Layout ارائه شد. در ConstraintLayout ویوها نسبت به parent یا نسبت به Viewهای دیگر قرار میگیرند عملکرد این ViewGroup شبیه به RelativeLayout است با این تفاوت که خیلی بهینهتر و سبکتر است.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Button
android:id="@+id/bt_ok"
android:layout_margin="30dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_width="120dp"
android:text="Ok"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/et_name"
android:hint="FirstName"
android:layout_marginStart="15dp"
app:layout_constraintStart_toEndOf="@+id/bt_ok"
app:layout_constraintTop_toBottomOf="@+id/bt_ok"
android:layout_width="120dp"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/bt_cancel"
android:layout_marginTop="10dp"
app:layout_constraintTop_toBottomOf="@+id/et_name"
app:layout_constraintStart_toStartOf="@+id/et_name"
app:layout_constraintEnd_toEndOf="@+id/et_name"
android:layout_width="0dp"
android:text="cancel"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tv_bugeto"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:textSize="20sp"
android:text="Bugeto.net"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/bt_save"
android:text="save"
app:layout_constraintEnd_toStartOf="@+id/bt_cancel"
android:layout_marginBottom="30dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="@+id/bt_ok"
android:layout_width="0dp"
android:layout_height="wrap_content"/>
<Button
android:layout_marginEnd="30dp"
app:layout_constraintBottom_toBottomOf="@id/bt_save"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/bt_save"
android:layout_width="130dp"
android:layout_height="70dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
برای افزودن دیدگاه خود، نیاز است ابتدا وارد حساب کاربریتان شوید