生活本来就不容易,而我们的不努力只会让生活变得更加无赖.
Toolbar是Google在Android5.0推出的Material Design风格的一款导航控件，Toolbar被Google推荐使用，以取代3.0开始流行的Actionbar（Actionbar不能定制）,而Drawerlayout则是Google推出的抽屉效果的控件(之前用的是slidingMenu),本次使用将结合Navigation实现左划菜单的效果.
Toolbar基本用法:
- 布局文件 tool_bar.xml
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="@+id/tool_bar"
app:title="demo"
app:titleTextColor="@color/colorNormal"
android:background="@color/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>```
2. 代码中使用:
mToolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(mToolbar);
//左上角图标可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
/**
* 生成菜单
*/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu,menu);
return super.onCreateOptionsMenu(menu);
}```
- 如果没有
onCreateOptionsMenu(Menu menu)这个方法,将会不起作用
- 定制主题风格:
style.xml
<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>
<item name="android:colorControlNormal">@color/colorNormal</item>
<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>
<!--箭头图标样式-->
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">@color/colorNormal</item>
</style>
</resources>```
menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
app:actionViewClass="android.support.v7.widget.SearchView"
android:id="@+id/btn_search"
app:showAsAction="ifRoom"
android:title="@string/menu_search"
android:orderInCategory="80"
>
</item>
<item
app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
android:id="@+id/btn_share"
app:showAsAction="ifRoom"
android:title="@string/menu_search"
android:orderInCategory="90">
</item>
<item
android:title="@string/setting" app:showAsAction="never"
android:orderInCategory="100"
android:id="@+id/btn_setting1">
</item>
<item
android:title="@string/setting"
app:showAsAction="never"
android:orderInCategory="100"
android:id="@+id/btn_setting2">
</item>
<item
android:title="@string/setting"
app:showAsAction="never"
android:orderInCategory="100"
android:id="@+id/btn_setting3">
</item>
</menu>```
- 这里需要注意的是
app:actionViewClass属性是为了引用库内的图标
- 效果
DrawerLayout的使用:
由于要使用Navigation,因此请在app的build.gradle中引入compile 'com.android.support:design:24.+'
- drawer_Layout.xml
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="@+id/navigation_view"
app:menu="@menu/menu_view"
app:headerLayout="@layout/head_view"
android:fitsSystemWindows="true">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
- 这里需要注意的是三个属性(一个为左划菜单的菜单,一个为headView,最后一个为侧滑菜单方向选项"start","end"分别为左右划出)
app:menu="@menu/menu_view"
app:headerLayout="@layout/head_view"
android:layout_gravity="start"
- 代码中使用
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
//绑定Toolbar
mToogle = new ActionBarDrawerToggle(this,mDrawerLayout,mToolbar,R.string.open_drawer,R.string.close_drawer);
mToogle.syncState();
//NavigationView监听事件
setNavigationView(mNavigationView);
- 菜单项menu_view.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group >
<item
android:id="@+id/menu_search"
android:checkable="true"
android:title="@string/menu_search2" />
<item
android:id="@+id/menu_persion"
android:checkable="true"
android:title="@string/menu_persion" />
<item
android:id="@+id/menu_init"
android:checkable="true"
android:title="@string/menu_init" />
<item
android:id="@+id/menu_download"
android:checkable="true"
android:title="@string/menu_download" />
</group>
</menu>```
4. 头布局head_view.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="192dp"
android:padding="30dp"
android:background="@color/colorPrimary">
<ImageView
android:layout_centerInParent="true"
android:layout_width="72dp"
android:layout_height="72dp"
android:src="@mipmap/ic_launcher"
android:id="@+id/head_image"/>
<TextView
android:layout_below="@+id/head_image"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello"
android:id="@+id/head_text"
android:textSize="18sp"
android:textColor="#ffff"
android:paddingBottom="10dp"/>
</RelativeLayout>
5. 效果
### 具体代码实现
MainActivity.java
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
public class Main2Activity extends AppCompatActivity implements Toolbar.OnMenuItemClickListener {
private Toolbar mToolbar;
private NavigationView mNavigationView;
private LayoutInflater inflater;
private ActionBarDrawerToggle mToogle;
private DrawerLayout mDrawerLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
initView();
}
private void initView() {
inflater = LayoutInflater.from(this);
mToolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(mToolbar);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
//绑定Toolbar
mToogle = new ActionBarDrawerToggle(this,mDrawerLayout,mToolbar,R.string.open_drawer,R.string.close_drawer);
mToogle.syncState();
//左上角图标可用
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
mToolbar.setOnMenuItemClickListener(this);
//NavigationView监听事件
setNavigationView(mNavigationView);
}
/**
* 生成菜单
*/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu,menu);
return super.onCreateOptionsMenu(menu);
}
public void setNavigationView(NavigationView navigationView) {
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
item.setChecked(true);
mDrawerLayout.closeDrawers();
return true;
}
});
}
@Override
public boolean onMenuItemClick(MenuItem item) {
return false;
}
}
### 效果
