در فصل قبل با تعدادی از مهم ترین و پرکاربردترین View های اندروید آشنا شدید. در این فصل چند View دیگر را معرفی می کنیم.

Layouts

در این پالت انواع Layout های اندروید قرار دارند. تا به حال با دو Layout خطی (LinearLayout) و وابسته (RelativeLayout) آشنا شده اید. در ادامه به صورت خیلی مختصر سایر Layout های اندروید را معرفی می کنیم.

GridLayout

از اندروید ۴ (API Level 14) یک Layout جدید به اندروید اضافه شده است که برای ساخت Layout های پیچیده تری که با LinearLayout نمی توان آنها را ساخت مناسب است. این Layout همچنین برای ابزارهای گرافیکی تولید Layout مناسب است. در این Layout فضا به چندین سلول تقسیم می شود و هر View می تواند یک یا چند سلول را اشغال کند. به عکس های زیر دقت کنید:

در این عکس فضا به ۶ سطر و ۵ ستون تقسیم شده است.

این عکس نشان می دهد که با کمی تمرین و ممارست حتا می توان Layout هایی ساخت که ساختن آنها حتا با RelativeLayout هم سخت یا ناممکن است.

در فصل های بعدی درباره GridLayout بیشتر خواهیم گفت. اما اگر بخواهید زودتر با این Layout آشنا شوید، اینجا و اینجا و اینجا را بخوانید.

FrameLayout

این Layout یکی از کاربردی ترین Layout های اندروید است. این Layout بچه های خود را مثل دسته ای از کارت نگه می دارد و آنها را روی هم می اندازد. از Framelayout به ویژه در Fragment ها استفاده می شود. برای مثال در عکس زیر دو Layout نقشه و منوی آن در یک FrameLayout قرار دارند و پنل منو به کمک انیمیشن در صفحه جابجا می شود:

اگر می خواهید بیشتر درباره FrameLayout بدانید، اینجا را ببینید.

include

مواقع بسیاری پیش می آید که یک Layout را باید در چندین صفحه تکرار کنید. در این مواقع کپی کردن Layout طراحی شده در صفحات متعدد اولین راه حل به نظر می رسد که البته اصلاً روش خوبی نیست. فرض کنید Header بین چندین صفحه برنامه یکسان باشد، حالا اگر این Layout را در صفحات مختلف کپی کنید، اگر بخواهید یک تغییر کوچک در چیدمان عناصر یا رنگ یا هر چیزی اعمال کنید، کار سخت می شود. باید این تغییرات را چندین جا اعمال کنید و اگر یکی را از قلم بیاندازید و … راه حل این مشکل include است. برای حل این مشکل چیدمانی که قرار است چند جا تکرار شود را در یک فایل می نویسید و در جاهای مختلف آن را include می کنید.

نحوه تعریف کردن فایل Layout که می خواهید آن را در صفحات مختلف include کنید:

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Header Title" />

</merge>

نحوه include کردن Layout که قبلاً طراحی شده است:

<include layout="@layout/header"/>

Fragment

فرگمنت ها از عناصر اصلی طراحی UI و برنامه نویسی در اندروید هستند. در فصل های بعدی، بارها به سراغشان خواهیم آمد!

TableLayout

برای طراحی UI های شبیه جدول (در وب) از TableLayout استفاده می شود. در آینده یک فصل درباره TableLayout خواهیم نوشت.

---

Composite

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

ListView

برای نمایش یک لیست از اطلاعات از ListView استفاده می کنیم. این لیست می تواند آرایه ای از String باشد یا لیستی از یک شی خاص. برای استفاده از لیست ویو لازم است که کد بنویسید. معمولاً از ListView برای نمایش اطلاعاتی که از پایگاه داده (Database) به دست می آید استفاده می شود. ما هم بعد از این که پایگاه داده را آموزش دادیم، ListView را آموزش خواهیم داد:

ExpandableListView

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

برای استفاده از ExpandableListView نیاز به کدنویسی است و در آینده یک فصل را به این View اختصاص خواهیم داد.

GridView

شبیه ListView است با این تفاوت که عناصر را در یک شبکه Grid مانند نمایش می دهد:

برای استفاده از GridView نیاز به کدنویسی است و در آینده یک فصل را به این View اختصاص خواهیم داد.

SearchView

نوع خاصی از EditText است که برای جستجو به کار می رود. همانطور که در عکس زیر می بینید، این View ابتدا بسته (collapsed) است و با کلیک کردن بر روی آن باز (expand) می شود:

از این View غالباً در ActionBar استفاده می شود:

ScrollView و HorizontalScrollView

شما هیچوقت نمی توانید مطمئن باشید که صفحه برنامه به اندازه کافی جا برای نمایش محتوای شما دارد. اندازه ها و ویژگی های صفحه نمایش ها متفاوت است و هیچ تضمینی نیست محتوای شما در یک صفحه به طور کامل نمایش داده شود. برای پیشگیری از چنین مشکلاتی، همواره استفاده از ScrollView توصیه می شود. در صورت استفاده از ScrollView هر گاه جا برای نمایش محتوا کم باشد، کاربر می تواند اسکرول کند تا بتواند همه محتوا را ببیند.

معمولاً کاربران در محور عمودی به اسکرول نیاز دارند، اما در مواقع خاصی اسکرول کردن در محور افقی هم ضروری است. برای این کار دو View خاص ScrollView و HorizontalScrollView وجود دارند.

اگر یک ScrollView به صفحه اضافه کنید، کد زیر به صفحه افزوده می شود:

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >
</ScrollView>

و اگر یک HorizontalScrollView به صفحه اضافه کنید، کد زیر به صفحه افزوده می شود:

<HorizontalScrollView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
</HorizontalScrollView>

توضیح ضروری: هر دوی این View ها فقط می توانند یک View به عنوان بچه داشته باشند. برای مثال کد زیر خطا دارد و در رمان اجرا برنامه را از کار می اندازد:

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView 1" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView 2" />
</ScrollView>

بنابراین همیشه داخل ScrollView یا HorizontalScrollView یک LinearLayout یا RelativeLayout قرار دهید و سپس سایر View ها را به این Layout اضافه کنید. کد زیر را ببینید:

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView 1" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView 2" />
    </LinearLayout>
</ScrollView>

این دو View ویژگیهای زیادی دارند که در اینجا به مهم تزین آنها اشاره می کنیم:

•  android:fillViewport: این ویژگی به اسکرول ویو اجازه می دهد محتوای خود را بکشد تا با اندازه جایی که دارد بزرگ شود.
• android:scrollbars: اگر مقدار این ویژگی را none تعریف کنیم، هیچگاه اسکرول بار نمایش داده نمی شود.
• android:scrollbarStyle: مکان اسکرول بار را تعیین می کند. مقادیر این ویژگی می تواند اینها باشد: insideOverlay و  insideInset و outsideOverlay و outsideInset
• android:fadeScrollbars: اسکرول بار بعد از مدتی ناپدید می شود. اگر مقدار این ویژگی را false بگذارید، اسکرول بار همیشه نمایش داده خواهد شد.
• android:scrollbarFadeDuration: مدت زمان ناپدید شدن اسکرول بار به هزارم ثانیه را می توانید با این ویژگی تعیین کنید.
• android:scrollbarSize: اندازه اسکرول بار عمودی یا افقی را تعیین می کند.
• android:scrollbarThumbHorizontal
• android:scrollbarThumbVertical
• android:scrollbarTrackHorizontal
• android:scrollbarTrackVertical

۴ ویژگی فوق عناصر گرافیکی مورد استفاده در ScrollView را تعیین می کند. ویژگی های فوق را به کمک عکس زیر بهتر درک خواهید کرد:

WebView

وب ویو یکی از مهم ترین و کاربردی ترین View های اندروید است. این View نسخه ای کوچک شده و بهینه شده از یک مرورگر اینترنتی است. می توانید در یک WebView هر نوع محتوای HTML را نمایش دهید یا حتا آدرس یک صفحه اینترنتی را به آن بدهید تا محتوای آن صفحه را نمایش دهد.

در فصل های بعدی به طور مفصل به کاربردهای WebView خواهیم پرداخت.

---

Images and Media

در این پالت چند View کاربردی مرتبط با عکس ها را می بینید. این ویوها بسیار کاربردی هستند.

ImageView

برای نمایش عکس در UI از این View استفاده می شود. بعد از افزودن یک ImageView به صفحه، کد زیر به صفحه افزوده می شود:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher" />

ویژگی های مهم ImageView اینها است:

• android:src: ارجاع به عکسی که قرار است نمایش داده شود.
• android:scaleType: این ویژگی مشخص می کند که عکسی که قرار است در این ImageView نمایش داده شود، در صورت نیاز به تغییر اندازه یا جابجایی، چگونه باید رفتار کند. از مقادیر مجاز این ویژگی به برخی اشاره می کنیم:
  • center: عکس را در مرکز ImageView قرار می دهد ولی اندازه آن را تغییر نمی دهد (Scale نمی کند).
  • centerCrop: اگر عکس بزرگتر از ابعاد ImageView باشد، عکس را در مرکز قرار می دهد و قسمتهای اضافه آن را می بُرد.
  • centerInside: اگر ابعاد عکس بزرگتر از ImageView باشد، با حفظ نسبت عرض و ارتفاع، عکس را تغییر اندازه می دهد تا به صورت کامل در ImageView قرار بگیرد. اگر اندازه عرض و ارتفاع عکس کمتر از ImageView باشد، تغییر اندازه رخ نمی دهد. در نهایت عکس در وسط ImageView قرار می گیرد.
  • fitCenter: شبیه centerInside است با این تفاوت که اگر اندازه عکس کمتر از ImageView باشد، با حفظ نسبت عرض و ارتفاع، عکس را بزرگتر می کند تا هم اندازه ImageView شود.
  • fitStart: شبیه fitCenter عمل می کند فقط در نهایت عکس را در بالا سمت چپ ImageView قرار می دهد.
  • fitEnd: شبیه fitCenter عمل می کند فقط در نهایت عکس را در پایین سمت راست ImageView قرار می دهد.
  • fitXY: بدون حفظ نسبت عرض و ارتفاع عکس را تغییر اندازه می دهد تا به صورت کامل داخل ImageView قرار بگیرد.

ImageButton

شبیه ImageView است با این تفاوت که شبیه یک دکمه (Button) می توان آن را کلیک کرد.

VideoView

این View برای نمایش فایل های ویدئویی که در دستگاه ذخیره شده اند یا استریم کردن ویدئوهایی که در وب هستند مناسب است. در فصلهای آتی، زمانی که چندرسانه ای در اندروید را می گویم، مفصل درباره این View خواهم نوشت.

---

ادامه دارد…