抽屉效果

最新推荐文章于 2022-07-05 11:28:31 发布
最新推荐文章于 2022-07-05 11:28:31 发布
阅读量2k 收藏 2
点赞数
分类专栏： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014748504/article/details/51115646
版权

SlideringDrawer的使用(抽屉效果)http://www.itlanbao.com/code/20150825/10000/100476.html

一 SlidingDrawer 这个类，也就是所谓的"抽屉"类。它的用法很简单，要包括handle ,和content .
handle 就是当你点击它的时候，content 要么抽抽屉要么关抽屉。

这是上下拉抽屉的效果，将 SlidingDrawer属性设置为android:orientation="vertical"即可


这是左右拉抽屉的效果，将 SlidingDrawer属性设置为android:orientation="horizontal"即可。




二、重要属性

　　android:allowSingleTap：指示是否可以通过handle打开或关闭

　　android:animateOnClick：指示是否当使用者按下手柄打开/关闭时是否该有一个动画。

　　android:content：隐藏的内容

　　android:handle：handle(手柄)

　　三、重要方法

　　animateClose()：关闭时实现动画。

close()：即时关闭

　　getContent()：获取内容

　　isMoving()：指示SlidingDrawer是否在移动。

　　isOpened()：指示SlidingDrawer是否已全部打开

　　lock()：屏蔽触摸事件。

　　setOnDrawerCloseListener(SlidingDrawer.OnDrawerCloseListener onDrawerCloseListener)：SlidingDrawer关闭时调用

　　unlock()：解除屏蔽触摸事件。

　　toggle()：切换打开和关闭的抽屉SlidingDrawer。



上面例子的布局文件：

[html] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical" android:layout_width="fill_parent"
  4. android:layout_height="fill_parent">
  5. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  6. android:orientation="vertical" android:layout_width="fill_parent"
  7. android:layout_height="fill_parent">
  8. <TextView android:layout_width="fill_parent"
  9. android:layout_height="wrap_content"
  10. android:text="效果显示：" />
  12. <SlidingDrawer android:id="@+id/drawer1"
  13. android:layout_width="fill_parent"
  14. android:layout_height="fill_parent"
  15. android:orientation="horizontal"
  16. android:handle="@+id/layout1"
  17. android:content="@+id/mycontent1">
  18. <LinearLayout android:id="@id/layout1"
  19. android:orientation="vertical"
  20. android:layout_width="35sp"
  21. android:layout_height="wrap_content"
  22. android:gravity="center">
  23. <ImageView android:id="@+id/myImage"
  24. android:layout_width="wrap_content"
  25. android:layout_height="wrap_content"
  26. android:src="@drawable/open" />
  27. </LinearLayout>
  28. <GridView android:id="@id/mycontent1" android:layout_width="fill_parent"
  29. android:layout_height="fill_parent" android:numColumns="2"
  30. android:gravity="center" />
  31. </SlidingDrawer>
  32. </LinearLayout>
  33. </FrameLayout>


java文件：

[java] view plain copy print ?
  1. import android.app.Activity;
  2. import android.os.Bundle;
  3. import android.widget.GridView;
  4. import android.widget.ImageView;
  5. import android.widget.SlidingDrawer;
  6. import android.widget.SlidingDrawer.OnDrawerCloseListener;
  7. import android.widget.SlidingDrawer.OnDrawerOpenListener;
  8. import android.widget.SlidingDrawer.OnDrawerScrollListener;
  10. public class SlidingDrawerActivity extends Activity {
  11. /** Called when the activity is first created. */
  12. private SlidingDrawer sd;
  13. private GridView gv;
  14. private ImageView iv;
  15. private int [] itemIcons = new int []
  16. { R.drawable.alarm, R.drawable.calendar, R.drawable.camera, R.drawable.clock, R.drawable.music, R.drawable.tv };
  17. private String[] itemString = new String[]{"Alarm","Calendar","camera","clock","music","tv"};
  18. @Override
  19. public void onCreate(Bundle savedInstanceState) {
  20. super.onCreate(savedInstanceState);
  21. setContentView(R.layout.slidrawer);
  22. init();
  23. GridAdapter adapter = new GridAdapter(SlidingDrawerActivity.this,itemString,itemIcons);
  24. gv.setAdapter(adapter);
  25. /* 设定SlidingDrawer被打开的事件处理 */
  26. sd.setOnDrawerOpenListener(new OnDrawerOpenListener() {
  28. @Override
  29. public void onDrawerOpened() {
  30. // TODO Auto-generated method stub
  31. iv.setImageResource(R.drawable.close);
  32. }
  33. });
  34. /* 设定SlidingDrawer被关闭的事件处理 */
  35. sd.setOnDrawerCloseListener(new OnDrawerCloseListener()
  36. {
  38. public void onDrawerClosed()
  39. {
  40. iv.setImageResource(R.drawable.open);
  41. }
  42. });
  43. sd.setOnDrawerScrollListener(new OnDrawerScrollListener() {
  45. @Override
  46. public void onScrollStarted() {
  47. // TODO Auto-generated method stub
  48. System.out.println("start");
  49. }
  51. @Override
  52. public void onScrollEnded() {
  53. // TODO Auto-generated method stub
  54. System.out.println("end");
  55. }
  56. });
  57. }
  58. private void init(){
  59. sd = (SlidingDrawer) findViewById(R.id.drawer1);
  60. gv = (GridView) findViewById(R.id.mycontent1);
  61. iv = (ImageView) findViewById(R.id.myImage);
  64. }
  65. }



[java] view plain copy print ?
  1. package com.shao.slider;
  3. import android.content.Context;
  4. import android.view.LayoutInflater;
  5. import android.view.View;
  6. import android.view.ViewGroup;
  7. import android.widget.BaseAdapter;
  8. import android.widget.ImageView;
  9. import android.widget.TextView;
  11. public class GridAdapter extends BaseAdapter {
  13. private Context context;
  14. private String[] itemString;
  15. private int[] itemIcons;
  17. public GridAdapter(Context con,String[] itemString,int[] itemIcons){
  18. context = con;
  19. this.itemString = itemString;
  20. this.itemIcons = itemIcons;
  21. }
  22. @Override
  23. public int getCount() {
  24. // TODO Auto-generated method stub
  25. return itemIcons.length;
  26. }
  28. @Override
  29. public Object getItem(int position) {
  30. // TODO Auto-generated method stub
  31. return itemString[position];
  32. }
  34. @Override
  35. public long getItemId(int position) {
  36. // TODO Auto-generated method stub
  37. return position;
  38. }
  40. @Override
  41. public View getView(int position, View convertView, ViewGroup parent) {
  42. // TODO Auto-generated method stub
  43. LayoutInflater inflater = LayoutInflater.from(context);
  44. /* 使用item.xml为每几个item的Layout */
  45. View v = inflater.inflate(R.layout.item, null);
  46. /* 取得View */
  47. ImageView iv = (ImageView) v.findViewById(R.id.item_grid);
  48. TextView tv = (TextView) v.findViewById(R.id.item_text);
  49. /* 设定显示的Image与文? */
  50. iv.setImageResource(itemIcons[position]);
  51. tv.setText(itemString[position]);
  52. return v;
  53. }
  55. }

还有注意的是：

SlidingDrawer should be used as an overlay inside layouts. This means SlidingDrawer should only be used inside of a FrameLayout or a RelativeLayout for instance,如果显示的时候不正常，考虑上面的原因。

 

 

 

android仿腾讯安全管家首页抽屉效果

腾讯安全管家 android 抽屉 自定义组建 
转载请说明出处  
最近在做公司新产品的设计，看到腾讯安全管家首页的抽屉效果设计的挺不错，一方面可以讲经常使用的功能模块直接显示给用户，另一方面将用户不常用的功能模块隐藏起来，而这些功能模块的显示和隐藏可以通过一个抽屉组建实现。所以我们想将这个设计理念加入到我们的产品中。腾讯安全管家效果图如下：  

 

虽然android 文档中向我们提供了一个叫SlidingDrawer的抽屉组建，但是这个组建的使用限制比较多，也实现不了我们想要的效果。故到网上搜了一会，也没看到有开发者写这样的组建。所以只能靠自己了，但是在网上还是看到了一下有价值的参考案例。  
不费话了，直接上实现后的效果图：  
 

下面是自定义组建的实现代码  
Java代码    收藏代码
  1. import android.content.Context;  
  2. import android.os.AsyncTask;  
  3. import android.util.Log;  
  4. import android.view.GestureDetector;  
  5. import android.view.MotionEvent;  
  6. import android.view.View;  
  7. import android.widget.Button;  
  8. import android.widget.LinearLayout;  
  9.   
  10. public class CustomSlidingDrawer extends LinearLayout implements GestureDetector.OnGestureListener, View.OnTouchListener{  
  11.     private final static String TAG = "CustomSlidingDrawer";  
  12.       
  13.     private Button btnHandler;  
  14.     private LinearLayout container;  
  15.     private int mBottonMargin=0;  
  16.     private GestureDetector mGestureDetector;  
  17.     private boolean mIsScrolling=false;  
  18.     private float mScrollY;  
  19.     private int moveDistance;  
  20.       
  21.     public CustomSlidingDrawer(Context context,View otherView,int width,int height, int hideDistance) {  
  22.         super(context);  
  23.         moveDistance = hideDistance;  
  24.         //定义手势识别  
  25.         mGestureDetector = new GestureDetector(context,this);  
  26.         mGestureDetector.setIsLongpressEnabled(false);  
  27.           
  28.         //改变CustomSlidingDrawer附近组件的属性  
  29.         LayoutParams otherLP=(LayoutParams) otherView.getLayoutParams();  
  30.         //这一步很重要，要不组建不会显示  
  31.         otherLP.weight=1;  
  32.         otherView.setLayoutParams(otherLP);  
  33.           
  34.         //设置CustomSlidingDrawer本身的属性  
  35.         LayoutParams lp=new LayoutParams(width, height);  
  36.         lp.bottomMargin = -moveDistance;  
  37.         mBottonMargin=Math.abs(lp.bottomMargin);  
  38.         this.setLayoutParams(lp);  
  39.         this.setOrientation(LinearLayout.VERTICAL);  
  40.         //this.setBackgroundColor(Color.BLUE);  
  41.           
  42.         //设置Handler的属性  
  43.         btnHandler=new Button(context);  
  44.         btnHandler.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, 35));  
  45.         btnHandler.setOnTouchListener(this);  
  46.         this.addView(btnHandler);  
  47.           
  48.         //设置Container的属性  
  49.         container=new LinearLayout(context);  
  50.         //container.setBackgroundColor(Color.GREEN);  
  51.         container.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,  
  52.                 LayoutParams.MATCH_PARENT));  
  53.         this.addView(container);  
  54.     }  
  55.       
  56.     /** 
  57.      * 把View放在CustomSlidingDrawer的Container 
  58.      * @param v 
  59.      */  
  60.     public void fillPanelContainer(View v)  
  61.     {  
  62.         container.addView(v);  
  63.     }  
  64.       
  65.     /** 
  66.      * 异步移动CustomSlidingDrawer 
  67.      */  
  68.     class AsynMove extends AsyncTask<Integer, Integer, Void> {  
  69.         @Override  
  70.         protected Void doInBackground(Integer... params) {  
  71.             Log.e(TAG, "AsynMove doInBackground");  
  72.             int times;  
  73.             if (mBottonMargin % Math.abs(params[0]) == 0)// 整除  
  74.                 times = mBottonMargin / Math.abs(params[0]);  
  75.             else  
  76.                 // 有余数  
  77.                 times = mBottonMargin / Math.abs(params[0]) + 1;  
  78.             for (int i = 0; i < times; i++) {  
  79.                 publishProgress(params);  
  80.             }  
  81.             return null;  
  82.         }  
  83.         @Override  
  84.         protected void onProgressUpdate(Integer... params) {  
  85.             Log.e(TAG, "AsynMove onProgressUpdate");  
  86.             LayoutParams lp = (LayoutParams) CustomSlidingDrawer.this.getLayoutParams();  
  87.             if (params[0] < 0)  
  88.                 lp.bottomMargin = Math.max(lp.bottomMargin + params[0],  
  89.                         (-mBottonMargin));  
  90.             else  
  91.                 lp.bottomMargin = Math.min(lp.bottomMargin + params[0], 0);  
  92.             CustomSlidingDrawer.this.setLayoutParams(lp);  
  93.         }  
  94.     }  
  95.       
  96.     @Override  
  97.     public boolean onDown(MotionEvent e) {  
  98.         mScrollY=0;  
  99.         mIsScrolling=false;  
  100.         return false;  
  101.     }  
  102.       
  103.     @Override  
  104.     public boolean onSingleTapUp(MotionEvent e) {  
  105.         LayoutParams lp = (LayoutParams) CustomSlidingDrawer.this.getLayoutParams();  
  106.         if (lp.bottomMargin < 0)  
  107.             new AsynMove().execute(new Integer[] { moveDistance });// 正数展开  
  108.         else if (lp.bottomMargin >= 0)  
  109.             new AsynMove().execute(new Integer[] { -moveDistance });// 负数收缩  
  110.         return false;  
  111.     }  
  112.       
  113.     @Override  
  114.     public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,  
  115.             float distanceY) {  
  116.         mIsScrolling=true;  
  117.         mScrollY+=distanceY;  
  118.         LayoutParams lp=(LayoutParams) CustomSlidingDrawer.this.getLayoutParams();  
  119.         if (lp.bottomMargin < -1 && mScrollY > 0) {//往上拖拉  
  120.             lp.bottomMargin = Math.min((lp.bottomMargin + (int) mScrollY),0);  
  121.             CustomSlidingDrawer.this.setLayoutParams(lp);  
  122.         } else if (lp.bottomMargin > -(mBottonMargin) && mScrollY < 0) {//往下拖拉  
  123.             lp.bottomMargin = Math.max((lp.bottomMargin + (int) mScrollY),-mBottonMargin);  
  124.             CustomSlidingDrawer.this.setLayoutParams(lp);  
  125.         }  
  126.         return false;  
  127.     }  
  128.       
  129.     @Override  
  130.     public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,  
  131.             float velocityY) {return false;}  
  132.     @Override  
  133.     public void onLongPress(MotionEvent e) {}  
  134.     @Override  
  135.     public void onShowPress(MotionEvent e) {}  
  136.       
  137.     @Override  
  138.     public boolean onTouch(View v, MotionEvent event) {  
  139.         if(event.getAction()==MotionEvent.ACTION_UP && //onScroll时的ACTION_UP  
  140.                 mIsScrolling==true)  
  141.         {  
  142.             LayoutParams lp=(LayoutParams) CustomSlidingDrawer.this.getLayoutParams();  
  143.             if (lp.bottomMargin >= (-mBottonMargin/2)) {//往上超过一半  
  144.                 new AsynMove().execute(new Integer[] { moveDistance });// 正数展开  
  145.             }   
  146.             else if (lp.bottomMargin < (-mBottonMargin/2)) {//往下拖拉  
  147.                 new AsynMove().execute(new Integer[] { -moveDistance });// 负数收缩  
  148.             }  
  149.         }  
  150.         return mGestureDetector.onTouchEvent(event);   
  151.     }  
  152. }  


下面是demo的源码：  

style="font: 12px/18px Helvetica, Tahoma, Arial, sans-serif; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; widows: 1; font-size-adjust: none; font-stretch: normal; -webkit-text-stroke-width: 0px;" height="90" src="http://ff20081528.iteye.com/iframe_ggbd/187" frameborder="0" width="680" scrolling="no">

 

 

心多大，路多远
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
iOS抽屉效果开发案例分享
09-02
主要为大家分享了iOS抽屉效果开发案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
侧滑菜单(抽屉效果)DrawerLayout实现原理
hesong的专栏
10-15 2723
DrawerLayout的实现原理分析。
Android抽屉效果的实现（不挤压，不覆盖）
Programming
04-02 4142
抽屉效果，顾名思义就是可以像抽屉一样拉出来推进去，在Android中一般是通过滑动（从左到右，或者像帘子一样从上往下拉，或者通过某个按钮）来实现抽屉效果。其实Android的抽屉效果很简单(V4.0以上)，使用了一个叫做DrawerLayout的类就可以轻松实现。废话少说，开始干活。 Android官网的教程（需要翻墙）：http://developer.android.com/training
简单介绍抽屉效果
月清空的博客
03-18 3558
官方文档 这种抽屉般的ui，有点像是侧边栏，不过跟侧边栏还是有点不同的，它是在显示在actionbar的下面的，而侧边栏显然是用另外一个视图来遮盖当前的视图。当然，因为是13 google才更新的support库支持的组件，你需要把最低版本写到高点的版本，不能写成2.x的版本。 官方demo给的是滑动左边侧滑的ui效果，下面是右边出来的效果。 1.活动视图： public clas
drawer的用法_SlideringDrawer的使用(抽屉效果)
weixin_36111033的博客
01-14 831
一 SlidingDrawer 这个类，也就是所谓的"抽屉"类。它的用法很简单，要包括handle ,和content .handle 就是当你点击它的时候，content 要么抽抽屉要么关抽屉。这是上下拉抽屉的效果，将 SlidingDrawer属性设置为android:orientation="vertical"即可这是左右拉抽屉的效果，将 SlidingDrawer属性设置为android...
html实现抽屉式效果,抽屉式效果.html
weixin_32148209的博客
06-04 1047
Document* {margin: 0px;padding: 0px;}body {background: url('img/bg.jpg')}.box {width: 1100px;height: 430px;margin: 120px auto;}.box ul li {list-style-type: none;width: 100px;height: 429px;float: left;...
javascript 简单抽屉效果的实现代码
10-29
javascript 简单抽屉效果的实现代码，需要的朋友可以参考下，大家自行测试。
iOS实现抽屉效果
08-25
主要为大家详细介绍了iOS实现抽屉效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
安卓抽屉效果相关-简单实用的抽屉效果.zip
07-30
简单实用的抽屉效果.zip,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
左侧的抽屉效果特效
04-03
该源码由源码天堂android源码代码片段免费提供的，效果可以支持了左侧的抽屉效果特效，一款android开发的超爽的android抽屉效果，点击按钮可以看到抽屉渐入渐出的动画效果。
HTML 底部弹窗 抽屉效果
07-28
HTML底部弹窗，实现抽屉效果，可以用于电影院选座位。
android 简单下拉抽屉
11-29
android简单下拉抽屉，抽屉向下滑动时界面整体向下滑动，可直接导入运行，需要导入V7包哦。
网页实现抽屉效果，使用HTML和js，参杂了点css
06-23
用一个放在网页左侧的div，实现抽屉效果。在IE下能运行，效果一实现，人就懒了。
Flutter 抽屉效果
WangQingLei0307的博客
07-17 2092
在开发过程中我们可能会用到抽屉效果，弹出的界面我们可以进行很多操作，在原生开发中相比大家对这都不陌生，那么Flutter中抽屉效果是如何实现的呢？ 首先感谢两位大佬提供资料，两位大佬的博客分别为大队辅导猿、rhyme_lph。如果也可以看一下两位大佬的详细接收，我这里只介绍实现和使用，下面先上效果图。 这个我们主要使用的Flutter提供的组件就是drawers，那我们具体如何实现呢，由于直接使用drawers，会出现指定抽屉宽度，无法进行修改宽度，这里我就要处理一下。 下面还是老样子，我直接上.
侧边导航栏（抽屉式设计）界面 (html + css)
热门推荐
程序猿追的博客
04-15 2万+
写在前面 哈喽~大家好，这篇呢带来的是侧边导航栏（抽屉式设计），采用 (html + css) 来实现的，编辑器是 WebStorm 。接下来来看看效果吧。 效果 首先我们要导入阿里的图标样式文件（如何使用参考这篇大佬写的博客），将图标样式、字体样式导入到项目中，新建 css 样式文件。 导入 <link rel="stylesheet" href="css/css1.css" type="text/css"> <link rel...
抽屉效果的实现（DrawerLayout和SlidingMenu的对比）
weixin_33670786的博客
12-02 323
在做谷歌电子市场的时候用的是DrawerLayout实现的抽屉效果，在新闻客户端的时候用的是开源框架SlidingMenu来实现的，总的来说，各有个的优点，侧滑（开源框架）实现的效果更好，但是DrawerLayout直接写布局文件就好了，不过我还是比较喜欢用开源框架的这个。下面分别来说说如何实现： 1、SlidingMenu 首先要引...
前端学习——JavaScript抽屉，手风琴，购物车特效案例
m0_46084075的博客
03-26 3096
一. JavaScript案例介绍 这篇我们通过一些JavaScript案例来完成对JavaScript中BOM对象和DOM对象的理解 首先我们会学到三种常用的JavaScript案例特效 分别是 手风琴切换特效 抽屉切换特效 购物车案例特效 手风琴特效展示 抽屉切换特效展示 购物车案例特效 下面咱们先从简单的做起 首先先做抽屉特效的案例 二. 抽屉特效 2.1 页面元素编写 通过上图我们可以知道页面存在着一个类似于导航栏的可以供我们切换的标签，和准备的25张图片 那么我们就开始写吧 <b
HTML抽屉效果的实现与展示
qq_15167261的博客
10-30 2373
林炳文Evankaka原创作品。转载请注明出处http://blog.csdn.net/evankaka        摘要：本文主要讲了HTML抽屉效果的实现与展示，最后还用bootstrap做了一个简单的实例。 一、基本原理 jQuery 隐藏方法 jQuery hide() 和 show() 通过 jQuery，您可以使用 hide() 和 show() 方法来
【Android】用flutter实现一个列表下拉抽屉
m0_56144365的博客
07-05 761
通过监听滚动事件实现_DragOpenDrawer_ 组件，可以给滚动组件添加一个下拉抽屉。其使用方式如下： 组件参数说明 openDuration：抽屉打开动画持续的时间 closeDuration: 抽屉关闭动画持续的时间 onOpen： 抽屉打开事件回调 child: DragOpenDrawer 组件监听的滚动组件 backgroundBuilder：抽屉打开后展示的组件 运行效果 最后，如果大伙有什么好的学习方法或建议欢迎大家在评论中积极留言哈，希望大家能够共同学习、共同努力、共同进步。小编
uniapp抽屉效果
最新发布
08-21
在 UniApp 中实现抽屉效果，你可以使用 `uni-drawer` 组件。以下是一个简单的示例代码： ```html 打开/关闭抽屉 <!-- 抽屉内容 --> export default { data() { return { drawerVisible: false, //...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值