آموزش اندروید فصل سوم قسمت سوم – رابط کاربری

در قسمت بیست و یکم آموزش اندروید در ادامه آموزش بیستم گروه های ابزاری (LinearLayout , AbsoluteLayout , TableLayout) را به طور مفصل شرح داده ایم.

آموزش اندروید فصل سوم قسمت سوم – رابط کاربری

توجه : برای مشاهده تصاویر در سایز اصلی بر روی آنها کلیک کنید.

چگالی و رزولوشن

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

• Low density(Idpi)—۱۲۰ dpi
• Medium density(mdpi)—۱۶۰dpi
• High density(hdpi)—۲۴۰ dpi
• Extra High density(xhdpi)—۳۲۰dpi

هر دستگاه مجازی در که ایجاد میکنیم بسته به نوع دستگاه در یکی از دسته بندی های زیر قرار میگیرد که میتوان با انتخاب ایکن Android Virtual Device و سپس در پنجره باز شده با انتخاب دکمه Details  میتوان مشخصات دستگاه را کاملا مشاهده کرد.

برای مثال در تصویر فوق رزولوشن(Skin) دستگاه انتخاب شده برابر ۸۰۰ در ۱۲۸۰ و چگالی(hw.icd.density) نیز برابر با ۲۱۳ میباشد. میتوانید با جایگزین کردن این مقادیر تفاوت هارا مشاهده کنید مانند زیر

    <Button

        android:id="@+id/button1"

        android:layout_width="160dp"

        android:layout_height="wrap_content"

        android:text="Button"

        android:onClick="onClick" />


    <Button

        android:id="@+id/button2"

        style="?android:attr/buttonStyleSmall"

        android:layout_width="150px"

        android:layout_height="wrap_content"

        android:text="Button" />

که نتیجه زیر مطابق تصویر زیر خواهد بود که همانگونه که مشاهده میکنید مشخص شده که دکمه اول ۱۶۰dp و دکمه دوم ۱۵۰px تعیین شده اند.

همچنین میتوان جهت صفحه را مشخص کرد یعنی به حالت عمودی با افقی تغییر داد با استفاده از android:oriention مطابق زیر

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

همانگونه که در کدهای فوق مشاهده میکنید orientation را برابر با vertical (عمودی) قرار داده ایم که باعث میوشد تمامی عناصر به صورت عمودی قرار گیرند و حتی اگر بخواهیم به صورت گرافیکی یکی از عناصر را جابجا کنیم این اجازه را به ما ندهد.

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

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal" >

و خواهیم دید نتیجه در حالت گرافیکی layout به شکل زیر خواهد شد

حال میتوان برای راحتی کار چیدمان هارا ترکیب کنیم که از لحاظ تیوری تا هذ تعداد چیدمان را میتوان ترکیب کرد اما از لحاظ عملی ممکن است پیچیدگی و مشکلاتی در آینده استفاده از برنامه پیش بیاید.

طبق کد زیر میتوان ترکیب را انجام داد

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal"

    android:background="#F00FF00" >

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="222dp"

        android:background="#0FF0F0"

        android:orientation="vertical" >

    </LinearLayout>

</LinearLayout>

همانطور که مشاهده میکنید دو گروه ابزاری را به صورت تو درتو و با چینش مختلف ایجاد کرده ایم و نتیجه به صورت زیر خواهد بود

AbsoluteLayout

این گروه ابزاری به شما این قابلیت را میدهد تا محل قطعی ابزار را به صورت صریح و مطلق تعیین کند یعنی میتوان از خصوصیات _x و _y که محل دقیق برای ابزار ها مشخص شده که البته توصیه میشود از این چیدمان در کارهای خود استفاده نکنید چون این روش در دستگاه های قدیمی اندروید(نسخه ۱٫۵) کاربرد داشت اما در دستگاه های جدید و با رزولوشن بالا ممکن است با مشکل مواجه شود.

TableLayout

در این چیدمان همانگونه که از نامش مشخص است مانند جدول دارای سطر و ستون است که مشخصه <TableRow> نیز برای ایجاد سطر استفاده میشود که میتواند شامل چندین ستون یا سلول باشد

به مثال زیر دقت فرمایید

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

        <TableRow >

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Username" />

    <EditText

        android:id="@+id/txtusername"

        android:layout_width="200dp"

        android:ems="10" >

    </EditText>

    </TableRow>

    <TableRow >

       <TextView

        android:id="@+id/textView2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Password" />

    <EditText

        android:id="@+id/txtpass"

        android:layout_width="200dp"

        android:ems="10" >

    </EditText>

    </TableRow>

    <TableRow >

    <Button

        android:id="@+id/button1"

        android:layout_width="125px"

        android:layout_height="wrap_content"

        android:text="Log In" />

</TableRow>

</TableLayout>

نتیجه عبارات فوق به شکل زیر خواهد بود

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

آموزش اندروید فصل سوم قسمت دوم

آموزش اندروید فصل سوم قسمت چهارم