Custom Views - O guia definitivo
-
Upload
christiane-morais-silva -
Category
Technology
-
view
151 -
download
4
Transcript of Custom Views - O guia definitivo
![Page 1: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/1.jpg)
CUSTOM VIEWS - O GUIA DEFINITIVOou quase isso …
![Page 2: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/2.jpg)
Christiane SilvaDev Android @ Concrete Solutions
GDG SP Organizer
Canhota
Nerd
Café? Quero! Cerveja? Também!
E sim sou eu na foto do site …
![Page 3: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/3.jpg)
O QUE VAMOS VER?
![Page 4: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/4.jpg)
O QUE VAMOS VER
O que são Custom Views?
Pra que servem?
Como funcionam… Hoje no Globo Reporter!
![Page 5: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/5.jpg)
O QUE SÃO CUSTOM VIEWS?Sabe quando o designer pede algo que o Android não te fornece pronto? Pois, é …
![Page 6: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/6.jpg)
O QUE SÃO CUSTOM VIEWS
Custom view é todo componente criado a partir de uma view do Android:
Você pode estender um Button, TextView, ImageView …
Ao invés de estender um LinearLayout (por exemplo) , o ideal é fazer a partir do ViewGroup.
![Page 7: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/7.jpg)
![Page 8: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/8.jpg)
<chris.poccustomview.ContactBadgeView
android:id="@+id/contact_badge"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginRight="20dp"
android:background="@drawable/bg_circle"
android:paddingLeft="25dp"
android:paddingTop="10dp"
app:imageProfile="@drawable/ic_face_default"
app:initials="CS"
app:initialsSize="40sp" />
![Page 9: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/9.jpg)
CICLO DE VIDA DE UMA VIEW
Entenda o ciclo de vida da view.
Você pode trabalhar nos métodos:
onMeasure()
onLayot()
onDraw()
![Page 10: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/10.jpg)
VANTAGENS x DESVANTAGENSVantagens:
Você pode implementar em seu layout igual qualquer componente do Android
Você só vai codar essa view uma única vez.
Desvantagens
Leva um pouco mais de tempo pra desenvolver (a custom view)
O código pode ficar um pouco mais difícil de entender
![Page 11: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/11.jpg)
Veja 5 dicas para criar custom views!
A 3 você nem imagina!
![Page 12: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/12.jpg)
Dica 1 Não reinvente a roda
Não crie custom views para aquilo que pode ser feito com styles.
![Page 13: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/13.jpg)
Dica 2 isInEditMode()
Vai economizar muitas noites em claros, tempo de build, remédio pra dor de cabeça…
![Page 14: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/14.jpg)
Dica 3 Salve estado
Isso deveria ser obrigatório em toda e qualquer View
![Page 15: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/15.jpg)
private void init(AttributeSet attrs, int defStyle) {
setSaveEnabled(true);
// ...
}
protected Parcelable onSaveInstanceState() {
Bundle bundle = new Bundle();
// save stuffs
return bundle;
}
protected void onRestoreInstanceState(Parcelable state) {
// restore stuffs
super.onRestoreInstanceState(state);
}
![Page 16: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/16.jpg)
Dica 4 Implemente onMeasure()Também vai salvar suas noites em claro ☺
No onMeasure(), você pode configurar como funciona o dimensionamento da view e o quão grande ela pode ser.
![Page 17: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/17.jpg)
onMeasure() {
int minWidth = paddingLeft + paddingRight + getSuggestedMinimumWidth();
int width = resolveSizeAndState(minWidth, widthMeasureSpec, 1);
int minHeight = MeasureSpec.getSize(width) + paddingBottom + paddingTop;
int height = resolveSizeAndState(minHeight, heightMeasureSpec, 0);
setMeasuredDimension(width, height);
}
![Page 18: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/18.jpg)
Dica 5 invalidate()
Quando alguma alteração tiver que ser refletida no layout, esse é o método responsável por fazer isso.
Use-o com cuidado 😉
![Page 19: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/19.jpg)
PARA ENTENDER MAIS …
Android Developer - Views: https://developer.android.com/reference/android/view/View.html
Android Developer Training - Creating Custom Views: https://developer.android.com/training/custom-views/index.html
Huyen Tue Dao - Droidcon NYC 2016 - Measure, Layout, Draw, Repeat: Custom Views and ViewGroups: https://youtu.be/4NNmMO8Aykw
Projeto exemplo: https://github.com/christianemorais/POCCustomView
![Page 20: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/20.jpg)
DUVIDAS?
![Page 21: Custom Views - O guia definitivo](https://reader031.fdocument.pub/reader031/viewer/2022020301/5a66183a7f8b9a9e4a8b48f7/html5/thumbnails/21.jpg)