最近在写一个应用,想把设置页面和应用页面放在一起,这样就能实现用户可以实时看到自己的设置对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>
这样,我们的抽屉就完成啦 来看下效果
就写这么多啦。抽屉这个控件非常实用,除了我在开头所说的我在程序中的应用外,还有很多的用途, 发挥你的想象力,抽屉将为你的应用增色不少。
分享到:
相关推荐
android UI进阶之android中隐藏的layout 抽屉的使用方法,需要的朋友可以参考一下
android UI进阶之实现listview中checkbox的多选与记录
androidUI进阶之实现listview的下拉加载.pdf
android_UI进阶之style和theme的总结,供学习交流,谢谢~
android_UI进阶之实现listview的下拉加载,实用简单
android页面滑动效果。
该文档详细介绍了listView的分页加载
Android Drawable 概述 Bitmap & .9.png Shape XML StateListDrawable Android图形编程 类简介 Canvas Paint Typeface
自UI工作原理:Viewgroup/View/Window/WindowManager之间关系 Android事件分发机制 View重要属性和方法 自定义控件实现
关于listview的操作五花八门,有下拉刷新,分级显示,分页列表,逐页加载等,以后会陆续和大家分享这些技术,今天讲下下拉... 代码参考国外朋友JohanNilsson的实现,http://johannilsson.com/2011/03/13/android-pul
第05章 UI进阶.html
Android UI 界面设计 移动APP
Android UI开发专题(一) 之界面设计 近期很多网友对Android用户界面的设计表示很感兴趣,对于Android UI开发自绘控件和游戏制作而言掌握好绘图基础是必不可少的。本次专题分10节来讲述,有关OpenGL ES相关的可能将...
ViewPager需要androidsupportv4jar这个包的支持 来自google提供的一个附加包大家搜下即可ViewPager主要用来组织一组数据并且通过左右滑动的方式来展示 现在的大多数应用都会有一个欢迎引导页面如图所示通过左右滑动...
android编程:界面UI元素介绍、Android中应用界面布局以及常用widget组件
Android UI控件组件库集合【源码】 热门标签,流式布局,刮刮乐控件,侧滑控件,循环幻灯片控件,自动换行控件,下拉列表,圆角进度控件等常用UI控件组件合集
《Android应用程序开发教程(第2版)》教学课件02Android UI设计.pdf《Android应用程序开发教程(第2版)》教学课件02Android UI设计.pdf《Android应用程序开发教程(第2版)》教学课件02Android UI设计.pdf《Android应用...
《Android UI设计》面向创建移动应用的产品经理、设计师和开发者,系统讲解了从事Android UI设计必须要掌握的Android平台的主要技术和特性,全面总结了Android UI的设计原理、设计理念和设计模式,并通过一个综合的...