帶你深度了解AppCompatActivity和Toolbar(Android21 )

在API21之前我們使用標(biāo)題欄基本都是在ActionBarActivity的Activity中處理的,而API21之后,谷歌遺棄了ActionBarActivity,推薦我們也可以說是強制我們使用AppCompatActivity,然而ActionBarActivity與AppCompatActivity的使用大同小異,下面我們將介紹最新的Activity組件之AppCompatActivity的使用,最后的效果與微信和支付寶等基本相同,圖如下:


1.初探AppCompatActivity

我們按照AndroidStudio的默認(rèn)順序創(chuàng)建項目,默認(rèn)Activity繼承自AppCompatActivity。代碼如下:

public classMainActivityextendsAppCompatActivity {@Overrideprotected voidonCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}}

運行提到如下所示的界面:

其結(jié)果與繼承自Activity并無二致,丑爆了。下面我們來一步一步擴展其標(biāo)題欄,讓他的內(nèi)容更豐富多彩。

2.AppCompatActivity與Toolbar結(jié)合

其實我們并不是要使用AppCompatActivity自帶的標(biāo)題欄,那樣擴展會很麻煩,在14年的Android 5.0的時候就用Toolbar替代了ActionBar,而ActionBarActivity又被AppCompatActivity替代,那么使用方法就是引入Toolbar設(shè)置到Activity中。

㈠首先我們必須在配置文件中,寫入Toolbar,代碼如下:

解釋①android:minHeight="?attr/actionBarSize":設(shè)置標(biāo)題欄最小高度為ActionBar的高度。

解釋②android:background="?attr/colorPrimary":該主題下的主色。也就是默認(rèn)的灰色。

我們知道在AndroidManifest.xml清單文件下application中設(shè)置了android:theme="@style/AppTheme"而查看AppTheme看到如下樣式

從名字我們就可以看出來,默認(rèn)的標(biāo)題欄為黑色。我們使用了toolbar就必須修改樣式文件,將原來的標(biāo)題欄去掉,修改后的樣式文件如下:

如下這個時候運行,那么你將看到界面也是沒有標(biāo)題欄的,因為你并沒有設(shè)置到AppCompatActivity中去。

㈡將Toolbar顯示到界面

我們創(chuàng)建一個方法名為initActionBar(),首先當(dāng)然是獲取ToolBar控件,然后將Toolbar設(shè)置到Activity中去。代碼如下:

public voidinitActionBar() {? ? Toolbar toolbar = (Toolbar) findViewById(R.id.activity_main_toolbar);setSupportActionBar(toolbar);}

現(xiàn)在運行,我們將得到如下界面:

依然不是你期待的效果,下面我們將介紹AppCompatActivity的細節(jié)。

3.AppCompatActivity詳解

㈠設(shè)置title

我們可以看到,標(biāo)題欄始終顯示我們的項目名,這樣顯然給用戶看是不理想的。那么怎么設(shè)置標(biāo)題欄的字符串。我們可以在setSupportActionBar(toolbar)之前加入如下代碼:

setTitle("liyuanjinglylyj");

此setTitle("liyuanjinglyj")是AppCompatActivity的方法,并不是toolbar的方法,那么我們運行一下程序?qū)⒌玫饺缦陆缑妫?/p>

那么我們將剛才的AppCompatActivity的setTitle換成Toolbar的setTitle看看效果會怎么樣,其實結(jié)果如上圖一樣,沒有任何變化。

可能你希望title顯示在中間,很遺憾,toolbar與AppCompatActivity并沒有提供相關(guān)的方法,不過可以在toolbar中加入一個TextView,配置其屬性,讓其顯示在最中間。

㈡設(shè)置回退按鈕

假如我的這個界面并不是主界面,而是一個子界面,這個時候我有一個需求,需要回退到上一個界面那么怎么設(shè)置左邊的圖標(biāo)并實現(xiàn)其方法。其實很簡單,在setSupportActionBar(toolbar);后面加入如下代碼:

toolbar.setNavigationIcon(R.drawable.back);toolbar.setNavigationOnClickListener(newView.OnClickListener() {@Overridepublic voidonClick(View v) {? ? ? ? finish();}});

為什么在setSupportActionBar(toolbar);后面加入而不在前面,你可以加入到前面試試,雖然可以顯示回退的圖片,但是點擊并沒有調(diào)用該按鈕的點擊事件,而在setSupportActionBar(toolbar);后面設(shè)置點擊才有反應(yīng)。一定要記住,不然回退是不會起作用的。

運行結(jié)果如下:

㈢設(shè)置logo

設(shè)置logo在標(biāo)題欄并不少見,比如網(wǎng)易APP首頁就的網(wǎng)易設(shè)置的logo,其實代碼很簡單,也僅僅需要一條代碼即可,在setSupportActionBar(toolbar)前加入如下代碼:

toolbar.setLogo(R.id.app_logo);

運行結(jié)果如下:

㈣設(shè)置副標(biāo)題

在setSupportActionBar(toolbar)前加入如下代碼::

toolbar.setSubtitle("liyuanjing");

運行界面后,如下:

㈤設(shè)置菜單

我們知道onCreateOptionsMenu是上下文菜單,同理可以直接在該方法中設(shè)置菜單,代碼如下:

@Overridepublic booleanonCreateOptionsMenu(Menu menu) {? ? getMenuInflater().inflate(R.menu.menu_main,menu);return? true;}

此方法為Activity方法。因為你在上面已經(jīng)講Toolbar設(shè)置到了Activity中,所以默認(rèn)也會顯示到標(biāo)題欄中,如果你覺得這樣不習(xí)慣,那么你可以添加一條語句,不過這條語句添加不添加都沒關(guān)系。

toolbar.setOnCreateContextMenuListener(this);

運行程序,如下圖所示:

4.Toolbar的Style

3標(biāo)題下的Toolbar是藍色,且有很好Style,那么這是怎么設(shè)置呢,雖然我們這里重點是剖析Activity但是遇到有關(guān)Activity標(biāo)題欄樣式的還是要提到。

我們粗略的講解上面的標(biāo)題欄用到了哪些Style:

①#4876FF:如第一步直接在toolbar控件下面設(shè)置的屬性一樣,就是toolbar的顏色。

②#3A5FCD:狀態(tài)欄顏色也就是標(biāo)題欄上面的那個顏色,而我用的是小米1S測試的,其固件并沒有很好的實現(xiàn)其功能,所以在該系統(tǒng)下并沒有實現(xiàn)其效果。

③@android:color/white:窗口背景色,也就是Activity標(biāo)題欄下面所有地方的顏色。

當(dāng)我們設(shè)置了如上三個屬性,那么效果圖就如上面所示了,完整代碼如下:

#4876FF#3A5FCD@android:color/white

5.Toolbar菜單樣式

我們來看看如果直接使用上面的點擊后邊的菜單會有什么效果:

你有看到那個APP菜單彈出擋住了標(biāo)題欄嗎?,肯定沒有吧,要是有的話,你肯定立即卸載了該應(yīng)用了。

下面我們的任務(wù)就是將該菜單的樣式和其他APP一樣,在標(biāo)題欄下面彈出。

首先要說明一下,toolbar菜單默認(rèn)樣式的父類為Widget.AppCompat.Light.PopupMenu.Overflow,那么要更改toobar中菜單的彈出的樣式,就必須繼承這個父類的樣式。

其代碼如下:

#4876FF#3A5FCD@android:color/white@style/LYJMenuStylefalse

設(shè)置這一個屬性那么其彈出的樣式就與其他APP一樣不會覆蓋標(biāo)題欄。

還有其他屬性這里簡要說明一下:

①?attr/colorPrimary:彈出菜單背景色為標(biāo)題欄的背景色

②0dip:彈出菜單與標(biāo)題欄的垂直間距

將這兩條加入LYJMenuStyle中就可以了實現(xiàn)如下圖所示的彈出菜單:

最后介紹一下菜單里面重要的幾個屬性:

app:showAsAction有三個值:

always:總是顯示在界面上

never:不顯示在界面上,只讓出現(xiàn)在右邊的三個點中

ifRoom:如果有位置才顯示,不然就出現(xiàn)在右邊的三個點中

可以用 | 同時使用兩個上面的值。

系統(tǒng)也為菜單提供了默認(rèn)的分享菜單與查詢菜單,代碼如下:

app:actionViewClass="android.support.v7.widget.SearchView"

app:actionProviderClass="android.support.v7.widget.ShareActionProvider"

從名字想必不需要過多解釋,最后一個就是顯示的優(yōu)先級,也就是顯示的順序,誰在最前面,誰在后面:

android:orderInCategory數(shù)值越小,顯示靠前,且優(yōu)先級最大

6、在你的AndroidStudio中新建一個activitiy繼承AppCompatActivity 時,在你的activity_main XML文件中會出現(xiàn)一個android.support.design.widget.AppBarLayout,那么這個空間有什么作用呢?這就看出了AppCompatActivity 和之前的actionbarActivity 相比,強大的地方,actionbarActivity有的它全都有,而且還比actionbarActivity多出了很多的功能,興許這就是google官方建議用此的原因吧,有關(guān)AppBarLayout且看?玩轉(zhuǎn)AppBarLayout,更酷炫的頂部欄?這篇文章!

7、看到放出的效果圖中溢出菜單中圖片和文字一起顯示出來了,默認(rèn)是只能夠顯示文字,無論你在men xml文件中如何配置icon屬性也不會顯示圖片出來的,后來發(fā)現(xiàn)原來是 點擊溢出菜單時,回調(diào)方法onMenuOpened一直不執(zhí)行!當(dāng)然此時 菜單的添加方式是通過getMenuInflater().inflate(R.menu.main, menu);加載的,將菜單item寫到menu目錄下的xml文件中,通過這種方法,加載菜單的title,但是onMenuOpened并未執(zhí)行,真是奇怪。

備注:如果菜單是通過下面方式添加的,還是可以執(zhí)行的,從而也能添加溢出菜單中的圖標(biāo),

[java]view plaincopy

setIconEnable(menu,true);

MenuItem?item1?=?menu.add(0,1,0,?R.string.app_name);

item1.setIcon(R.drawable.ofm_qrcode_icon);

MenuItem?item2?=?menu.add(0,1,0,?R.string.app_name);

item2.setIcon(R.drawable.ofm_feedback_icon);

returnsuper.onCreateOptionsMenu(menu);

但是這樣麻煩啊,菜單不能通過xml來加載。

后來發(fā)現(xiàn),雖然onMenuOpened方法不執(zhí)行,但是onPrepareOptionsMenu(Menu menu)、onPrepareOptionsPanel(View view, Menu menu)等都可以執(zhí)行,于是采用下面的方法:通過反射將其方法爆出來然后執(zhí)行就可以了,代碼如下:

@Override

public boolean onPrepareOptionsMenu(Menu menu) {

if(menu !=null) {

if(menu.getClass().getSimpleName().equals("MenuBuilder")) {

try{

Method m = menu.getClass().getDeclaredMethod(

"setOptionalIconsVisible",Boolean.TYPE);

m.setAccessible(true);

m.invoke(menu, true);

}catch(Exception e) {

Log.e(getClass().getSimpleName(),"onMenuOpened...unable to set icons for overflow menu",e);

}

}

}

return super.onPrepareOptionsMenu(menu);

}

由此你就可以顯現(xiàn)出入上圖效果了,在溢出菜單中可以技能顯示文字也能顯示圖標(biāo)了

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容