Android ActionBar action bar

Source: Internet
Author: User

Android ActionBar action bar


ActionBar action bar

I. ActionBar: (action bar)
(1) Introduction: (Extended TitleBar)
Action bar is a navigation control that replaces the title bar at the top of a traditional screen. ActionBar is a control displayed on the top of the screen. It includes the logo icon of the application displayed on the left and visible items of the Right Operation menu. Similar to the toolbar of a windows desktop program.
Effect: vcq9o6y/examples/ejqMjnobDXorLhobEsobC1x8K8obGhoqGwy9HL96GxLA = "). Display the hidden option menu as an ActionItem.

The above summary: The Action bar replaces the tittle bar and menu before 3.0.

Figure 1. The operation column in the Honeycomb Gallery application, starting from the left, is the logo, navigation option label, and Operation item (a floating menu button inserted on the right ).

Note: If you "re looking for information about the contextual action bar for displaying contextual action items, see the Menu guide.

Action Bar Design For design guidelines, read Android Design's Action Bar guide.


2. The ActionBar is divided into four areas:

    • App Icon: displays the icon of the APP, which can be replaced by other icons. When the software is not on the top page, a left arrow is displayed on the left of the icon. You can use this arrow to navigate up.
    • View switching: (effects are shown in figure)
    • Action Buttons: This is the most important software function. A button that cannot be placed automatically enters Action overflow.
    • Action overflow: an uncommon operation item automatically enters Action OverFlow

      [Note:] What is Action overflow?
      For mobile phones without MENU buttons, The ActionBar will display a collapsed icon at the end. Clicking this icon will display the remaining option MENU items. The collapsed icon function is Action overflow.
      Operations that are not frequently used in Action overflow. According to the official website, "the Overflow icon is only displayed on a mobile phone without a MENU key, but not on a mobile phone with a MENU key, the MENU button is displayed." In fact, Google has urged mobile phone manufacturers and software developers to cancel the MENU. That is, the previous Menu will not be used.

      (3). ActionBar Creation Principles:
      ①. Frequently used: it is frequently used by users, for example, the "New SMS" menu item in the text message application. ②. important: operations that are very important to users, such as "Creating a network" in Wi-Fi settings ". ③. typical: This action item is provided in similar applications, such as "new contact" in the Contact application"

      (2) create an ActionBar:


      1. Define menu in the XML resource file. You can also have common menus, secondary common menus, and secondary optional menus.

       
          
       
           
            
              android:id="@+id/menu_about"
              android:orderInCategory="2"
              android:showAsAction="never"    
      Android: title = "about"/>
      [Note: android: showAsAction attributes include never, always, ifRoom, withText, and collapseActionView]
      Android: showAsAction attribute value explanation:
        • Never: do not display the MenuItem on the ActionBar (default)
        • Always: always display the MenuItem on the ActionBar
        • IfRoom: displays the MenuItem on the ActionBar when the AcitonBar position is sufficient.
        • WithText: displays the MenuItem on the ActionBar and the text of this menu item.
        • CollapseActionView: collapse the ActionView into a normal menu item. Minimum API = 14

          Multiple attributes can be used at the same time, separated by "|.


          (3) Startup Program icon navigation: (that is, to make the app logo become a clickable navigation icon .)


          The core code is as follows:
           
                 
                          ActionBar actionBar = this.getActionBar();
                       actionBar.setDisplayHomeAsUpEnabled(true);
                       actionBar.setHomeButtonEnabled(true);
                       actionBar.setDisplayShowHomeEnabled(true);

                  @Override
                  public boolean onOptionsItemSelected(MenuItem item) {
           
                 
                          switch (item.getItemId()) {
                          case android.R.id.home:
                                  Intent intent = new Intent(this, MainActivity.class);
          // Bring up all the activities on the MainActivity homepage in the Activity stack.
                                 intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                                  startActivity(intent);
                                  break;
                          case R.id.action_search:
                                  break;
                          default:
                                  return super.onOptionsItemSelected(item);
                          }
                          return true;
                  }

          Code explanation:

          ActionBar = getActionBar (); get the ActionBar object.
          ActionBar. setDisplayHomeAsUpEnabled (true); Sets whether to convert the LOGO icon into a clickable button, and in the figure
          Add a left arrow before the icon.
          ActionBar. setHomeButtonEnabled (true); Sets whether to convert the LOGO icon into a clickable button.
          ActionBar. setDisplayShowHomeEnabled (true); Sets whether to display the LOGO icon.

          (4) Add Action View to ActionBar:
          1. Learn how to display the option menu as Action Item; 2. Learn how to start the program Logo navigation; 3. Add Action View to the ActionBar. Call Method 1: Write android: actionLayout = "@ layout/layout name" in the xml file ". Call Method 2: Write android: actionViewClass = "android. widget. SearchView" in the xml file ". 4. Sample Code:
          The core code is as follows:
           
                 
             
                  
                   
                  android:id="@+id/action_search"
                  android:orderInCategory="1"
                  android:showAsAction="always"
          Android: title = "Search"
                  android:icon="@drawable/ic_launcher"
          Android: actionViewClass = "android. widget. SearchView" // either of the two writing methods
                  android:actionLayout="@layout/search” 
                  />
          
                   
              
                    
                     
                  android:id="@+id/action_clock"
                  android:orderInCategory="2"
                  android:showAsAction="always"
          Android: title = "Clock"
                  android:icon="@drawable/ic_launcher"
                  android:actionLayout="@layout/clock"
                  />
           
                
          [Note:] the code for the preceding two layout files is as follows:
           
                 
          1. display the search layout file:
           
                 
                  
                   
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >
          
                   
              
                    
                     
                  android:id="@+id/search_main"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content" >
              

          
                    

          Ii. layout file for displaying the clock:
           
                
                  
                   
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical" >
          
                   
              
                  android:id="@+id/analogClock_main"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content" />

          (5) The ActionBar is displayed at the bottom of the form:
          Set the property of android: uiOptions in the configuration file to splitActionBarWhenNarrow, which can be in the application or activity node.
          1. Core code:
           
                      android:name="com.steven.android23.tab5_fragmentactionbartwo.MainActivity"
                      android:label="@string/app_name" 
                      android:uiOptions="splitActionBarWhenNarrow">

          (6) ActionBar protection:
          1. Purpose: The page will be reloaded when switching between landscape and landscape. In tab mode, how do I remember the previous tab indexes? The site needs to be protected.
          2. Core code:
             @Override
          protected void onSaveInstanceState(Bundle outState) {
          Log.i(TAG, "==index:" + getActionBar().getSelectedNavigationIndex());
          outState.putInt("tabindex", getActionBar().getSelectedNavigationIndex());
          }


          @Override
          protected void onRestoreInstanceState(Bundle savedInstanceState) {
          getActionBar().setSelectedNavigationItem(
          savedInstanceState.getInt("tabindex"));
          }


          (7) other operations of ActionBar:

          1. Set the custom view of ActionBar:

          Bar. setDisplayShowCustomEnabled (true );

          Bar. setDisplayHomeEnabled (false );

          Bar. setCustomView (R. layout. custom_view );

          ②. Set the ActionBar Logo icon:

          Bar. setLogo (R. drawable. logo );

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.