Android actionbar fully parses and uses the best navigation bar officially recommended (Part 2)

The main content of this article comes from Android doc. I have done some processing after translation. Good English friends can also read the original text directly.

http://developer.android.com/guide/topics/ui/actionbar.html

Due to space constraints, we only learned the basic knowledge of actionbar in the previous article. In this article, we will continue to learn from the previous chapter and explore the more advanced knowledge of actionbar. If you haven't read the previous article, it is recommended to read the full analysis of Android actionbar first and use the best navigation bar officially recommended (above).

Add action provider

Similar to action view, the action provider can also replace an action button with a custom layout. However, the difference is that the action provider can fully control all the behaviors of events, and can also display sub menus when clicked.

To add an action provider, we need to specify an actionviewclass attribute in the < item > tag and fill in the full class name of the action provider. We can create our own action provider by inheriting the actionprovider class. Meanwhile, Android also provides several built-in action providers, such as shareactionprovider.

Since each action provider can freely control the event response, they do not need to listen for click events in the onoptionsitemselected() method, but should execute the corresponding logic in the onperformdefaultaction() method.

Let's take a look at the simple usage of shareactionprovider first. Edit the menu resource file and add the shareactionprovider declaration in it, as shown below:

Note that the shareactionprovider will handle its display and events by itself, but we still need to remember to add a title to it to prevent it from appearing in the overflow.

Then the rest is to define what you want to share by Intent. We only need to call the getActionProvider () method of MenuItem to get the ShareActionProvider object in onCreateOptionsMenu (), and then choose Intent by setShareIntent (). The code is as follows:

As you can see, here we build an intent through the getdefaultintent () method, which indicates that all the degrees of pictures that can be shared will be listed. Run the program again, and the effect is shown in the following figure:

Carefully, you must have observed that the shareactionprovider can be expanded after clicking, which is somewhat similar to the effect of overflow. This is the sub menu of the action provider. In addition to using shareactionprovider, we can also customize an action provider. For example, if you want to create an action provider with two submenus, you can write this:

Here, we have created a new myactionprovider that inherits from actionprovider. In order to indicate that this action provider has a submenu, we need to override the hassubmenu() method and return true, and then add a submenu in onpreparesubmenu by calling the add() method of submenu.

Then modify the menu resource and add the declaration of myactionprovider:

Now rerun the code, and the result is as shown in the figure:

Add navigation tabs

Tabs is widely used. It makes it easy for users to switch between different views in your application. Android officials prefer to use the tabs function provided in actionbar because it is more intelligent and can automatically adapt to various screen sizes. For example, the screen space on the tablet is very sufficient, and tabs will be displayed on the same line as the action button, as shown in the following figure:

On the mobile phone, if the screen space is not large enough, the tabs and action buttons will be displayed in two lines, as shown in the following figure:

Let's take a look at how to use the tab function provided by actionbar, which can be roughly divided into the following steps:

1. Implement the actionbar.tablistener interface, which provides various callbacks for tab events. For example, when a user clicks a tab, you can switch tabs.

2. Create an instance of actionbar.tab for each tab you want to add, and call settablistener () method to set actionbar.tablistener. In addition, you need to call the settext () method to set the title for the current tab.

3. finally, call the addTab () method of ActionBar to add the created Tab to ActionBar.

It doesn't seem complicated. There are only three steps in total. Let's try it now. The first step is to create a class that implements the actionbar.tablistener interface. The code is as follows:

This code is not long. Let's analyze it briefly. When tab is selected, ontabs selected () method will be called. Here, we first judge whether mfragment is empty. If it is empty, we will create an instance of fragment and call the add () method of fragmenttransaction. If it is not empty, we will call the attach () method of fragmenttransaction.

When the tab is not selected, call the detach () method of fragmenttransaction to release the UI resources.

When the tab is re selected, the ontabreselected () method will be called. If there are no special requirements, it usually does not need to be processed.

The next step is to create an instance of actionbar.tab for each tab. Before that, prepare the fragment corresponding to each tab page. For example, if we want to create two tab pages, artist and album, we must first prepare the fragments corresponding to the two tab pages. First, create an artistfragment with the following code:

There is no substantive code, but the string artist fragment is displayed in textview.

Then, create a new albumfragment as follows:

After the fragments are ready, you can start to create the tab instance. After creation, you can call the addtab() method to add it to the actionbar. These two steps are usually performed in the oncreate() method of the activity. The code is as follows:

As you can see, the tab is created by using the writing method of concatenation. First, call the newtab () method of actionbar to create a tab instance, then call the settext () method to set the title, then call the settablistener () method to set the event listener, and finally call the addtab () method of actionbar to add the tab to actionbar.

OK, then the code is finished. Run the program again. The effect is shown in the figure below:

Custom actionbar style

As like as two peas, ActionBar provides users with a unified interface style and operation mode, but this does not mean that all applications ActionBar must be exactly the same. If you need to modify the style of actionbar to better adapt to your application, it can be implemented very simply through Android style and theme.

In fact, several activity themes built in Android already contain actionbar styles such as "dark" or "light". At the same time, you can inherit these themes and further customize them.

1. Use theme

There are two basic activity themes in Android that can be used to specify the color of actionbar:

The effect of dark color theme style is shown in the following figure:

The effect of light color theme style is shown in the following figure:

You can apply these topics to your entire application or only to a certain activity. You can do this by specifying the Android: theme attribute for the < Application > or < activity > tag in the androidmanifest.xml file. For example:

If you only want the actionbar to use the dark color theme, but the content part of the activity still uses the light color theme, you can declare the theme.holo.light.darkactionbar. The effect is shown in the following figure:

2. Custom background

If you want to modify the background of actionbar, you can create a custom theme and override the actionbarstyle property. This attribute can point to another style, and then we can override the background attribute in this style to specify a drawable resource or color, so as to realize the function of customizing the background.

Edit the styles.xml file and add a custom theme in it, as shown below:

As you can see, here we define a customactionbartheme theme and let it inherit from theme. Holo. Light. Then we override the actionbarstyle attribute inside it, and then point this attribute to the myactionbar style. In this style, we override the background attribute and assign it a background color.

Now run the program again, and the effect is shown in the following figure:

In this way, we will successfully modify the background color of actionbar. But now it looks a little strange, because only the background color of actionbar has changed, and the background color of tabs is still the same, which makes it feel uncoordinated. Now let's modify the background color of tabs and edit the styles.xml file as follows:

You can see that the backgroundstacked attribute is rewritten here, which is used to specify the background color of tabs. Then re run the program again, and the effect is shown in the following figure:

3. Custom text color

Now the color of the whole actionbar belongs to the dark system, and the color of the text in the actionbar is black, so it doesn't look comfortable. Next, let's learn how to customize the text color and change the text color to white.

Modify the styles.xml file as follows:

You can see that the titletextstyle attribute is rewritten in the myactionbar style, and it points to another custom style myactionbar titletext. Then we specify that the color of textcolor in this style is #fff, that is, white.

Now run the program again, and the results are shown in the following figure:

OK, the color of the actionbar title text has been successfully changed to white. How should the tab title text be modified? Continue editing the styles.xml file as follows:

Here, we override the actionbartabtextstyle property in the customactionbartheme theme, point it to a new myactionbartabtext style, then override the textcolor property in this style, and specify the color as white.

Run the program again, and the results are shown in the following figure:

4. Customize tab indicator

In order to clearly distinguish which tab item is currently selected, a horizontal line is usually added below the selected tab as the identification, which is called the tab indicator. The tab indicator in the figure above is blue, which is obviously inconsistent with the overall style, so let's learn how to customize the tab indicator.

First, we need to override the property actionbartabstyle, then point it to a new tab style, and then override the property background. It should be noted that background must specify a state list drawable file so that different effects can be displayed in different states.

Before starting, we need to prepare four pictures to represent the four states of tab, as shown below:

These four pictures respectively represent the four statuses of tab: selected but not pressed, selected and pressed, unselected but not pressed, unselected and pressed. Then, create a new RES / drawable / actionbar_ tab_ The code of indicator.xml file is as follows:

The four states refer to four pictures respectively, so the state list drawable file is written. Then modify the style.xml file. The code is as follows:

Here, we first override the property of actionbartabstyle and point it to another custom style myactionbartabs, then override the background property in this style, and then point to the actionbar we just created_ tab_ Indicator is enough.

Now run the program again, and the effect is as follows:

You can see that the color of the tab indicator has changed to white, so it looks much more coordinated.

In addition, there are many properties of the action bar that can be customized. We can't cover them in this article one by one. For more customized properties, please refer to the official documentation.

The above is what Xiaobian introduced to you. The Android actionbar is fully analyzed and uses the best navigation bar officially recommended (below). I hope it will be helpful to you. If you have any questions, please leave me a message and Xiaobian will reply to you in time!