android抽屉效果主要是通过SlidingDrawer 组件实现:
SlidingDrawer 通过隐藏内容,需要用户通过拖拽一个处理将内容加载到屏幕。他由两部分组成 一个拖拽处理 和 内容展示布局。由于SlidingDrawer 被用作覆盖布局,所以意味着他只能在FrameLayout or a RelativeLayout 两种布局文件中实例化。官方文档解释:在xml配置文件中,SlidingDrawer 必须被定义成 handle 和 content 两个id。(当然,这个要求应该只是针对 通过SlidingDrawer 对象实例获得 handle 和 content 对象作要求,我们也可以通过自定义ID通过findViewById()方法获取)
如:
<SlidingDrawer
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:handle="@+id/handle"
android:content="@+id/content">
<ImageView
android:id="@id/handle"
android:layout_width="88dip"
android:layout_height="44dip" />
<GridView
android:id="@id/content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</SlidingDrawer>
具体实例代码如下:
配置文件chouti.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/tv"
android:text="@string/hello"
android:layout_width="fill_parent"
android:layout_height="match_parent"
/>
<SlidingDrawer
android:id="@+id/sd"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:handle="@+id/iv"
android:content="@+id/myContent"
android:orientation="vertical"
>
<ImageView
android:id="@+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/arrowaltup"
/>
<GridView
android:id="@+id/myContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="3"
android:background="@drawable/kungfupanda"
android:gravity="center"
/>
</SlidingDrawer>
</RelativeLayout>
Activity方法:
package com.time.android.ui;
import android.app.Activity;
import android.os.Bundle;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.SlidingDrawer;
public class ChoutiActivity extends Activity {
private GridView gv;
private SlidingDrawer sd;
private ImageView iv;
private int[] icons = { R.drawable.browser, R.drawable.gallery};
private String[] items = { "浏览器", "图片"};
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.chouti);
gv = (GridView)findViewById(R.id.myContent);
sd = (SlidingDrawer)findViewById(R.id.sd);
iv=(ImageView)findViewById(R.id.iv);
MyAdapter adapter=new MyAdapter(this,items,icons);//自定义MyAdapter来实现图标加item的显示效果
gv.setAdapter(adapter);
sd.setOnDrawerOpenListener(new SlidingDrawer.OnDrawerOpenListener()//开抽屉
{
@Override
public void onDrawerOpened()
{
iv.setImageResource(R.drawable.arrowaltdown);//响应开抽屉事件 ,把图片设为向下的
}
});
sd.setOnDrawerCloseListener(new SlidingDrawer.OnDrawerCloseListener()
{
@Override
public void onDrawerClosed()
{
iv.setImageResource(R.drawable.arrowaltup);//响应关抽屉事件
}
});
}
}
辅助类MyAdapter,针对GridView 添加适配器:
package com.time.android.ui;
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 MyAdapter extends BaseAdapter{
private Context _ct;
private String[] _items;
private int[] _icons;
public MyAdapter(Context ct,String[] items,int[] icons) //构造器
{
_ct=ct;
_items=items;
_icons=icons;
}
@Override
public int getCount()
{
return _items.length;
}
@Override
public Object getItem(int arg0)
{
return _items[arg0];
}
@Override
public long getItemId(int position)
{
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent)
{
LayoutInflater factory = LayoutInflater.from(_ct);
View v = (View) factory.inflate(R.layout.gv, null);//绑定自定义的layout
ImageView iv = (ImageView) v.findViewById(R.id.icon);
TextView tv = (TextView) v.findViewById(R.id.text);
iv.setImageResource(_icons[position]);
tv.setText(_items[position]);
return v;
}
}
gv.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="40px"
android:layout_gravity="center"
/>
<TextView
android:id="@+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#ffffffff"
/>
</LinearLayout>