HardBirch

可动态布局的Android抽屉之基础

时间:11-09-19 栏目:安卓入门与提高 作者:张飞不张,文采横飞 评论:38 点击: 13,966 次

      

       以前曾经介绍过《Android提高第十九篇之"多方向"抽屉》,当这个抽屉组件不与周围组件发生压挤的情况下(周围组件布局不变),是比较好使的,但是如果需要对周围组件挤压,则用起来欠缺美观了。

       如下图。在对周围压挤的情况下,抽屉是先把周围的组件一次性压挤,再通过动画效果展开/收缩的,这种做法的好处是快速简单,坏处是如果挤压范围过大,则效果生硬。

 

      本文实现的自定义抽屉组件,主要针对这种压挤效果做出改良,渐进式压挤周围组件,使得过渡效果更加美观。如下图。

 

 

本文实现的抽屉原理是酱紫:

1.抽屉组件主要在屏幕不可视区域,手柄在屏幕边缘的可视区域。即 抽屉.rightMargin=-XXX + 手柄.width

2.指定一个周围组件为可压挤,即LayoutParams.weight=1;当然用户也可以指定多个View.

3.使用AsyncTask来实现弹出/收缩的动画,弹出:抽屉.rightMargin+=XX,收缩:抽屉.rightMargin-=XX

总结,本文的自定义抽屉虽然对压挤周围组件有过渡效果,但是比较耗资源,读者可以针对不同的情况考虑使用。

本文的源码可以到http://download.csdn.net/detail/hellogv/3615686 下载。

接下来贴出本文全部源代码:

main.xml的源码:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/container"> <GridView android:id="@+id/gridview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:numColumns="auto_fit" android:verticalSpacing="10dp" android:gravity="center" android:columnWidth="50dip" android:horizontalSpacing="10dip" /> </LinearLayout>

GridView的Item.xml的源码:

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:paddingBottom="4dip" android:layout_width="fill_parent"> <ImageView android:layout_height="wrap_content" android:id="@+id/ItemImage" android:layout_width="wrap_content" android:layout_centerHorizontal="true"> </ImageView> <TextView android:layout_width="wrap_content" android:layout_below="@+id/ItemImage" android:layout_height="wrap_content" android:text="TextView01" android:layout_centerHorizontal="true" android:id="@+id/ItemText"> </TextView> </RelativeLayout> 

Panel.java是本文核心,抽屉组件的源码,这个抽屉只实现了从右往左的弹出/从左往右的收缩,读者可以根据自己的需要修改源码来改变抽屉动作的方向:

public class Panel extends LinearLayout{ public interface PanelClosedEvent { void onPanelClosed(View panel); } public interface PanelOpenedEvent { void onPanelOpened(View panel); } /**Handle的宽度,与Panel等高*/ private final static int HANDLE_WIDTH=30; /**每次自动展开/收缩的范围*/ private final static int MOVE_WIDTH=20; private Button btnHandle; private LinearLayout panelContainer; private int mRightMargin=0; private Context mContext; private PanelClosedEvent panelClosedEvent=null; private PanelOpenedEvent panelOpenedEvent=null; /** * otherView自动布局以适应Panel展开/收缩的空间变化 * @author GV * */ public Panel(Context context,View otherView,int width,int height) { super(context); this.mContext=context; //改变Panel附近组件的属性 LayoutParams otherLP=(LayoutParams) otherView.getLayoutParams(); otherLP.weight=1;//支持压挤 otherView.setLayoutParams(otherLP); //设置Panel本身的属性 LayoutParams lp=new LayoutParams(width, height); lp.rightMargin=-lp.width+HANDLE_WIDTH;//Panel的Container在屏幕不可视区域,Handle在可视区域 mRightMargin=Math.abs(lp.rightMargin); this.setLayoutParams(lp); this.setOrientation(LinearLayout.HORIZONTAL); //设置Handle的属性 btnHandle=new Button(context); btnHandle.setLayoutParams(new LayoutParams(HANDLE_WIDTH,height)); btnHandle.setOnClickListener(new OnClickListener(){ @Override public void onClick(View arg0) { LayoutParams lp = (LayoutParams) Panel.this.getLayoutParams(); if (lp.rightMargin < 0)// CLOSE的状态 new AsynMove().execute(new Integer[] { MOVE_WIDTH });// 正数展开 else if (lp.rightMargin >= 0)// OPEN的状态 new AsynMove().execute(new Integer[] { -MOVE_WIDTH });// 负数收缩 } }); //btnHandle.setOnTouchListener(HandleTouchEvent); this.addView(btnHandle); //设置Container的属性 panelContainer=new LinearLayout(context); panelContainer.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT)); this.addView(panelContainer); } /** * 定义收缩时的回调函数 * @param event */ public void setPanelClosedEvent(PanelClosedEvent event) { this.panelClosedEvent=event; } /** * 定义展开时的回调函数 * @param event */ public void setPanelOpenedEvent(PanelOpenedEvent event) { this.panelOpenedEvent=event; } /** * 把View放在Panel的Container * @param v */ public void fillPanelContainer(View v) { panelContainer.addView(v); } /** * 异步移动Panel * @author hellogv */ class AsynMove extends AsyncTask<Integer, Integer, Void> { @Override protected Void doInBackground(Integer... params) { int times; if (mRightMargin % Math.abs(params[0]) == 0)// 整除 times = mRightMargin / Math.abs(params[0]); else // 有余数 times = mRightMargin / Math.abs(params[0]) + 1; for (int i = 0; i < times; i++) { publishProgress(params); try { Thread.sleep(Math.abs(params[0])); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } } return null; } @Override protected void onProgressUpdate(Integer... params) { LayoutParams lp = (LayoutParams) Panel.this.getLayoutParams(); if (params[0] < 0) lp.rightMargin = Math.max(lp.rightMargin + params[0], (-mRightMargin)); else lp.rightMargin = Math.min(lp.rightMargin + params[0], 0); if(lp.rightMargin==0 && panelOpenedEvent!=null){//展开之后 panelOpenedEvent.onPanelOpened(Panel.this);//调用OPEN回调函数 } else if(lp.rightMargin==-(mRightMargin) && panelClosedEvent!=null){//收缩之后 panelClosedEvent.onPanelClosed(Panel.this);//调用CLOSE回调函数 } Panel.this.setLayoutParams(lp); } } } 

 

main.java是主控部分,演示了Panel的使用:

public class main extends Activity { public Panel panel; public LinearLayout container; public GridView gridview; public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); this.setTitle("“可动态布局”的抽屉组件之构建基础-----hellogv"); gridview = (GridView) findViewById(R.id.gridview); container=(LinearLayout)findViewById(R.id.container); panel=new Panel(this,gridview,200,LayoutParams.FILL_PARENT); container.addView(panel);//加入Panel控件 //新建测试组件 TextView tvTest=new TextView(this); tvTest.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT)); tvTest.setText("测试组件,红字白底"); tvTest.setTextColor(Color.RED); tvTest.setBackgroundColor(Color.WHITE); //加入到Panel里面 panel.fillPanelContainer(tvTest); panel.setPanelClosedEvent(panelClosedEvent); panel.setPanelOpenedEvent(panelOpenedEvent); //往GridView填充测试数据 ArrayList<HashMap<String, Object>> lstImageItem = new ArrayList<HashMap<String, Object>>(); for (int i = 0; i < 100; i++) { HashMap<String, Object> map = new HashMap<String, Object>(); map.put("ItemImage", R.drawable.icon); map.put("ItemText", "NO." + String.valueOf(i)); lstImageItem.add(map); } SimpleAdapter saImageItems = new SimpleAdapter(this, lstImageItem, R.layout.item, new String[] { "ItemImage", "ItemText" }, new int[] { R.id.ItemImage, R.id.ItemText }); gridview.setAdapter(saImageItems); gridview.setOnItemClickListener(new ItemClickListener()); } PanelClosedEvent panelClosedEvent =new PanelClosedEvent(){ @Override public void onPanelClosed(View panel) { Log.e("panelClosedEvent","panelClosedEvent"); } }; PanelOpenedEvent panelOpenedEvent =new PanelOpenedEvent(){ @Override public void onPanelOpened(View panel) { Log.e("panelOpenedEvent","panelOpenedEvent"); } }; class ItemClickListener implements OnItemClickListener { @Override public void onItemClick(AdapterView<?> arg0,View arg1, int arg2, long arg3) { @SuppressWarnings("unchecked") HashMap<String, Object> item = (HashMap<String, Object>) arg0 .getItemAtPosition(arg2); setTitle((String) item.get("ItemText")); } }

后面还会继续介绍如何在Panel加入拖拉效果的处理!

声明: 本文由( 张飞不张,文采横飞 )原创编译,转载请保留链接: 可动态布局的Android抽屉之基础

可动态布局的Android抽屉之基础:目前有38 条留言

  1. 38楼
    kf156:

    顶起,啥时换的头像啊

    2011-09-19 14:18 [回复]
  2. 37楼
    hmc1985:

    顶,不错哟!

    2011-09-19 14:18 [回复]
  3. 36楼
    lwuit:

    不错 非常good!

    2011-09-19 14:19 [回复]
  4. hellogv把抽屉做精了

    2011-09-19 14:20 [回复]
  5. 34楼
    hellogv:

    [reply]kf156[/reply]
    你也露个脸啊,哥长得这么帅,肯定要露脸的

    2011-09-19 14:23 [回复]
  6. 33楼
    kvkens:

    哈,这个不错哈,先记得了,gv你怎么换blog主题了哈哈!

    2011-09-19 15:04 [回复]
  7. 32楼
    mrlixirong:

    我是来看一下我的脚印的

    2011-09-19 17:25 [回复]
  8. 31楼
    fangzhen2005:

    抽屉控~

    2011-09-20 01:16 [回复]
  9. 30楼
    hellogv:

    [reply]fangzhen2005[/reply]
    抽屉在屏幕小的设备上,真的很有用

    2011-09-20 09:24 [回复]
  10. 29楼
    yiyaaixuexi:

    顶一下,学习学习

    2011-09-20 09:34 [回复]
  11. 很好很好

    2011-09-20 11:25 [回复]
  12. 27楼
    shenlan2011:

    哎呦,不错呦!

    2011-09-20 15:46 [回复]
  13. 26楼
    glaivelee:

    请教一下: 当抽屉关闭时, 方向切换的图标按钮会很明显的闪一下, 但打开的时候,却没有这样的问题(至少从视觉效果来说, 看得不是很明显). 弄了好久都搞不定. 楼主有什么好的方法.

    2011-09-21 09:34 [回复]
  14. 25楼
    lihenan1989:

    太感谢了,正好我们的项目一个模块就和这个很类似,非常感谢

    2011-09-21 10:13 [回复]
  15. 24楼
    hellogv:

    [reply]glaivelee[/reply]
    看我的Android番外栏目,那里有介绍如何实现自己的抽屉

    2011-09-21 13:48 [回复]
  16. 在Panel加入拖拉效果的处理 有木有啊!

    2011-09-26 10:14 [回复]
  17. 22楼
    w1e2r:

    hellogv尝试过android的Android Scripting Environment(ase)功能没有,使用ase安卓可以支持脚本语言。

    2011-09-28 16:06 [回复]
  18. 21楼
    hellogv:

    [reply]w1e2r[/reply]
    这个还木有想过

    2011-09-28 18:59 [回复]
  19. 20楼
    gundumw100:

    正好需要这样的功能。
    不过我的是从左边挤压出来的。
    不知道左边的话会不会挤过去?

    2011-09-29 17:58 [回复]
  20. 19楼
    gundumw100:

    如果在左边挤压的话感觉都变了,
    就不应该是otherLP.weight=1;//支持压挤
    有好的建议吗?

    2011-09-29 18:15 [回复]
  21. 18楼
    gundumw100:

    我现在采用Visibable&gone来实现在左边的挤压效果,就产生了你所说的“一次性压挤,再通过动画效果展开/收缩的,效果生硬”。
    看了你这篇文章,想仿照一个从左边挤压出来的效果,但是感觉跟右边挤压出来的原理是完全不同的,这个就郁闷了。

    2011-09-29 18:33 [回复]
  22. 17楼
    hellogv:

    [reply]gundumw100[/reply]
    在下结论之前,先自己动手实践一下,从左到右和从右到左,原理是一样的

    2011-09-29 18:50 [回复]
  23. 16楼
    gundumw100:

    不管左边右边原理都是一样的,都在通过在线程中改变rightMargin的值达到动画的目的。
    可现在问题不在这儿,我现在碰到的问题是:如何初始化的时候就让Panel出现在屏幕左侧之外?
    感觉如果Panel在右侧的话比较好处理,因为有这么几句代码:
    /[code=java]
    /改变Panel附近组件的属性
    LayoutParams otherLP=(LayoutParams) otherView.getLayoutParams();
    otherLP.weight=1;//支持压挤
    otherView.setLayoutParams(otherLP);
    [/code]
    可如果在左侧怎么办?
    我写了一个LeftPanel,结果时候初始化的时候LeftPanel就已经显示在屏幕上了,而不是在屏幕外。奇怪!

    2011-09-30 12:52 [回复]
  24. 15楼
    hellogv:

    [reply]gundumw100[/reply]
    LayoutParams lp=new LayoutParams(width, height);
    lp.rightMargin=-lp.width+HANDLE_WIDTH;//Panel的Container在屏幕不可视区域,Handle在可视区域
    mRightMargin=Math.abs(lp.rightMargin);
    this.setLayoutParams(lp);
    this.setOrientation(LinearLayout.HORIZONTAL);
    请看这里,把lp.rightMargin改为leftMargin…..请先把本篇文章弄熟…..

    2011-09-30 13:06 [回复]
  25. 14楼
    gundumw100:

    thank you.原来只差一步之遥了。

    2011-09-30 14:24 [回复]
  26. 13楼
    Why_nono:

    很好,学习一下。

    2011-11-07 14:19 [回复]
  27. 12楼
    w79844626:

    v顶,不错哟!

    2011-11-14 16:30 [回复]
  28. 11楼
    hsl88822:

    首先感谢hellogv的分享,其次想请教一下hellogv,本人是菜鸟刚学android不久,我已经通过你的代码实现了上下的抽屉效果,但是不会产生挤压效果,而是gridView直接被一层黑幕覆盖看不到,所以我认为weight 的作用是设置View的显示顺序而不是“挤压效果” 当 weight = 0 则将当前的View置顶层。不知道这种理解是否正确,希望hellogv能帮忙指点一二

    2011-11-17 15:23 [回复]
  29. 10楼
    hellogv:

    [reply]hsl88822[/reply]
    这个试试就知道了,答案都在实践里

    2011-11-17 17:59 [回复]
  30. 9楼
    hsl88822:

    [reply]hellogv[/reply]
    嗯,谢谢你,确实不能总想着靠别人解决问题,这样成长不了,我自己稍微更改一下布局就解决问题了

    2011-11-18 15:46 [回复]
  31. 8楼
    biandroid:

    很有用的哦

    2012-02-06 13:40 [回复]
  32. 7楼
    sxyliu520:

    楼主能给发个源码不?sxyliu520@126.com谢谢了!

    2012-03-07 13:51 [回复]
  33. 很不错,太需要了,谁可以发个上下抽屉的例子学习学习啊,我自己改的效果不太好,控制不好上面的布局。

    2012-06-21 14:39 [回复]
  34. 邮箱396431245@qq.com

    2012-06-21 14:40 [回复]
  35. 4楼
    ackl456:

    您好,因为刚开始接触变成,可以把没改变之前代码分享一下吗?想先看看没改变的代码是如何实现的~~~谢谢啦~主要是要从顶端到低端的代码~谢谢啦

    2012-08-01 09:50 [回复]
  36. 地板
    ackl456:

    [reply]hellogv[/reply]
    如果想要实现从上端到下端呢?

    2012-08-01 14:50 [回复]
  37. 板凳
    jan9003:

    大哥 ,请问下如果我要在viewPager中加你的这个抽屉,怎么加…求助。

    2012-09-06 11:00 [回复]
  38. 沙发
    feijimmy:

    [quote=hellogv][reply]gundumw100[/reply]
    LayoutParams lp=new Lay…[/quote]
    lp.rightMargin 改为下面
    lp.leftMargin = lp.width-Handle_Width;
    初始画面为 抽屉覆盖在gridview 上面, gridview 没有收缩。
    求指教,左边抽屉的实现方法。

    2012-09-11 17:49 [回复]

发表评论


QQ群互动

Linux系统与内核学习群:194051772

WP建站技术学习交流群:194062106

魔豆之路QR

魔豆的Linux内核之路

魔豆的Linux内核之路

优秀工程师当看优秀书籍

优秀程序员,要看优秀书!

赞助商广告

友荐云推荐