文章目录
  1. 1. 风格(Style)
  2. 2. 界面(Layout)
  3. 3. 配合DrawerLayout使用
    1. 3.1. 示例

ToolBar属于ActionBar的升级版,扩展了ActionBar,使得我们可以像使用独立的控件一样使用ToolBar。

风格(Style)

1
2
3
4
<style name="AppTheme.Base" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>

界面(Layout)

1
2
3
4
5
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize" />
  • colorPrimaryColor Toolbar的颜色
    • 在layout文件中设置background属性
  • colorPrimaryDark 状态栏背景色
  • textColorPrimary 标题和更多菜单中文字的颜色
  • colorAccent 可勾选控件被选择的颜色
  • colorControlNormal 各控件预设的颜色
  • windowBackground App的背景色
  • navigationBarColor 导航栏的背景色(API Level需要大于)

    注:以上在style中设置

配合DrawerLayout使用

1
2
3
4
5
setSupportActionBar(mToolbar);
mDrawerLayout = (DrawerLayout) findViewId(R.id.drawer);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, mToolbar, R.string.drawer_open,
R.string.drawer_close);
mDrawerLayout.setDrawerListener(mDrawerToggle);

示例

  • 布局

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="# 2196F3"
    style="@style/ToolBarStyle"
    android:minHeight="?attr/actionBarSize" />

    <android.support.v4.widget.DrawerLayout
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    </LinearLayout>
    <LinearLayout
    android:layout_width="200dp"
    android:background="@android:color/white"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    ></LinearLayout>
    </android.support.v4.widget.DrawerLayout>
    </LinearLayout>
  • style

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    <resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">

    <!-- toolbar(actionbar)颜色 -->
    <item name="colorPrimary"># 4876FF</item>
    <!-- 状态栏颜色 -->
    <item name="colorPrimaryDark"># 3A5FCD</item>
    <!-- 窗口的背景颜色 -->
    <item name="android:windowBackground">@color/backgroud</item>
    <!-- 标题颜色 -->
    <item name="android:textColorPrimary"># FFFFFF</item>
    <!-- 箭头 -->
    <item name="drawerArrowStyle">@style/AppTheme.DrawerArrowToggle</item>
    <!-- 菜单按钮 -->
    <item name="actionOverflowButtonStyle">@style/AppTheme.overflow</item>
    </style>

    <style name="AppTheme" parent="@style/AppBaseTheme"/>

    <!-- 箭头颜色 -->
    <style name="AppTheme.DrawerArrowToggle" parent="Base.Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@android:color/white</item>
    </style>

    <!-- 替换菜单文件 -->
    <style name="AppTheme.overflow" parent="Widget.AppCompat.ActionButton.Overflow">
    <item name="android:src">@drawable/android</item>
    </style>

    <!-- popup style -->
    <style name="ToolBarStyle" parent="">
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
    </style>

    </resources>

Java代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
public class MainActivity extends ActionBarActivity implements DrawerLayout.DrawerListener {

private DrawerLayout drawerLayout;
private Toolbar toolbar;
private ActionBarDrawerToggle toggle;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = $(R.id.toolbar);
drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
toolbar.setTitle("Title");
setSupportActionBar(toolbar);
toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.app_name, R.string.action_settings);
toggle.syncState();
drawerLayout.setDrawerListener(toggle);
}


protected <T extends View> T $(int id) {
return (T) findViewById(id);
}

@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) {
int id = item.getItemId();
if (id == R.id.action_settings) {
Toast.makeText(this, "setting", Toast.LENGTH_SHORT).show();
return true;
}
return super.onOptionsItemSelected(item);
}

@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
toggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
toggle.onConfigurationChanged(newConfig);
}

// 滑动时回调
@Override
public void onDrawerSlide(View view, float v) {

}

// 打开时回调
@Override
public void onDrawerOpened(View view) {

}

// 关闭时回调
@Override
public void onDrawerClosed(View view) {

}

// 改变状态时回调
@Override
public void onDrawerStateChanged(int i) {

}
}

文章目录
  1. 1. 风格(Style)
  2. 2. 界面(Layout)
  3. 3. 配合DrawerLayout使用
    1. 3.1. 示例