Android5.0之Toolbar详解
AdrienneTie
7年前
<p>搜索Toolbar相关文章满天飞，但是大都不是很全面，每次要用到的时候又要重头过滤一遍。而且随着版本升级很多较早的文章的方法已经失效，最近刚好好用到Toolbar，就将相关配置整理下，方便以后使用。</p> <p>环境说明：</p> <ul> <li>Android Studio 2.0</li> <li>V7包版本：com.android.support:appcompat-v7:23.4.0</li> <li>compileSdkVersion 23</li> <li>buildToolsVersion "24.0.0"</li> </ul> <h2>Toolbar 引入使用</h2> <p>XML布局中加入：</p> <pre> <code class="language-java"><android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"/></code></pre> <p>主题改为隐藏ActionBar:</p> <pre> <code class="language-java">Theme.AppCompat.Light.NoActionBar</code></pre> <p>Activity代码中加入：</p> <pre> <code class="language-java">setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar);</code></pre> <p>此时运行效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/a7c1a91c6782802fec8ed8fde523e0fd.png"></p> <p>添加背景色</p> <pre> <code class="language-java">android:background="@color/colorPrimary"</code></pre> <p>此时运行效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/600a2a634498c229e49dc207e3efd21f.png"></p> <h2>基本属性设置</h2> <pre> <code class="language-java"><android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/colorPrimary" app:navigationIcon="@mipmap/title_bar_back"//左侧图标 app:subtitle="子标题" app:subtitleTextColor="#fff" //标题颜色 app:title="标题" app:titleTextColor="#fff"/> //子标题颜色</code></pre> <p>运行效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/34912f4a6ae7f18e8a009bdd326f0af9.png"></p> <p>添加选项菜单</p> <p>第一步创建菜单文件</p> <pre> <code class="language-java"><menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity"> <item android:id="@+id/action_settings" android:icon="@mipmap/ic_launcher" android:orderInCategory="100" android:title="settings" app:showAsAction="never"/> <item android:id="@+id/action_share" android:icon="@mipmap/ic_action_share" android:orderInCategory="100" android:title="settings" app:showAsAction="ifRoom"/> <item android:id="@+id/action_search" android:icon="@mipmap/ic_action_search" android:orderInCategory="100" android:title="settings" app:showAsAction="ifRoom"/> </menu></code></pre> <p>第二部在代码中重写onCreateOptionsMenu方法加载菜单文件</p> <pre> <code class="language-java">@Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return true; }</code></pre> <p>此时效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/d2df727487d76bc21ca9ae71dc0a8de0.png"></p> <h2>个性设置</h2> <h3>左侧返回箭头</h3> <p>想要显示自带的返回箭头，需要去掉之前设定的属性：</p> <pre> <code class="language-java">app:navigationIcon="@mipmap/title_bar_back"</code></pre> <p>然后在代码中添加：</p> <pre> <code class="language-java">getSupportActionBar().setHomeButtonEnabled(true); //设置返回键可用 getSupportActionBar().setDisplayHomeAsUpEnabled(true);</code></pre> <p>此时效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/e6971e2ddd222d6ac14340c5972662ca.png"></p> <h3>溢出图标颜色</h3> <p>在style文件中添加：</p> <pre> <code class="language-java"><!-- 溢出菜单图标颜色--> <item name="colorControlNormal">@android:color/white</item></code></pre> <p>此时效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/570c5aafc51920e2bba883ddcc2f2cc2.png"></p> <h3>自定义右侧溢出图标</h3> <p>在Style文件中添加：</p> <pre> <code class="language-java"><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> <!-- 溢出菜单图标颜色--> <item name="colorControlNormal">@android:color/white</item> <!-- 溢出菜单图标自定义--> <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item> </style> <style name="OverflowButtonStyle" parent="android:Widget.ActionButton.Overflow"> <item name="android:src">@mipmap/ic_action_add</item> </style></code></pre> <p>此时运行效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/66000d5eb62725f7d3d6a568c6b04855.png"></p> <h3>更改弹出菜单背景</h3> <p>在Style文件中添加样式：</p> <pre> <code class="language-java"><!-- toolbar弹出菜单样式背景 --> <style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat"> <item name="android:colorBackground">#FFCC99</item> </style></code></pre> <p>在布局文件中添加使用主题：</p> <pre> <code class="language-java">app:popupTheme="@style/ToolbarPopupTheme"</code></pre> <p>此时运行效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/3d33178e7ef09be0755af53a19d6f042.png"></p> <h3>更改弹出菜单文字颜色</h3> <p>添加样式文件：</p> <pre> <code class="language-java"><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> <!-- 溢出菜单图标颜色--> <item name="colorControlNormal">@android:color/white</item> <item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item> <!-- 溢出菜单文字颜色--> <item name="textAppearanceLargePopupMenu">@style/Overflow_Menu_Text_style</item> </style> <!--溢出菜单文字颜色--> <style name="Overflow_Menu_Text_style" parent="@style/TextAppearance.AppCompat.Widget.PopupMenu.Large"> <item name="android:textColor">#fff</item> </style></code></pre> <p>此时运行效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/0c40a61c1daf8ede978522c012d9d301.png"></p> <h3>修改标题文字大小</h3> <p>添加配置：</p> <pre> <code class="language-java">app:titleTextAppearance="@style/ToolbarTitleSize"</code></pre> <p>添加style：</p> <pre> <code class="language-java"><!-- toolbar标题文字大小 --> <style name="ToolbarTitleSize" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"> <item name="android:textSize">28sp</item> </style></code></pre> <p>此时运行效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/ae6e7a9ec4297fcce3be40e2103d6355.png"></p> <p>子标题文字大小类似，添加配置然后定义style文件（此处省略）：</p> <pre> <code class="language-java">app:subtitleTextAppearance="@style/ToolbarTitleSize"</code></pre> <h3>修改弹出菜单位置</h3> <p>修改配置使弹出菜单显示在Toolbar下方：</p> <p>首先重新设置属性：（在界面布局文件Toolbar中）</p> <pre> <code class="language-java">app:popupTheme="@style/OverflowMenuStyle"</code></pre> <p>在Style文件中添加：</p> <pre> <code class="language-java"><style name="OverflowMenuStyle"> <!-- 是否覆盖锚点，默认为true，即盖住Toolbar --> <item name="overlapAnchor">false</item> <item name="android:dropDownWidth">wrap_content</item> <item name="android:paddingRight">5dp</item> <!-- 弹出层背景颜色 --> <item name="android:colorBackground">#FFCC99</item> <!-- 弹出层垂直方向上的偏移，即在竖直方向上距离Toolbar的距离，值为负则会盖住Toolbar --> <item name="android:dropDownVerticalOffset">5dp</item> <!-- 弹出层水平方向上的偏移，即距离屏幕左边的距离，负值会导致右边出现空隙 --> <item name="android:dropDownHorizontalOffset">0dp</item> <!-- 设置弹出菜单文字颜色 --> <item name="android:textColor">#0099CC</item> </style></code></pre> <p>此时运行效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/89a4bd4f1c1e05c5896a6ce638c933e8.png"></p> <h3>事件处理</h3> <p>返回按钮事件</p> <p>添加监听</p> <pre> <code class="language-java">toolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(getApplicationContext(), "点击了返回箭头", Toast.LENGTH_LONG).show(); } });</code></pre> <p>菜单项点击事件</p> <p>重写方法</p> <pre> <code class="language-java">@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.action_settings: break; case R.id.action_search: break; case R.id.action_share: break; } return true; }</code></pre> <h3>自定义Toolbar</h3> <p>Toolbar下面可以嵌套布局，直接将自己定义好的布局放到Toolbar下面即可</p> <pre> <code class="language-java"><android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> ...... </RelativeLayout> </android.support.v7.widget.Toolbar></code></pre> <h3>Toolbar 和 DrawerLayout 左滑菜单</h3> <p>添加左滑布局文件：</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_left" android:layout_width="match_parent" android:layout_height="match_parent"> <!--侧滑菜单--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" android:background="#CCCCFF" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" android:text="选项一" android:textSize="18sp"/> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" android:text="选项二" android:textSize="18sp"/> </LinearLayout></code></pre> <p></android.support.v4.widget.DrawerLayout></p> <p>在主布局文件中引入：（在Toolbar下方）</p> <pre> <code class="language-java"><!--DrawerLayout--> <include layout="@layout/custom_drawerlayout"/></code></pre> <p>在代码中添加关联：</p> <pre> <code class="language-java">DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_left); ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar, R.string.open, R.string.close); mDrawerToggle.syncState(); mDrawerLayout.setDrawerListener(mDrawerToggle);</code></pre> <p>此时运行效果：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/94615d3b1ba7be2a720dacf84633947c.png"></p> <p>新版本studio，在新建Activity的时候可以选择对应的模板，会自动创建好DrawerLayout并关联Toolbar.</p> <p> </p> <p>来自：http://www.jianshu.com/p/e9130d31ee1f</p> <p> </p>