完整的抽屉式工具实现

    可能大家会遇到一个应用图标过多不好排版也不好处理的问题吧？小马学习了下一个应用图标过多时的一个简单的处理方式，就是用安卓提供的SlidingDrawer来完成漂亮的排版与功能实现，废话不多说，先上效果图再看具体代码实现：

一: 小抽屉未展开时：

二：小抽屉展开时：

三：小抽屉中功能图标过多时（这个好神奇，竟然能自己扩充，激动呀）

四：如果要实现抽屉中不同图标的不同功能时，更简单，直接给GridView的项加事件实现就可以啦，吼吼

下面我们来看下代码实现：

   
   


    
    
package com.xiaoma.www; 

    
    
 

    
    
import android.app.Activity; 

    
    
import android.os.Bundle; 

    
    
import android.view.View; 

    
    
import android.widget.AdapterView; 

    
    
import android.widget.AdapterView.OnItemClickListener; 

    
    
import android.widget.GridView; 

    
    
import android.widget.ImageView; 

    
    
import android.widget.SlidingDrawer; 

    
    
import android.widget.Toast; 

    
    
import android.widget.SlidingDrawer.OnDrawerCloseListener; 

    
    
import android.widget.SlidingDrawer.OnDrawerOpenListener; 

    
    
 

    
    
/**   

    
    
* @Title: SlidingDrawerDemoActivity.java 

    
    
* @Package com.xiaoma.www 

    
    
* @Description: 抽屉式控件SlidingDrawer的显示与隐藏 

    
    
* @author MZH 

    
    
*/ 

    
    
public class SlidingDrawerDemoActivityActivity extends Activity { 

    
    
     

    
    
        //声明 

    
    
        private SlidingDrawer sDrawer ; 

    
    
        private GridView gvGridView ; 

    
    
        //点击小抽屉的小标志哦，不然没得点呐 

    
    
        private ImageView myImage1; 

    
    
         

    
    
         

    
    
         

    
    
        /** 

    
    
         * 下面这个两个资源，小马提示下，就是在定义的时候必须一一对应，比如：10：10 

    
    
         * 如果少了任何一项的话，会报数组越界异常的，所以稍微注意下 

    
    
         * 另外，小马的DEMO本来GridView中内容很少的，但是手闲的，试了下内容撑不下 

    
    
         * 一个屏幕时怎么办，没想安卓那么强大，呵，自己扩充，效果图我已经贴上面咯 

    
    
         */ 

    
    
         

    
    
        //声明所有图标资源 

    
    
        private int icons[] = { 

    
    
                R.drawable.angry_birds,R.drawable.browser,R.drawable.dropbox, 

    
    
                R.drawable.googleearth,R.drawable.lastfm,R.drawable.xiaoma, 

    
    
                R.drawable.xbmc,R.drawable.youtube,R.drawable.notes, 

    
    
                R.drawable.messages_dock,R.drawable.contacts, 

    
    
                R.drawable.facebook,R.drawable.wapedia 

    
    
        }; 

    
    
        //声明所有图标资源title 

    
    
        private String items[] = { 

    
    
                "愤怒的小鸟","浏览器","dropbox","谷歌地球","AS","小马果的驴子","嘛东西", 

    
    
                "YouTuBe","记事本","消息提示","通讯薄","面谱","WAP" 

    
    
        }; 

    
    
         

    
    
     

    
    
    /** Called when the activity is first created. */ 

    
    
    @Override 

    
    
    public void onCreate(Bundle savedInstanceState) { 

    
    
        super.onCreate(savedInstanceState); 

    
    
        setContentView(R.layout.main); 

    
    
        init(); 

    
    
    } 

    
    
     

    
    
    /** 

    
    
     * 初始化方法实现 

    
    
     */ 

    
    
    private void init() { 

    
    
        //我的抽屉 

    
    
        sDrawer = (SlidingDrawer)findViewById(R.id.mySliding); 

    
    
        //点击抽屉时的小图标 

    
    
        myImage1 = (ImageView)findViewById(R.id.myImage1); 

    
    
        //抽屉中要显示的内容  

    
    
        gvGridView = (GridView)findViewById(R.id.gridView); 

    
    
         

    
    
        //初始化自定义的网格布局适配器并设置到网络布局上 

    
    
        GridViewAdapter adapter = new GridViewAdapter(getApplicationContext(), items, icons); 

    
    
        gvGridView.setAdapter(adapter); 

    
    
        gvGridView.setOnItemClickListener(new OnItemClickListener() { 

    
    
 

    
    
            @Override 

    
    
            public void onItemClick(AdapterView<?> parent, View view, 

    
    
                    int position, long id) { 

    
    
                /** 

    
    
                 * 此处可以实现单击不同图标时的不同功能哦，小马就不多讲废话，简单提示下 

    
    
                 */ 

    
    
                Toast.makeText(getApplicationContext(),  

    
    
                        "单击了第"+position+"项", Toast.LENGTH_SHORT).show(); 

    
    
            } 

    
    
        }); 

    
    
         

    
    
        /** 

    
    
         * 下面给我的抽屉添加两个事件监听器，大家也可以只加载一个，因为考虑到用户体验 

    
    
         * 在点击抽屉的小标志打开抽屉时我设置一个打开的图标，关闭时设置关闭图标,这样 

    
    
         * 比较好玩，吼吼,下面两个监听大家随意 

    
    
         */ 

    
    
        //打开抽屉监听 

    
    
        sDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() { 

    
    
             

    
    
            @Override 

    
    
            public void onDrawerOpened() { 

    
    
                myImage1.setImageResource(R.drawable.close); 

    
    
            } 

    
    
        }); 

    
    
         

    
    
        //关闭抽屉监听 

    
    
        sDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() { 

    
    
             

    
    
            @Override 

    
    
            public void onDrawerClosed() { 

    
    
                myImage1.setImageResource(R.drawable.open); 

    
    
            } 

    
    
        }); 

    
    
    } 

    
    
} 
   
   

怎么样？简单吧？吼吼，再来看下我们的抽屉主布局，里面有比较重要的两点，大家仔细看下注释：

   
   


    
    
<?xml version="1.0" encoding="utf-8"?> 

    
    
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 

    
    
    android:layout_width="fill_parent" 

    
    
    android:layout_height="fill_parent" 

    
    
    android:background="@drawable/background" 

    
    
    android:orientation="vertical" > 

    
    
    <!-- android:handle指定我们点击抽屉时的小图标，这个必须指定，否则没办法点，

    
    
                       主要是去哪点出来 ？  所以这个属性必须加

    
    
         android:content指定我们的抽屉里面加载的布局 

    
    
    --> 

    
    
    <SlidingDrawer  

    
    
        android:id="@+id/mySliding" 

    
    
        android:layout_width="fill_parent" 

    
    
        android:layout_height="fill_parent" 

    
    
        android:handle="@+id/layout1"   

    
    
        android:content="@+id/gridView" 

    
    
        android:orientation="horizontal" 

    
    
        > 

    
    
        <LinearLayout  

    
    
            android:id="@+id/layout1" 

    
    
            android:layout_width="35px" 

    
    
            android:layout_height="fill_parent" 

    
    
            android:gravity="center_vertical" 

    
    
            > 

    
    
            <ImageView  

    
    
                android:id="@+id/myImage1" 

    
    
                android:layout_width="wrap_content" 

    
    
                android:layout_height="wrap_content" 

    
    
                android:src="@drawable/open" 

    
    
                /> 

    
    
        </LinearLayout> 

    
    
        <GridView  

    
    
            android:id="@+id/gridView" 

    
    
            android:layout_width="wrap_content" 

    
    
            android:layout_height="wrap_content" 

    
    
            android:numColumns="3" 

    
    
            android:gravity="center" 

    
    
            /> 

    
    
    </SlidingDrawer> 

    
    
</RelativeLayout> 
   
   

 下面再来看下我们对网格布局填充的自定义布局，很简单的，对吧，嘿嘿

   
   


    
    
<?xml version="1.0" encoding="utf-8"?> 

    
    
<LinearLayout 

    
    
  xmlns:android="http://schemas.android.com/apk/res/android" 

    
    
  android:orientation="vertical" 

    
    
  android:layout_width="fill_parent" 

    
    
  android:layout_height="fill_parent" 

    
    
> 

    
    
  <ImageView  

    
    
    android:id="@+id/icon" 

    
    
    android:layout_width="wrap_content" 

    
    
    android:layout_height="wrap_content" 

    
    
    android:layout_gravity="center" 

    
    
  /> 

    
    
  <TextView  

    
    
    android:id="@+id/text" 

    
    
    android:layout_width="fill_parent" 

    
    
    android:layout_height="20sp" 

    
    
    android:gravity="center" 

    
    
    android:textColor="@drawable/black" 

    
    
  /> 

    
    
</LinearLayout> 
   
   

   最后，老样子，如果小马代码写得太乱，希望看文章的你我多指正，有错必改的，吼吼，谢谢，希望多提意见给小马，这才是对小马最大的帮助，小DEMO源码小马放附件里面了，有用到的朋友可下载改改后，实现自己想要的完美功能吧，加油加油，谢谢