ToolBar
- ToolBar 的強大之處在于，它不僅繼承了ActionBar的所有功能，而且靈活性很高，可以配合其他控件來完成一些Material Design的效果。
-
當我們新建一個項目的時候，默認都是會顯示ActionBar的，而這個ActionBar到底是從哪里來的？其實是根據我們項目中設置的主題來顯示的。
application
點開AppTheme,我們看到：
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
現(xiàn)在我們準備ToolBar來代替ActionBar，因此我們需要制定一個不帶ActionBar的主題，通常有兩種:
- Theme.AppCompat.Light.NoActionBar
- 表示淡色主題，它會將界面的主題顏色設置為淡色，陪襯色設置為深色。
- Theme.AppCompat.NoActionBar
- 表示深色主題，它會將界面的主題顏色設置為深色，陪襯色設置為淡色。
現(xiàn)在我們用Theme.AppCompat.Light.NoActionBar來開發(fā)
- 表示深色主題，它會將界面的主題顏色設置為深色，陪襯色設置為淡色。
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
顏色.jpg
其中：colorAccent這個屬性，它不僅用來指定一個按鈕的顏色，而是更多的表達了一個強調的意思，比如一個空間的選中狀態(tài)也會使用colorAccent的顏色。
接下來我們看看代碼中ToolBar的開發(fā)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" //命名空間
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" //將toobal設置為深色主題，單獨設置主題是因為Toobal上各種元素會自動使用深色主題
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" //彈窗的背景
></android.support.v7.widget.Toolbar>
</RelativeLayout>
注意點：
1:xmlns:app="http://schemas.android.com/apk/res-auto"命名空間，為了兼容5.0以前的版本，我們不能使用android:attribute的屬性，而是應該使用app:attribute
2: 由于styles.xml中將各種元素指定為淡色主題，因此Toolbar現(xiàn)在也是淡色主題，而Toolbar上面的各種元素會自動使用深色系，現(xiàn)在變成黑色很難看。為了讓ToolBar單獨使用深色主題，這里我們是用android:theme屬性ThemeOverlay.AppCompat.Dark.ActionBar。但是這樣會出現(xiàn)新的問題，如果ToolBar中有菜單按鈕，那么彈出來的菜單也會變成深色主題，于是我們使用app:poptheme單獨將彈出的菜單指定成淡色主題
沒有設置深色主題.png
設置了深色主題.png
一個Toolbar 從左到右包括了 一個navigation button、一個logo、一個title和subtitle、一個或多個自定義的View和一個 action menu 這5部分。也就是這個ViewGroup 容器里面包含了這五部分內容
Toolbar內容.jpg
動態(tài)代碼如下：
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setNavigationIcon(R.drawable.ic_menu);
toolbar.setLogo(R.mipmap.ic_launcher);
toolbar.setTitle("Toolbal學習");
toolbar.setSubtitle("副標題");
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "NavigationIcon is Click", Toast.LENGTH_SHORT).show();
}
});
}
/**
* 加載菜單布局
* @param menu
* @return
*/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar, menu);
return true;
}
/**
* 處理菜單中各個按鈕的點擊事假
* @param item
* @return
*/
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.backup:
Toast.makeText(this, "You clicked backup", Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this, "You clicked delete", Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this, "You clicked Settings", Toast.LENGTH_SHORT).show();
break;
}
return true;
}
}
注意：
- Toolbar中的action 按鈕只會顯示圖片，菜單中的按鈕只會顯示文字！
- 怎樣設置彈出菜單的文字的顏色？
默認情況下是黑色的，因此我們需要重新設置style
<!--設置parent 為深色主題 是因為Toobal上各種元素會自動使用深色主題-->
<style name="ToobalTheme" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColor">@color/colorAccent</item>
<item name="android:textSize">14sp</item>
</style>
image.png
運行結果：
設置彈出菜單的文字的顏色.png
-
怎么設置Toolbar 上的菜單的文字顏色？
設置 <item name="actionMenuTextColor">@color/colorAccent</item>屬性
image.png
image.png
- 怎么加自定義布局？
因為Toolbal本身繼承于ViewGroup，所以直接包裹布局即可
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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/ToobalTheme"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:text="文字居中"
android:textColor="@android:color/white"
android:textSize="20sp" />
</android.support.v7.widget.Toolbar>
</RelativeLayout>
代碼中使用：
TextView tv_title= (TextView) findViewById(R.id.tv_title);
tv_title.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "標題點擊了", Toast.LENGTH_SHORT).show();
}
});
參考：
