android user interface
TRANSCRIPT
Android User Interface (UI)
Instrutor: Fernando Ghisi
Programação para Dispositivos Móveis
18 de Março de 2014
Tópicos
● Plataforma Android● UI do Android● Classes de atividade (Activities)
– AndroidManifest.xml
– Ciclo de vida das Activities
● Considerações finais e dúvidas
Plataforma Android
● Desenvolvida pela Google● Sistema operacional móvel mais popular do
mundo– Presente em mais de 1 bilhão de smartphones e tablets.
– Embarcado em 78,6% dos dispositivos em 2013.(IDC, "Worldwide Quarterly Mobile Phone Tracker", 2014)
http://www.android.com
http://developer.android.com
Google Android Building 44
UI do Android
● Principais componentes:– View
– ViewGroups, AdapterViews e Layouts
– Menus e ActionBar
– Dialogs
● View– Base dos componentes de UI.– Representa um espaço retangular na tela.
http://developer.android.com/reference/android/view/View.html
Views pré-definidas
● Button● ToggleButton● CheckBox● TextView● RatingBar● AutoCompleteTextView● …
*São componentes visuais configuráveis!
ViewGroup
● Uma View invisível que contém outras Views
● Usada para agrupar e organizar um conjunto de Views.
● As views são organizadas em forma de árvore.
● ViewGroup é a classe base para os layouts.
ViewGroups pré-definidos● RadioGroup● TimePicker● DatePicker● WebView● MapView● ListView● Gallery● GridView● Spinner
Layout
● Um ViewGroup genérico que define uma estrutura de apresentação para as Views que ele contém.
● Exemplos:– LinearLayout
– RelativeLayout
– TableLayout
– GridView*
http://developer.android.com/guide/topics/ui/declaring-layout.html
AdapterViews
● Views que têm seus filhos gerencidos por um Adapter*.– O Adapter gerencia os dados e provê visualizações
desses dados para o Adapter View.
– O AdapterView apresenta as visualizações de dados.
http://developer.android.com/reference/android/widget/AdapterView.html
http://developer.android.com/reference/android/widget/Adapter.html
AdapterViews pré-definidos
● ListView, Spinner, Gallery e GridView.
*ListView apresenta uma lista, filtrável e com scroll, de itens selecionáveis; itens são gerenciados por um ListAdapter.
Menus e ActionBar
● Menus: Options, Context e Submenu.– Activities podem adicionar itens e tratar seleção.
● ActionBar:– Similar à barra superior das aplicações desktop.
– Acesso rápido às operações comuns no app.
– Navegação consistente nos diferentes apps.
http://developer.android.com/design/patterns/actionbar.html
Dialogs
● Sub-janelas independentes, utilizadas pelas Activities para se comunicarem com o usuário.
● Exemplos:– AlertDialog
– ProgressDialog
– DatePickerDialog
– TimePickerDialog
View
● Duas responsabilidades principais:
– Se desenhar;– Gerenciar eventos.
Renderização da UI
● Measure– Dimensões de cada View
● Layout– Posicionamento de cada View
● Draw– Desenho de cada View
Eventos na View
● Interação do usuário– Touch
– Keyboard; Trackball; D-pad...
● Controle do sistema– Mudanças no “ciclo de vida”
*Observação: Existem outras formas de entrada não associadas diretamente a eventos nas telas - por exemplo, serviços de sensores registrados na Activity.
View Listener Interfaces
● OnClickListener.onClick();● OnLongClickListener.onLongClick();● OnFocusChangeListener.onFocusChange();● OnKeyListener.onKey();
final Button button = (Button) findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
@Overridepublic void onClick(View v) {
button.setText("Got Pressed:" + ++count); }});
Activities● Uma Activity representa uma atividade que o usuário
pode fazer.
● Quase sempre existe interação com o usuário, através de uma View associada à Activity.
● Todo aplicativo Android começa por uma Activity.
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package=“course.labs.activitylab" android:versionCode=“1" android:versionName="1.0" >
<uses-sdk android:minSdkVersion=“8" android:targetSdkVersion="17" />
<application android:allowBackup=“true” android:icon="@drawable/ic_launcher” android:label="@string/app_name” android:theme="@style/AppTheme” >
<activity android:name=“course.labs.activitylab.ActivityOne" android:label="@string/app_name" >
<intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity>
<activity android:name="course.labs.activitylab.ActivityTwo" android:label="@string/title_activity_activity_two" > </activity> </application></manifest>
Activity
● Cria uma janela, na qual o desenvolvedor pode colocar seus elementos de interface (GUI) através do método "setContentView(View)".
● A forma como as atividades são gerenciadas é parte fundamental do modelo de aplicação da plataforma Android.
public class MainActivity extends Activity {
@Overrideprotected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);
}
Activities Stack
● As Activities são organizadas em forma de pilha.
– Apenas uma pode estar no topo (“foreground”);
– As outras ficam abaixo (“background”).
Estados da Activity
a) Rodando ou ativa– Em foco, no topo da pilha.
b) Pausada– Ainda visível, mas sem foco (com outra Activity transparente
na frente ou que não ocupe toda a tela).
c) Parada– Não visível, com outra Activity na frente.
Ciclo de vida da Activity
Relembrando...
● Plataforma Android
● UI do Android– View
– ViewGroup e Layout
– AdapterView
– Menus e ActionBar
– Dialogs
– Renderização e eventos na View.
● Classes de atividade (Activities)– AndroidManifest.xml
– Ciclo de vida das Activities
