侧滑栏和状态栏

1

styles.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">    <!-- Customize your theme here. -->    <!--选中状态icon的颜色和字体颜色-->    <!--主要的。初级的-->    <item name="colorPrimary">@color/colorPrimary</item>    <!--深的-->    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>    <!--警告-->    <item name="colorAccent">@color/colorAccent</item>  </style>

2 主布局 DrawerLayout

主布局activity_my.

<??><android.support.v4.widget.DrawerLayout ="http://schemas.android.com/apk/res/android"  ="http://schemas.android.com/apk/res-auto"  ="http://schemas.android.com/tools"  android:id="@+id/drawer_layout"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:fitsSystemWindows="true"  tools:openDrawer="start">  <!-- 第一个位置 -->  <!-- 你的主界面内容，必须放置在Drawerlayout中的第一个位置  根据自己的需要来放置控件，    例如：LinearLayout布局或者RelativeLayout布局；  也可以是单个控件，    如 TextView等 -->  <include    layout="@layout/app_bar_main"    android:layout_width="match_parent"    android:layout_height="match_parent" />  <!-- 第二个位置 -->  <!-- 用来放Drawerlayout中的内容，  这里使用NavigationView来实现类似Google pLay中的侧滑栏效果，  必须在build.gradle中添加compile 'com.android.support:design:22.2.0'；  另外，如果不需要NavigationView效果，  也可以放置一个普通布局文件就是一个普通的侧滑栏了。   -->  <!--   注意：    如果使用NavigationView（其他控件也是一样）的特有属性，需要加上命名空间：        -->  <!--    属性解析：      app:headerLayout：  NavigationView中头部的head部分的布局，是自己实现的；      app:menu：      指定Nav中的Menu布局，就是自己写Menu中的按钮，要放在res/menu/文件夹下；      app:itemTextColor： 用来设置Nav中，menu item的颜色选择器。    还有一些属性：      和itemTextColor用法一样，指定一个颜色选择器，实现不同的颜色效果。      app:itemIconTint:      app:itemBackground:  -->  <android.support.design.widget.NavigationView    android:id="@+id/nav_view"    android:layout_width="wrap_content"    android:layout_height="match_parent"    android:layout_gravity="start"    android:fitsSystemWindows="true"    app:headerLayout="@layout/nav_header_main"    app:menu="@menu/activity_main_drawer" /></android.support.v4.widget.DrawerLayout>

2 右边布局

app_bar_main.
<??><android.support.design.widget.CoordinatorLayout  ="http://schemas.android.com/apk/res/android"  ="http://schemas.android.com/apk/res-auto"  ="http://schemas.android.com/tools"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:fitsSystemWindows="true"  tools:context="www.etoury.com.etoury.MainActivity"><!-- 标题栏-->  <android.support.design.widget.AppBarLayout    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:theme="@style/AppTheme.AppBarOverlay">    <android.support.v7.widget.Toolbar      android:id="@+id/toolbar"      android:layout_width="match_parent"      android:layout_height="?attr/actionBarSize"      android:background="?attr/colorPrimary"      app:popupTheme="@style/AppTheme.PopupOverlay" />  </android.support.design.widget.AppBarLayout>  <!-- content-->  <include layout="@layout/content_main" />  <!-- action btn-->  <android.support.design.widget.FloatingActionButton    android:id="@+id/fab"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="bottom|end"    android:layout_margin="@dimen/fab_margin"    android:src='/images/loading.gif' data-original="@android:drawable/ic_dialog_email" /></android.support.design.widget.CoordinatorLayout>

content_main.
<??><RelativeLayout ="http://schemas.android.com/apk/res/android"  ="http://schemas.android.com/apk/res-auto"  ="http://schemas.android.com/tools"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:paddingBottom="@dimen/activity_vertical_margin"  android:paddingLeft="@dimen/activity_horizontal_margin"  android:paddingRight="@dimen/activity_horizontal_margin"  android:paddingTop="@dimen/activity_vertical_margin"  app:layout_behavior="@string/appbar_scrolling_view_behavior"  tools:context="www.etoury.com.etoury.MainActivity"  tools:showIn="@layout/app_bar_main">  <TextView    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="Hello World!" /></RelativeLayout>

 
 
3 侧边栏
3.1 侧边栏的头
nav_header_main.
<??><LinearLayout ="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="@dimen/nav_header_height"  android:background="@drawable/side_nav_bar"  android:gravity="bottom"  android:orientation="vertical"  android:paddingBottom="@dimen/activity_vertical_margin"  android:paddingLeft="@dimen/activity_horizontal_margin"  android:paddingRight="@dimen/activity_horizontal_margin"  android:paddingTop="@dimen/activity_vertical_margin"  android:theme="@style/ThemeOverlay.AppCompat.Dark">  <ImageView    android:id="@+id/imageView"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:paddingTop="@dimen/nav_header_vertical_spacing"    android:src='/images/loading.gif' data-original="@android:drawable/sym_def_app_icon" />  <TextView    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:paddingTop="@dimen/nav_header_vertical_spacing"    android:text="Android Studio"    android:textAppearance="@style/TextAppearance.AppCompat.Body1" />  <TextView    android:id="@+id/textView"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="android.studio@android.com" /></LinearLayout>

 
3.2 侧边栏的菜单
activity_main_drawer.
<??><menu ="http://schemas.android.com/apk/res/android">  <group android:checkableBehavior="single">    <item      android:id="@+id/nav_camera"      android:icon="@drawable/ic_menu_camera"      android:title="Import" />    <item      android:id="@+id/nav_gallery"      android:icon="@drawable/ic_menu_gallery"      android:title="Gallery" />    <item      android:id="@+id/nav_slideshow"      android:icon="@drawable/ic_menu_slideshow"      android:title="Slideshow" />    <item      android:id="@+id/nav_manage"      android:icon="@drawable/ic_menu_manage"      android:title="Tools" />  </group>  <item android:title="Communicate">    <menu>      <item        android:id="@+id/nav_share"        android:icon="@drawable/ic_menu_share"        android:title="Share" />      <item        android:id="@+id/nav_send"        android:icon="@drawable/ic_menu_send"        android:title="Send" />    </menu>  </item></menu>

4.  java文件
package www.etoury.com.etoury;import android.os.Bundle;import android.support.design.widget.FloatingActionButton;import android.support.design.widget.Snackbar;import android.view.View;import android.support.design.widget.NavigationView;import android.support.v4.view.GravityCompat;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBarDrawerToggle;import android.support.v7.app.AppCompatActivity;import android.support.v7.widget.Toolbar;import android.view.Menu;import android.view.MenuItem;public class MainActivity extends AppCompatActivity    implements NavigationView.OnNavigationItemSelectedListener {  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);    setSupportActionBar(toolbar);    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);    fab.setOnClickListener(new View.OnClickListener() {      @Override      public void onClick(View view) {        Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)            .setAction("Action", null).show();      }    });    //标题头    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(        this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);    drawer.setDrawerListener(toggle);    toggle.syncState();    //侧滑栏    NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);    navigationView.setNavigationItemSelectedListener(this);  }  @Override  public void onBackPressed() {    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);    if (drawer.isDrawerOpen(GravityCompat.START)) {      drawer.closeDrawer(GravityCompat.START);    } else {      super.onBackPressed();    }  }  //标题栏的菜单  @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) {    // Handle action bar item clicks here. The action bar will    // automatically handle clicks on the Home/Up button, so long    // as you specify a parent activity in AndroidManifest.    int id = item.getItemId();    //noinspection SimplifiableIfStatement    if (id == R.id.action_settings) {      return true;    }    return super.onOptionsItemSelected(item);  }  //侧滑栏点击事件  @SuppressWarnings("StatementWithEmptyBody")  @Override  public boolean onNavigationItemSelected(MenuItem item) {    // Handle navigation view item clicks here.    int id = item.getItemId();    if (id == R.id.nav_camera) {      // Handle the camera action    } else if (id == R.id.nav_gallery) {    } else if (id == R.id.nav_slideshow) {    } else if (id == R.id.nav_manage) {    } else if (id == R.id.nav_share) {    } else if (id == R.id.nav_send) {    }    //关闭侧滑栏    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);    drawer.closeDrawer(GravityCompat.START);    return true;  }}

 
总结，
 
1. toolbar
注意：放在 CoordinatorLayout 的东西必须被设计和实现成与它一起合作的，否则将不与任何其他兄弟 views(sibling views) 协作。但是... Toolbar是不合适的。别担心，这里没有任何新的特殊 Toolbar。只是一个组件是为了准备让 Toolbar 与 CoordinatorLayout 一起工作的更加完美。这是简单的任务，只是简单的用AppBarLayout包裹 Toolbar，就这样！ 
2 使用了 drawerlayout 实现抽屉效果
3 navigationview 实现了侧滑栏条目点击事件



原标题：侧滑栏和状态栏
关键词：