`

完整的抽屉式工具实现

阅读更多
先上图,哈哈,俺和俺老婆、哈哈

运行时效果图:
[img]

[/img]

点击右边小按钮时效果图:
[img]

[/img]

工程结构图:
[img]

[/img]

SlidingDrawerDemoActivityActivity:
package com.amaker.sliding;

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 zzl
*/
public class SlidingDrawerDemoActivityActivity extends Activity {
	
	    //声明
		private SlidingDrawer sDrawer ;
		private GridView gvGridView ;
		//点击小抽屉的小标志哦,不然没得点呐
		private ImageView myImage1;
		
		
		
		/**
		 * 下面这个两个资源,小x提示下,就是在定义的时候必须一一对应,比如:10:10
		 * 如果少了任何一项的话,会报数组越界异常的,所以稍微注意下
		 * 另外,小x的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() {

			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				/**
				 * 此处可以实现单击不同图标时的不同功能哦,小x就不多讲废话,简单提示下
				 */
			    Toast.makeText(getApplicationContext(), "单击了第"+position+"项", Toast.LENGTH_SHORT).show();
			}
		});
    	
    	/**
    	 * 下面给我的抽屉添加两个事件监听器,大家也可以只加载一个,因为考虑到用户体验
    	 * 在点击抽屉的小标志打开抽屉时我设置一个打开的图标,关闭时设置关闭图标,这样
    	 * 比较好玩,吼吼,下面两个监听大家随意
    	 */
    	//打开抽屉监听
    	sDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {
			
			public void onDrawerOpened() {
				myImage1.setImageResource(R.drawable.close);
			}
		});
    	
    	//关闭抽屉监听
    	sDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {
			
			public void onDrawerClosed() {
				myImage1.setImageResource(R.drawable.open);
			}
		});
	}
}


GridViewAdapter
package com.amaker.sliding;

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;


/**  
* @Title: GridViewAdapter.java
* @Package com.xiaoma.www
* @Description: 自定义网络布局适配器
* @author MZH
* 老规矩,基类适配器中,小x注释就主要写下getView()方法的注释,其它的老样子
*/
public class GridViewAdapter extends BaseAdapter {
	private Context con ;
	private String [] itemStrings ;
	private int [] icons ;
	
	public GridViewAdapter(Context context,String [] items,int [] icons) {
		this.con = context;
		this.itemStrings = items;
		this.icons = icons;
	}
	
	public int getCount() {
		return itemStrings.length;
	}

	public Object getItem(int position) {
		return itemStrings[position];
	}

	public long getItemId(int position) {
		return position;
	}
	
	/**
	 * 这个地方我们就可以用LayoutInflate加载器来加载我们自己的布局
	 */
	public View getView(int position, View convertView, ViewGroup parent) {
		LayoutInflater inflater  = LayoutInflater.from(con);
		
		/**
		 * 这个地方小x加下注释,加深记忆,下面这个方法的两个参数作用如下:
		 * resource: 用DOM方式解析加载一个XML文件的所有结点及相关属性
		 * root:将当前自定义的布局加载到指定的已生成的父View中
		 * 这个方法的返回值大家注意一下:
		 *   如果指定的父View已经存在的话,那就把当前我们的自定义布局加载到这个父View中,
		 *   否则就直接加载我们当前的自定义布局文件到Activity中哦   
		 */
		View view = (View)inflater.inflate(R.layout.grid, null);
		ImageView iv =(ImageView)view.findViewById(R.id.icon);
		TextView tv = (TextView)view.findViewById(R.id.text);
		iv.setImageResource(icons[position]);
		tv.setText(itemStrings[position]);
		return view;
	}

}


grid.xml
<?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>


main.xml
<?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>


color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <drawable name="darkgray">#808080</drawable>
  <drawable name="white">#FFFFFF</drawable>
  <drawable name="black">#000000</drawable>
</resources>


配置文件:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.amaker.sliding"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="8" />

    <application
        android:icon="@drawable/xiaoma"
        android:label="@string/app_name" >
        <activity
            android:name=".SlidingDrawerDemoActivityActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>


 
  • 大小: 20.9 KB
  • 大小: 33.9 KB
  • 大小: 29.3 KB
分享到:
评论

相关推荐

    Qt 实现抽屉式菜单

    总之,Qt4虽然相对较旧,但仍能提供实现抽屉式菜单所需的所有工具和功能。通过巧妙地结合布局、动画、事件处理和样式表,开发者可以为Qt应用创造出流畅、直观的抽屉式菜单,提升用户体验。对于那些想要学习Qt界面...

    WPF 使用materialdesignin实现抽屉式侧边栏

    在本文中,我们将深入探讨如何使用MaterialDesignInXamlToolKit这一流行的WPF设计框架,来实现一个具有抽屉式侧边栏并带有弱化效果的用户界面。MaterialDesignInXamlToolKit是WPF开发者的一个强大工具,它引入了...

    jquery抽屉式图片展示效果.rar

    《jQuery抽屉式图片展示效果实现详解》 在网页设计中,吸引用户的注意力并提供良好的交互体验至关重要。jQuery作为一种强大的JavaScript库,为开发者提供了丰富的工具和方法,使得创建动态、富有创意的用户界面变得...

    android类似facebooke抽屉式导航菜单源码

    抽屉式导航菜单的实现主要涉及到以下几个关键知识点: 1. **Android Layouts**:菜单界面的构建通常使用`LinearLayout`、`RelativeLayout`或`ConstraintLayout`等布局管理器,以便在有限的空间内排列菜单项。 2. *...

    仿QQ抽屉式打开

    对于标签"QQ 抽屉式 靠边隐藏",我们可以进一步理解为这是一个关于移动应用界面设计和实现的专题。在实际开发过程中,需要注意以下几个关键点: 1. **手势识别**:正确识别用户的滑动意图,区分是想打开侧边栏还是...

    jquery hover抽屉式导航图片展开收缩代码

    本示例聚焦于利用jQuery实现的hover抽屉式导航,这种导航在鼠标悬停时会展开图片,离开时则会自动收缩。以下是关于这个主题的详细知识点: 1. jQuery库:jQuery是一个快速、简洁的JavaScript库,简化了HTML文档遍历...

    qq抽屉式界面 qt源代码

    在这个“qq抽屉式界面 qt源代码”项目中,开发者尝试用Qt库来实现这种效果。Qt是一个跨平台的应用程序开发框架,支持多种操作系统,包括Linux,它使用C++语言,提供了丰富的图形用户界面(GUI)组件和工具。 首先,...

    抽屉式的多界面滑动

    在Android开发中,"抽屉式的多界面滑动"是一种常见的设计模式,它通常涉及到`DrawerLayout`、`Fragment`和`ViewPager`这三个关键组件。这些组件是Android开发者构建复杂、交互丰富的应用界面的重要工具。 首先,...

    抽屉式菜单

    在Android开发中,实现抽屉式菜单通常是通过使用`SlidingDrawer`(已废弃)或`NavigationView`,以及自定义View来完成的。 `SlidingDrawer`是Android早期提供的一种实现抽屉效果的组件,但它已在API 21中被弃用。...

    jquery抽屉式图片轮播

    【jQuery 抽屉式图片轮播】是一种网页交互效果,常用于展示一组图片或内容,以滑动的方式呈现,给予用户动态、流畅的视觉体验。这种轮播效果因其动画类似于抽屉滑动而得名,它能有效地节省网页空间,同时增加用户与...

    WEB前端爱新鲜抽屉式特效

    抽屉式特效主要由JavaScript和CSS技术实现,其中JavaScript负责动态控制抽屉的打开和关闭,而CSS则用于定义抽屉的样式和动画效果。通常,开发者会利用CSS3的`transform`属性来实现抽屉的平滑移动,以及`transition`...

    html5仿手机侧边抽屉式滑动菜单效果代码

    在这个"html5仿手机侧边抽屉式滑动菜单效果代码"中,我们主要探讨的是如何利用HTML5,结合CSS3和可能的JavaScript,来实现手机应用中常见的侧边抽屉式导航菜单。这种菜单通常在屏幕边缘滑出,为用户提供一个简洁且不...

    Android 抽屉式

    在Android Studio中实现抽屉式菜单主要涉及到以下几个关键知识点: 1. **NavigationView**: Android提供的官方组件,用于创建抽屉式菜单。它包含了头视图(Header Layout)和菜单项(Menu Items),可以在XML布局...

    VC学习-抽屉式菜单

    在本文中,我们将深入探讨“VC学习-抽屉式菜单”的相关知识点,这是一门针对Microsoft Visual C++(简称VC)编程的学习主题,特别关注如何实现具有抽屉式菜单功能的用户界面。抽屉式菜单是一种常见的交互设计模式,...

    可从上往下拉的仿抽屉式控件

    在Android应用开发中,"可从上往下拉的仿抽屉式控件"是一种常见的界面交互元素,通常用于实现侧滑菜单或者扩展性内容展示。这种控件的设计灵感来源于现实生活中抽屉的开合动作,带给用户一种直观、自然的操作体验。...

    C# 抽屉菜单实例(winform左侧导航菜单).rar

    在本文中,我们将深入探讨如何在C# WinForm应用程序中实现一个抽屉式的左侧导航菜单。抽屉菜单是一种常见的UI设计模式,它允许用户通过滑动或点击图标从屏幕边缘拉出一个包含导航选项的菜单。这个"C# 抽屉菜单实例...

    DrawerLayout+SwipeMenu高仿qq侧滑抽屉式菜单和侧滑删除功能

    `DrawerLayout`是Android SDK提供的一种布局容器,它允许我们在应用界面的一侧滑出一个“抽屉”式的菜单。这个菜单通常包含一些导航选项或者设置选项,可以是从左侧或右侧滑出。在XML布局文件中,我们需要定义`...

    android 左边抽屉式菜单

    `DrawerLayout`是Android系统提供的布局容器,用于实现抽屉式菜单的核心组件。它允许将一个或两个视图(通常作为菜单)设置为可从屏幕边缘滑出。在XML布局文件中,我们可以将菜单视图作为`DrawerLayout`的子视图,...

Global site tag (gtag.js) - Google Analytics