اندروید: چرخاندن تصویر در برنامه

[hesamy2004]

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


http://www.kamalan.com/wp-content/uploads/2011/02/spiral.gif

در ابتدا مانند آنچه در “ساخت اولین پروژه برای اندروید (http://www.kamalan.com/?p=378)” آموختید، یک پروژه جدید ایجاد نمایید و مشخصات زیر را وارد کنید.


Project name: hypnagogic

Build Target: Android 2.3

Application name: hypnagogic

Package name: com.Kamalan.hypnagogic

Create activity: hypnagogic

Min SDK Version: 3

در پایان با کلیک بر روی دکمه Finish پروژه ای با مشخصات فوق ساخته خواهد شد.

اولین چیزی که باید مورد توجه قرار گیرد شکل ظاهری آن در صفحه نمایشگر (Layout) است. پس در فولدر layout بر روی main.xml دوبار کلیک کنید تا محتویات آن را به شما نشان دهد. کد زیر را در آن وارد کنید.


<?xml version=”1.0″ encoding=”utf-8″?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
android:background=”@color/backGround_color”>

<ImageView
android:id=”@+id/imView”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:src=”@drawable/spiral”/>

</LinearLayout>

برای یکسان کردن رنگ پس زمینه تصویر با رنگ زمینه صفحه نمایش از دستوری که در خط ۶ نوشته شد استفاده میکنیم. برای سادگی کار میتوانیم بدون مرجع دادن و مستقیم مانند دستور android:background=”#FFFFFF” رنگ را معرفی کنیم ولی برای حرفه ای تر نوشتن برنامه و زمانهاییکه در برنامه زیاد رفرنس داریم بهتر است بطریق فوق یک فایل برای رنگها ایجاد کنیم و تمامی رنگها را در آن معرفی نماییم.

حال برای اینکه به برنامه بگوییم رنگ زمینه چه رنگی است در فولدر values یک فایل با نام color.xml ایجاد کنید و کد زیر را در آن وارد کنید.


<?xml version=”1.0″ encoding=”utf-8″?>

<resources>
<color name=”backGround_color”>#ffffff</color>
</resources>

برای ساخت طرح منو یک فولدر با نام menu در فولدر res ایجاد کنید و یک فایل با نام mainmnue.xml در آن بسازید. کد زیر را در آن وارد نمایید.


<menu xmlns:android=”http://schemas.android.com/apk/res/android”>

<item
android:id=”@+id/start”
android:title=”Start!”
android:orderInCategory=”1″/>

<item
android:id=”@+id/exit”
android:title=”Exit”
android:orderInCategory=”3″/>

<item
android:id=”@+id/stop”
android:title=”Stop”
android:orderInCategory=”2″/>
</menu>

این کد به برنامه میگوید ما در منو سه دکمه با نامها یا id های ذکر شده داریم (idها به ما کمک میکنند تا در کد برنامه به این آیتم ها دسترسی داشته باشیم). همچنین title نشان دهنده آن چیزی است که وقتی منو نشان داده شود، به کاربر نشان داده خواهد شد. orderInCategory نشان دهنده ترتیب آیتمها است.

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

ابتدا باید در کلاس برنامه به معرفی View (برای اطلاعات بیشتر اینجا را کلیک کنید (http://www.kamalan.com/?p=355)) استفاده شده پرداخته شود. بدین منظور دستور زیر را در خط ۱۳ برنامه نوشته ایم تا شیئ imView را بسازیم.


ImageView imView;

در خط ۱۴ شیئ انیمیشن را ساخته ایم که به موقع راجع به آن توضیح خواهیم داد.

(ادامه دارد . . .)

[hesamy2004]

خط ۱۷ مربوط به متد onCreate است. این متد زمانی اجرا میشود که برنامه برای بار اول اجرا میشود و یا از حالت های Pause و یا Stop خارج میشود. در مورد چرخه حیات (Life Cycle) برنامه های اندروید در پستی جدا کامل چرخه را مورد بررسی قرار میدهیم.

در خط ۲۰ اندروید layoutی که برای برنامه در نظر گرفتیم را از فایل main.xml میخواند. اشاره کرده بودیم که هر فایلی که در فولدر res ساخته میشود، بطور خودکار از طرف اندروید آدرسی به آن تعلق میگیرد. برای دستیابی به آن آدرس از R استفاده میکنیم. R.layout.main آدرس مورد نظر ما را برای اجرا شدن به اندروید میدهد.

برای نشان دادن تصویر یک آبجکت از آنرا با نام imView در کد برنامه ساختیم. از طرفی در main.xml هم به اندروید گفتیم که یک View از نوع تصویر با نام imView داریم. حال با دستوری که در خط ۲۲ نوشتیم، آن دو را به هم وصل میکنیم. ذکر این نکته مهم است که هیچ لزومی ندارد نامی که در کد برنامه برای آبجکت انتخاب میکنیم با نامی که در فایل xml انتخاب میکنیم یکسان باشد.

سه متدی که در خطهای ۲۵، ۳۲ و ۳۷ نوشته شده اند برای ساخت و اجرای منوی برنامه هستند. از آنجاکه این برنامه اول است، برای جلوگیری از پیچیده شدن و سردرگم شدن شما خیال ندارم تمام سطرهای برنامه را با جزئیات تعریف کنم. کلیات نوشتن منو مانند همین متد است. برای ساخت منو احتیاج به متد خط ۲۵ داریم. طرح یا layout منو هم در فایل xml قبلاً نوشته بودیم. حال زمانیکه کاربر بر روی هرکدام از آیتمهای منو کلیک کند، تابع مورد نظر اجرا میشود. مثلاً با کلیک بر روی آیتم start متد startAnimation اجرا میشود.

خط ۵۶ مربوط به اجرای متد startAnimation است. نحوه حرکت انیمیشن را در فایل res>anim>spin.xml نوشته ایم. محتویات این فایل با دستوری که در خط ۵۸ نوشته شده است در آبجکت an بارگذاری میشود و دستور اجرای آن در خط ۵۹ داده میشود.

در خط ۶۳ متد stopAnimation را داریم که دستور توقف چرخش را میدهد.

مطالبی که در بالا مورد بررسی قرار گرفت، توضیحات کلی بود و برای جلوگیری از سردرگمی شما به توضیح موارد مهم پرداخته شد. انشالله مورد توجه قرار بگیرد. برای آشنایی بیشتر با ساختمان برنامه نویسی اندروید حتماً به کتب معتبر رجوع فرمایید.