android-graphics-cover

آموزش اندروید، فصل ۱۷: گرافیک در اندروید (بخش ۲)

همانطور که در فصل قبلی گفتیم، Drawable یعنی هر چیزی که بتوان آن را «کشید». ساده ترین نمونه Drawable عکس ها بودند که در فصل قبل آنها را آموزش دادیم. در این فصل می خواهم یکی دیگر از Drawable های مفید و پر کاربرد را معرفی کنم: Shape.

اندروید علاوه بر عکس ها از چند نوع خاصی از Drawable ها پشتیبانی می کند که در فایل های XML «تعریف» می شوند. یکی از این ها Shape است. به کمک Shape می توان رنگ، حاشیه (border)، طیف (gradient) و گوشه ها را تعریف کرد و سپس از آن ها در View ها استفاده کرد.

تعریف کردن Shape

برای ایجاد یا تعریف کردن یک Shape بر روی پوشه drawable کلیک راست کنید و از منو گزینه New و سپس Other را انتخاب کنید:

android-ch17-create-shape-1

اگر پوشه drawable ندارید، در پوشه res یک پوشه به نام drawable بسازید و بعد فرایند فوق را انجام دهید.

از منوی فوق گزینه Android XML File را انتخاب کنید و Next کنید:

android-ch17-create-shape-2

در این مرحله، دقت کنید که Resource Type شما Drawable باشد. در قسمت بعدی نام فایل (بدون پسوند xml) را وارد کنید و در قسمت بعدی (Root Element) حتماً shape را انتخاب کنید و در آخر Finish را بزنید.

حالا فایلی به نام shape1 در پوشه drawable ایجاد شده است:

android-ch17-create-shape-3

محتوای این فایل شبیه عکس زیر است:

android-ch17-create-shape-4

حالا می خواهیم فایل فوق را ویرایش کنیم. برای این کار در میان تگ shape دکمه های ctrl+space را بزنید تا کامل کننده کد اکلیپس شما را راهنمایی کند:

android-ch17-edit-shape-1

همانطور که در عکس فوق می بینید، گزینه های موجود برای ویرایش یک shape اینها است:

  • corners یا گوشه ها
  • gradient یا طیف رنگ
  • حاشیه یا padding
  • اندازه یا size
  • رنگ ثابت یا solid
  • نوار دور یا stroke

حالا قدم به قدم با این ویژگی ها آشنا خواهید شد.

رنگ ثابت یا solid

اگر بخواهیم shape ما یک رنگ ثابت به عنوان پس زمینه داشته باشد، آن را در تگ solid معرفی می کنیم:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#0000FF"/>
</shape>

تگ solid فقط یک ویژگی دارد: android:color. در این مثال ما رنگ solid را آبی تعریف کردیم.

حالا می خواهیم از این shape به عنوان پس زمینه (background) یک LinearLayout استفاده کنیم:

<LinearLayout
    android:layout_width="200dip"
    android:layout_height="200dip"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:orientation="vertical"
    android:background="@drawable/shape1">
</LinearLayout>

نتیجه کار را ببینید:

android-ch17-edit-shape-solid

corners یا گوشه ها

حالا می خواهیم برای این shape خود گوشه یا corner تعریف کنیم:

android-ch17-edit-shape-corners

همانطور که در عکس می بینید می توانید برای همه گوشه ها از یک مقدار استفاده کرد (android:radius) یا برای هر کدام از آنها مقادیر متفاوتی تعریف کرد. برای shape فوق شعاع گوشه ها را ۲۵ dip تعریف می کنیم:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#0000FF"/>
    <corners android:radius="25dip"/>
</shape>

نتیجه را ببینید:

android-ch17-edit-shape-corners-2

نوار دور یا stroke

اگر بخواهیم نوار دور shape خود را تغییر دهیم، می توانیم از تگ stroke استفاده کنیم:

android-ch17-edit-shape-stroke

این تگ همانطور که در عکس می بینید چندین ویژگی دارد:

  • عرض یا android:width: این ویژگی قطر نوار دور shape را مشخص می کند.
  • رنگ یا android:color: این ویژگی همانطور که از نامش پیدا است، رنگ نوار دور shape را مشخص می کند.
  • عرض خط چین یا android:dashWidth: اگر بخواهید نوار دور shape به صورت خط چین باشد، طول خط ها با این ویژگی مشخص می شود.
  • فاصله بین خط چین ها یا android:dashGap: اگر بخواهید نوار دور shape به صورت خط چین باشد، فاصله بین خط ها با این ویژگی مشخص می شود.

برای shape خود دو ویژگی عرض و رنگ را تعیین می کنیم. عرض ۵ dip (عمداً مقدار زیادی تعیین کردم تا به وضوح در تصاویر دیده شود) و رنگ سیاه:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#0000FF" />
    <corners android:radius="25dip" />
    <stroke
        android:width="5dip"
        android:color="#000000" />
</shape>

نتیجه کار را ببینید:

android-ch17-edit-shape-stroke-2

حالا اگر بخواهیم نوار دور را به صورت خط چینی با اندازه خط ۱۰ dip و فاصله ۵ dip تعریف کنیم، به شکل زیر ویژگی ها را به تگ stroke اضافه می کنیم:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#0000FF" />
    <corners android:radius="25dip" />
    <stroke
        android:width="5dip"
        android:color="#000000"
        android:dashWidth="10dip"
        android:dashGap="5dip"/>
</shape>

نتیجه را ببینید:

android-ch17-edit-shape-stroke-3

gradient یا طیف رنگ

اگر بخواهیم به جای یک رنگ ثابت در shape از یک طیف رنگی استفاده کنیم باید تگ solid را حذف و تگ gradient را اضافه کنیم. تگ gradient ویژگی های زیر را دارد:

android-ch17-edit-shape-gradient

سعی می کنم با چند مثال کاربرد ویژگی های فوق در تگ gradient را به شما نشان بدهم.

۱- یک طیف با رنگ شروع آبی و رنگ انتهای سبز:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="25dip" />
    <stroke
        android:width="5dip"
        android:color="#000000" />
    <gradient
        android:endColor="#00FF00"
        android:startColor="#0000FF" />
</shape>

خروجی کار:

android-ch17-edit-shape-gradient-1

۲- یک طیف با رنگ شروع آبی و رنگ انتهای سبز و رنگ وسط قرمز:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="25dip" />
    <stroke
        android:width="5dip"
        android:color="#000000" />
    <gradient
        android:endColor="#00FF00"
        android:startColor="#0000FF"
        android:centerColor="#FF0000"/>
</shape>

خروجی کار:

android-ch17-edit-shape-gradient-2

۳- یک طیف با رنگ شروع آبی و رنگ انتهای سبز و رنگ وسط قرمز و زاویه چرخش ۲۷۰ درجه:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="25dip" />
    <stroke
        android:width="5dip"
        android:color="#000000" />
    <gradient
        android:endColor="#00FF00"
        android:startColor="#0000FF"
        android:centerColor="#FF0000"
        android:angle="270"/>
</shape>

خروجی کار:

android-ch17-edit-shape-gradient-3

انواع طیف رنگ ها

همانطور که در عکس زیر می بینید، shape ها از سه نوع طیف رنگ یا گرادیان پشتیبانی می کنند:

android-ch17-edit-shape-gradient-types-1

نمونه هایی که تا به حال دیدید، گرادیان های خطی (linear) بودند.

اگر نوع گرادیان غیر از linear باشد، باید برخی ویژگی ها را تغییر دهید.

۴- یک طیف رنگی شعاعی (radial) با شعاع ۲۰۰:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="25dip" />
    <stroke
        android:width="5dip"
        android:color="#000000" />
    <gradient
        android:endColor="#00FF00"
        android:startColor="#0000FF" 
        android:type="radial" 
        android:gradientRadius="200"/>
</shape>

خروجی کار:

android-ch17-edit-shape-radial-gradient-1

۵- یک طیف رنگ دایره ای با شعاع ۳۰۰ و مرکز ۰ و ۰ (بالا سمت چپ):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="25dip" />
    <stroke
        android:width="5dip"
        android:color="#000000" />
    <gradient
        android:centerX="0"
        android:centerY="0"
        android:endColor="#00FF00"
        android:gradientRadius="300"
        android:startColor="#0000FF"
        android:type="radial" />
</shape>

خروجی کار:

android-ch17-edit-shape-radial-gradient-2

۶- طیف رنگ جارویی (sweep):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="25dip" />
    <stroke
        android:width="5dip"
        android:color="#000000" />
    <gradient
        android:endColor="#00FF00"
        android:startColor="#0000FF"
        android:type="sweep" />
</shape>

خروجی کار:

android-ch17-edit-shape-sweep-gradient-1

 موارد استفاده از sahpe

shape ها را مثل سایر drawable  ها می توان به عنوان پس زمینه (background) سایر View ها استفاده کرد یا در View هایی مثل ImageView و ImageButton که کار اصلی آنها نمایش drawable ها است، به عنوان src استفاده کرد.

تمرین ۱- سعی کنید با استفاده از shape یک LinearLayout شبیه عکس زیر بسازید:

android-ch17-shape-practice-1

تمرین ۲: یک Layout بسازید که پس زمینه آن شبیه عکس زیر باشد:

android-ch17-shape-practice-2

هنوز نمی توانید از نهایت توان و زیبایی shape ها استفاده کنید. در دو فصل بعدی با ما باشید تا قدرت گرافیک اندروید را از نزدیک ببینید!

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmail

22 فکر می‌کنند “آموزش اندروید، فصل ۱۷: گرافیک در اندروید (بخش ۲)

  1. اکبر

    اقا خیلی ممنون بابت این همه زحمت لطفا برای ساختن اپ برای سایت ها توضیح دهید .امروز این اپ ها خیلی بیننده داره
    لطفا یک بخش مخصوص درست کنین براش !

    پاسخ
  2. علیرضا

    آقا خیلی ممنون بابت این دوره آموزشی. من تازه میخوام شروع کنم یک چند درس اولیه رو خوندم تو آموزش دستکاری پروژه hello world یک دکمه گذاشتی که با کلیک بر اون ، عبارت سلام دنیا دیده میشه. سوال من این بود که میشه یک دیکشنری خیلی ساده و شخصی ساخت مثلا وقتی hello نمایش داده میشه با کلیک بر دکمه عبارت سلام نشان داده بشه (البته نه فقط چند ثانیه) بعد با یک دکمه next عبارت بعدی نشون داده بشه و دوباره با کلیک بر دکمه ترجمه کلمه دوم و …
    با این آموزش هایی که گذاشتی تا الان به نظرت میشه همچین برنامه ای بنویسم یا هنوز خیلی راه مونده.

    پاسخ
    1. علی بهزادیان نژاد نویسنده

      علیرضای عزیز!
      قدم به قدم با من جلو بیایید، به زودی می‌توانید برنامه‌های مورد علاقه یا مورد نیاز خودتان را بنویسید!

      پاسخ
  3. قاسم

    سلام علی جان
    ممنون واسه اموزش های جالبت من که مشتری شدم
    منتظر اموزش های جدید و جالبت هستیم
    همین جور ادامه بده

    پاسخ
  4. مهدیار

    سلام استاد
    اگه میشه طراحی انیمیشن ها و گرافیک های خاص انیمیشنی که در برنامه ها میبینیم توضیح بدبد که چطور ساخته میشن؟(به طور مثال اپلیکیشن های هواشناسی)

    پاسخ
  5. حسین سیفی

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

    پاسخ
    1. علی بهزادیان نژاد نویسنده

      سلام
      چند ماه اخیر خیلی سرم شلوغه و احتمالا تا بعد از تعطیلات نوروزی هم همینطور خواهد موند! مشتاق نوشتنم ولی چه کنم که وقت کم می‌آرم. شما به بزرگی خودتون ببخشید!

      پاسخ
  6. مرتضی

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

    پاسخ
  7. علی میکائیلی

    سلام ممنون عالی بود

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

    پاسخ
  8. اسماعیل

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

    پاسخ
  9. حسین شکری

    سلام اقای بهزادیان
    خیلی ممنون از مطالب بینهایت مفیدتون
    یه مشکل جدی دارم
    چجوری دور یه شی که داریم (حالا عکس یا یه باکس یا هرچیز دیگه) سایه بندازیم که سایه دورتا دور شی باشه و از طیف تشکیل شده باشه از پرنگ به کمرنگ دقیقا شبیه چیزی که اینجاست http://inloop.github.io/shadow4android/
    (البته بدون استفاده از PNG یعنی با کد نوشتن)

    پاسخ

پاسخ دهید

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

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>