بسم اهلل الرحمن الرحیم

Size: px

Start display at page:

Download "بسم اهلل الرحمن الرحیم"

Stuart Hall
6 years ago
Views:

1 بسم اهلل الرحمن الرحیم آموزشگاه تحلیل داده تخصصی ترین مرکز برنامه نویسی و دیتابیس در ایران آموزش از استفاده Drawable ها در اندروید مدرس: مهندس افشین رفوآ

2 در این بخش به کاربرد drawable ها در اندروید می پردازیم. فهرست محتوا.1 Drawable چیست 2. استفاده از drawable ویژه ی view ها 3. بار گذاری Bitmap ها و drawable ها XML Drawables.4 Shape Drawable چیست State Drawable چه کاربردی دارد آموزش Transition Drawable.5 تعریف Vector drawable.6 معرفی Animation Drawable.7 Drawable Patch چیست 8. ایجاد Drawable های سفارشی 9. تمرین ایجاد Drawable های سفارشی 1. Drawable چیست منبع Drawable در واقع یک مفهوم کلی برای نگاره ای است که می توان رسم کرد. ساده ترین شکل آن یک فایل نگاره ای bitmap است که در اندروید توسط کالس BitmapDrawable نمایش داده می شود. res/drawable ذخیره و نگه داری می شوند. هر Drawable به عنوان فایل های جدا در یکی از پوشه های bitmap ها ویژه ی وضوح تصویرهای متفاوت در زیرپوشه های -xxhdpi -xhdpi -hdpi mdpi پوشه ی والد

3 ADT project ( شوند. می ذخیره اندروید نویسی برنامه ابزار ی پروژه ایجاد راهنمای res/drawable در مذکور بیتی های نقشه اگر کند. می ایجاد فرض پیش صورت به خود را ها پوشه این )creation wizard شوند داری نگه متفاوت های پوشه بر را نظر مورد بیتی ی نقشه خودکار صورت به خود اندروید سیستم کند. می انتخاب )device config( دستگاه پیکربندی اساس ی نقشه اندروید سیستم باشید نگرفته نظر در بیتی ی نقشه موجود تصویرهای وضوح تمامی مختص چنانچه چندان ی نتیجه امر این البته کند. می انتخاب تنظیم کمی با را تصویر وضوح آن به مقیاس نزدیکترین با بیتی شود. تار و کیفیت کم حدی تا است ممکن حاصل بیتی ی نقشه که خاطر این به دهد نمی ارائه دلخواهی می پشتیبانی نیز 9-patch )graphic( های نگاره و XML drawables از اندروید گرافیکی های فایل بر عالوه transition XML drawables کند. )رنگ اشکال تعریف جهت بیشتر گرادیان وضعیت حاشیه( مورد ها گیرد. می قرار استفاده view )graphic( به زمانی نگاره که رود می کار بودن بزرگتر دلیل به است الزم 9-patch graphics 9-patch graphics شود )stretch( آن ی دربرگیرنده کشیده و داده بسط کدام کند می تعیین حقیقت در شود. داده بسط نظر مورد view با متناسب باید نگاره از بخش کند می سازی پیاده Drawable که شی هر نوشت. جاوا کد در را ها Drawable که دارد وجود نیز امکان این داد. قرار استفاده مورد Drawable in code عنوان به توان می ها view ی ویژه drawable از استفاده 2. منظور این برای داد. عمل طریق از باید XML در ها Drawable به ارجاع برای دهیم می قرار استفاده مورد فایل پسوند بدون را فایل اسم به بخواهیم اگر مثال عنوان به پسوند دیگر عبارت )به بریم می بکار کنیم پیدا دسترسی res/drawable/hello.png کنید. جلب زیر مثال به را خود توجه کنیم(. می حذف آن انتهای از را png. <textview xmlns:android=" android:id="@+id/textview1" 7 واحد پالک - صادرات بانک جنب - ملک خيابان از تر باال - شريعتی خيابان - تهران آموزشگاه. آدرس

4 android:layout_width="wrap_content" android:layout_height="wrap_content" /> Drawable که دارد وجود قابلیت این همچنین است گفتنی داد. تخصیص ها View به کد( )داخل را ها )input parameter( )resource ID( view بیشتر منبع ی شناسه یک ها ورودی پارامتر ی مثابه به می drawables پذیرند. کردن س ت یا متصل ی نحوه زیر کد نمونه مثال برای به زمینه پس عنوان به دهد. می نمایش را ImageView ImageView imageview = (ImageView) findviewbyid(r.id.image); imageview.setimageresource(r.drawable.hello); ها drawable و ها Bitmap گذاری بار 3. اشیإ ایجاد ی نحوه تشریح به بخش این دهد. می ارائه را Bitmap کالس بیتی های نقشه با کار جهت اندروید را بالعکس و Drawable اشیا به Bitmap اشیا تبدیل ی نحوه همچنین پرداخته جاوا کد از استفاده با Bitmap دهد. می آموزش شما به bitmap file هر توان می نیاز صورت در شی به را آن سپس کرده بارگذاری را کد در دسترسی قابل کرد. تبدیل Drawable می نمایش را ImageView به آن تخصیص و assets ی پوشه ی ویژه Bitmap شی ایجاد ی نحوه ذیل کد نمونه دهد. // Get the AssetManager AssetManager manager = getassets(); // read a Bitmap from Assets InputStream open = null; try { open = manager.open("logo.png"); 7 واحد پالک - صادرات بانک جنب - ملک خيابان از تر باال - شريعتی خيابان - تهران آموزشگاه. آدرس

5 Bitmap bitmap = BitmapFactory.decodeStream(open); // Assign the bitmap to an ImageView in this layout ImageView view = (ImageView) findviewbyid(r.id.imageview1); view.setimagebitmap(bitmap); catch (IOException e) { e.printstacktrace(); finally { if (open!= null) { try { open.close(); catch (IOException e) { e.printstacktrace(); همچنین می توان از پوشه ی res/drawable به Drawable ها دسترسی پیدا کرد و آن ها را به عنوان اشیإ Bitmap در متن برنامه code( )source بکار برد. مثال زیر این امر را به نمایش می گذارد. Bitmap b = BitmapFactory.decodeResource(getResources(), R.drawable.ic_action_search); )height( و پهنا می توانید یک مقیاس نقشه ی بیتی bitmap( )scale بر اساس تعریف جدیدی از درازا )weight( بر حسب پیکسل ایجاد کنید. Bitmap originalbitmap = <initial setup>; Bitmap resizedbitmap = Bitmap.createScaledBitmap(originalBitmap, newwidth, newheight, false); به منظور تبدیل یک شی Bitmap به Drawable می توان از کد زیر بهره گرفت. # Convert Bitmap to Drawable Drawable d = new BitmapDrawable(getResources(),bitmap);

6 XML Drawables.4 Shape Drawable چیست Shape Drawables فایل های XML ای هستند که به برنامه نویس اجازه می دهد یک شئ هندسی همراه با Views رنگ ها, حاشیه ها و گرادیان ها )gradiant( ترسیم کرده, سپس آن را به اختصاص دهد. مزیت استفاده از drawable مذکور در توانایی تطبیق آن به صورت خودکار با اندازه مناسب و تعریف شده است. کد زیر مثالی از این نوع drawable عرضه می کند. <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=" android:shape="rectangle"> <stroke android:width="2dp" android:color="#ffffffff" /> <gradient android:endcolor="#ddbbbbbb" android:startcolor="#dd777777" android:angle="90" /> <corners android:bottomrightradius="7dp" android:bottomleftradius="7dp" android:topleftradius="7dp" android:toprightradius="7dp" /> </shape> property( )background طرح می توانید در صورت تمایل drawable نام برده را به خصوصیت پس زمینه بندی )layout( خود تخصیص دهید. <?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">

7 <edittext android:layout_width="match_parent" android:layout_height="wrap_content"> </edittext> <radiogroup android:layout_width="match_parent" android:layout_height="wrap_content"> <radiobutton android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" </radiobutton> <radiobutton android:layout_width="wrap_content" android:layout_height="wrap_content" </radiobutton> </radiogroup> <button android:layout_width="wrap_content" android:layout_height="wrap_content" android:onclick="myclickhandler"></button> </linearlayout> State Drawable چه کاربردی دارد امکان تعریف وضعیت )state( را برای برنامه نویس فراهم می کند. الزم به ذکر است که State drawable ویژه ی هر وضعیت )state( یک drawable جدا به View مربوط تخصیص می یابد. به عنوان نمونه کد ذیل برای یک دکمه بسته به وضعیت های مختلفی که دارد یک drawable یکتا تعریف می کند.

8 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android=" <item android:state_pressed="true" /> <item android:state_checked="true" /> <item /> </selector> آموزش Transition Drawable برای شما این امکان را فراهم می کند که افکت transition را تعریف کرده و در Transition Drawables کدنویسی آن را فعال سازی کنید. <?xml version="1.0" encoding="utf-8"?> <transition xmlns:android=" <item /> <item /> </transition> final ImageView image = (ImageView) findviewbyid(r.id.image); final ToggleButton button = (ToggleButton) findviewbyid(r.id.button); button.setonclicklistener(new OnClickListener() public void onclick(final View v) { TransitionDrawable drawable = (TransitionDrawable) image.getdrawable(); if (button.ischecked()) { drawable.starttransition(500); else { drawable.reversetransition(500); );

9 Vector drawables تعریف.5 نسبت به ای گستره با )اما svg های فایل مشابه را vector drawable تعریف قابلیت اندروید 5.0 ویرایش drawable دهد. می قرار نویس برنامه اختیار در محدودتر( کاربرد زیر لیستینگ فایل در را شده ذکر مقیاس که دارد را مزیت این vector drawable از استفاده دهد. می نمایش مثال با vectordrawable.xml کند. می تنظیم خودکار صورت به )device density( دستگاه چگالی با متناسب را drawable <vector xmlns:android=" android:height="64dp" android:width="64dp" android:viewportheight="600" android:viewportwidth="600"> <group android:name="rotationgroup" android:pivotx="300.0" android:pivoty="300.0" </group> </vector> android:rotation="45.0"> <path android:name="v" android:fillcolor="#000000" android:pathdata="m300,70 l 0,-70 70,70 0,0-70,70z" /> AnimatedVectorDrawable 5.0 ی نسخه ی دربردارنده همچنین اندروید دهد می اجازه شما به که است کنید. ترکیب ها animation با را ها vector drawable Animation Drawables معرفی.6 animation drawable یک توان می همچنین متد فراخوانی با را آن و کرده تعریف داد. تخصیص View به setbackgroundresource()  <animation-list android:id="@+id/selected" android:oneshot="false"> <item android:drawable="@drawable/phase1" android:duration="400" /> <item android:drawable="@drawable/phase2" android:duration="400" /> <item android:drawable="@drawable/phase3" android:duration="400" /> </animation-list> ImageView img = (ImageView)findViewById(R.id.yourid); img.setbackgroundresource(r.drawable.your_animation_file); // Get the AnimationDrawable object. AnimationDrawable frameanimation = (AnimationDrawable) img.getbackground(); // Start the animation (looped playback by default). 7 واحد پالک - صادرات بانک جنب - ملک خيابان از تر باال - شريعتی خيابان - تهران آموزشگاه. آدرس

frameanimation.start(); چیست Patch Drawable.7 برنامه به و بوده )stretchable( بسط قابل نواحی دارای که باشد می مجدد بندی اندازه قابل بیتی ی نقشه یک تعیین را ناحیه چپ, و فوقانی قسمت در کند.

10 frameanimation.start(); چیست Patch Drawable.7 برنامه به و بوده )stretchable( بسط قابل نواحی دارای که باشد می مجدد بندی اندازه قابل بیتی ی نقشه یک تعیین را ناحیه چپ, و فوقانی قسمت در کند. تعریف را بسط( )قابل نواحی آن که دهد می را اجازه این نویس view برای drawable بودن کوچک صورت در باید که کنید می کنید. می مشاهده زیر تصویر در را بسط قابل نواحی شود. مقیاس تنظیم این دیگر عبارتی به گیرد می قرار آن در متن که کنیم می تعریف را ای ناحیه نیز راست و پایین قسمت در مثال عنوان )به نوشت متن آن روی توان می که رفته بکار ی view در Drawable که دهد می رخ زمانی امر کرد(. اشاره دکمه یک به توان می android-sdk/tools نصب ی پوشه در را draw9patch ی برنامه )ADT( اندروید نویسی برنامه ابزار مجموعه توجهی قابل حد تا را 9 Patch drawables ایجاد ی پروسه ی برنامه است. گرفته نظر در نویس برنامه برای کند. می آسان 7 واحد پالک - صادرات بانک جنب - ملک خيابان از تر باال - شريعتی خيابان - تهران آموزشگاه. آدرس

11 8. ایجاد Drawable های سفارشی می توان در صورت نیاز Drawable های سفارشی تعریف کرد. Drawable های اختصاصی قادر هستند برای نمایش از رابط برنامه سازی کاربردی )API( Canvas کمک گرفته و بدین وسیله متناسب با نیاز شما تنظیم شوند. 9. تمرین ایجاد Drawable های سفارشی پروژه ی زیر به نام com.vogella.android.drawables.custom را که مبتنی بر قالب Empty Activity است را ایجاد کنید. حال کالس سفارشی Drawable )زیر( را ایجاد کنید. package com.vogella.android.drawables.custom; import android.graphics.bitmap; import android.graphics.bitmapshader; import android.graphics.canvas; import android.graphics.colorfilter; import android.graphics.paint; import android.graphics.pixelformat; import android.graphics.rectf; import android.graphics.shader; import android.graphics.drawable.drawable; public class MyRoundCornerDrawable extends Drawable { private Paint paint; public MyRoundCornerDrawable(Bitmap bitmap) { BitmapShader shader; shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP); paint = new Paint(); paint.setantialias(true);

12 public void draw(canvas canvas) { int height = getbounds().height(); int width = getbounds().width(); RectF rect = new RectF(0.0f, 0.0f, width, height); canvas.drawroundrect(rect, 30, 30, public void setalpha(int alpha) { public void setcolorfilter(colorfilter cf) { public int getopacity() { return PixelFormat.TRANSLUCENT; دهید. تغییر زیر به را خود layout فایل باال کالس از استفاده جهت اکنون <relativelayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".mainactivity"> <imageview android:id="@+id/image" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_centerhorizontal="true" android:layout_centervertical="true" android:contentdescription="todo" /> 7 واحد پالک - صادرات بانک جنب - ملک خيابان از تر باال - شريعتی خيابان - تهران آموزشگاه. آدرس

13 </relativelayout> کالس MainActivity را به کالس زیر درست کنید. این کد نیاز دارد شما یک نقشه ی بیتی در پوشه ی drawable خود به نام dog.png ایجاد کنید. package com.vogella.android.drawables.custom; import java.io.inputstream; import android.app.activity; import android.graphics.bitmap; import android.graphics.bitmapfactory; import android.os.bundle; import android.view.menu; import android.widget.imageview; public class MainActivity extends Activity protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); ImageView button = (ImageView) findviewbyid(r.id.image); InputStream resource = getresources().openrawresource(r.drawable.dog); Bitmap bitmap = BitmapFactory.decodeStream(resource); button.setbackground(new MyRoundCornerDrawable(bitmap));

بسم اهلل الرحمن الرحیم

بسم اهلل الرحمن الرحیم آموزشگاه تحلیل داده تخصصی ترین مرکز برنامه نویسی و دیتابیس در ایران در آموزش Intent اندروید (قسمت سوم ( مدرس : مهندس افشین رفوآ آدرس آموزشگاه : تهران - خيابان شريعتی - باال تر از