Technè

* Este post foi redigido pela equipe C.E.S.A.R. Sorocaba

Como já visto em outro post, Padrões de Projeto em interfaces gráficas de aplicações Android são amplamente utilizadas para consistência e experiência de usuário.

Um dos tipos de padrões de projeto de Android que mais nos chamou atenção foi o Companion Widget. Ele consistente em criar um App Widget, isto é, uma aplicação mais resumida que eventualmente se comunica com a aplicação completa e fica localizada na tela inicial do aparelho, facilitando a interação rápida do usuário. Os widgets estão disponíveis no Android desde a versão 1.5 do SDK.

Para simular um desenvolvimento de um widget, iremos usar um cenário de uma aplicação de cliente para Twitter. É importante citar que iremos abordar apenas a construção da interface do mesmo, entrentanto iremos dar a orientação completa para o seu desenvolvimento.
Inicialmente, devemos criar uma classe que extende de “AppWidgetProvider”, para manipulação dos eventos .

Os principais métodos que podem ser implementados na sua classe são:
OnUpdate – Ocorre quando ocorre uma atualização no widget. A atualização acontece de tempo em tempo definindo seu intervalo de tempo pelo atributo updatePeriodMillis.
OnDeleted – Esse chamado é chamado toda vez que o Widget é deletado da tela.
OnEnabled – Ao criar a instância do widget esse método é chamado. Se o usuário adicionar o widget duas vezes, o método será chamado apenas a primeira vez.
OnDisabled – Se todas as instâncias do widget forem deletadas da tela, então esse método é chamado.
OnRecieve – Ele é chamado para toda mensagem de broadcast e antes de cada método de evento executado. Este método deve ser implementado, mesmo que apenas para chamar seu método base, pois o padrão da implementação da classe AppWidgetProvider filtra todas as mensagens de broadcast e chamadas de métodos de forma apropriada.

Com os métodos implementados o próximo passo é a configuração do manifesto da aplicação e a definição do layout.

Esse trecho declara o receiver da nossa classe do widget. Observe que existe uma referência a um metadado definido por um xml que possui a configuração do widget.

<receiver android:name=”ExampleAppWidgetProvider” >
<intent-filter>
<action android:name=”android.appwidget.action.APPWIDGET_UPDATE” />
</intent-filter>
<meta-data android:name=”android.appwidget.provider”
android:resource=”@xml/example_appwidget_info” />
</receiver>

No arquivo de configuração é necessário definir tamanhos minimos de altura e largura, intervalo de taxa de tempo de atualização e também o layout que será carregado. Veja abaixo um exemplo:

<appwidget-provider xmlns:android=”http://schemas.android.com/apk/res/android”
android:minWidth=”294dp”
android:minHeight=”72dp”
android:updatePeriodMillis=”86400000″
android:initialLayout=”@layout/example_appwidget”
android:configure=”com.example.android.ExampleAppWidgetConfigure” >
</appwidget-provider>

Por fim, temos que definir o layout de nossa aplicação. Para isso, basta definir o layout em um xml como fazemos para definir layouts de Activities. (Para desenhar seu layout você pode conferir o post que aborda o assunto de layouts)

Infelizmente, até este momento, é possível utilizar apenas as Views listadas abaixo. Mesmo as classes derivadas das seguintes não podem ser utilizadas, pois a interface deste tipo de aplicação é baseada em RemoteViews, que não suportam qualquer tipo de componente.
Veja as Views permitidas:
Layout:
FrameLayout
LinearLayout
RelativeLayout
Demais componentes:
AnalogClock
ButtonChronometer
ImageButton
ImageView
ProgressBar
TextView

Como este aplicativo é destinado a fazer interface com o Twitter, ele contém um View do tipo ImageButton, que irá chamar a Activity responsável por postar um tweet, uma ImageView que mostra o avatar do usuário no twitter, dois TextView que mostram o nome e o tweet do usuário, e por fim dois ImageButton que fazem a transição de tweet’s postados, como se fosse um mecanismo de paginação.

Esse exemplo mostra um cliente de twitter básico:

Note que a tela inicial do Android é dividida em células, sendo que seu tamanho padrão é de 4 x 4 células. Quando o aparelho está na posição vertical (retrato) o tamanho de cada célula em pixels é de 80 de largura por 100 de altura, e quando na horizontal (paisagem), é de 106 de largura, por 74 de altura. É normal vermos widgets que assumem as menores dimensões de célula possíveis, ou seja, 80 pixels de largura por 74 de altura. Veja mais sobre as dimensões padrão neste guia.

Portanto, para o posicionamento correto de um widget na tela, o seu layout deve ser dimensionado para caber em um número específico de células. No widget acima, o tamanho do widget é de 4 células de largura (colunas), por 3 de altura (linhas).

Veja exemplos de como a tela inicial se divide em células:

No exemplo abaixo, criamos um widget de 2 colunas por 1 linha, e o acrescentamos 4 vezes na tela:

Neste caso, iremos mostrar o xml de configuração…:
<?xml version=”1.0″ encoding=”utf-8″?>
<appwidget-provider
xmlns:android=”http://schemas.android.com/apk/res/android”
android:minWidth=”156dp”
android:minHeight=”74dp”
android:updatePeriodMillis=”0″
android:initialLayout=”@layout/appwidget” >
</appwidget-provider>

…e o de layout utilizados no widget:
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”156dp”
android:layout_height=”wrap_content”
android:background=”@drawable/back”
android:paddingLeft=”20dp”
android:gravity=”center_vertical”>
<TextView
android:id=”@+id/home”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Tweet ”
android:textSize=”28sp”
android:textColor=”#ffffff” />
<ImageView
android:id=”@+id/post”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:src=”@drawable/post”/>
</LinearLayout>

Ao criar um Companion Widget, tome cuidado para que seus componentes não forcem o layout a ocupar mais do que o número desejado de células.

Se você seguir estas recomendações, conseguirá criar um Companion Widget sem maiores dificuldades, trazendo mais interação entre o usuário e sua aplicação, e com maior facilidade de acesso, por ser visível na tela inicial do aparelho.