Understanding GuestbooksActivity's UI

Recall that you used Android Studio’s Navigation Drawer Activity template to create GuestbooksActivity. Any activity this template creates contains a navigation drawer and all the components the activity needs. This includes layout files that display content. Currently, these files contain simple placeholder content. You’ll replace this content shortly with content from your Guestbook portlet. Before doing so, however, you should know where the placeholder content exists in the project’s structure and how the app displays it.

The app’s UI is defined by three layout files that combine to display the app’s content:

  1. activity_guestbooks.xml: The activity’s main layout file. This layout defines the navigation drawer and includes the app_bar_guestbooks layout. The latter appears when the navigation drawer is closed.

  2. app_bar_guestbooks.xml: Defines the action bar (app bar) and includes the content_guestbooks layout.

  3. content_guestbooks.xml: Defines the activity’s main content, which appears below the action bar.

First, you’ll learn how activity_guestbooks.xml works.

Understanding the Activity’s Main Layout File

First, open GuestbooksActivity’s main layout file, activity_guestbooks.xml. This file should look similar to this one:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent" 
    android:layout_height="match_parent"
    android:fitsSystemWindows="true" 
    tools:openDrawer="start">

    <include layout="@layout/app_bar_guestbooks" 
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView 
        android:id="@+id/nav_view"
        android:layout_width="wrap_content" 
        android:layout_height="match_parent"
        android:layout_gravity="start" 
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_guestbooks" 
        app:menu="@menu/activity_guestbooks_drawer" />

</android.support.v4.widget.DrawerLayout>

This isn’t much code considering everything that’s in GuestbooksActivity. The NavigationView and its parent DrawerLayout define the navigation drawer. Two attributes in NavigationView define the drawer’s contents: app:headerLayout and app:menu. The app:headerLayout value "@layout/nav_header_guestbooks" specifies that the layout res/layout/nav_header_guestbooks.xml renders the drawer’s header section. The app:menu value "@menu/activity_guestbooks_drawer" specifies that the menu in res/menu/activity_guestbooks_drawer.xml creates the drawer’s items. Above the NavigationView, the include statement adds the layout app_bar_guestbooks.xml as the content shown when the navigation drawer is closed. The following diagram illustrates how activity_guestbooks.xml maps to the UI.

Figure 1: The activity_guestbooks.xml layout defines the apps main UI components.

Figure 1: The `activity_guestbooks.xml` layout defines the app's main UI components.

The activity’s main content also contains a toolbar (the action bar), some text, and a floating action button. Next, you’ll see how these are defined.

Understanding the app_bar_guestbooks and content_guestbooks Layouts

Open app_bar_guestbooks.xml. It should look similar to this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"
    tools:context="com.liferay.docs.liferayguestbook.GuestbooksActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar 
            android:id="@+id/toolbar"
            android:layout_width="match_parent" 
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary" 
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_guestbooks" />

    <android.support.design.widget.FloatingActionButton 
        android:id="@+id/fab"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end" 
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

The AppBarLayout and Toolbar elements define the toolbar at the top of the activity. Following the toolbar definition, the include statement adds the content_guestbooks layout to app_bar_guestbooks. The content_guestbooks layout defines the content displayed in the activity’s body (below the toolbar). Right now, this layout only contains an empty ConstraintLayout element. Now open content_guestbooks.xml. Its contents should look similar to this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.liferay.docs.liferayguestbook.GuestbooksActivity"
    tools:showIn="@layout/app_bar_guestbooks">

</android.support.constraint.ConstraintLayout>

Anything you define in this layout becomes the activity’s main body content. Later, you’ll return to content_guestbooks.xml to display the guestbook entries retrieved from the Guestbook portlet.

Now return to app_bar_guestbooks.xml. This layout concludes by using FloatingActionButton to define the floating action button. Pressing this button in the app slides a snackbar containing placeholder content up from the bottom of the screen. Although you won’t do anything with the floating action button in this Learning Path, you’ll leave it in place. When you finish this Learning Path, you may want to test your Liferay mobile development chops by adding functionality to this button.

The following figure illustrates how the app_bar_guestbooks layout maps to the activity’s UI. On the left, this figure lists each UI component in app_bar_guestbooks. Each arrow points to the component’s rendering on the right.

Figure 2: The layout app_bar_guestbooks.xml defines the activitys main content.

Figure 2: The layout `app_bar_guestbooks.xml` defines the activity's main content.

Awesome! Now you know which layout files in the project define the app’s UI. You also know the exact UI components these files define. Next, you’ll prepare GuestbooksActivity for Guestbook List Screenlet.

« Using the Guestbook List and Entry List ScreenletsPreparing GuestbooksActivity for Guestbook List Screenlet »
Este artigo foi útil?
Utilizadores que acharam útil: 0 de 0