آموزش اندروید، فصل ۱۴: آشنایی مقدماتی با View های اندروید (بخش دوم)

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

Layouts

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

GridLayout

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

android-ch14-01-grid-view-1در این عکس فضا به ۶ سطر و ۵ ستون تقسیم شده است.

android-ch14-01-grid-view-2

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

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

FrameLayout

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

android-ch14-03-frame-layout-1

اگر می خواهید بیشتر درباره 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 را آموزش خواهیم داد:

android-ch14-04-list-view

ExpandableListView

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

android-ch14-06-expandable-list-view

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

GridView

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

android-ch14-05-grid-view

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

SearchView

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

android-ch14-07-search-view

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

android-ch14-08-search-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-ch14-09-scroll-view-style
  • android:fadeScrollbars: اسکرول بار بعد از مدتی ناپدید می شود. اگر مقدار این ویژگی را false بگذارید، اسکرول بار همیشه نمایش داده خواهد شد.
  • android:scrollbarFadeDuration: مدت زمان ناپدید شدن اسکرول بار به هزارم ثانیه را می توانید با این ویژگی تعیین کنید.
  • android:scrollbarSize: اندازه اسکرول بار عمودی یا افقی را تعیین می کند.
  • android:scrollbarThumbHorizontal
  • android:scrollbarThumbVertical
  • android:scrollbarTrackHorizontal
  • android:scrollbarTrackVertical

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

android-ch14-10-scroll-view-track-thumb

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 خواهم نوشت.


ادامه دارد…

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmail




6 فکر می‌کنند “آموزش اندروید، فصل ۱۴: آشنایی مقدماتی با View های اندروید (بخش دوم)

  1. مجید

    واقعا ممنونم استاد .لطفا به اموزش هاتون ادامه بدید فوق العادن اینا.خیلی مبحث مهمی هستش این قسمت اگر بازم ترفند هایی دارید از این قسمت بزارید استفاده کنیم تشکر

    پاسخ
  2. ارسلان

    استاد ببخشین من میخام یه صفحه شامل توضیحات و فرمولهای ریاضی به زبان فارسی نشون بدم. مثلا اموزش حل یه معادله. بهترین حالتی که بشه فرمولهای ریاضی و متن فارسی رو نوشت که خود فرمولها هم اعداشون فارسی باشه استفاده از چی هستش؟ لطفا کمک کنین مرسی

    پاسخ
  3. mortaza7khat

    سلام رفیق واقعا محشری
    من آموزش های لیندا رو به صورت فارسی دارم اما شما واقعا تکین!
    خیلی بهتر از لیندا هست آموزشاتون
    به امید پیشرفت بیشتر جامعه برنامه نویسی آندروید ایران و سرافزای برای شما و بقیه دوستان

    پاسخ
  4. علیرضا اسلانی

    سلام و خسته نباشید
    در ایتدا خیلی ممنون بخاطر آموزش ها و بیان روان و ساده و کاملتون
    سوالی داشتم که فک میکنم مشکل ۹۵ درصد دوستان برنامه نویسه
    “اینکه چطور میشه اسکرول بار افقی رو با حالت نمایش از راست به چپ داشته باشیم و استفاده کنیم”
    همون RTL خودمون در برنامه نویسی ها

    خیلی جستجو کردم، ولی موفق نشدم پیدا کنم
    خیلیام نوشته بودن که نمیشه و سخته و …..

    سوال من حالا اینه که چطور میشه در اندروید به اسکرول دستور داد،یعنی بهش دستور بدیم که بره به انتهای محدودش
    که اگر چنین کاری رو بتونیم انجامش بدیم دیگه مشکل راست به چپ نشدن اسکرول ویو افقی رو نداریم

    ممنون
    لطفا اگر چنین کاری امکان پذیره!!! ممنون میشم آموزشش بدید.

    بازم ممنون بخاطر آموزشهاتون
    منتظر جوابتون هستم.

    پاسخ

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *