APP開發之UI體驗—Toolbar
阿新 • • 發佈:2018-11-18
title 文件夾 auto fin code content rec switch main
1.新建的項目中,默認使用的是ActionBar,為了能夠正常使用ToolBar,我們需要隱藏原來的ActionBar。(每個活動最頂部的標題欄)
在values/styles.xml中做出如下修改:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <...> <...> </style>
2.修改activity_main.xml中的代碼:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent“ android:layout_height="match_parent"
...> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_content" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" android:popupTheme="@style/ThemeOverlay.AppCompat.Light" > <TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="美團"
android:textSize="20sp"/>
</android.support.v7.widget.Toolbar>
<RecyclerView....><>
</LinearLayout>
3.豐富Toolbar~添加菜單
新建res/menu文件夾,在文件夾下新建一個Menu resourse file,創建一個toolbar.xml文件
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" tools:context=".Main1" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/addShop" android:title="添加店鋪" android:icon="@drawable/add" android:typeface="serif"> </item> <item android:id="@+id/shop" android:title="我的店鋪" android:icon="@drawable/shop" android:typeface="serif"> </item> <item android:id="@+id/list" android:title="我的訂單" android:icon="@drawable/list" android:typeface="serif">
</item> </menu>
意思是設置toolbar中的按鈕
接著我們在Activity中,要重寫onCreateOptionsMenu()方法,把這個菜單加載進去:
@Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.toolbar,menu) ; return true; }
這樣就有一個菜單啦~
4.菜單的點擊事件
@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.shop: ... return true; case R.id.addShop: ... return true; case R.id.list: ... return true; } return true; }
當然之前要有
Toolbar toolbarMain1 = (Toolbar) findViewById(R.id.toolbarMain1);
setSupportActionBar(toolbarMain1);
ActionBar actionBar = getSupportActionBar();
APP開發之UI體驗—Toolbar