Android Official Development Document Training Series Course Chinese version: Adaptive UI for multiple screens

Original address: http://android.xsoftlab.net/training/multiscreen/adaptui.html

The UI process may be different based on the layout currently displayed by the program. For example, if the program is currently in multi-panel mode, clicking on the item in the left panel will display the specific content directly in the right version, and if it is a single-panel mode, then the specific content will be displayed in the new page.

Check the current layout

Because the implementation of each layout may be different, the first thing to do is to check which layout the user is currently using. For example, you might want to know whether the user is currently in single-panel or multi-panel mode. You can know the current pattern by querying whether a given view exists and is visible.

publicclass NewsReaderActivity extends FragmentActivity {    boolean mIsDualPane;    @Override    publicvoidonCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main_layout);        View articleView = findViewById(R.id.article);        null &&                         articleView.getVisibility() == View.VISIBLE;    }}

Note that this part of the code is more flexible in querying the article panel than it is in the way you specify the layout.

Another example of how to adapt different components is done by examining how these components are available. For example, in the news reader app, there is a button to open the menu, but this button is only available in version 3.0 or more. So, if you want to add a listener to this button, you can do this:

/* create your listener here */;ifnull) {    catButton.setOnClickListener(listener);}

Respond to the current layout

Some behaviors may produce different results based on the current layout. For example, in the News reader app, click on any news title, in multi-panel mode, the specific article will appear in the right panel, but in single-panel mode, a new activity will be launched to display these articles.

 @Override  public  void      onheadlineselected  (int  index) {martindex = index; if  (Misdualpane) {/* display article on the right pane */ marticlefragment.displayarticle (    Mcurrentcat.getarticle (index));        } else  {/* start a separate activity */ Intent Intent = new  Intent (this ,        Articleactivity.class);        Intent.putextra ( "Catindex" , Mcatindex);        Intent.putextra ( "Artindex" , index);    StartActivity (Intent); }}

Similarly, if the app is currently in multi-panel mode, you should set the tab-Actionbar for navigation, however, in single-panel mode, you should set up a navigation control with spinner. So you should also check the current situation in your code:

FinalString categories[] = {"Top Stories","Politics","Economy","Technology"}; Public void onCreate(Bundle savedinstancestate) {    ....if(Misdualpane) {/ * Use tabs for navigation * /Actionbar.setnavigationmode (Android.app.ActionBar.NAVIGATION_MODE_TABS);intI for(i =0; i < categories.length;        i++) {Actionbar.addtab (Actionbar.newtab (). SetText (Categories[i]). Settablistener (handler));    } actionbar.setselectednavigationitem (Seltab); }Else{/* Use list navigation (spinner) */Actionbar.setnavigationmode (Android.app.ActionBar.NAVIGATION_MODE_LIST); Spinneradapter ADAP =NewArrayadapter ( This, R.layout.headline_item, CATEGORIES);    Actionbar.setlistnavigationcallbacks (ADAP, handler); }}

Reusing fragment

In the design of multi-panel applications, a recurring scene, some UI in one screen configuration in the form of a panel, and in other configurations, but also with independent activity appears.

In such a case, you can avoid code redundancy by reusing fragment. For example, Articlefragment is used for multi-panel situations:

<linearlayout xmlns:android="Http://schemas.android.com/apk/res/android"  Android:layout_width="Fill_parent"android:layout_height="Fill_parent"  Android:orientation="Horizontal">                <fragment  android:id  = "@+id/headlines"  android:layout_height
      = "fill_parent"  android:name  = "com.example.android.newsreader.HeadlinesFragment"  andro Id:layout_width  = "400DP"  android:layout_ma Rginright  = "10DP" />     <fragment android:id= "@+id/article"android:layout_height="Fill_ Parent "android:name=" Com.example.android.newsreader.ArticleFragment "android:layout_ Width="fill_parent" />                                          </linearlayout>

In a small screen, the activity is reused:

new ArticleFragment();getSupportFragmentManager().beginTransaction().add(android.R.id.content, frag).commit();

The above code has the same effect as declaring fragment in the XML layout, but in this case the XML layout doesn't have to work because the article fragment is the component of the activity.

A very important point to remember is not to have strong coupling with the specified activity when designing fragment. You can make fragment interact with the host activity by defining the interface, and the host activity needs to implement this interface:

 Public  class headlinesfragment extends listfragment {... Onheadlineselectedlistener Mheadlineselectedlistener =NULL;/ * must be implemented by host activity * /     Public  interface onheadlineselectedlistener {         Public void onheadlineselected(intindex); }    ... Public void Setonheadlineselectedlistener(Onheadlineselectedlistener Listener)    {Mheadlineselectedlistener = listener; }}

Therefore, when a user selects a news, fragment notifies the host of activity by means of an interface:

publicclass HeadlinesFragment extends ListFragment {    ...    @Override    publicvoidonItemClick(AdapterView<?> parent,                             intlong id) {        if (null != mHeadlineSelectedListener) {            mHeadlineSelectedListener.onHeadlineSelected(position);        }    }    ...}

Handling Screen configuration changes

If you use a separate activity to implement a separate part of the UI, remember to respond to certain configuration changes, such as screen rotation, to maintain UI consistency.

For example, a 7-inch tablet that runs an Android 3.0 system, the news reader app uses the content of separate activity display articles in vertical mode, but uses multi-panel mode in horizontal mode.

If the user is currently in vertical mode, you need to check the orientation change in order to horizontal mode and need to show the content in double-panel mode by ending activity and returning mainactivity:

 Public  class articleactivity extends fragmentactivity {    intMcatindex, Martindex;@Override    protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate); Mcatindex = Getintent (). Getextras (). GetInt ("Catindex",0); Martindex = Getintent (). Getextras (). GetInt ("Artindex",0);//If should is in Two-pane mode, finish to return to main activity        if(Getresources (). Getboolean (R.bool.has_two_panes)) {Finish ();return; }        ...}

Android Official Development Document Training Series Course Chinese version: Adaptive UI for multiple screens