ToolBar配合DrawerLayout实现左侧动画导航效果
1.xml布局文件实现如下所示,布局中包含一个DrawerLayout,同时滑出的抽屉部分一定要设置属性:android:layout_gravity=”start”,只有设置了这个属性的布局才会作为抽屉部分被滑出。布局实现相对简单,不在一一叙述。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ToolbarTheme"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:background="#ff00ffaa"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent">
<Button
android:id="@+id/sWalk"
android:layout_width="100dp"
android:layout_height="?attr/listPreferredItemHeight"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:background="#00ff00"
android:text="Walk"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
<LinearLayout
android:id="@+id/left_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:orientation="vertical">
<ListView
android:id="@+id/left_drawer_listview"
android:layout_width="300dp"
android:layout_height="0dp"
android:layout_weight="1.0"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"
android:background="@drawable/sliding_bg" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
左侧导航如下图所示,当然点击额时候,会有一个切换的过程,本人不会截取gif图,所以只能贴上如下的图片,会的朋友可以教教我,谢谢!
代码实现
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private ActionBarDrawerToggle mDrawerToggle;
private Toolbar toolbar;
private DrawerLayout mDrawerLayout;
private View drawerRootView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initToolBar();
initDrawerLayout();
}
//初始化抽屉
private void initDrawerLayout() {
drawerRootView = findViewById(R.id.left_drawer);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
//ActionBarDrawerToggle 与 setDrawerIndicatorEnabled设置为true 设置好后,当点击左侧导航时,就会实现动画特效
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, 0, 0) {
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
invalidateOptionsMenu();
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
invalidateOptionsMenu();
}
};
mDrawerToggle.setDrawerIndicatorEnabled(true);
mDrawerLayout.setDrawerListener(mDrawerToggle);
mDrawerToggle.syncState();
}
private void initToolBar() {
toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle(R.string.app_name);
toolbar.setTitleTextColor(Color.parseColor(getResources().getString(R.string.action_bar_title_color)));
toolbar.collapseActionView();
// toolbar.setBackground(getResources().getDrawable(R.drawable.skin2));
setSupportActionBar(toolbar);
if (getSupportActionBar() != null) {
getSupportActionBar().setHomeAsUpIndicator(R.drawable.abc_ic_ab_back_mtrl_am_alpha);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
TestInstance.i();
openOrCloseDrawer();
}
});
}
private void openOrCloseDrawer() {
if (mDrawerLayout.isDrawerOpen(drawerRootView)) {
mDrawerLayout.closeDrawer(drawerRootView);
} else {
mDrawerLayout.openDrawer(drawerRootView);
}
}
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
mDrawerToggle.onConfigurationChanged(newConfig);
}
}
实现ToolBar与DrawerLayout的联合使用,实现的效果与SlidingMune的效果差不多,只是使用TollBar与DrawerLayout会多出互动效果更好的动画特效,这更符合Androi5.0的material design中更好的交互原则的特点。