Android INTERFACE GRÁFICA & LAYOUT. Prof. Dr. Joaquim assunção.

Transcrição

1 Android INTERFACE GRÁFICA & LAYOUT Prof. Dr. Joaquim assunção.

2 Graphical User Interface (GUI) Quando o Android estava sendo inventado, seus designers enfrentaram muitas escolhas cujo resultado seria determinar o sucesso ou o fracasso de seu projeto. Eles haviam rejeitado todos os outros sistemas operacionais de smartphones, tanto de código fechado e aberto. Eles criaram a sua própria, sobre o kernel do Linux... A interface foi uma questão a ser resolvida. Opções a serem implementadas: JavaME, Swing, SWT, ou nenhuma destas.

3 Graphical User Interface (GUI) A opção final, e a escolhida, era começar uma nova interface. Os designers do Android construíram o seu próprio kit de ferramentas de interface gráfica, projetado especificamente para smartphones. Mas eles usaram muitas das boas ideias dos outros kits de ferramentas, e aprenderam com os erros que haviam sido feitas ao longo do caminho.

4 Graphical User Interface (GUI) A interface do aplicativo é tudo o que o usuário pode ver e interagir. O Android oferece uma variedade de componentes préconstruídos, tais como objetos de layout estruturados e controles de interface do usuário que permitem criar a interface gráfica do usuário para seu aplicativo. O Android também fornece outros módulos de interface do usuário para interfaces especiais, tais como caixas de diálogo, notificações e menus.

5 Graphical User Interface (GUI) Existe um padrão.

6 Graphical User Interface (GUI) Problema Muitos dos desenvolvedores, mesmo os bons, são muito ruins em design de interface. Solução...

7 Layout Usados para organizar os componentes gráficos na tela do dispositivo.

8 Layout

9 Layout - Linear <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingleft="16dp" android:paddingright="16dp" android:orientation="vertical" > <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/to" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/subject" /> <EditText android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:gravity="top" android:hint="@string/message" /> <Button android:layout_width="100dp" android:layout_height="wrap_content" android:layout_gravity="right" android:text="@string/send" /> </LinearLayout> Reproduza este Layout

10 Layout - Linear LinearLayout é um layout que alinha todas os descendentes em uma única direção, vertical ou horizontalmente. Você pode especificar a direção do layout com o atributo android:orientation.

11 Layout - Linear Todos os filhos de um LinearLayout são empilhados um após o outro, de modo que uma lista vertical terá apenas uma criança por linha, não importa quão grande eles são, e uma lista horizontal será apenas uma linha de altura. A LinearLayout respeita margens entre descendentes e a gravidade (direita, centro ou alinhamento à esquerda) de cada descendentes (children... Descendentes/crianças/filhos).

12 Layout - Relative Exibe os descendentes em posições relativas. A posição de cada ponto de vista pode ser especificado como em relação aos elementos irmãos (tais como para a esquerda, de ou abaixo de outro ponto de vista) ou em posições relativas para a área de pai RelativeLayout (tal como alinhada ao fundo, à esquerda ou ao centro).

13 Layout - Relative Permite especificar a posição dos descendentes em relação à vista principal ou para o outro (especificado pelo ID). Pode-se alinhar dois elementos de borda direita, ou fazer um abaixo de outro, centrada na tela, centrada esquerda, e assim por diante. Por padrão, todos os pontos de vista da criança são desenhados na parte superior esquerda do layout, portanto, você deve definir a posição de cada vista usando as várias propriedades de layout disponíveis a partir RelativeLayout.LayoutParams.

14 Layout - Relative android:layout_alignparenttop Se "true", faz a borda superior desta visão igual a borda superior do pai. android:layout_centervertical Se "true", centraliza verticalmente com seu pai. android:layout_below Coloca a borda superior em baixo de uma determinada borda pelo ID. android:layout_torightof Coloca a borda esquerda a direita de uma borda pelo ID.

15 Layout - Relative <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingleft="16dp" android:paddingright="16dp" > <EditText android:id="@+id/name" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/reminder" /> <Spinner android:id="@+id/dates" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_below="@id/name" android:layout_alignparentleft="true" android:layout_toleftof="@+id/times" /> <Spinner android:id="@id/times" android:layout_width="96dp" android:layout_height="wrap_content" android:layout_below="@id/name" android:layout_alignparentright="true" /> <Button android:layout_width="96dp" android:layout_height="wrap_content" android:layout_below="@id/times" android:layout_alignparentright="true" android:text="@string/done" /> </RelativeLayout>

16 Layout - List Exibe uma lista de itens de rolagem. Os itens da lista são automaticamente inserido na lista usando um adaptador que puxa conteúdo de uma fonte, como uma consulta de matriz ou banco de dados e converte cada item resultar em uma visão que é colocado na lista.

17 Layout - Grid Exibe itens em uma grade bidimensional, de rolagem. Os itens de grade são inseridas automaticamente ao layout usando um ListAdapter.

18 Layout Grid - Exemplo 1) Iniciar um novo projeto chamado HelloGridView. 2) Encontre algumas fotos que você gostaria de usar, ou baixe as imagens do professor. Salve os arquivos de imagem para o diretório do projeto res / drawable.

19 Layout Grid - Exemplo res/layout/main.xml <?xml version="1.0" encoding="utf-8"?> <GridView xmlns:android=" android:id="@+id/gridview" android:layout_width="match_parent" android:layout_height="match_parent" android:columnwidth="90dp" android:numcolumns="auto_fit" android:verticalspacing="10dp" android:horizontalspacing="10dp" android:stretchmode="columnwidth" android:gravity="center" />

20 Layout Grid - Exemplo HelloGridView.java public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.main); GridView gridview = (GridView) findviewbyid(r.id.gridview); gridview.setadapter(new ImageAdapter(this)); } gridview.setonitemclicklistener(new OnItemClickListener() { public void onitemclick(adapterview<?> parent, View v, int position, long id) { Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show(); } });

21 Layout Grid - Exemplo Após o layout main.xml estar definido para a exibição de conteúdo, o GridView é capturado a partir do layout com findviewbyid (int). O método setadapter(), em seguida, define um adaptador personalizado (ImageAdapter) como a fonte de todos os itens a serem exibidos na grade. O ImageAdapter é criado no passo seguinte. Para fazer alguma coisa quando um item na grade é clicado, o método setonitemclicklistener() é passado um novo AdapterView.OnItemClickListener. Esta instância anônimo define o método onitemclick() callback para mostrar um brinde que exibe a posição de índice (baseado em zero) do item selecionado (em um cenário do mundo real, a posição poderia ser usado para obter a imagem de tamanho completo para alguma outra tarefa ).

22 Layout Grid - Exemplo public class ImageAdapter extends BaseAdapter { private Context mcontext; public ImageAdapter(Context c) { mcontext = c; } public int getcount() { return mthumbids.length; } public Object getitem(int position) { return null; } public long getitemid(int position) { return 0; }

23 Layout Grid - Exemplo // create a new ImageView for each item referenced by the Adapter public View getview(int position, View convertview, ViewGroup parent) { ImageView imageview; if (convertview == null) { // if it's not recycled, initialize some attributes imageview = new ImageView(mContext); imageview.setlayoutparams(new GridView.LayoutParams(85, 85)); imageview.setscaletype(imageview.scaletype.center_crop); imageview.setpadding(8, 8, 8, 8); } else { imageview = (ImageView) convertview; } } imageview.setimageresource(mthumbids[position]); return imageview; } // references to our images private Integer[] mthumbids = { R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7, R.drawable.sample_0, R.drawable.sample_1, R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7, R.drawable.sample_0, R.drawable.sample_1, R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7 };

24 Layout Grid - Exemplo Tente executar o exemplo. Dica, o Android studio pode ser o seu melhor amigo (Avisos, resolução automática etc.)

25 Widgets

26 Widgets <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="yes" android:checked="false" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="no" android:checked="false" /> O que será a saída?

27 Widgets <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="yes" android:checked="false" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="no" android:checked="false" android:layout_gravity="left center_vertical" /> E agora?

28 Widgets

29 Containers

30 Widgets <RadioGroup android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center_horizontal top" android:orientation="horizontal" <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="yes" android:checked="false" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="no" android:checked="false" /> </RadioGroup>

31 Date & Time

32 Date & Time <TextClock android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" /> <CalendarView android:layout_width="match_parent" android:layout_height="match_parent" android:datetextappearance="#7a5b5b" />

33 Boas práticas Uma maneira de proporcionar o acesso a toda a gama de telas de um aplicativo é expor uma navegação hierárquica. Por exemplo, a navegação descendente, permite aos usuários descer uma hierarquia de tela para uma tela descendente. Neste mesmo conceito, a navegação lateral, permite aos usuários acessar telas irmãs.

34 Boas práticas - Navegação descendente e lateral. Existem dois tipos de telas de irmãs: relacionadas a coleção, e relacionadas a seção. Telas relacionadas a coleção representam itens individuais na coleção representada por um pai....

35 Boas práticas - Navegação descendente e lateral. Existem dois tipos de telas de irmãs: relacionadas a coleção, e relacionadas a seção.... Telas relacionadas a Seção representam diferentes seções de informações sobre um pai. Por exemplo, uma seção pode mostrar informações textuais sobre um objeto enquanto outro pode fornecer um mapa da localização geográfica do objeto. O número de telas relacionadas com a seção para um dado pai é geralmente pequena.

36 Botões, tabs, Horizontal Paging, etc.

37 Grids, listas, etc.

38 Tarefa...Ver documento descrevendo a tarefa.