看板 KnucklesNote
作者 標題 [AndroidStudio] Toolbar 使用方法
時間 2016-01-19 Tue. 10:24:11
在建立專案時使用「Empty」產生的初始頁面
上方固定住的那一條叫做 ActionBar
![[圖]](http://i.imgur.com/0isJtfr.png)
在新版的 Android API 會建議改用比較有彈性的 Toolbar
如果初始頁面是選擇「Blank」的話，產生的程式碼就會是使用 Toolbar 了
將 ActionBar 換成 Toolbar
先設定 Style 將 ActionBar 關閉
在 /res/values/styles.xml
將 AppTheme 的 parent 改為 Theme.AppCompat.NoActionBar
像這樣:
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
在 AndroidManifest.xml
確認 <application> 的屬性 android:theme="@style/AppTheme"
執行看看 ActionBar 是否隱藏了
![[圖]](http://i.imgur.com/i5PKG9E.png)
接著確認頁面的類別為繼承 AppCompatActivity，像這樣
public class MainActivity extends AppCompatActivity
build.gradle 要有
compile 'com.android.support:appcompat-v7:23.1.1'
在頁面佈局檔，例如 activity_main.xml 加上
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
按 Alt+Enter 在最外層的 Layout 加上android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
xmlns:app="http://schemas.android.com/apk/res-auto"
修改程式檔 MainActivity.java
在成員函式 onCreate() 裡加上
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
如果有詢問要import什麼檔的話，選setSupportActionBar(toolbar);
import android.support.v7.widget.Toolbar;
執行看看
![[圖]](http://i.imgur.com/XUsALrS.png)
加上右上角的選單按鈕
在 /res 新增一個 resource 目錄
名稱和類型都用預設的 menu 即可
![[圖]](http://i.imgur.com/S9uKn18.png)
在 /res/menu 新增一個 resource 檔
名稱輸入 menu_main
![[圖]](http://i.imgur.com/cRXhZvT.png)
內容修改為
<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.disp_tech.dispbbs.MainActivity">
<!-- 有位置的話在上方顯示為圖示-->
<item
android:id="@+id/action_refresh"
android:icon="@drawable/ic_refresh_white_48dp"
android:title="refresh"
app:showAsAction="ifRoom"/>
<!-- 一律顯示在選單裡-->
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="settings"
app:showAsAction="never" />
</menu>
在toolbar裡放一個重新整理的圖示xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.disp_tech.dispbbs.MainActivity">
<!-- 有位置的話在上方顯示為圖示-->
<item
android:id="@+id/action_refresh"
android:icon="@drawable/ic_refresh_white_48dp"
android:title="refresh"
app:showAsAction="ifRoom"/>
<!-- 一律顯示在選單裡-->
<item
android:id="@+id/action_settings"
android:orderInCategory="100"
android:title="settings"
app:showAsAction="never" />
</menu>
在選單裡放一個選項「settings」
加入圖示 ic_refresh_white_48dp 的方法參考這篇
[AndroidStudio] 加入 Google 提供的 Material icons - KnucklesNote板 - Disp BBS
修改程式檔 MainActivity.java
加上兩個成員函式
@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);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch(item.getItemId()){
case R.id.action_refresh: //點了重新整理
loadData();
return true;
case R.id.action_settings: //點了settings
Log.d("item","click settings");
return true;
}
return super.onOptionsItemSelected(item);
}
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);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch(item.getItemId()){
case R.id.action_refresh: //點了重新整理
loadData();
return true;
case R.id.action_settings: //點了settings
Log.d("item","click settings");
return true;
}
return super.onOptionsItemSelected(item);
}
執行看看，右上角會出現重新整理和選項按鈕
![[圖]](http://i.imgur.com/Xrx0yVC.png)
點重新整理按鈕會重新載入列表
點選項會出現有一個settings按鈕的選單
![[圖]](http://i.imgur.com/BIh6ynz.png)
點一下 settings 看 logcat 有沒有出現 click settings 的訊息
動態改變選單內容
參考 http://developer.android.com/intl/zh-tw/guide/topics/ui/menus.html#options-menu
使用 onPrepareOptionsMenu() 可以在打開選單時，設定某些選項要不要顯示
例如有用了個成員變數 mShowSettings 來決定要不要顯示按鈕的話
加上
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
if(mShowSettings) {
menu.findItem(R.id.action_settings).setVisible(true);
} else {
menu.findItem(R.id.action_settings).setVisible(false);
}
return super.onPrepareOptionsMenu(menu);
}
public boolean onPrepareOptionsMenu(Menu menu) {
if(mShowSettings) {
menu.findItem(R.id.action_settings).setVisible(true);
} else {
menu.findItem(R.id.action_settings).setVisible(false);
}
return super.onPrepareOptionsMenu(menu);
}
Android 3.0 後要改變選單內容時
例如在 mShowSettings 值改變的時候，要呼叫一下
invalidateOptionsMenu();
讓系統執行 onPrepareOptionsMenu()在 Fragment 中加上選單內容
在 onCreateView() 裡加上
setHasOptionsMenu(true);
加上與 Activity 相同的 onCreateOptionsMenu()
與 onOptionsItemSelected()
呼叫更新選單內容的 invalidateOptionsMenu() 要改為
getActivity().invalidateOptionsMenu();
參考:
http://developer.android.com/intl/zh-tw/training/appbar/setting-up.html
http://developer.android.com/intl/zh-tw/training/appbar/actions.html
http://www.101apps.co.za/index.php/articles/using-toolbars-in-your-apps.html
http://enginebai.logdown.com/posts/280450/android-toolbar-navigation-drawer
http://www.vogella.com/tutorials/AndroidActionBar/article.html
--
※ 作者: Knuckles 時間: 2016-01-19 10:24:11
※ 編輯: Knuckles 時間: 2017-01-06 11:36:36
※ 看板: KnucklesNote 文章推薦值: 0 目前人氣: 0 累積人氣: 2367
回列表(←)
分享