【Android UI設計與開發】之具體解釋ActionBar的使用

時間  2019-11-19
標籤 android 設計 開發 具體 解釋 actionbar 使用 欄目 Android 简体版
原文   原文鏈接

具體解釋Android中的ActionBar的使用html

 

 請尊重他人的勞動成果，轉載請註明出處：具體解釋Android中的ActionBar的使用 java

 http://blog.csdn.net/fengyuzhengfan/article/details/40216389android

ActionBar是Android 3.0(API level 11)引入的一個新控件，它表明了應用程序標題欄，假設要開發兼容的程序，可以使用v7包下的ActionBar。咱們在應用中看見的ActionBar一般是下圖的樣子，比方有道詞典及微信：數組

ActionBar

1.App icon:應用的圖標，左側圖標說明可以觸摸返回，至關於觸摸back返回鍵微信

2.ViewControl:下拉列表導航app

3.Action button:至關於普通的Button可以監聽點擊事件ide

4.Action overflow:三個點，至關於手機上的menu鍵，可以顯示隱藏的action button。函數

使用ActionBar一個最大優勢是應用可以依據設備顯示空間動態調整，假設顯示空間不夠，應用把多出的Action Button加入到Action overflow區域。this


怎樣在應用中加入ActionBar


1、在應用中加入ActionBar，通常咱們要繼承ActionBarActivity：spa

  public classMainActivity extends ActionBarActivity{ //…….         }

也可以直接繼承Activity，但是爲了向後兼容，最好繼承ActionBarActivity(注意這個類是兼容包v7中定義的)

2、在res/menu/文件夾中建立ActionBar的Item，例如如下：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.jph.ab.MainActivity">
    <item
        android:id="@+id/refresh"
        android:orderInCategory="100"
        android:title="/刷新"
        android:icon="@drawable/ic_navigation_refresh"
        app:showAsAction="always"/>
    <item
        android:id="@+id/cancle"
        android:orderInCategory="100"
        android:title="取消"
        android:icon="@drawable/ic_navigation_cancel"
        app:showAsAction="always"/>
    <item
        android:id="@+id/setting"
        android:orderInCategory="100"
        android:title="設置"
        android:icon="@drawable/ic_action_settings"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/cancle2"
        android:orderInCategory="100"
        android:title="刪除"
        android:icon="@drawable/ic_cab_done_holo"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/play"
        android:orderInCategory="100"
        android:title="播放"        
        android:icon="@drawable/ic_media_play"
        app:showAsAction="never"/>
</menu>

Menu標籤中Item標籤的主要屬性：

 

屬性名

解釋

android:orderInCategory

表示每個item的優先級，值越大優先級越低，actionbar地方不夠就會放到overflow中。

android:title

item的標題。

android:icon

item顯示的圖標。

app:showAsAction

item顯示的方式。


其showAsAction屬性接受例如如下一些值：

ifRoom

會顯示在Item中，但是假設已經有4個或者4個以上的Item時會隱藏在溢出列表中。固然個數並不僅侷限於4個，根據屏幕的寬窄而定

never

永遠不會顯示。僅僅會在溢出列表中顯示，而且僅僅顯示標題，因此在定義item的時候，最好把標題都帶上。

always

不論是否溢出，總會顯示。

 withText

withText值示意Action bar要顯示文本標題。Action bar會盡量的顯示這個標題，但是，假設圖標有效並且受到Action bar空間的限制，文本標題有可能顯示不全。

collapseActionView

聲明瞭這個操做視窗應該被摺疊到一個button中，當用戶選擇這個button時，這個操做視窗展開。不然，這個操做視窗在默認的狀況下是不可見的。通常要配合ifRoom一塊兒使用纔會有效果。

提示：爲了兼容低版本號，這裏沒有使用android:showAsAction而是使用的v7兼容包中的app:showAsAction。使用app:showAsAction需要將   xmlns:app=http://schemas.android.com/apk/res-auto命名空間導進來。

 

3、重寫ActionBarActivity中的方式：

      @Override
   public booleanonCreateOptionsMenu(Menu menu) {
      // Inflate the menu; this adds items to theaction bar if it is present.
      getMenuInflater().inflate(R.menu.simple, menu);//獲取menu文件夾下simple.xml的菜單文件
      return true;
   }

這時ActionBar的Item在應用中就行顯示了，假設要讓觸摸Item加入功能，必須重寫進行第4步

4、監聽觸摸Item事件

@Override
public booleanonOptionsItemSelected(MenuItem item) {
      int id = item.getItemId();    
      switch (id) {
      case R.id.refresh:
         Utils.showToast(this, "您點擊了刷新菜單", Toast.LENGTH_SHORT);
         return true;
      case R.id.cancle:
         Utils.showToast(this, "您點擊了取消菜單", Toast.LENGTH_SHORT);
         return true;
      case R.id.cancle2:
         Utils.showToast(this, "您點擊了刪除菜單", Toast.LENGTH_SHORT);
         return true;
      case R.id.setting:
         Utils.showToast(this, "您點擊了設置菜單", Toast.LENGTH_SHORT);
         return true;
      case R.id.play:
         Utils.showToast(this, "您點擊了播放菜單", Toast.LENGTH_SHORT);
         return true;   
      }
      return super.onOptionsItemSelected(item);
   }

程序執行效果圖：

怎樣在應用中加入ActionBar


 爲ActionBar配置返回鍵

在AndroidManifest.xml中爲需要返回到上一級的activity配置android:parentActivityName=".MainActivity"屬性。當中parentActivityName表示當前activity要返回到activity。

<activity android:name=".SpinnerActionBar"
            android:parentActivityName=".MainActivity"
            android:label="ActionBar實現下拉導航"></activity>

程序執行效果圖：

爲ActionBar配置返回鍵

 

顯示溢出區button

假設手機有menu鍵ActionBar可能不會顯示三個點的溢出button，觸摸菜單鍵纔會顯示ActionBar overflow區域，這樣用戶體驗不一致，爲了可讓有菜單鍵的設備，也能夠顯示溢出button，則需要增長下面代碼：

 

/**
 * 即便有物理菜單鍵也顯示ActionBar的flowMenu
 */
public static void showOverflowMenu(Context context) {         
     try { 
       ViewConfiguration config = ViewConfiguration.get(context);
        //使用java反射技術，獲取getDeclaredField類的私有屬性sHasPermanentMenuKey
       Field menuKeyField = ViewConfiguration.class.getDeclaredField("sHasPermanentMenuKey"); 
        if(menuKeyField != null){ 
           menuKeyField.setAccessible(true); //將屬性設爲可訪問的
           menuKeyField.setBoolean(config, false);  //爲屬性賦值爲false
       } 
    } catch (Exception e) { 
       e.printStackTrace(); 
    } 
}


而後，在onCreate中調用這個函數，這樣有菜單鍵的設備就能顯示溢出button了。

 

ActionBar實現下拉導航

詳細步驟：

l 首先需要一個SpinnerAdapter設置下拉item的內容和顯示的layout

l 實現ActionBar.OnNavigationListener這個接口，接口中有點擊item的事件

l 設置navigationmode好比

ActionBar actionBar = getActionBar();

actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);

l 用setListNavigationCallbacks()方法來實現下拉選項，好比

actionBar.setListNavigationCallbacks(mSpinnerAdapter,mNavigationCallback);

 

程序代碼：

package com.jph.ab.activity;

import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.OnNavigationListener;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ArrayAdapter;
import android.widget.Toast;
import com.jph.ab.utils.Utils;

/**
 * ActionBar實現下拉導航
 * @author jph
 * Date:2014.10.13
 */
public class SpinnerActionBar extends ActionBarActivity {
	private ActionBar actionbar;
	/**菜單名稱***/
	private String[] menuItems;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);		
		Utils.showOverflowMenu(this);//假設手機有menu鍵也顯示flowMenu
		actionbar=getSupportActionBar();//獲取v7兼容包中的ActionBar
		actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_LIST);
		menuItems=getResources().getStringArray(R.array.menus);//獲取string_array.xml中的menus數組
		ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,
				R.layout.spinner,R.id.tvMenu,menuItems );
		actionbar.setListNavigationCallbacks(adapter, new OnNavigationListener() {			
			@Override
			public boolean onNavigationItemSelected(int itemPosition, long itemId) {
				// TODO Auto-generated method stub				
				Utils.showToast(SpinnerActionBar.this,"您選擇了："+ menuItems[itemPosition],Toast.LENGTH_SHORT);				
				return true;
			}
		});
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.simple, menu);//獲取menu文件夾下simple.xml的菜單文件
		return true;
	}
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();		
		switch (id) {
		case R.id.refresh:
			Utils.showToast(this, "您點擊了刷新菜單", Toast.LENGTH_SHORT);
			return true;
		case R.id.cancle:
			Utils.showToast(this, "您點擊了取消菜單", Toast.LENGTH_SHORT);
			return true;
		case R.id.cancle2:
			Utils.showToast(this, "您點擊了刪除菜單", Toast.LENGTH_SHORT);
			return true;
		case R.id.setting:
			Utils.showToast(this, "您點擊了設置菜單", Toast.LENGTH_SHORT);
			return true;
		case R.id.play:
			Utils.showToast(this, "您點擊了播放菜單", Toast.LENGTH_SHORT);
			return true;		
		}
		return super.onOptionsItemSelected(item);
	}
}

程序執行效果圖：

ActionBar實現下拉導航

 

ActionBar實現Tab導航

package com.jph.ab.activity;

import java.util.ArrayList;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBar.TabListener;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
import com.jph.ab.fragment.BaseFragment;
import com.jph.ab.fragment.BaseFragmentPagerAdapter;
import com.jph.ab.utils.Utils;

/**
 * ActionBar實現Tab導航
 * 程序亮點：ActionBar Tab+ViewPager+Fragment
 * @author jph
 * Date:2014.10.13
 */
public class TabActionBar extends ActionBarActivity {
	private ActionBar actionbar;	
	private ViewPager vpContent;
	/**ViewPager包括的Fragment集合**/
	private ArrayList<Fragment> fragments;
	/**ActionBar上的Tab集合**/
	private ArrayList<Tab> tabs;
	/**當前頁**/
	protected int currentPage;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);		
		setContentView(R.layout.tab_actionbar);		
		Utils.showOverflowMenu(this);//假設手機有menu鍵也顯示flowMenu
		initViewPager();//初始化ViewPager要在初始化initTab以前，不然會出錯
		initTab();
	}	
	/**
	 * 初始化Tab
	 */
	private void initTab() {
		// TODO Auto-generated method stub
		tabs=new ArrayList<Tab>();
		actionbar=getSupportActionBar();//獲取v7兼容包中的ActionBar
		actionbar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
		Tab tabMyContacts=actionbar.newTab();//建立一個tab實例
		Tab tabMyFavorite=actionbar.newTab();
		tabMyContacts.setTag(0);//爲Tab設置Tag，用於標識Tab的位置
		tabMyContacts.setText("全部聯繫人");			
		tabMyFavorite.setTag(1);
		tabMyFavorite.setText("常用聯繫人");
		tabMyContacts.setTabListener(tabListener);//爲Tab設置監聽(這一步是必須的，否則系統會不報錯)
		tabMyFavorite.setTabListener(tabListener);
		tabs.add(tabMyContacts);
		tabs.add(tabMyFavorite);
		actionbar.addTab(tabMyContacts);//將Tab加入ActionBar上
		actionbar.addTab(tabMyFavorite);	
	}
	/**
	 * 初始化ViewPager
	 */
	private void initViewPager() {
		// TODO Auto-generated method stub
		vpContent=(ViewPager)findViewById(R.id.vpContent);
		//初始化ViewPager顯示的頁面集合
		fragments = new ArrayList<Fragment>();
		BaseFragment fragment1=BaseFragment.newInstance(BaseFragment.LOAD_FRAGMENT_1);
		BaseFragment fragment2=BaseFragment.newInstance(BaseFragment.LOAD_FRAGMENT_2);
		fragments.add(fragment1);
		fragments.add(fragment2);
		//設置ViewPager adapter
		BaseFragmentPagerAdapter adapter=new BaseFragmentPagerAdapter(getSupportFragmentManager(), fragments);
		vpContent.setAdapter(adapter);
		vpContent.setCurrentItem(0);//默認顯示第一個頁面
		//監聽ViewPager事件
		vpContent.setOnPageChangeListener(new OnPageChangeListener(){
			@Override
			public void onPageScrolled(int position, float positionOffset,
					int positionOffsetPixels) {
			}
			@Override
			public void onPageSelected(int position) {			
				currentPage = position;
				actionbar.selectTab(tabs.get(position));//當滑動頁面結束讓ActionBar選擇指定的Tab
			}
			@Override
			public void onPageScrollStateChanged(int state) {
			}
		});
	}	
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.simple, menu);//獲取menu文件夾下simple.xml的菜單文件
		return true;
	}
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();		
		switch (id) {
		case R.id.refresh:
			Utils.showToast(this, "您點擊了刷新菜單", Toast.LENGTH_SHORT);
			return true;		
		}
		return super.onOptionsItemSelected(item);
	}
	/**
	 * ActionBar的Tab監聽器
	 */
	TabListener tabListener=new TabListener() {		
		@Override
		public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
			// TODO Auto-generated method stub
			
		}		
		@Override
		public void onTabSelected(Tab selectedTab, FragmentTransaction arg1) {
			// TODO Auto-generated method stub
			vpContent.setCurrentItem((Integer) selectedTab.getTag());//當選中了指定的Tab後讓VeiwPager滑動到指定頁面
		}
		
		@Override
		public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
			// TODO Auto-generated method stub
			
		}
	};
}

程序執行效果圖：

 

ActionBar實現Tab導航

 

ActionBar實現分享

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.jph.ab.MainActivity">
    <!-- 分享 -->
    <item
      android:id="@+id/share"
      android:title="分享"
      app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
      app:showAsAction="always" />  
</menu>

package com.jph.ab.activity;


import com.jph.ab.utils.Utils;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.MenuItemCompat;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.ShareActionProvider;
import android.view.Menu;
import android.view.MenuItem;

/**
 * ActionBar實現分享
 * @author jph
 * Date:2014.10.13
 */
public class ShareActionBar extends ActionBarActivity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);		
		Utils.showOverflowMenu(this);//假設手機有menu鍵也顯示flowMenu
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.share, menu);//獲取menu文件夾下simple.xml的菜單文件
		setShare(menu);
		return true;
	}
	/**
	 * 爲ActionBar實現分享
	 * @param menu
	 */
	private void setShare(Menu menu) {
		// TODO Auto-generated method stub
		MenuItem item = menu.findItem(R.id.share);
		ShareActionProvider sap = (ShareActionProvider) MenuItemCompat
				.getActionProvider(item);
		Intent shareIntent = new Intent();
		shareIntent.setType("text/plain");
		shareIntent.setAction(Intent.ACTION_SEND);
		shareIntent.putExtra(Intent.EXTRA_TEXT, "ActionBar實現分享@author:jph");
		sap.setShareIntent(shareIntent);
	}
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.		
		return super.onOptionsItemSelected(item);
	}
}


 

程序執行效果圖：

ActionBar實現分享

 

ActionBar實現搜索（操做視圖）

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.jph.ab.MainActivity"> 
    <item
        android:id="@+id/search"
        android:orderInCategory="100"
        android:title="搜索"
        app:actionViewClass="android.support.v7.widget.SearchView"
        android:icon="@drawable/abc_ic_search"
        app:showAsAction="collapseActionView|ifRoom" />
    <item
        android:id="@+id/cancle"
        android:orderInCategory="100"
        android:title="取消"
        android:icon="@drawable/ic_navigation_cancel"/>
</menu>


package com.jph.ab.activity;

import com.jph.ab.utils.Utils;
import android.os.Bundle;
import android.support.v4.view.MenuItemCompat;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.SearchView;
import android.support.v7.widget.SearchView.OnQueryTextListener;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
/**
 * ActionBar實現搜索
 * @author jph
 * Date:2014.10.13
 */
public class SearchActionBar extends ActionBarActivity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);		
		Utils.showOverflowMenu(this);//假設手機有menu鍵也顯示flowMenu
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.search, menu);//獲取menu文件夾下simple.xml的菜單文件
		setSearch(menu);
		return true;
	}
	/**
	 * 爲ActionBar實現查詢功能
	 * @param menu
	 */
	private void setSearch(Menu menu) {
		// TODO Auto-generated method stub
		final MenuItem item = menu.findItem(R.id.search);
		SearchView sv = (SearchView) MenuItemCompat.getActionView(item);
		if(sv != null){
			sv.setOnQueryTextListener(new OnQueryTextListener() {
				@Override
				public boolean onQueryTextSubmit(String arg0) {
					Utils.showToast(SearchActionBar.this, arg0, Toast.LENGTH_SHORT);
					MenuItemCompat.collapseActionView(item);
					return true;
				}				
				@Override
				public boolean onQueryTextChange(String arg0) {
					return false;
				}
			});
		}
	}
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		// Handle action bar item clicks here. The action bar will
		// automatically handle clicks on the Home/Up button, so long
		// as you specify a parent activity in AndroidManifest.xml.
		int id = item.getItemId();		
		switch (id) {		
		case R.id.cancle:
			Utils.showToast(this, "您點擊了取消菜單", Toast.LENGTH_SHORT);
			return true;
		
		}
		return super.onOptionsItemSelected(item);
	}
}

 

程序執行效果圖：

ActionBar實現搜索（操做視圖）


 假設你認爲這篇博文對你有幫助的話，請爲這篇博文點個贊吧！也可以關注fengyuzhengfan的博客，收看不少其它精彩!http://blog.csdn.net/fengyuzhengfan/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程