自己设计MD风格侧滑栏

自己设计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));
    }
}