+ - 0:00:00
Notes for current slide
Notes for next slide

ItbCalendar

Mateu Yábar

1 / 25

Objectiu final

2 / 25

ConstraintLayout

  • Chains
  • Weight

https://developer.android.com/training/constraint-layout

3 / 25

ImageView - scaleType

4 / 25

Android Theme

  • Configuració de l'estil de visualització del elements
  • manifest.xml
<application
    android:theme="@style/AppTheme">
</application>
5 / 25

Android Theme

  • styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorPrimary</item>
</style>
  • Theme.AppCompat
  • Theme.AppCompat.Light.NoActionBar
6 / 25

Material design

Material Design is a visual language that synthesizes the classic principles of good design with the innovation of technology and science.

7 / 25

Material design - Android

implementation 'com.google.android.material:material:1.0.0'
  • Styles.xml
    • Theme.MaterialComponents.*
      • Theme.MaterialComponents.Light.NoActionBar
8 / 25

Material design - Button

<com.google.android.material.button.MaterialButton
    android:id="@+id/material_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_label_enabled"/>
9 / 25

Projecte City Quiz

  • Fes el projecte City Quiz
10 / 25

LiveData

11 / 25

Programació no reactiva

  • Llistat de contactes amb botó de crear
Fragment->ViewModel: getContacts() ViewModel-->>Fragment: List Note right of ViewModel: L'usuari afegeix un contacte Fragment->ViewModel: addContact(contact) Fragment->ViewModel: getContacts() ViewModel-->>Fragment: List
12 / 25

Problema Threads

Fragment->ViewModel: getContacts() ViewModel->Repository: getContacts() Note right of Repository: L'operació pot tardar uns segons Repository-->>ViewModel: List ViewModel-->>Fragment: List
13 / 25

Com es pinta un GUI

  • (1 s/60 fps = 16 ms per frame)
View->View: repaint() Note right of View: Actualització del frame View->View: repaint() View->View: repaint() View->View: repaint() View->View: repaint()
14 / 25

GUI sense Threads

  • Pantalla queda 'congelada'
View->View: repaint() Note right of View: Actualització del frame View->RestApi: getContacts() Note right of RestApi: L'operació tarda més de 16ms RestApi-->>View: List View->View: repaint() View->View: repaint()
15 / 25

GUI amb Threads

ViewThread->ViewThread: repaint() ViewThread-->DataThread: loadContacts() Note right of DataThread: L'operació tarda però \ns'executa en un altre thread ViewThread->ViewThread: repaint() ViewThread->ViewThread: repaint() DataThread-->>ViewThread: dataAvailable() ViewThread->DataThread: getContacts() Note right of DataThread: L'operació és molt ràpida DataThread-->>ViewThread: List ViewThread->ViewThread: repaint()
16 / 25

GUI amb threads

  • Com avisem que l'operació ja acabat?
  • Que passa si la pantalla que havia de mostrar les dades està tancada?
  • ...
17 / 25

Problema editor 'desconegut'

Fragment->ViewModel: getContacts() ViewModel-->>Fragment: List< Contact> Note right of ViewModel: L'usuari afegeix un contacte Fragment2->ViewModel: addContact(contact) Note right of ViewModel: El Fragment no sap que s'ha \nafegit un contacte\n i no s'actualitza
18 / 25

Live Data - Threads

Fragment->ViewModel: getContacts() ViewModel-->>Fragment: LiveData < List < Contact>> Fragment-->LiveData: observe() Note right of LiveData: L'operació tarda, \nperò, no bloqueja LiveData-->>Fragment: onChanged();
19 / 25

Live Data - editor 'desconegut'

Fragment->ViewModel: getContacts() ViewModel-->>Fragment: LiveData< List< Contact>> Fragment-->LiveData: observe() LiveData-->>Fragment: onChanged(); Fragment2->ViewModel: addContact(contact) LiveData-->>Fragment: onChanged();
20 / 25

Live Data

def lifecycle_version = "2.1.0"
// ViewModel and LiveData
implementation "androidx.lifecycle:lifecycle-extensions:$lifecycle_version"
implementation "androidx.lifecycle:lifecycle-common-java8:$lifecycle_version"
21 / 25

LiveData

public void observe(LifecycleOwner owner, Observer<? super T> observer);
/* (...) */
  • Un fragment o una Activity són LifecycleOwners
22 / 25

Observer

public interface Observer<T> {
    void onChanged(T t);
}
23 / 25

MutableLiveData

public void postValue(T value) {
    super.postValue(value);
}
24 / 25

LiveData - Exemple

MutableLiveDataSample.zip

25 / 25

Objectiu final

2 / 25
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
Esc Back to slideshow