android UI进阶之android中隐藏的layout 抽屉的使用方法
最近在写一个应用,想把设置页面和应用页面放在一起,这样就能实现用户可以实时看到自己的设置对ui的影响,从而更方便的设置用户喜欢的界面。想了一段时间,发现用slidingdrawer这个控件可以实现这个效果。也就是一个抽屉。拉开抽屉,占据半个屏幕,另外半个屏幕还是显示应用页面。效果还是不错的。
今天就和大家分享一下android中这个抽屉效果。其实在android的lanucher就是一个抽屉,打开它就可以看到安装的应用。相信大家都见过用过。下面我们就来做个相同的效果,当然只是ui上差不多相同的效果。
slidingdrawer这个控件使用非常简单,基本在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"
>
<textview
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
android:textsize="20sp"
/>
<slidingdrawer
android:id="@+id/sd"
android:layout_width="match_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/open1"
/>
<gridview
android:id="@id/mycontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numcolumns="3"
android:background="@drawable/background"
android:gravity="center"
/>
</slidingdrawer>
</relativelayout>
在slidingdrawer这个标签下android:handle:指示的就是抽屉的图片。android:content:指向的就是抽屉里面的布局。有了这个布局,其实一个抽屉就出来了。
下面我们看chouti这个类的代码
public class chouti extends activity {
private gridview gv;
private slidingdrawer sd;
private imageview iv;
private int[] icons={r.drawable.browser,r.drawable.gallery,
r.drawable.camera,r.drawable.gmail,
r.drawable.music,r.drawable.market,
r.drawable.phone,r.drawable.messages,r.drawable.maps};
private string[] items={"浏览器","图片","相机","时钟","音乐","市场","拨号","信息","地图"};
/** called when the activity is first created. */
@override
public void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.main);
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.close1);//响应开抽屉事件 ,把图片设为向下的
}
});
sd.setondrawercloselistener(new slidingdrawer.ondrawercloselistener()
{
@override
public void ondrawerclosed()
{
iv.setimageresource(r.drawable.open1);//响应关抽屉事件
}
});
}
}
在整个类里面将布局导入,同时设置开关抽屉的监听事件。这里面我们需要自定义一个myadapter来显示带文字下标的图片。
下面是myadapter这个类的代码
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;
}
}
也是非常的简单,其中用到的布局如下
<?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>
这样,我们的抽屉就完成啦 来看下效果
就写这么多啦。抽屉这个控件非常实用,除了我在开头所说的我在程序中的应用外,还有很多的用途, 发挥你的想象力,抽屉将为你的应用增色不少。