Dive Into Android. 2D-графика

Transcript

1. В глубь платформы Android Учебный курс. 1 семестр 2012 года.
2. Тема 6 2D Графика.
3. Содержание • Drawables • Работа с Bitmap • Анимации
4. Содержание Drawables Работа с Bitmap Анимации
5. 5 Drawables • Drawable - абстракция того, что может быть нарисовано • Пакет android.graphics.drawable: Drawable, BitmapDrawable, ShapeDrawable, PictureDrawable... • Ресуры в папке res/drawable: png, jpeg, gif и xml
6. 6 Работа с Drawable ImageView i = new ImageView(this); i.setImageResource(R.drawable.my_image); i.setAdjustViewBounds(true); i.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); ... <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:tint="#55ff0000" android:src="@drawable/my_image"/> Resources res = mContext.getResources(); Drawable myImage = res.getDrawable(R.drawable.my_image); • В коде: • В xml:
7. 7 Замечание • Каждый уникальный ресурс в проекте может поддерживать только одно состояние Resources res = mContext.getResources(); Drawable d1 = res.getDrawable(R.drawable.my_image); Drawable d2 = res.getDrawable(R.drawable.my_image); d2.setAlpha(0); // повлияет на d1 • В подобном случае не изменяйте Drawable напрямую, а используйте tween-анимацию
8. 8 Bitmap Drawable • Создается автоматически для каждой картинки (png, jpeg, gif) в res/drawable • Возможность создать самостоятельно на основе xml: <?xml version="1.0" encoding="utf-8"?> <bitmap xmlns:android="http://schemas.android.com/apk/res/android" android:src="@[package:]drawable/drawable_resource" android:antialias=["true" | "false"] android:dither=["true" | "false"] android:filter=["true" | "false"] android:gravity=["top" ...] android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />
9. 9 Shape Drawable • Описание геометрической фигуры • Форма, контур, цвет, градиент <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android= "http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="#00FFFF" android:endColor="#2D75FF" android:angle="45"/> <padding android:left="7dp" android:top="7dp" android:right="7dp" android:bottom="7dp" /> <corners android:radius="8dp" /> </shape>
10. 10 State List Drawable • Drawable, зависимый от состояния <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize=["true" | "false"] android:dither=["true" | "false"] android:variablePadding=["true" | "false"] > <item android:drawable="@[package:]drawable/drawable_resource" android:state_pressed=["true" | "false"] android:state_focused=["true" | "false"] android:state_selected=["true" | "false"] android:state_checkable=["true" | "false"] android:state_checked=["true" | "false"] android:state_enabled=["true" | "false"] android:state_window_focused=["true" | "false"] /> </selector>
11. 11 9-patch Drawable • Масштабируемая графика • Утилита draw9patch растяжение по горизонтали растяжение по вертикали указание области контента
12. 12 Level List Drawable • Drawable в зависимости от уровня (числа) • (battery_charge_fill.xml): <?xml version="1.0" encoding="utf-8"?> <level-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:maxLevel="4" android:drawable="@android:drawable/stat_sys_battery_0" /> <item android:maxLevel="14" android:drawable="@android:drawable/stat_sys_battery_10" /> ... <item android:maxLevel="100" android:drawable="@android:drawable/stat_sys_battery_100" /> </level-list> ...
13. 13 Animation Drawable • Покадровая анимация: • Запуск в коде: <animation-list android:id="selected" android:oneshot="false"> <item android:drawable="@drawable/wheel0" android:duration="50" /> <item android:drawable="@drawable/wheel1" android:duration="50" /> <item android:drawable="@drawable/wheel2" android:duration="50" /> <item android:drawable="@drawable/wheel3" android:duration="50" /> <item android:drawable="@drawable/wheel4" android:duration="50" /> <item android:drawable="@drawable/wheel5" android:duration="50" /> </animation-list> ImageView img = (ImageView)findViewById(R.id.spinning_wheel_image); img.setBackgroundResource(R.drawable.spin_animation); AnimationDrawable frameAnimation = (AnimationDrawable) img.getBackground(); frameAnimation.start()
14. 14 Transition Drawable • Переходная анимация между картинками: <?xml version="1.0" encoding="utf-8"?> <transition xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/on" /> <item android:drawable="@drawable/off" /> </transition> <ImageButton android:id="@+id/button" android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/transition" /> • Запуск в коде: ImageButton button = (ImageButton) findViewById(R.id.button); TransitionDrawable drawable = (TransitionDrawable) button.getDrawable(); drawable.startTransition(500);
15. Demo
16. 16 Другие Drawables • http://developer.android.com/guide/topics/ resources/drawable-resource.htm
17. Содержание Drawables Работа с Bitmap Анимации
18. 18 Bitmap • Bitmap - класс, соответствующий изображению • BitmapFactory - фабрика • BitmapFactory.Options - опции создания Bitmap • Объекты Bitmap очень тяжеловесны! • Не используйте Bitmap неоправданно большого размера во избежании OutOfMemoryException
19. Содержание Drawables Работа с Bitmap Анимации
20. 20 Анимации • Покадровые анимации создаются с помощью AnimationDrawable • Tween-анимация — набор преобразований (альфа, масштабирование, поворот, перенос), применимый к одному изображению • Tween-анимации являются ресурсом и должны быть размещены в res/anim/* .xml • Interpolator — описание скорости анимации в зависимости от времени
21. 21 Tween-Анимация <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@[package:]anim/interpolator_resource" android:shareInterpolator=["true" | "false"] > <alpha android:fromAlpha="float" android:toAlpha="float" android:fromAlpha="float"/> <scale android:fromXScale="float" android:toXScale="float" android:fromYScale="float" android:toYScale="float" android:pivotX="float" android:pivotY="float" /> <translate android:fromXDelta="float" android:toXDelta="float" android:fromYDelta="float" android:toYDelta="float" /> <rotate android:fromDegrees="float" android:toDegrees="float" android:pivotX="float" android:pivotY="float" /> <set>...</set> </set>
22. Demo
23. © Алексей Коровянский http://about.me/korovyansk korovyansk@gmail.com В глубь платформы Android http://sites.google.com/site/diveintoandroid