ANDROID左侧菜单官方实现

Android上的App很多都有这样的一种菜单,在主界面上,从左边的屏幕边沿往右滑动,就会带出一个占半个屏幕或者1/3个屏幕的一个页面,上面一般显示个人信息和一些菜单和退出按钮等等,为了实现这样的一个效果,早期的时候有一些第三方组件可以做出这样的效果,那么现在官方的支持库里面就已经有支持这样效果的组件叫Navigation Drawer,下面就来看看这个是如何使用的。

下面给个示例的截图

image

创建项目

1.创建一个默认的带一个空白ManActivity.java的项目

2.准备一些静态文本,菜单项用List View来实现,准备一些图标和列表项的问文字,在文件夹res –> values –>string.xml 里面

<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <string name="app_name">Slider Menu</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="drawer_open">Slider Menu Opened</string>
    <string name="drawer_close">Slider Menu Closed</string>
     
    <!-- Nav Drawer Menu Items -->
    <string-array name="nav_drawer_items">
        <item >Home</item>
        <item >Find People</item>
        <item >Photos</item>
        <item >Communities</item>
        <item >Pages</item>
        <item >What\'s Hot</item>
    </string-array>
     
    <!-- Nav Drawer List Item Icons -->
    <!-- Keep them in order as the titles are in -->
    <array name="nav_drawer_icons">
        <item>@drawable/ic_home</item>
        <item>@drawable/ic_people</item>
        <item>@drawable/ic_photos</item>
        <item>@drawable/ic_communities</item>
        <item>@drawable/ic_pages</item>
        <item>@drawable/ic_whats_hot</item>
    </array>
     
    <!-- Content Description -->
    <string name="desc_list_item_icon">Item Icon</string>
 
</resources>

3.打开activity_main.xml,使用官方提供的一个布局叫DrawerLayout,来实现左侧滑出菜单,下面是设计好的示例xml

<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:layout_height="match_parent">
 
    <!-- Framelayout to display Fragments -->
    <FrameLayout
        android:id="@+id/frame_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
 
    <!-- Listview to display slider menu -->
    <ListView
        android:id="@+id/list_slidermenu"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@color/list_divider"
        android:dividerHeight="1dp"       
        android:listSelector="@drawable/list_selector"
        android:background="@color/list_background"/>
</android.support.v4.widget.DrawerLayout>

这里面布局的含义解释一下,FrameLayout就是放主页面的位置,可以根据点击菜单的时间往里面加载不同的界面达到导航的目的,ListView就是菜单项了。

创建List View Adapter

用list view来实现菜单,每个菜单就是一行,一行里面一个图标和文字组成,然后给每一行添加点击事件;

这里面点击的效果需要注意一下,android里面大部分元素都是可以实现点击效果,主要有默认的状态,点击的状态也就是按下的状态,点击之后的状态等,点击之后的状态一般只有这个元素可以获得焦点才会出现,很多情况下都是点击之后就恢复原样;

4.在文件夹res->drawable里面创建菜单项默认背景list_item_bg_normal.xml,目录没有可以创建,这种是通过xml来定义一个图形,当然有些可以直接使用图片就达到效果,只是通过xml来定义图形在有些地方会比较灵活一下,同时可以定义一些特别的效果出来;

list_item_bg_normal.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <gradient
      android:startColor="@color/list_background"
      android:endColor="@color/list_background"
      android:angle="90" />
</shape>

5.在文件夹res->drawable创建点击的时候的背景图list_item_bg_pressed.xml

list_item_bg_pressed.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <gradient
      android:startColor="@color/list_background_pressed"
      android:endColor="@color/list_background_pressed"
      android:angle="90" />
</shape>

6.在文件夹res->drawable创建一个selector来控制点击的效果list_selector.xml

list_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 
    <item android:drawable="@drawable/list_item_bg_normal" android:state_activated="false"/>
    <item android:drawable="@drawable/list_item_bg_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/list_item_bg_pressed" android:state_activated="true"/>
 
</selector>

7.在文件夹res->drawable创建一个创建一个带边框圆角的背景效果counter_bg.xml ,这个用于作为一个计数的背景,提示是个菜单有多少内容项未读之类的。

counter_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
 
    <!-- view background color -->
    <solid android:color="@color/counter_text_bg" >
    </solid>
 
    <!-- If you want to add some padding -->
    <padding
        android:right="3dp"
        android:left="3dp" >
    </padding>
 
    <!-- Here is the corner radius -->
    <corners android:radius="2dp" >
    </corners>
 
</shape>

8.在layout文件夹里面创建list view使用的每一行的内容,行的布局就是一个图标加上后面的文字

drawer_list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="@drawable/list_selector">
 
    <ImageView
        android:id="@+id/icon"
        android:layout_width="25dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="12dp"
        android:layout_marginRight="12dp"
        android:contentDescription="@string/desc_list_item_icon"
        android:src="@drawable/ic_home"
        android:layout_centerVertical="true" />
 
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_toRightOf="@id/icon"
        android:minHeight="?android:attr/listPreferredItemHeightSmall"
        android:textAppearance="?android:attr/textAppearanceListItemSmall"
        android:textColor="@color/list_item_title"
        android:gravity="center_vertical"
        android:paddingRight="40dp"/>
     
    <TextView android:id="@+id/counter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/counter_bg"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="8dp"
        android:textColor="@color/counter_text_color"/>
 
</RelativeLayout>

9.创建一个实体,用于记录每个菜单的文本、图标和是否显示计数

NavDrawerItem.java
package info.androidhive.slidingmenu.model;
 
public class NavDrawerItem {
     
    private String title;
    private int icon;
    private String count = "0";
    // boolean to set visiblity of the counter
    private boolean isCounterVisible = false;
     
    public NavDrawerItem(){}
 
    public NavDrawerItem(String title, int icon){
        this.title = title;
        this.icon = icon;
    }
     
    public NavDrawerItem(String title, int icon, boolean isCounterVisible, String count){
        this.title = title;
        this.icon = icon;
        this.isCounterVisible = isCounterVisible;
        this.count = count;
    }
     
    public String getTitle(){
        return this.title;
    }
     
    public int getIcon(){
        return this.icon;
    }
     
    public String getCount(){
        return this.count;
    }
     
    public boolean getCounterVisibility(){
        return this.isCounterVisible;
    }
     
    public void setTitle(String title){
        this.title = title;
    }
     
    public void setIcon(int icon){
        this.icon = icon;
    }
     
    public void setCount(String count){
        this.count = count;
    }
     
    public void setCounterVisibility(boolean isCounterVisible){
        this.isCounterVisible = isCounterVisible;
    }
}

10.创建一个Adapter,用于控制list view ,NavDrawerListAdapter.java

NavDrawerListAdapter.java
package info.androidhive.slidingmenu.adapter;
 
import info.androidhive.slidingmenu.R;
import info.androidhive.slidingmenu.model.NavDrawerItem;
 
import java.util.ArrayList;
 
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
 
public class NavDrawerListAdapter extends BaseAdapter {
     
    private Context context;
    private ArrayList<NavDrawerItem> navDrawerItems;
     
    public NavDrawerListAdapter(Context context, ArrayList<NavDrawerItem> navDrawerItems){
        this.context = context;
        this.navDrawerItems = navDrawerItems;
    }
 
    @Override
    public int getCount() {
        return navDrawerItems.size();
    }
 
    @Override
    public Object getItem(int position) {       
        return navDrawerItems.get(position);
    }
 
    @Override
    public long getItemId(int position) {
        return position;
    }
 
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            LayoutInflater mInflater = (LayoutInflater)
                    context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
            convertView = mInflater.inflate(R.layout.drawer_list_item, null);
        }
          
        ImageView imgIcon = (ImageView) convertView.findViewById(R.id.icon);
        TextView txtTitle = (TextView) convertView.findViewById(R.id.title);
        TextView txtCount = (TextView) convertView.findViewById(R.id.counter);
          
        imgIcon.setImageResource(navDrawerItems.get(position).getIcon());        
        txtTitle.setText(navDrawerItems.get(position).getTitle());
         
        // displaying count
        // check whether it set visible or not
        if(navDrawerItems.get(position).getCounterVisibility()){
            txtCount.setText(navDrawerItems.get(position).getCount());
        }else{
            // hide the counter view
            txtCount.setVisibility(View.GONE);
        }
         
        return convertView;
    }
 
}

上面这些准备的内容就完成了,下面在MainActivity.java里面把他们使用起来

在MainActivity.java里面主要要做的事情包括:

>实例化NavDrawerListAdapter,然后添加菜单项

>然后将这个Adapter应用到List View上

>添加菜单项的点击事件

>在点击事件里面,显示菜单项对应的页面在主页上

11.下面就是实现的代码

MainActivity.java
public class MainActivity extends Activity {
    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    private ActionBarDrawerToggle mDrawerToggle;
 
    // nav drawer title
    private CharSequence mDrawerTitle;
 
    // used to store app title
    private CharSequence mTitle;
 
    // slide menu items
    private String[] navMenuTitles;
    private TypedArray navMenuIcons;
 
    private ArrayList<NavDrawerItem> navDrawerItems;
    private NavDrawerListAdapter adapter;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        mTitle = mDrawerTitle = getTitle();
 
        // load slide menu items
        navMenuTitles = getResources().getStringArray(R.array.nav_drawer_items);
 
        // nav drawer icons from resources
        navMenuIcons = getResources()
                .obtainTypedArray(R.array.nav_drawer_icons);
 
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.list_slidermenu);
 
        navDrawerItems = new ArrayList<NavDrawerItem>();
 
        // adding nav drawer items to array
        // Home
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[0], navMenuIcons.getResourceId(0, -1)));
        // Find People
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[1], navMenuIcons.getResourceId(1, -1)));
        // Photos
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[2], navMenuIcons.getResourceId(2, -1)));
        // Communities, Will add a counter here
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[3], navMenuIcons.getResourceId(3, -1), true, "22"));
        // Pages
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[4], navMenuIcons.getResourceId(4, -1)));
        // What's hot, We  will add a counter here
        navDrawerItems.add(new NavDrawerItem(navMenuTitles[5], navMenuIcons.getResourceId(5, -1), true, "50+"));
         
 
        // Recycle the typed array
        navMenuIcons.recycle();
 
        // setting the nav drawer list adapter
        adapter = new NavDrawerListAdapter(getApplicationContext(),
                navDrawerItems);
        mDrawerList.setAdapter(adapter);
 
        // enabling action bar app icon and behaving it as toggle button
        getActionBar().setDisplayHomeAsUpEnabled(true);
        getActionBar().setHomeButtonEnabled(true);
 
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.ic_drawer, //nav menu toggle icon
                R.string.app_name, // nav drawer open - description for accessibility
                R.string.app_name // nav drawer close - description for accessibility
        ){
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
                // calling onPrepareOptionsMenu() to show action bar icons
                invalidateOptionsMenu();
            }
 
            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
                // calling onPrepareOptionsMenu() to hide action bar icons
                invalidateOptionsMenu();
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);
 
        if (savedInstanceState == null) {
            // on first time display view for first nav item
            displayView(0);
        }
    }
 
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
 
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // toggle nav drawer on selecting action bar app icon/title
        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }
        // Handle action bar actions click
        switch (item.getItemId()) {
        case R.id.action_settings:
            return true;
        default:
            return super.onOptionsItemSelected(item);
        }
    }
 
    /***
     * Called when invalidateOptionsMenu() is triggered
     */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // if nav drawer is opened, hide the action items
        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
        menu.findItem(R.id.action_settings).setVisible(!drawerOpen);
        return super.onPrepareOptionsMenu(menu);
    }
 
    @Override
    public void setTitle(CharSequence title) {
        mTitle = title;
        getActionBar().setTitle(mTitle);
    }
 
    /**
     * When using the ActionBarDrawerToggle, you must call it during
     * onPostCreate() and onConfigurationChanged()...
     */
 
    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        mDrawerToggle.syncState();
    }
 
    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        // Pass any configuration change to the drawer toggls
        mDrawerToggle.onConfigurationChanged(newConfig);
    }

 

到目前为止就可以实现划出效果了,并且看到菜单项,但是还没有事件,下面添加事件

创建菜单项对应的页面和事件

有多少个菜单就做多少个页面,下面就局其中的一个例子

12.创建一个HomeFragment.java 和对应的布局文件fragment_home.xml

HomeFragment.java
package info.androidhive.slidingmenu;
 
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class HomeFragment extends Fragment {
     
    public HomeFragment(){}
     
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
  
        View rootView = inflater.inflate(R.layout.fragment_home, container, false);
          
        return rootView;
    }
}
fragment_home.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
     
    <TextView
        android:id="@+id/txtLabel"
         android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="16dp"
        android:text="Home View"/>
     
    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/txtLabel"
        android:src="@drawable/ic_home"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"/>
     
 
</RelativeLayout>

13.添加菜单相应事件

MainActivity.java
public class MainActivity extends Activity {
..
..
    @Override
    protected void onCreate(Bundle savedInstanceState) {
    ..
    mDrawerList.setOnItemClickListener(new SlideMenuClickListener());
    }
 
    /**
     * Slide menu item click listener
     * */
    private class SlideMenuClickListener implements
            ListView.OnItemClickListener {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position,
                long id) {
            // display view for selected nav drawer item
            displayView(position);
        }
    }
 
     /**
     * Diplaying fragment view for selected nav drawer list item
     * */
    private void displayView(int position) {
        // update the main content by replacing fragments
        Fragment fragment = null;
        switch (position) {
        case 0:
            fragment = new HomeFragment();
            break;
        case 1:
            fragment = new FindPeopleFragment();
            break;
        case 2:
            fragment = new PhotosFragment();
            break;
        case 3:
            fragment = new CommunityFragment();
            break;
        case 4:
            fragment = new PagesFragment();
            break;
        case 5:
            fragment = new WhatsHotFragment();
            break;
 
        default:
            break;
        }
 
        if (fragment != null) {
            FragmentManager fragmentManager = getFragmentManager();
            fragmentManager.beginTransaction()
                    .replace(R.id.frame_container, fragment).commit();
 
            // update selected item and title, then close the drawer
            mDrawerList.setItemChecked(position, true);
            mDrawerList.setSelection(position);
            setTitle(navMenuTitles[position]);
            mDrawerLayout.closeDrawer(mDrawerList);
        } else {
            // error in creating fragment
            Log.e("MainActivity", "Error in creating fragment");
        }
    }
}

到这里所有的任务都完成了,运行之后的效果如下

image

 

结束

这个例子里面加入了一个List view的使用,以及行点击事件在主页上切换画面,如果单纯想看一个左侧划出的效果,可以直接什么代码都不写,在DrawerLayou里面加入一些静态的文本就可以了,后台代码也不需要写,直接运行就有效果,因为这是官方实现的效果,划出的其实也是个页面,布局完全由自己控制,使用起来很灵活,当然划出的效果也可做一些自定义,如果说想做一些比较酷的滑出效果也可以借助一些第三方的组件来实现,如果没有特殊的需要这样的默认效果也已经算是很不错的了。

这里献上别人家写好的实例:SlidingMenu