Atomic Design Android

Transcript

1. Atomic Design
2. Hello! Soy Cristian Gomez Dev en PagerInc. Para mas contenido nerd @iyubinest 2
3. Que es Atomic Design? 0
4. Stages 4 1 A tom os Unidades básicas de trabajo 2 M oleculas O bjetos com plejos basados en átom os 3 O rganism os Unidades com plejas 1 Tem plates C onjunto de elem entos organizados entorno a un contexto 1 Pages C ontexto funcional
5. Unidades de UI para android 5 Activities/ Fragment Views/ Custom Views layouts /includes Estilos
6. Equivalen a... 6 Informacion Que se muestra Estructura Como se personaliza
7. Views 7
8. Estilos 8
9. Layouts 9
10. Pros ￮ Orden ￮ Extensibilidad ￮ Configuracion 10
11. Contras ￮ Compromiso ￮ Curva de aprendizaje (tiempo) ￮ Es facil perder el hilo ￮ Requiere un diseño basado en componentes, no en pantallas. ￮ Siempre hay excepciones (hacks) 11
12. Atomos 1
13. 13 • Componentes de android estilizados • Componentes propios de UI estilizados • Estilos en general ◦ Fuentes ◦ Campos de formularios ◦ Botones ◦ Imagenes
14. 14 <style name="Atoms"/> <style name="Atoms.Font"> <item name="android:typeface">sans</item> <item name="android:fontFamily" tools:targetApi="jelly_bean">sans-serif</item> </style> <style name="Atoms.Font.Regular" parent="Atoms.Font"> <item name="android:textStyle">normal</item> </style> <style name="Atoms.Font.RegularItalic" parent="Atoms.Font"> <item name="android:textStyle">italic</item> </style> <style name="Atoms.Font.RegularBold" parent="Atoms.Font"> <item name="android:textStyle">bold</item> </style> <style name="Atoms.Font.Secondary"> <item name="android:typeface">serif</item> ... </style> <style name="Atoms.Font.SecondaryItalic" parent="Atoms.Font.Secondary"> <item name="android:textStyle">italic</item> </style> <style name="Atoms.Font.SecondaryBold" parent="Atoms.Font.Secondary"> <item name="android:textStyle">bold</item> </style>
15. 15 <style name="Atoms.Button.Primary"/> <style name="Atoms.Button.Secondary"/> <style name="Atoms.Form"/> <style name="Atoms.Form.Field"/> <style name="Atoms.Form.Area"/> <style name="Atoms.Regular"/> <style name="Atoms.OrangeTitle"/> <style name="Atoms.Subtitle"/> <style name="Atoms.RegularText" parent="Atoms.Font.Regular"/> <style name="Atoms.Button" parent="Atoms.Font.Regular"> <item name="android:padding">@dimen/pager_dimen_regular</item> <item name="android:gravity">center</item> ... </style> <style name="Atoms.RadioButton" parent="Atoms.Font.Regular"/> <style name="Atoms.RoundedButton" parent="Atoms.Button"> <item name="android:background">@drawable/pager_rounded_button_background</item> </style> <style name="Atoms.Wrapper"> <item name="android:layout_marginLeft">@dimen/pager_dimen_regular</item> ... </style>
16. Moléculas y Organismos 2
17. 17 • Molecula -> Varios Atomos • Organismos -> Varias moléculas • Organismo -> Muchos átomos • Numero vs Contexto vs Tipo de Elemento • Custom UI Component / includes
18. 18 public class MessagesView extends RecyclerView { private final LinearLayoutManager layout; private final Adapter adapter = new Adapter(); public MessagesView(Context context) { this(context, null); } public MessagesView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); setHasFixedSize(false); layout = new LinearLayoutManager(getContext(), LinearLayoutManager.VERTICAL, true); setLayoutManager(layout); setAdapter(adapter); SimpleItemAnimator animator = new DefaultItemAnimator(); animator.setSupportsChangeAnimations(false); setItemAnimator(animator); } public void show(Message message) { adapter.add(message); if (layout.findFirstVisibleItemPosition() == 0) { layout.scrollToPosition(0); } } public void show(List<Message> messages) {adapter.add(messages);} public void addWidget(Widget widget) { adapter.add(widget); } private static class Adapter extends RecyclerView.Adapter<Widget.WidgetHolder> { ... } }
19. 19 public class ChatView extends RelativeLayout { public interface Listener { void onEvent(Event message); } private final MessagesView messagesView; private final PublishSubject<Event> subject = PublishSubject.create(); private Listener listener; public ChatView(Context context) { this(context, null); } public ChatView(Context context, AttributeSet attrs) { super(context, attrs); View.inflate(context, R.layout.pager_chat_view, this); messagesView = findViewById(R.id.pager_chat_messages); } @Override protected void onAttachedToWindow() { super.onAttachedToWindow(); } … }
20. Plantillas 3
21. 21 • layout -> plantilla • independiente de los datos • Define la estructura • No define el cómo se estiliza • Disposición de los elementos • Usa ids
22. 22 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/widget_image_received" style="@style/Chat.ImageReceived.Wrapper" android:layout_width="match_parent" android:layout_height="wrap_content" > <ImageView android:id="@+id/widget_image_received_avatar" style="@style/Chat.ImageReceived.Avatar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/widget_image_received_background" /> <FrameLayout android:id="@+id/widget_image_received_background" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toEndOf="@+id/widget_image_received_avatar" android:layout_toRightOf="@+id/widget_image_received_avatar" > <com.pager.design.ShapeImageView android:id="@+id/widget_image_received_image" style="@style/Chat.ImageReceived.Image" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="Message example" /> <TextView android:id="@+id/widget_image_received_date" style="@style/Chat.ImageReceived.Date" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" tools:text="03:19am" /> </FrameLayout> <TextView android:id="@+id/widget_image_received_username" style="@style/Chat.ImageReceived.Username" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/widget_image_received_background" android:layout_toEndOf="@+id/widget_image_received_avatar" android:layout_toRightOf="@+id/widget_image_received_avatar" tools:text="" /> </RelativeLayout>
23. Paginas 4
24. 24 • Activities/Fragments/Custom UIs/etc • Aquellas que le dan contexto a los templates
25. Consejos ￮ Primero identifica los átomos ￮ Átomos = Componentes más básicos ￮ Siempre definir las paletas de colores ￮ No harcodear textos, colores, nada ￮ Dividir primero en layouts y usar includes, luego transformar a custom views para no delegar el uso de los ids 25
26. Consejos ￮ Dejar en los layouts/templates la estructura, ids y textos ￮ Delegar los datos a la capa de código (Pages) ￮ Generar una documentacion ￮ Guardar simetría entre ids y objetos 26
27. 27 Gracias! Preguntas? encuentrame ￮ @iyubinest ￮ cristianfgr@gmail.com