[FLISOL] Embelezando o Android

Palestra sobre exemplos de técnicas de programação de interface no Android apresentada no FLISOL Campinas 2013.

Transcript

1. eee19.com Embelezando o Android Douglas Drumond! drumond.douglas@gmail.com
2. eee19.com Importância de uma boa interface
3. eee19.com
4. eee19.com
5. eee19.com Design
6. eee19.com
7. eee19.com
8. eee19.com
9. eee19.com AVISO
10. eee19.com AVISO "With great power comes great responsibility"
11. eee19.com Aplicativo
12. eee19.com Formas
13. eee19.com XML
14. eee19.com <shape>
15. eee19.com android:shape=… • oval! • rectangle! • line! • ring
16. eee19.com
17. eee19.com rectangle <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
 <solid android:color="#0064A0" /> ! </shape>
18. eee19.com
19. eee19.com rectangle <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
 <solid android:color="#0064A0" /> <corners android:radius="15dp" /> ! </shape>
20. eee19.com
21. eee19.com button <selector xmlns:android="http://schemas.android.com/apk/ res/android" > <item android:state_pressed="true" android:drawable="@drawable/button_pressed" /> <item android:state_focused="true" android:drawable="@drawable/button_focused" /> <item android:drawable="@drawable/button_normal" /> </selector>
22. eee19.com res/drawable • button_focused! • button_normal! • button_pressed! • button
23. eee19.com activity_main.xml <Button android:id="@+id/view3" android:layout_width="120dp" android:layout_height="80dp" android:layout_marginTop="64dp" android:background="@drawable/ button" android:text="@string/button_label" 
 
 />
24. eee19.com activity_main.xml <Button android:id="@+id/view3" android:layout_width="120dp" android:layout_height="80dp" android:layout_marginTop="64dp" android:background="@drawable/ button" android:text="@string/button_label" android:textColor="@drawable/ button_caption" 
 />
25. eee19.com button_caption.xml <selector xmlns:android="http://schemas.android.com/apk/ res/android" > <item android:state_pressed="true" android:color="#0FF" /> <item android:state_focused="true" android:color="#FFF" /> <item android:color="#FFF" /> </selector>
26. eee19.com
27. eee19.com XML Bitmap <?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" | "bottom" | "left" | "right" | "center_vertical" | "fill_vertical" | "center_horizontal" | "fill_horizontal" | "center" | "fill" | "clip_vertical" | "clip_horizontal"] android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />
28. eee19.com XML Bitmap <?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" | "bottom" | "left" | "right" | "center_vertical" | "fill_vertical" | "center_horizontal" | "fill_horizontal" | "center" | "fill" | "clip_vertical" | "clip_horizontal"] android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />
29. eee19.com XML Bitmap repeat
30. eee19.com XML Bitmap mirror
31. eee19.com Custom font Typeface type = Typeface.createFromAsset(getAssets(), "fonts/Chalkboard.ttc");
32. eee19.com Icon font
33. eee19.com developer.android.com
34. eee19.com developer.android.com
35. eee19.com developer.android.com/ guide/topics/resources/ drawable-resource.html
36. eee19.com Agora um exemplo de componente
37. eee19.com SlidingMenu https://github.com/jfeinstein10/slidingmenu
38. eee19.com SlidingMenu • Foursquare! • Rdio! • 9GAG! • Wunderlist 2! • Falcon Pro! • …
39. eee19.com
40. eee19.com SlidingMenu public class SlidingExample extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setTitle(R.string.attach); // set the content view setContentView(R.layout.content); // configure the SlidingMenu SlidingMenu menu = new SlidingMenu(this); menu.setMode(SlidingMenu.LEFT); menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN); menu.setShadowWidthRes(R.dimen.shadow_width); menu.setShadowDrawable(R.drawable.shadow); menu.setBehindOffsetRes(R.dimen.slidingmenu_offset); menu.setFadeDegree(0.35f); menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT); menu.setMenu(R.layout.menu); } }
41. eee19.com SlidingMenu <com.slidingmenu.lib.SlidingMenu xmlns:sliding="http://schemas.android.com/apk/res-auto" android:id="@+id/slidingmenulayout" android:layout_width="fill_parent" android:layout_height="fill_parent" sliding:viewAbove="@layout/YOUR_ABOVE_VIEW" sliding:viewBehind="@layout/YOUR_BEHIND_BEHIND" sliding:touchModeAbove="margin|fullscreen" sliding:behindOffset="@dimen/YOUR_OFFSET" sliding:behindWidth="@dimen/YOUR_WIDTH" sliding:behindScrollScale="@dimen/YOUR_SCALE" sliding:shadowDrawable="@drawable/YOUR_SHADOW" sliding:shadowWidth="@dimen/YOUR_SHADOW_WIDTH" sliding:fadeEnabled="true|false" sliding:fadeDegree="float" sliding:selectorEnabled="true|false" sliding:selectorDrawable="@drawable/YOUR_SELECTOR"/>
42. eee19.com Referências
43. eee19.com www.androidviews.net
44. eee19.com appdevwiki.com
45. eee19.com Mais um pouco • Google Fonts! • Font Squirrel! • Fontello! • IcoMoon
46. eee19.com Obrigado • Twitter/ADN @douglasdrumond! • www.eee19.com! • gplus.to/douglasdrumond