深入剖析Android四大元件(九)——Activity之AppCompatActivity與toolbar的結合
對於技術類的部落格,我們永遠追尋最新API腳步,在API22之前我們使用標題欄基本都是在ActionBarActivity的Activity中處理的,而API22之後,谷歌遺棄了ActionBarActivity,推薦我們也可以說是強制我們使用AppCompatActivity。
然而ActionBarActivity與AppCompatActivity的使用大同小異,下面我們將介紹最新的Activity元件之AppCompatActivity的使用。
最後的效果與微信基本相同,圖如下:
1.初探AppCompatActivity
我們按照AndroidStudio的預設順序建立專案,預設Activity繼承自AppCompatActivity。程式碼如下:
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }
執行提到如下所示的介面:
其結果與繼承自Activity並無二致,醜爆了。下面我們來一步一步擴充套件其標題欄,讓他的內容更豐富多彩。
2.AppCompatActivity與Toolbar結合
其實我們並不是要使用AppCompatActivity自帶的標題欄,那樣擴充套件會很麻煩,在14年的Android 5.0的時候就用Toolbar替代了ActionBar,而ActionBarActivity又被AppCompatActivity替代,那麼使用方法就是引入Toolbar設定到Activity中。
㈠首先我們必須在配置檔案中,寫入Toolbar,程式碼如下:
<android.support.v7.widget.Toolbar android:id="@+id/activity_main_toolbar" android:layout_height="wrap_content" android:layout_width="match_parent" android:minHeight="?attr/actionBarSize" android:background="?attr/colorPrimary"> </android.support.v7.widget.Toolbar>
解釋①android:minHeight="?attr/actionBarSize":設定標題欄最小高度為ActionBar的高度。
解釋②android:background="?attr/colorPrimary":該主題下的主色。也就是預設的灰色。
我們知道在AndroidManifest.xml清單檔案下application中設定了android:theme="@style/AppTheme"而檢視AppTheme看到如下樣式
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> </style> </resources>
從名字我們就可以看出來,預設的標題欄為黑色。我們使用了toolbar就必須修改樣式檔案,將原來的標題欄去掉,修改後的樣式檔案如下:
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> </style> </resources>
如下這個時候執行,那麼你將看到介面也是沒有標題欄的,因為你並沒有設定到AppCompatActivity中去。
㈡將Toolbar顯示到介面
我們建立一個方法名為initActionBar(),首先當然是獲取ToolBar控制元件,然後將Toolbar設定到Activity中去。程式碼如下:
public void initActionBar() { Toolbar toolbar = (Toolbar) findViewById(R.id.activity_main_toolbar); setSupportActionBar(toolbar); }
現在執行,我們將得到如下介面:
依然不是你期待的效果,下面我們將介紹AppCompatActivity的細節。
3.AppCompatActivity詳解
㈠設定title
我們可以看到,標題欄始終顯示我們的專案名,這樣顯然給使用者看是不理想的。那麼怎麼設定標題欄的字串。我們可以在setSupportActionBar(toolbar)之前加入如下程式碼:
setTitle("liyuanjinglylyj");
此setTitle("liyuanjinglyj")是AppCompatActivity的方法,並不是toolbar的方法,那麼我們執行一下程式將得到如下介面:
那麼我們將剛才的AppCompatActivity的setTitle換成Toolbar的setTitle看看效果會怎麼樣,其實結果如上圖一樣,沒有任何變化。
可能你希望title顯示在中間,很遺憾,toolbar與AppCompatActivity並沒有提供相關的方法,不過可以在toolbar中加入一個TextView,配置其屬性,讓其顯示在最中間。
㈡設定回退按鈕
假如我的這個介面並不是主介面,而是一個子介面,這個時候我有一個需求,需要回退到上一個介面那麼怎麼設定左邊的圖示並實現其方法。其實很簡單,在setSupportActionBar(toolbar);後面加入如下程式碼:
toolbar.setNavigationIcon(R.drawable.back); toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { finish(); } });
為什麼在setSupportActionBar(toolbar);後面加入而不在前面,你可以加入到前面試試,雖然可以顯示回退的圖片,但是點擊並沒有呼叫該按鈕的點選事件,而在setSupportActionBar(toolbar);後面設定點選才有反應。一定要記住,不然回退是不會起作用的。
執行結果如下:
㈢設定logo
設定logo在標題欄並不少見,比如網易APP首頁就的網易設定的logo,其實程式碼很簡單,也僅僅需要一條程式碼即可,在setSupportActionBar(toolbar)前加入如下程式碼:
toolbar.setLogo(R.id.app_logo);
執行結果如下:
㈣設定副標題
在setSupportActionBar(toolbar)前加入如下程式碼::
toolbar.setSubtitle("liyuanjing");
執行介面後,如下:
㈤設定選單
我們知道onCreateOptionsMenu是上下文選單,同理可以直接在該方法中設定選單,程式碼如下:
@Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return true; }
此方法為Activity方法。因為你在上面已經講Toolbar設定到了Activity中,所以預設也會顯示到標題欄中,如果你覺得這樣不習慣,那麼你可以新增一條語句,不過這條語句新增不新增都沒關係。
toolbar.setOnCreateContextMenuListener(this);
執行程式,如下圖所示:
4.Toolbar的Style
3標題下的Toolbar是藍色,且有很好Style,那麼這是怎麼設定呢,雖然我們這裡重點是剖析Activity但是遇到有關Activity標題欄樣式的還是要提到。
我們粗略的講解上面的標題欄用到了哪些Style:
①<item name="colorPrimary">#4876FF</item>:如第一步直接在toolbar控制元件下面設定的屬性一樣,就是toolbar的顏色。
②<item name="colorPrimaryDark">#3A5FCD</item>:狀態列顏色也就是標題欄上面的那個顏色,而我用的是小米1S測試的,其韌體並沒有很好的實現其功能,所以在該系統下並沒有實現其效果。
③<item name="android:windowBackground">@android:color/white</item>:視窗背景色,也就是Activity標題欄下面所有地方的顏色。
當我們設定瞭如上三個屬性,那麼效果圖就如上面所示了,完整程式碼如下:
<!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- toolbar(actionbar)顏色 --> <item name="colorPrimary">#4876FF</item> <!-- 狀態列顏色 --> <item name="colorPrimaryDark">#3A5FCD</item> <!-- 視窗的背景顏色 --> <item name="android:windowBackground">@android:color/white</item> </style>
5.Toolbar選單樣式
我們來看看如果直接使用上面的點選後邊的選單會有什麼效果:
你有看到那個APP選單彈出擋住了標題欄嗎?,肯定沒有吧,要是有的話,你肯定立即解除安裝了該應用了。
下面我們的任務就是將該選單的樣式和其他APP一樣,在標題欄下面彈出。
首先要說明一下,toolbar選單預設樣式的父類為Widget.AppCompat.Light.PopupMenu.Overflow,那麼要更改toobar中選單的彈出的樣式,就必須繼承這個父類的樣式。
其程式碼如下:
<!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- toolbar(actionbar)顏色 --> <item name="colorPrimary">#4876FF</item> <!-- 狀態列顏色 --> <item name="colorPrimaryDark">#3A5FCD</item> <!-- 視窗的背景顏色 --> <item name="android:windowBackground">@android:color/white</item> <item name="actionOverflowMenuStyle">@style/LYJMenuStyle</item> </style> <style name="LYJMenuStyle" parent="@style/Widget.AppCompat.Light.PopupMenu.Overflow"> <item name="overlapAnchor">false</item> </style>
設定這一個屬性那麼其彈出的樣式就與其他APP一樣不會覆蓋標題欄。
還有其他屬性這裡簡要說明一下:
①<item name="android:popupBackground">?attr/colorPrimary</item>:彈出選單背景色為標題欄的背景色
②<item name="android:dropDownVerticalOffset">0dip</item>:彈出選單與標題欄的垂直間距
將這兩條加入LYJMenuStyle中就可以了實現如下圖所示的彈出選單:
最後介紹一下選單裡面重要的幾個屬性:
app:showAsAction有三個值:
always:總是顯示在介面上
never:不顯示在介面上,只讓出現在右邊的三個點中
ifRoom:如果有位置才顯示,不然就出現在右邊的三個點中
可以用 | 同時使用兩個上面的值。
系統也為選單提供了預設的分享選單與查詢選單,程式碼如下:
app:actionViewClass="android.support.v7.widget.SearchView"
app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
從名字想必不需要過多解釋,最後一個就是顯示的優先順序,也就是顯示的順序,誰在最前面,誰在後面:
android:orderInCategory數值越小,顯示靠前,且優先順序最大。