نمایش انیمیشن، در برنامه اندروید
نمایش انیمیشن، در برنامه اندروید
در این مبحث، چگونگی نمایش یک انیمیشن، حاصل از نمایش چند عکس متوالی، را شرح می دهیم. برنامه اندروید، شامل یک ImageView خواهد بود و زمانی که کاربر بر روی آن اشاره می کند، انیمیشن نمایش داده می شود.
در برنامه eclipse ، ابتدا یک پروژه اندروید با نام Kelidestan.com_Animation می سازیم (نام package را برابر com.kelidestan.animation انتخاب می کنیم. نام activity اصلی را برابر MainActivity انتخاب می کنیم و فایل xml متناظر آن را هم برابر activity_main قرار می دهیم).
قبل از شروع، باید تصاویر لازم برای ساخت انیمیشن را داشته باشیم. مثلا من تصاویر زیر را در نظر گرفته ام :
نام عکس | عکس | نام عکس | عکس | نام عکس | عکس |
tick_1.jpg |
| tick_7.jpg |
| tick_13.jpg |
|
tick_2.jpg |
| tick_8.jpg |
| tick_14.jpg |
|
tick_3.jpg |
| tick_9.jpg |
| tick_15.jpg |
|
tick_4.jpg |
| tick_10.jpg |
| tick_16.jpg |
|
tick_5.jpg |
| tick_11.jpg |
| tick_17.jpg |
|
tick_6.jpg |
| tick_12.jpg |
| | |
با نمایش پی در پی عکس های بالا، یک انیمیشن خواهیم داشت که ترسیم یک علامت تیک را نمایش می دهد. دقت کنید که ابتدای نام عکس ها، یک کلمه مشخص و سپس در ادامه آن، شماره هایی، به ترتیب نمایش عکس ها، آمده است. نکته مهم این است که در انتخاب نام عکس ها، هیچ اجباری وجود ندارد و اینکه عکس ها را اینگونه نامگذاری کرده ایم، برای دادن نظم به آنها و عدم گیج شدن خودمان می باشد.
عکس های بالا را می توانید از لینک زیر دانلود نمایید :
مشاهده پیوست 103.zip
عکس ها را در فولدر drawable-hdpi کپی می کنیم :
در ابتدا که پروژه اندروید را می سازیم، نمایش گرافیکی فایل activity_main.xml ، به صورت زیر می باشد :
این صفحه، به طور پیش فرض، دارای یک TextView می باشد، ما TextView را حذف کرده و به جای آن، یک ImageView قرار می دهیم. انیمیشن مورد نظر ما، باید در این ImageView نمایش داده شود :
تا اینجا، کدهای فایل activity_main.xml ، به صورت زیر می باشد :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]LinearLayout xmlns[COLOR=#339933]:[/COLOR]android[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"http://schemas.android.com/apk/res/android"[/COLOR]
xmlns[COLOR=#339933]:[/COLOR]tools[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"http://schemas.android.com/tools"[/COLOR]
android[COLOR=#339933]:[/COLOR]layout_width[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"match_parent"[/COLOR]
android[COLOR=#339933]:[/COLOR]layout_height[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"match_parent"[/COLOR]
android[COLOR=#339933]:[/COLOR]paddingBottom[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@dimen/activity_vertical_margin"[/COLOR]
android[COLOR=#339933]:[/COLOR]paddingLeft[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@dimen/activity_horizontal_margin"[/COLOR]
android[COLOR=#339933]:[/COLOR]paddingRight[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@dimen/activity_horizontal_margin"[/COLOR]
android[COLOR=#339933]:[/COLOR]paddingTop[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@dimen/activity_vertical_margin"[/COLOR]
tools[COLOR=#339933]:[/COLOR]context[COLOR=#339933]=[/COLOR][COLOR=#0000FF]".MainActivity"[/COLOR] [COLOR=#339933]>[/COLOR]
[COLOR=#339933]<[/COLOR]ImageView
android[COLOR=#339933]:[/COLOR]id[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@+id/imageView1"[/COLOR]
android[COLOR=#339933]:[/COLOR]layout_width[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"match_parent"[/COLOR]
android[COLOR=#339933]:[/COLOR]layout_height[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"wrap_content"[/COLOR]
android[COLOR=#339933]:[/COLOR]src[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/ic_launcher"[/COLOR] [COLOR=#339933]/>[/COLOR]
[COLOR=#339933]</[/COLOR]LinearLayout[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]
مشاهده می کنید که id برای ImageView ، برابر imageView1 تعریف شده است.
در زیرمجموعه فولدر res ، یک فولدر با نام anim می سازیم و سپس درون آن، یک فایل با نام animation.xml ایجاد می کنیم :
کدهای فایل animation.xml را به صورت زیر می نویسیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<?[/COLOR]xml version[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"1.0"[/COLOR] encoding[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"utf-8"[/COLOR][COLOR=#339933]?>[/COLOR]
[COLOR=#339933]<[/COLOR]animation[COLOR=#339933]-[/COLOR]list android[COLOR=#339933]:[/COLOR]oneshot[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"true"[/COLOR] xmlns[COLOR=#339933]:[/COLOR]android[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"http://schemas.android.com/apk/res/android"[/COLOR][COLOR=#339933]>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_1"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_2"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_3"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_4"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_5"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_6"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_7"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_8"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_9"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_10"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_11"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_12"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_13"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_14"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_15"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_16"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_17"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
[COLOR=#339933]</[/COLOR]animation[COLOR=#339933]-[/COLOR]list[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]
اکنون باید به سراغ فایل activity اصلی برویم که قبلا، نام آن را برابر MainActivity انتخاب کرده ایم :
کدهای فایل MainActivity.java ، در ابتدا، به صورت زیر می باشد :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][B]package[/B] [COLOR=#006699]com.iran-eng.animation[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.os.Bundle[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.app.Activity[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.view.Menu[/COLOR][COLOR=#339933];[/COLOR]
[B]public[/B] [B]class[/B] MainActivity [B]extends[/B] Activity [COLOR=#009900]{[/COLOR]
@Override
[B]protected[/B] [COLOR=#000066][B]void[/B][/COLOR] onCreate[COLOR=#009900]([/COLOR]Bundle savedInstanceState[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
[B]super[/B].[COLOR=#006633]onCreate[/COLOR][COLOR=#009900]([/COLOR]savedInstanceState[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
setContentView[COLOR=#009900]([/COLOR]R.[COLOR=#006633]layout[/COLOR].[COLOR=#006633]activity_main[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#009900]}[/COLOR]
@Override
[B]public[/B] [COLOR=#000066][B]boolean[/B][/COLOR] onCreateOptionsMenu[COLOR=#009900]([/COLOR][COLOR=#003399]Menu[/COLOR] menu[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
[COLOR=#666666][I]// Inflate the menu; this adds items to the action bar if it is present.[/I][/COLOR]
getMenuInflater[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR].[COLOR=#006633]inflate[/COLOR][COLOR=#009900]([/COLOR]R.[COLOR=#006633]menu[/COLOR].[COLOR=#006633]main[/COLOR], menu[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[B]return[/B] [COLOR=#000066][B]true[/B][/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#009900]}[/COLOR]
[COLOR=#009900]}[/COLOR]
[/FONT]
[/FONT][/COLOR]
کدهای فایل MainActivity.java را به صورت زیر تغییر می دهیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][B]package[/B] [COLOR=#006699]com.[/COLOR][COLOR=#006699]iran-eng[/COLOR][COLOR=#006699].animation[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.os.Bundle[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.app.Activity[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.graphics.drawable.AnimationDrawable[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.view.Menu[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.view.View[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.view.View.OnClickListener[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.widget.ImageView[/COLOR][COLOR=#339933];[/COLOR]
[B]public[/B] [B]class[/B] MainActivity [B]extends[/B] Activity [COLOR=#009900]{[/COLOR]
@Override
[B]protected[/B] [COLOR=#000066][B]void[/B][/COLOR] onCreate[COLOR=#009900]([/COLOR]Bundle savedInstanceState[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
[B]super[/B].[COLOR=#006633]onCreate[/COLOR][COLOR=#009900]([/COLOR]savedInstanceState[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
setContentView[COLOR=#009900]([/COLOR]R.[COLOR=#006633]layout[/COLOR].[COLOR=#006633]activity_main[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[B]final[/B] ImageView img [COLOR=#339933]=[/COLOR] [COLOR=#009900]([/COLOR]ImageView[COLOR=#009900])[/COLOR] findViewById[COLOR=#009900]([/COLOR]R.[COLOR=#006633]id[/COLOR].[COLOR=#006633]imageView1[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
img.[COLOR=#006633]setBackgroundResource[/COLOR][COLOR=#009900]([/COLOR]R.[COLOR=#006633]anim[/COLOR].[COLOR=#006633]animation[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
img.[COLOR=#006633]setOnClickListener[/COLOR][COLOR=#009900]([/COLOR][B]new[/B] OnClickListener[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
@Override
[B]public[/B] [COLOR=#000066][B]void[/B][/COLOR] onClick[COLOR=#009900]([/COLOR][COLOR=#003399]View[/COLOR] v[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
img.[COLOR=#006633]setImageDrawable[/COLOR][COLOR=#009900]([/COLOR][COLOR=#000066][B]null[/B][/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
AnimationDrawable anim [COLOR=#339933]=[/COLOR] [COLOR=#009900]([/COLOR]AnimationDrawable[COLOR=#009900])[/COLOR] img.[COLOR=#006633]getBackground[/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
anim.[COLOR=#006633]start[/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#009900]}[/COLOR]
[COLOR=#009900]}[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#009900]}[/COLOR]
@Override
[B]public[/B] [COLOR=#000066][B]boolean[/B][/COLOR] onCreateOptionsMenu[COLOR=#009900]([/COLOR][COLOR=#003399]Menu[/COLOR] menu[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
[COLOR=#666666][I]// Inflate the menu; this adds items to the action bar if it is present.[/I][/COLOR]
getMenuInflater[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR].[COLOR=#006633]inflate[/COLOR][COLOR=#009900]([/COLOR]R.[COLOR=#006633]menu[/COLOR].[COLOR=#006633]main[/COLOR], menu[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[B]return[/B] [COLOR=#000066][B]true[/B][/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#009900]}[/COLOR]
[COLOR=#009900]}[/COLOR][/FONT]
[/FONT][/COLOR]
در کدهای بالا، خط زیر، اهمیت ویژه ای دارد :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace]img.[COLOR=#006633]setImageDrawable[/COLOR][COLOR=#009900]([/COLOR][COLOR=#000066][B]null[/B][/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR][/FONT]
[/FONT][/COLOR]
این خط از کدها، باعث می شود که عکس نمایش داده شده در ImageView ، برداشته شود (در غیر اینصورت، انیمیشن، در پشت این عکس نمایش داده خواهد شد).
برنامه اندروید آماده است و می توانید آن را به شیوه دلخواه خود، اجرا کنید و نتیجه را ببینید.با اجرای برنامه اندروید، بر روی یک گوشی، صفحه زیر نمایش داده می شود :
با اشاره بر روی تصویر، انیمیشن نمایش داده می شود.
فایل های پروژه اندروید را می توانید از لینک های زیر دریافت کنید :