自己设计MD风格侧滑栏

标签： Android 侧滑栏

---

1 官方方案

谷歌官方已经提供了对应的控件：NavigationView
在drawer布局中添加，使用兼容包android.support.v4.widget.DrawerLayout
布局如下：

<android.support.v4.widget.DrawerLayout 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"    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    android:theme="@style/AppTheme"    tools:context="com.myweather.app.activity.weather">    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">        <android.support.v7.widget.Toolbar            android:id="@+id/tool_bar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="@color/material_blue_500"            android:subtitleTextColor="#ffffff"            android:elevation="15dp"/>        <FrameLayout            android:id="@+id/frame_content"            android:layout_width="match_parent"            android:layout_height="match_parent">        </FrameLayout>    </LinearLayout>    <android.support.design.widget.NavigationView        android:id="@+id/navigation_view"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        app:headerLayout="@layout/navigation_header"        app:menu="@menu/drawer" /></android.support.v4.widget.DrawerLayout>

在NavigationView中添加了app:headerLayout=”@layout/navigation_header”

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="200dp"    android:orientation="vertical">    <ImageView        android:src="@drawable/header_bg"        android:layout_width="match_parent"        android:layout_height="215dp" /></LinearLayout>

app:menu=”@menu/drawer”就只是一组按钮菜单选项了
然后实现对应的监听即可。

2 自己设计

先直接贴布局：

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"                xmlns:tools="http://schemas.android.com/tools"                android:layout_width="match_parent"                android:layout_height="match_parent"                tools:context=".MainActivity"                android:id="@+id/drawer_layout">    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize">        </android.support.v7.widget.Toolbar>        <TextView            android:layout_width="match_parent"            android:layout_height="match_parent"/>    </RelativeLayout>    <ListView        android:id="@+id/id_lv_left_menu"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="start"        android:paddingTop="0dp"        android:background="#123456"        android:clipToPadding="false"        android:divider="@null"        android:listSelector="?attr/selectableItemBackground"        /></android.support.v4.widget.DrawerLayout>

这里是利用了控件属性 android:layout_gravity=”start”
效果就是这个控件会在屏幕的左面（不在屏幕中）
实际上要做的就只有设定ListView就可以了，其他的已经封装好了，比如滑动触控判断
先是javabean用于ListView显示的信息：

public class MyItem {    private String name;    private int icon;    private int type;    public static final int TYPE_NORMAL = 0;    public static final int TYPE_NO_ICON = 1;    public static final int TYPE_SEPARATOR = 2;    public int getType() {        return type;    }    public int getIcon() {        return icon;    }    public String getName() {        return name;    }    public MyItem(String name,int icon){        this.name = name;        this.icon = icon;        if (icon == TYPE_NO_ICON && TextUtils.isEmpty(name)){            this.type = TYPE_SEPARATOR;        }        else if (icon==TYPE_NO_ICON){            this.type = TYPE_NO_ICON;        }else {            this.type = TYPE_NORMAL;        }        if (type != TYPE_SEPARATOR && TextUtils.isEmpty(name))        {            throw new IllegalArgumentException("you need set a name for a non-SEPARATOR item");        }    }    public MyItem(String name){        this(name,TYPE_NO_ICON);    }    public MyItem()    {        this(null);    }}

就存储了名字，图片和类型
无图片对象可用于分割
接下来是适配器：

public class MyItemAdapter extends BaseAdapter {    private Context mContext;    private int iconSize;    private LayoutInflater mInflater;    private List<MyItem> mMyItems = new ArrayList<>(Arrays.asList(new MyItem("A",R.drawable.ic_account_balance_black_24dp),            new MyItem("B",R.drawable.ic_backup_black_24dp),            new MyItem(),            new MyItem("F"),            new MyItem("C",R.drawable.ic_explore_black_24dp),            new MyItem("D",R.drawable.ic_favorite_outline_black_24dp)));    public MyItemAdapter(Context context) {        mInflater = LayoutInflater.from(context);        mContext = context;        iconSize = mContext.getResources().getDimensionPixelSize(R.dimen.drawer_icon_size);    }    @Override    public int getCount() {        return mMyItems.size();    }    @Override    public Object getItem(int position) {        return mMyItems.get(position);    }    @Override    public long getItemId(int position) {        return position;    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        MyItem myItem = mMyItems.get(position);        switch (myItem.getType()){            case MyItem.TYPE_NO_ICON:                if (convertView==null) {                    convertView = mInflater.inflate(R.layout.head_layout, parent, false);                }                TextView mTextView = (TextView) convertView;                mTextView.setText(myItem.getName());                break;            case MyItem.TYPE_NORMAL:                if (convertView==null) {                    convertView = mInflater.inflate(R.layout.item_layout, parent, false);                }                TextView textView = (TextView) convertView;                textView.setText(myItem.getName());                Drawable icon = mContext.getDrawable(myItem.getIcon());                setIconSize(icon);                if (icon != null)                {                    icon.setBounds(0, 0, iconSize, iconSize);                    //设置Drawable显示在text的左、上、右、下位置                    TextViewCompat.setCompoundDrawablesRelative(textView, icon, null, null, null);                }                break;            case MyItem.TYPE_SEPARATOR:                if (convertView==null) {                    convertView = mInflater.inflate(R.layout.dreaw_layout, parent, false);                }                break;        }        return convertView;    }    public void setIconSize(Drawable icon){        int textColorSecond = android.R.attr.textColorSecondary;        TypedValue typedValue = new TypedValue();        if(mContext.getTheme().resolveAttribute(textColorSecond,typedValue,true)){            return;        }        int baseColor = mContext.getResources().getColor(typedValue.resourceId);        icon.setColorFilter(baseColor, PorterDuff.Mode.MULTIPLY);    }}

其实就是显示了个TextView,TextView可以设置一个Drawable,就是添加一个图片
下面就是核心部分

if (convertView==null) {    convertView = mInflater.inflate(R.layout.item_layout, parent, false);}TextView textView = (TextView) convertView;textView.setText(myItem.getName());Drawable icon = mContext.getDrawable(myItem.getIcon());setIconSize(icon);if (icon != null){    icon.setBounds(0, 0, iconSize, iconSize);    //设置Drawable显示在text的左、上、右、下位置    TextViewCompat.setCompoundDrawablesRelative(textView, icon, null, null, null);}

下面是R.layout.item_layout的布局

<TextView    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="?attr/listPreferredItemHeightSmall"    android:paddingLeft="?attr/listPreferredItemPaddingLeft"    android:paddingRight="?attr/listPreferredItemPaddingRight"    android:drawablePadding="32dp"    android:gravity="center_vertical|start"    android:maxLines="1"    android:textAppearance="?attr/textAppearanceListItem"    android:textColor="?android:attr/textColorPrimary"/>

最后就是活动了：

public class MainActivity extends AppCompatActivity {    private DrawerLayout mDrawerLayout;    private ListView mListView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);        mListView = (ListView) findViewById(R.id.id_lv_left_menu);        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(mToolbar);        final ActionBar mAction = getSupportActionBar();        //在actionbar上添加一个home键，能够打开侧边栏        mAction.setHomeAsUpIndicator(R.drawable.ic_explore_black_24dp);        mAction.setDisplayHomeAsUpEnabled(true);        setUpDrawer();    }    private void setUpDrawer() {        LayoutInflater mInflater = LayoutInflater.from(this);        //添加一个列表头        mListView.addHeaderView(mInflater.inflate(R.layout.head_layout,mListView,false));        //添加适配器        mListView.setAdapter(new MyItemAdapter(this));    }}