回 Android手機程式設計人才培訓班 課程時間表

ActionBar綜合應用

簡介

ActionBar就是應用程式上方有顯示應用程式名稱,類似標題般的那一整列,出現在Android 3.0之後,用來取代原來的標題列,提供顯示更多樣的元件來提升應用程式的操作便利性,如:Option Menu、Action Item、Action View及Tab標籤等等。

Option Menu
要使用ActionBar,專案的Minimum Required SDK版本必須至少為11以上。例如:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="ntust.aaron.MyToolApp"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="8" />

    ...以下省略...
</manifest>

ActionBar方法:

ActionBar actionBar = getActionBar();  // 或getSupportActionBar()
actionBar.hide(); // 隱藏ActionBar
actionBar.show(); // 顯示ActionBar
actionBar.setDisplayShowTitleEnable(false); // 隱藏程式標題(getSupportActionBar()取得的ActionBar不支援該方法)
actionBar.setDisplayUseLogoEnabled(true);   // 改變程式的小圖示
actionBar.setBackgroundDrawable(new ColorDrawable(0xFFFFFF00));  // 將ActionBar底色改為黃色
actionBar.setSubtitle("mytest");
actionBar.setTitle("vogella.com");
actionBar.setHomeButtonEnabled(true);  // 讓ActionBar的左邊圖示可以點擊,點擊時onOptionsItemSelected()會收到ID=android.R.id.home的MenuItem。
actionBar.setDisplayShowHomeEnabled(true); // 顯示左邊的圖示,setHomeButtonEnabled()必須搭配此方法設為true才能生效。
actionBar.setDisplayHomeAsUpEnabled(true); // 將左邊的圖示顯示為返回上一頁的圖示
actionBar.setIcon(R.drawable.ic_launcher); // 當setDisplayShowHomeEnabled()設為true時才有效用

要讓ActionBar在隱藏和顯示之間不會改變畫面大小可以在目前使用的Theme內加入overlay的style:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:windowActionBarOverlay">true</item>
    </style>

</resources>

要設定setDiaplayUseLogoEnabled(true);時,必須配合修改AndroidManifest.xml,在<application>標籤中新增android:logo屬性,指定要使用的圖檔。例如:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="ntust.aaron.MyToolApp"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="11"
        android:targetSdkVersion="21" />

    <application>
        android:logo="@drawable/my_logo"
        ...>
        <activity>
            ...
        </activity>
        ...
    </application>
</manifest>
  • 如果你的Activity繼承自Activity類別,則取得ActionBar的方式為呼叫getActionBar()方法。
    ActionBar actionBar = getActionBar();
  • 如果你的Activity繼承自ActionBarActivity類別,則取得ActionBar的方式為呼叫getSupportActionBar()方法。
    ActionBar actionBar = getSupportActionBar();

Action Item

Option Menu即為Android的功能表,而選單裡的選項Menu Item如果顯示在ActionBar上面就稱之為Action Item,也就是說Action Item來自Menu Item,要將選單項目(Menu Item)放到ActionBar上面只需要在定義選項時加上showAsAction屬性,並設定為ifRoom就可以了。

例如:
<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=".MainActivity">

    <item android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:orderInCategory="100"
        app:showAsAction="ifRoom" />
</menu>
或是在程式內呼叫:
MenuItem menuItem = menu.findItem(R.id.menu_item_id);  // Menu Item 的ID,在XML中設定的
menuItem.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);

這個屬性告訴Android系統,如果ActionBar上還有空間,就把這個選項變成Action Item並顯示在ActionBar上面。

如果Menu Item有設定android:icon屬性,則預設Action Item會用圖示來顯示,如果要顯示文字,可以加上withText屬性值。

如:
<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=".MainActivity">

    <item android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:icon="@drawable/settings_icon"
        android:orderInCategory="100"
        app:showAsAction="ifRoom|withText" />
</menu>
或是在程式內呼叫:
MenuItem menuItem = menu.findItem(R.id.menu_item_id);  // Menu Item 的ID,在XML中設定的
menuItem.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM|MenuItem.SHOW_AS_ACTION_WITH_TEXT);

Splite模式

Android 4.0之後ActionBar新增了一種顯示Action Item位置的split模式,在這種模式下的ActionBar會根據目前螢幕方向決定Action Item顯示位置;在直立的螢幕上(也就是高度大於寬度),Action Item會顯示在螢幕下方,如果螢幕為橫向,則顯示在ActionBar裡面。

要使用split模式,只需要在AndroidManifest.xml內的<application>標籤或<activity>標籤內加入android:uiOptions="splitActionBarWhenNarrow"屬性即可。

例如:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.aaronlife.myapplication" >

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:uiOptions="splitActionBarWhenNarrow"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            ...>
            ...
        </activity>
    </application>

</manifest>

Action View

Action Item只是一個按鈕,如果想在ActionBar放上更複雜的下拉選單或輸入等等,就必須使用ActionView。

建立Action View步驟:

  1. 建立一個要給Action View使用的XML Layout檔。(actionview.xml)
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent" android:layout_height="match_parent">
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="選擇國家:"
            android:textSize="20sp"/>
    
        <Spinner android:id="@+id/listCountry"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"/>
    </LinearLayout>
    
  2. 在res/menu/menu.xml中新增一個選項:
    <item android:id="@+id/action_select"
          android:title="Select"
          android:orderInCategory="100"
          android:actionLayout="@layout/actionview"
          app:showAsAction="ifRoom" />
    
  3. 新增一個給第一步驟建立的layout裡頭的Spinner用的自訂樣式(dropdown.xml):
    <?xml version="1.0" encoding="utf-8"?>
    <TextView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="20sp"
        android:textColor="#CCC"
        android:gravity="center" >
    </TextView>
    
  4. 在res/values/strings.xml內加入要給Spinner用的選項字串陣列:
    <string-array name="country">
        <item>日本</item>
        <item>台灣</item>
        <item>香港</item>
        <item>美國</item>
        <item>新加坡</item>
    </string-array>
    
  5. 在java/src/{package}/MainActivity.java內的onCreateOptionsMenu()做初始化:
    @Override
    public boolean onCreateOptionsMenu(Menu menu) 
    {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
    
        Spinner spnCountry = (Spinner)menu.findItem(R.id.action_select)
                                          .setActionView(R.layout.actionview)
                                          .getActionView()
                                          .findViewById(R.id.listCountry);
        ArrayAdapter<CharSequence> adapList = ArrayAdapter.createFromResource(this, R.array.country, R.layout.dropdown);
        spnCountry.setAdapter(adapList);
    
        return true;
    }
    
本範例適用在Activity是繼承自ActionBarActivityActivity的應用程式。

完成畫面:

ShareActionProvider

透過ShareActionProvider可以將應用程式內的資料快速的分享到其它有支援分享功能的應用程式,像:LINE、臉書等等。

建立ShareActionProvider步驟:

  1. 在res/menu/menu.xml中加入一個選項,該選項會用到一個新的屬性app:actionProviderClass
    <item android:id="@+id/action_share"
          android:title="Share"
          app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
          app:showAsAction="ifRoom" />
    
  2. 在Activity程式碼的onCreateOptionsMenu()方法內,取得Action View的ShareActionProvider物件:
    MenuItem itemShare = menu.findItem(R.id.action_share);
    ShareActionProvider actionProvider = (ShareActionProvider) MenuItemCompat.getActionProvider(itemShare);
    
  3. 建立一個ACTION_SEND的Intent物件,並設定好資料和資料型態,接著再將這個Intent設定給ShareActionProvider物件:
    // 準備給ShareActionProvider使用的Intent
    Intent it = new Intent(Intent.ACTION_SEND);
    it.setType("text/plain");
    it.putExtra(Intent.EXTRA_TEXT, "Hello from aaronlife.com");
    actionProvider.setShareIntent(it);
    
  4. 會用到的類別庫:
    import android.content.Intent;
    import android.support.v7.app.ActionBarActivity;
    import android.support.v7.widget.ShareActionProvider;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.support.v4.view.MenuItemCompat;
    
    重要:本範例僅適用在Activity是繼承自ActionBarActivity的應用程式。
    完成的ShareActionProvider

建立可以透過手指左右滑動(Swipe)來切換畫面的TAB標籤頁

在建立專案時選擇建立Tabbed Activity
Navigation Style改成Action Bar Tabs(With ViewPager)

覆載onActivityCreated()方法,做初始化(相當於原本在onCreate()內做的事情):

 @Override
public void onActivityCreated(@Nullable Bundle savedInstanceState)
{
    super.onActivityCreated(savedInstanceState);

    TextView textView = (TextView)getView().findViewById(R.id.section_label);

    switch(getArguments().getInt(ARG_SECTION_NUMBER))
    {
    case 1:
        textView.setText("1");
        break;
    case 2:
        textView.setText("2");
        break;
    case 3:
        textView.setText("3");
        break;
    }

    Toast.makeText(this.getActivity(), "Hello: " + textView.getText(), Toast.LENGTH_SHORT).show();
}