灯火互联
管理员
管理员
  • 注册日期2011-07-27
  • 发帖数41778
  • QQ
  • 火币41290枚
  • 粉丝1086
  • 关注100
  • 终身成就奖
  • 最爱沙发
  • 忠实会员
  • 灌水天才奖
  • 贴图大师奖
  • 原创先锋奖
  • 特殊贡献奖
  • 宣传大使奖
  • 优秀斑竹奖
  • 社区明星
阅读:5398回复:0

android之SlidingDrawer实现抽屉效果

楼主#
更多 发布于:2012-09-06 13:48

通常我们需要在用户的屏幕上展示更多的信息,但是用户的屏幕大小是有限的,那么我们如何利用有限的空间来展示更多的信息呢?Android为我们提供了SlidingDrawer类,帮助我们轻松实现想要的效果。诸如在墨迹天气中的墨迹推荐,360安全卫士中都有所体现。
下面我们就来学习SlidingDrawer类,实现上述效果:
效果图:
未展开时:





展开后:






下面看代码:
首先是布局文件:

[html] <?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"
    Android:background="@drawable/splash_background"
    >
    <SlidingDrawer Android:id="@+id/slidingDrawer"
        Android:layout_width="fill_parent"
        Android:layout_height="wrap_content"
        Android:handle="@+id/handle"
        Android:content="@+id/content"
        >
        <LinearLayout Android:id="@+id/content"
            Android:orientation="vertical"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:background="@drawable/empty">
        </LinearLayout>
        <Button Android:id="@+id/handle"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text=" open "
            Android:textSize="24dip"
            />
        </SlidingDrawer>
</LinearLayout>
<?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"
    Android:background="@drawable/splash_background"
    >
<SlidingDrawer Android:id="@+id/slidingDrawer"
  Android:layout_width="fill_parent"
  Android:layout_height="wrap_content"
  Android:handle="@+id/handle"
  Android:content="@+id/content"
  >
  <LinearLayout Android:id="@+id/content"
   Android:orientation="vertical"
   Android:layout_width="wrap_content"
   Android:layout_height="wrap_content"
   Android:background="@drawable/empty">
  </LinearLayout>
  <Button Android:id="@+id/handle"
   Android:layout_width="wrap_content"
   Android:layout_height="wrap_content"
   Android:text=" open "
   Android:textSize="24dip"
   />
  </SlidingDrawer>
</LinearLayout>
主要属性:
Android:handle="@+id/handle" 相当于展开或收回按钮,这里我用了一个Button来演示(TextView等都可以),在实际项目中使用ImageView比较好,只需设置展开和关闭时的图标样式就可以了。
Android:content="@+id/content" 展开后增加的内容,没什么好说的。


主代码:

[java] package com.cloay.slidingdrawer;

import Android.app.Activity;
import Android.os.Bundle;
import Android.widget.Button;
import Android.widget.SlidingDrawer;
import Android.widget.SlidingDrawer.OnDrawerCloseListener;
import Android.widget.SlidingDrawer.OnDrawerOpenListener;
/**
* 抽屉效果演示
* SlidingDrawerTestActivity.java
* @author cloay
* 2012-1-30
*/
public class SlidingDrawerTestActivity extends Activity {
    /** Called when the activity is first created. */
    private Button button;
    private SlidingDrawer slidingDrawer;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        button = (Button) findViewById(R.id.handle);
        slidingDrawer = (SlidingDrawer) findViewById(R.id.slidingDrawer);
        
        slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {//收回做一些处理  
            
            @Override
            public void onDrawerClosed() {
                button.setText("Open"); //这里我将文字提示改成Open  
            }
        });
        
        slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {//展开时做一些处理  
            
            @Override
            public void onDrawerOpened() {  
                button.setText("Close"); //这里我将文字提示改成Close  
            }
        });
    }
}
package com.cloay.slidingdrawer;
import Android.app.Activity;
import Android.os.Bundle;
import Android.widget.Button;
import Android.widget.SlidingDrawer;
import Android.widget.SlidingDrawer.OnDrawerCloseListener;
import Android.widget.SlidingDrawer.OnDrawerOpenListener;
/**
* 抽屉效果演示
* SlidingDrawerTestActivity.java
* @author cloay
* 2012-1-30
*/
public class SlidingDrawerTestActivity extends Activity {
    /** Called when the activity is first created. */
private Button button;
private SlidingDrawer slidingDrawer;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
      
        button = (Button) findViewById(R.id.handle);
        slidingDrawer = (SlidingDrawer) findViewById(R.id.slidingDrawer);
      
        slidingDrawer.setOnDrawerCloseListener(new OnDrawerCloseListener() {//收回做一些处理
  
   @Override
   public void onDrawerClosed() {
    button.setText("Open"); //这里我将文字提示改成Open
   }
  });
      
        slidingDrawer.setOnDrawerOpenListener(new OnDrawerOpenListener() {//展开时做一些处理
  
   @Override
   public void onDrawerOpened() {
    button.setText("Close"); //这里我将文字提示改成Close
   }
  });
    }
}


很简单,就不多写了!有问题请留言大家一起学习交流


喜欢0 评分0
游客

返回顶部