آموزش Layoutها در اندروید

در این مقاله می‌خواهیم راجع به 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>