Start from scratch-go deep into Android (theory-preparations before development-7. tablet and mobile phone support-retained)

Tablet and mobile phone support

Do you still remember the content in the previous chapter? In resolution and multi-screen mode, we need to provide a variety of resources available to the system based on different screens, so that your app can be applied to many devices. And sometimes you want to further optimize them. For example, Tablet

Provide more space for your app to display more information, but it can be displayed in several parts on your phone, not all at once. In most cases, the experience of tablets and mobile phones is significantly different.

Android introduces a new framework API, which allows us to design apps more effectively and make better use of large screens. For example, the new fragment class 3.0 allows you to divide the UI components of different behaviors into independent parts.

Points. Then you can create a multi-screen device (such as a 2-screen or 3-screen mobile phone) Layout and combine them. Android3.0 also imports the actionbar class, which provides a special user interface at the top of the screen to identify the app and provide user operations

And navigation. This kind of advanced technology is very useful to everyone, but it is very difficult for devices. I have only seen 3-screen mobile phones in videos outside China, but we can also split several panels on one screen.

This chapter provides guidance on mobile phones and tablets. It helps you create a unique and optimized user experience app and use fragments and action bar.

Before reading this chapter, please read the chapter resolution, which plays an important role in understanding the content of this chapter. This article describes a user interface that supports different screen sizes, density, flexible layout, and alternative bitmap, and tells you the basic design principles.

Basic Design Principles

The following are some design principles that can help you create an app that is applicable to both mobile phones and tablets and optimize the user experience.

Build our activity based on fragments:Different combinations that can be reused-Multi-panel tablets and single-panel mobile phones. In an acivity, a fragment represents an action or a part of a user interface. You can think

Fragment is a module in an activity. Has its own life cycle, and can add or delete the running activity in it. If you haven't used fragments, it's okay.

Chapter, and examples in the SDK.

Use actionbar: It can adjust the action bar Layout Based on the screen size.

Actionbar is a UI component that can replace the traditional title bar (it is a commonly used notification bar, because actionbar is a relatively new technology and rarely used in China ). The default action bar displays our

APP logo, followed by the title. The right side is the accessible selection menu. You can open an items (items can be understood as a list or a project in the menu) from the option menu and open it directly. You can also add action bar with navigation function

As a label or drop-down list. Directly clicking the icon will also navigate to the home page or a back key function.

Flexible Layout: A flexible layout design allows your app to change the screen size. Not all tablets and mobile phones are of the same size. You need to provide different fragment combinations based on the tablet and mobile phone, because for flexible adjustment

The overall layout plays an important role.

Note:Please use android3.0 to have available APIs!

Creating single-panel and multi-panel la use the most effective method to create different user experience. For tablets and mobile phones, different fragments composite la s are created, it will bring a great user experience to your users. You can design a multi-panel layout for the tablet and set a single-panel layout for the mobile phone. For example, a new app on the tablet needs to display an article list on the left, and the content on the right is the article content. Click the list on the left, and the content on the right is updated. The two components are displayed separately on the mobile phone. In fragment, we have two technical practices for this design:

Multiple fragments, one activity: no matter the size of the device, only one activity is used. At runtime, it determines whether to combine (multiple panels) or separate (single panel ).

Multiple fragments and multiple activities: on a tablet, multiple fragments are placed in one activity. On a mobile phone, multiple differentiated activities are used to control each fragment. for example, when a tablet designs two fragments in an activity and uses the same activity on a mobile phone, the effect will be different. Execute the command on the mobile phone. When you need to switch fragment, another activity will be started to place the second fragment.

The method you choose depends on your design and personal preferences. the first option (one activity; multiple fragments) You need to determine the screen size at runtime and dynamically add each fragment instead of describing a layout using XML, if it is declared in XML, You cannot delete the fragments. When option 1 is used, the action bar may need to be updated for each fragments change. These factors may not affect our design, so it is still very effective to use the option (especially when you need to dynamically add and delete fragments ). Dynamic code is more complicated. You need to weigh it !! This Guide focuses on the second option, in which each clip of a small screen is displayed during a separate activity. By using this technology, you can use alternative layout files to define different fragments combinations for different screen sizes, keep fragments code modularized, and simplify action bar management, let the system handle all the stack operations on the mobile phone.

The following figure shows how fragments work on mobile phones and tablets:

Figure 1.We can see this design as a design model. The link on the left is a combination relationship. It combines all the frag into an act, and the link on the right is aggregation, each act has a frag, which completes a complete function only when aggregated.

Like geese and geese (aggregation), geese and wings (combination ).

The system applies to different main. xml layout files depending on the screen size:

Res/layout/Main. xml on the mobile phone:

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

   android:layout_width="match_parent"

   android:layout_height="match_parent">

   <!-- "Fragment A" -->

   <fragment class="com.example.android.TitlesFragment"

             android:id="@+id/list_frag"

             android:layout_width="match_parent"

             android:layout_height="match_parent"/>

</FrameLayout>

Res/on the tablet/layout-large/Main. xml:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

 android:orientation="horizontal"

 android:layout_width="match_parent"

 android:layout_height="match_parent"

 android:id="@+id/frags">

   <!-- "Fragment A" -->

 <fragment class="com.example.android.TitlesFragment"

           android:id="@+id/list_frag"

           android:layout_width="@dimen/titles_size"

           android:layout_height="match_parent"/>

   <!-- "Fragment B" -->

 <fragment class="com.example.android.DetailsFragment"

           android:id="@+id/details_frag"

           android:layout_width="match_parent"

           android:layout_height="match_parent" />

</LinearLayout>

Note:You may not be able to read XML files because you have not started writing code. It doesn't matter. This mainly reflects the layout differences between tablets and mobile phones. It should be noted that, instead of setting the layout in XML, it still uses the layout written in code. com. example. Android. ** is an obvious sign.There are two other XML files in different folders. The latter has the difference of large !! Why?On the tablet, the main. XML will have one more fragment B, but not on the mobile phone? Because the tablet needs to display two items in an activity at the same time, and the mobile phone only needs to display one A. This depends on the device, in the following code, fragment B can also be used to determine whether the device is a mobile phone or tablet.

When selecting an item, how does fragment B respond:

If fragment B is in layout, activity a notifies ifragment B to update itself.

If fragment B is not in layout, activity a starts Activity B.

To achieve this model, we need to be highly divided. The following are two principles:

Do not operate a fragment directly from another fragment.

Keep all Code involving content in a fragment, instead of in the activity.

Avoid calling another fragment directly from one fragment, define a callback interface in each fragment class <in Java, the interface is a deep Object-Oriented Knowledge (I think it should be abstract programming ).

You need to study the following courses>. The purpose of the interface is to pass an event to the activity. When the activity receives a callback triggered by the event, the activity will respond and handle it properly.

For example, if activity a processes the item selection, it depends on whether it uses a tablet or mobile phone layout. The Code is as follows:

Public class mainactivity extends activity implements titlesfragment. onitemselectedlistener {

...

/** The current mainactivity (fragment A) implements the titlesfragment. onitemselectedlistener interface.

Therefore, it must implement the onitemselected (INT position) method. This is because the item in fragment A is selected and then this method is executed.

*/

Public void onitemselected (INT position ){

Displayfragment displayfrag = (displayfragment) getfragmentmanager ()

. Findfragmentbyid (R. Id. display_frag );

If (displayfrag = NULL ){

// Fragment (fragment B) used for display)

// If displayfrag = NULL, it indicates the layout on the mobile phone. What should we do on the mobile phone?

// Use intent to transmit a data and start displayactivity (fragment B)

Intent intent = new intent (this, displayactivity. Class );

Intent. putextra ("position", position );

Startactivity (intent );

} Else {

// Otherwise, the layout is on the tablet.

// Call displayfrag. updatecontent (position); To update the content.

Displayfrag. updatecontent (position );

}

}

When Activity B (remember that activity B is used for display and a is used to select item) is started, Activity B reads data, which is transmitted by intent in activity. There is an example of this technology in the SDK sample,

In practice, we are "practice ":)

Use action bar

Action bar is an important UI component on a tablet or mobile phone. Although action bar is useful, it is not complicated. We will talk about the second article. The following content mainly describes the relationship and adaptability between the action bar and the screen size. When we create an action bar, we recommend that you take a look at the following items to help you:

When setting a menu item as an action item, avoid using the "always" value. In your menu resource (which belongs to the XML file), if you want the menu item to appear under the action bar, useandroid:showAsAction="ifRoom"Attribute. However, when the action bar view does not provide the default action for the menu, you may still need "always. This situation is rare. If there are too many action items, this will be messy and will lead to overlapping title bars or navigation items. This is not a good choice! Conciseness is very important.

When adding an action item to the action bar, use a text title and an icon, for exampleshowAsAction="ifRoom|withText"If the title is too long, use an icon.

Always provide a title in action item."withText"Use toast (a widget in Android that is used to temporarily display the content). In this way, the user will see a short prompt and perform some operations, do not ignore such details

Even if you can use a custom navigation mode, avoid using. BestUse the built-in embedded or drop-down mode, so that the system can automatically adapt to different screens. For example, if two tags are associated with other action items, if the width is too narrow, the tag will appear under the action bar. If you want to use a custom navigation mode or other custom views in the action bar, thoroughly test them on different screens.

The following figure shows how the action bar on the tablet and mobile phone adapts to the screen.

Figure 2.As you can see, attach help setting appears on the tablet, while attach help setting appears on the mobile phone and is similar to an item in the menu. This is the obvious difference between them. In fact, after a long time, will you discover the atmosphere of the tablet. When developing on a mobile phone, it is recommended that the interface be simple.

Use split action bar

When your app is running in android4.0 (or higher), there is an additional mode available for the action bar, that is, split action bar. When you open the split action bar, and in the portrait mode, a separated bar will appear at the bottom of the screen to display all action items.

Open the split action bar and adduiOptions="splitActionBarWhenNarrow"To manifest<activity>Or<application>Node. Let's take a look:

Figure 3.

Note:Remember to use"uiOptions". This attribute is ignored in earlier versions.