Material Designスタイルのサイド引き出しバー

テキスト
  http://xiaok.me/2015/04/28/material-design-navigation-drawer/
前言
Android 5.0がリリースされると、その新しいUI設計Material Designが目の前を明るくします.デモでは、Demoの中に新しいサイドバーがあります.とても綺麗です.githubの上にはこのコントロールを作った人がいますが、それを知っているという理念のもとに、自分で真似しました.コントロールとは言えません.
準備
Android Studio 1.1.0 円形のイメージコントロールを追加します.  CircleImageView

compile 'de.hdodenhof:circleimageview:1.2.2'

追加  RecyclerView

compile 'com.android.support:recyclerview-v7:21.0.+'

サイドバーの働き方
googleはsupport.v 4の中に一つあります.  DrawerLayout コントロールは、サイドバーを作成するために使用されます.
まずは   ルートノードに設定する.
その第一のサブノードは、主要なコンテンツである.
第二のサブノードは、サイドバーの内容である.
サイドバーを作成
まずは  activity_main.xml ルートノードを置換  DrawerLayout 2つのサブノードを追加します.

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/draw_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar"/>
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Hello World"/>
    LinearLayout>

    
    <android.support.v7.widget.RecyclerView
        android:id="@+id/RecyclerView"
        android:layout_width="320dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#ffffff"
        android:scrollbars="vertical">

    android.support.v7.widget.RecyclerView>

android.support.v4.widget.DrawerLayout>

その中でToolBarの建立については参考にできます.  Toolbar 次にレイアウトファイルを作成します.  item_nav.xml 表示する  RecyclerView の各レイアウト

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:background="#ffffff">

    <ImageView
        android:id="@+id/nav_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingStart="16dp" />
    <TextView
        android:id="@+id/nav_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:paddingStart="16dp"
        android:textAppearance="?android:attr/textAppearanceMedium"/>

LinearLayout>

を選択して、  header.xml レイアウトファイルは、画像、名前、メールボックスを表示します.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="178dp"
    android:background="@mipmap/mat3"
    android:weightSum="1">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:orientation="vertical"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true">
        <TextView
            android:id="@+id/header_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:textColor="#ffffff"
            android:textSize="14sp"
            android:textStyle="bold"
            android:text="GeeKaven"/>

        <TextView
            android:id="@+id/header_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="5dp"
            android:textColor="#ffffff"
            android:textSize="14sp"
            android:textStyle="normal"
            android:text="[email protected]"/>
    LinearLayout>

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/header_avatar"
        android:layout_width="76dp"
        android:layout_height="76dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="38dp"
        android:src="@mipmap/avatar"/>
RelativeLayout>

今私達のレイアウトファイルはもう書きました.次はメインコードを書き始めます.MainActivity.javaで 下記のコードを見たら分かりやすいです.

public class MainActivity extends ActionBarActivity {

    //item  
    private String[] titles = {"Home","Calendar","Setting"};
    //item  
    private int[] icons = {R.mipmap.ic_home,R.mipmap.ic_cal,R.mipmap.ic_setting};
    private String name = "Geekaven";
    private String email = "[email protected]";
    //  
    private int avatar = R.mipmap.avatar;

    private RecyclerView mRecyclerView;
    //RecyclerVie     
    private RecyclerView.LayoutManager mLayoutManager;
    //RecyclerView   
    private RecyclerView.Adapter mAdapter;

    private Toolbar mToolbar;
    private DrawerLayout mDrawerLayout;
    //    ,   v7  
    private ActionBarDrawerToggle mDrawerToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // toolbar   ActionBar
        mToolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(mToolbar);

        mRecyclerView = (RecyclerView)findViewById(R.id.RecyclerView);
        mRecyclerView.setHasFixedSize(true);

        //   Adapter，     
        mAdapter = new NavAdapter(this,titles,icons,name,email,avatar);
        mRecyclerView.setAdapter(mAdapter);
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);

        mDrawerLayout = (DrawerLayout)findViewById(R.id.draw_layout);
        mDrawerToggle = new ActionBarDrawerToggle(this,mDrawerLayout,mToolbar,R.string.openDrawer,R.string.closeDrawer);

        mDrawerLayout.setDrawerListener(mDrawerToggle); //DrawerListener  DrawerToggle
        mDrawerToggle.syncState();//  
    }
}

次は一つ作成します  NavAdapter.java ,このクラスはRecyclerViewのアクセサリーです.以前のListViewにはaddHeader()方法がありますが、RecyclerViewはありませんので、自分で書く必要があります.これもRecyclerView坑のところです.

public class NavAdapter extends RecyclerView.Adapter<NavAdapter.ViewHolder> {

    //       
    private static final int TYPE_HEADER = 0;
    private static final int TYPE_ITEM = 1;

    private String[] mNavTitle;
    private int[] mIcons;

    private String mName;
    private String mEmail;
    private int mAvatar;

    private LayoutInflater mInflater;
    private Context context;

    public NavAdapter(Context context, String[] navTitle,int[] icons, String name, String email, int avatar) {
        this.context = context;
        this.mInflater = LayoutInflater.from(context);
        this.mNavTitle = navTitle;
        this.mIcons = icons;
        this.mName = name;
        this.mEmail = email;
        this.mAvatar = avatar;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        if (holder.HolderId == 1) {
            holder.mItemText.setText(mNavTitle[position-1]);
            holder.mIcon.setImageResource(mIcons[position-1]);
        } else {
            holder.mName.setText(mName);
            holder.mAvatar.setImageResource(mAvatar);
            holder.mEmail.setText(mEmail);
        }
    }

    @Override
    public NavAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        //              
        if (viewType == TYPE_ITEM) {
            View v = mInflater.inflate(R.layout.item_nav,parent,false);
            ViewHolder vhItem = new ViewHolder(v,viewType);

            return vhItem;
        } else if (viewType == TYPE_HEADER){
            View v = mInflater.inflate(R.layout.header, parent, false);
            ViewHolder vhHeader = new ViewHolder(v,viewType);
            return vhHeader;
        }
        return null;
    }

    @Override
    public long getItemId(int position) {
        return super.getItemId(position);
    }

    @Override
    public int getItemCount() {
        //      Header   +1
        return mNavTitle.length + 1;
    }

    @Override
    public int getItemViewType(int position) {
        //  item      Header  
        if (isPositionHeader(position)) {
            return TYPE_HEADER;
        } else {
            return TYPE_ITEM;
        }
    }

    private boolean isPositionHeader(int position) {
        return position == 0;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {
        int HolderId;

        private ImageView mAvatar;
        private ImageView mIcon;
        private TextView mItemText;
        private TextView mEmail;
        private TextView mName;

        public ViewHolder(View itemView, int ViewType) {
            super(itemView);
            if (ViewType == NavAdapter.TYPE_ITEM) {
                mIcon = (ImageView)itemView.findViewById(R.id.nav_icon);
                mItemText = (TextView)itemView.findViewById(R.id.nav_text);
                HolderId = 1;
            } else {
                mAvatar = (CircleImageView)itemView.findViewById(R.id.header_avatar);
                mEmail = (TextView)itemView.findViewById(R.id.header_email);
                mName = (TextView)itemView.findViewById(R.id.header_name);
                HolderId = 0;
            }
        }
    }
}

最後のステップはステータスバーを透明にしてV 19以上でサポートします.

<resources>

    
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        
        false
        true

        @color/light_blue_500
        @color/light_blue_700

    //     
        true
    style>

resources>

状態バーが透明で、Toolbarが状態と重なっている可能性がありますので、v 19以上のバージョンで設定します.

<dimen name="tool_bar_top_padding">24dpdimen>

最後に運行すれば効果が見られます.とても綺麗です.
ここに来てください.Material Designスタイルの引き出しでOKです.Recyclerviewにはまだお父さんのところがあります.クリックイベントは自分で書きます.もっと勉強してください.