Navigation bar of the android Client)

Navigation bar of the android Client)

Title: navigation bar of the android Client
Date: 16:34:40
Categories:
-Android
Tags:
-Android

-Toolbarbackground

During android client development, all pages have an element, that is, the navigation bar (title bar). Although Google provides ActionBar and upgraded Toolbar, however, in China's mobile design, we often see that the native ActionBar/Toolbar elements are not very useful. For example, we need to center the title, instead of sticking it to the left, for example, we will add a tab switch control in the middle.

Old way

As a result, various tricks and tricks emerged. For example, an xml is used to define a common title_bar.xml, which contains all the elements that appear on the navigation bar, buttons, images, text, tab switching, and so on, then, you can use setVisibility in each activity/fragment to control display and hide.

As a result, the entire xml file is huge and may contain hundreds of rows and various views. Changes to requirements are more likely to result in several elements in the same position, because they have some small differences.

Then a colleague saw this and thought it was too heavy. So he made a title_bar_sub.xml, which is relatively lightweight and only contains the left button, title, and middle button. So some layout include title_bar.xml, and others are title_bar_sub.xml.

The nightmare started. One of them was that the design was revised to adjust the spacing and font size. The nightmare was that new students who received the requirement found several titlebar xml files, which were messy, some elements are still in use, and some elements seem outdated (and may still be referenced in the plug-in Project). In general, a small interface adjustment is made in the eyes of products and designs, it becomes a huge physical activity and may lead to some global vicious bugs.

This method is not bad here. I have also seen that the title bar is written in each layout. Unless the design of the team cannot be changed, it will be a hell of a future.

New way with toolbar

The toolbar in support v7 is an upgraded version of actionbar. Unlike Actionbar, Toolbar directly inherits the ViewGroup, so that you can declare it directly in layout and add sub-views, such as tab, and custom controls.

So, similarly, we also use an xml tool to put Toolbar, but in it, we use viewstub to lazyload some views that are not commonly used. For the problem that the title of the native Toolbar is on the left, we also use the Custom sub-view.

After the TextView is defined in the middle, it is defined in BaseActivity or extended ToolbarActivity.

protected Toolbar mToolbar = null;protected TextView mToolbarTitleTextView = null;protected void initializeToolbar() {    mToolbar = (Toolbar) findViewById(R.id.toolbar);    if (mToolbar == null) {        throw new IllegalStateException(Layout is required to include a Toolbar with id toolbar);    }    setSupportActionBar(mToolbar);    mToolbarTitleTextView = (TextView) findViewById(R.id.toolbar_title);    if (mToolbarTitleTextView != null) {        getSupportActionBar().setDisplayShowTitleEnabled(false);    }}@Overrideprotected void onPostCreate(Bundle savedInstanceState) {    super.onPostCreate(savedInstanceState);    if (!isChild()) {        onTitleChanged(getTitle(), getTitleColor());    }}@Overrideprotected void onTitleChanged(CharSequence title, int color) {    super.onTitleChanged(title, color);    if (mToolbarTitleTextView != null) {        mToolbarTitleTextView.setText(title);    }}

In this way, the label in manifest will directly change to the text in the middle of the title bar. Of course, you can also set it through the setTitle method of activity. Is it much easier than findViewById.

For various inflate of viewstub and some custom UI settings, there are two solutions.
-Inherit the Toolbar for extension
-Define common methods in BaseActivity
Fragment can also use getActivity and convert it to BaseActivity to call the settings in the navigation bar.

Whether to build an extended custom Toolbar for cohesion or add a series of toolbar-related methods to BaseActivty is wise.

In addition, we strongly do not recommend multiple xml !! Common elements can be directly visible, and the common gone is used. The element viewstub can be used for this purpose.

Conclusion

Global things such as the navigation bar may become larger and larger as the project develops, and gradually cannot be changed. Therefore, good solutions can be used early in the initial stage of the project, it is necessary to avoid the next explosive.

I strongly recommend that you use Toolbar to customize the UI and use the good effects officially supported by google (for example, many animations in design support require Toolbar, the ActionBar or Toolbar is required for some animations of the drawer ).