NotePad da Área de Recursos - Código Comentado - Parte 02

Arquivos de Layout e Menus

Com o Android é possível fazer a separação de áreas da interface em diferentes arquivos xml.

No projeto do NotePad, existem os seguintes arquivos xml:

Layout

• note_editor.xml
• noteslist_item.xml
• title_editor.xml

Menu

• editor_options_menu.xml
• list_context_menu.xml
• list_options_menu.xml

E o que são cada um deles?

note_editor.xml

É o arquivo que é responsável por mostrar o conteúdo da nota para edição no seu aplicativo. O arquivo consiste em um widget View, como mostrado abaixo:

<?xml version="1.0" encoding="utf-8"?>
<view xmlns:android="http://schemas.android.com/apk/res/android"
    class="com.example.android.notepad.NoteEditor$LinedEditText"
    android:id="@+id/note"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:padding="5dp"
    android:scrollbars="vertical"
    android:fadingEdge="vertical"
    android:gravity="top"
    android:textSize="22sp"
    android:capitalize="sentences"
/>

A área em amarelo é a área em questão dessa xml.

noteslist_item.xml

É o arquivo que define o layout da lista de itens (i.e. as notas cadastradas no aplicativo). O arquivo é como está mostrado abaixo:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:gravity="center_vertical"
    android:paddingLeft="5dip"
    android:singleLine="true"
/>

Área onde são mostradas as notas existentes está marcada em amarelo.

title_editor.xml

É o arquivo que responde pela interface da janelinha pop-up que aparece quando o usuário quer editar o título da nota. Consiste em um layout do tipo LinearLayout com dois widgets internos: um EditText, que mostrará o nome do título para que possa ser alterado e um Button para efetivar a alteração.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="6dip"
    android:paddingRight="6dip"
    android:paddingBottom="3dip">
    <EditText android:id="@+id/title"
        android:maxLines="1"
        android:layout_marginTop="2dp"
        android:layout_marginBottom="15dp"
        android:layout_width="wrap_content"
        android:ems="25"
        android:layout_height="wrap_content"
        android:autoText="true"
        android:capitalize="sentences"
        android:scrollHorizontally="true" />
    <Button android:id="@+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="@string/button_ok"
        android:onClick="onClickOk" />
</LinearLayout>

O popup está bem em evidência na tela.

Aqui começa algo interessante no Android. Os menus são separados da parte inferior do layout. Com isso, você pode reaproveitar o layout e montar o menu da maneira como achar mais conveniente. 

editor_options_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu_save"
          android:icon="@drawable/ic_menu_save"
          android:alphabeticShortcut='s'
          android:title="@string/menu_save"
          android:showAsAction="ifRoom|withText" />
    <item android:id="@+id/menu_revert"
          android:icon="@drawable/ic_menu_revert"
          android:title="@string/menu_revert" />
    <item android:id="@+id/menu_delete"
          android:icon="@drawable/ic_menu_delete"
          android:title="@string/menu_delete"
          android:showAsAction="ifRoom|withText" />
</menu>

list_context_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/context_open"
          android:title="@string/menu_open" />
    <item android:id="@+id/context_copy"
          android:title="@string/menu_copy" />
    <item android:id="@+id/context_delete"
          android:title="@string/menu_delete" />
</menu>

list_options_menu.xml


<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <!--  This is our one standard application action (creating a new note). -->
    <item android:id="@+id/menu_add"
          android:icon="@drawable/ic_menu_compose"
          android:title="@string/menu_add"
          android:alphabeticShortcut='a'
          android:showAsAction="always" />
    <!--  If there is currently data in the clipboard, this adds a PASTE menu item to the menu
          so that the user can paste in the data.. -->
    <item android:id="@+id/menu_paste"
          android:icon="@drawable/ic_menu_compose"
          android:title="@string/menu_paste"
          android:alphabeticShortcut='p' />
</menu>


Nas imagens abaixo você pode ver os botões:

Ou seja, cada parte da interface é dividida em trechos pequenos de XML que podem ser customizados  facilmente, fazendo com que qualquer tela que use esse trecho de XML seja atualizado rapidamente. Isso dá uma liberdade maior à interface.

Muito melhor que ter código repetido em todos os layouts, não?

E, com os novos posts onde o código será comentado vocês vão poder ver como integrar os designs (botões e área interna da interface) na tela.

É isso ai pessoal! Até o próximo post!