zoukankan      html  css  js  c++  java

  • [转]抽屉 Panel 研究

    大家对抽屉控件的第一反应就是系统提供的 如下：

    其实 该控件的原理说白了 很简单 即：

    * ViewGroup 如：LinearLayout 用于放置各种View

    * Button 用于 展开/收起 ViewGroup

    所以该控件的大致布局应如下：

    Java代码 收藏代码

    1. <Panel> 
    3. <Button /> 
    5. <LinearLayout > 
    6.     <TextView /> 
    7.     <ImageView /> 
    8. </LinearLayout> 
    10. </Panel> 

    为了降低开发难度 我打算 定义 Panel extends LinearLayout

    [代码 步骤]

    1. 定义一些XML用到的属性

    Xml代码 收藏代码

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <resources>
    3. <declare-styleable name="Panel">
    4.          //动画演变时长 
    5. <attr name="animationDuration" format="integer" />
    6.         //摆放位置 只能取下面的4个值 
    7. <attr name="position">
    8. <enum name="top" value="0" />
    9. <enum name="bottom" value="1" />
    10. <enum name="left" value="2" />
    11. <enum name="right" value="3" />
    12. </attr>
    13.         //开合是否有动画效果 
    14. <attr name="animationEnable" format="boolean" />
    15. </declare-styleable>
    17. </resources>

    2. 一个标准的XML为：

    Xml代码 收藏代码

    1. <org.panel.Panel
    2. android:id="@+id/leftPanel"
    3. android:layout_width="wrap_content"
    4. android:layout_height="wrap_content"
    5. panel:position="left"
    6. panel:animationDuration="10"
    7. panel:animationEnable="true"
    8. android:layout_gravity="left"
    9. >
    10. <Button
    11. android:layout_width="wrap_content"
    12. android:layout_height="wrap_content"
    13. />
    14. <LinearLayout
    15. android:orientation="vertical"
    16. android:layout_width="wrap_content"
    17. android:layout_height="wrap_content"
    18. >
    19. <CheckBox
    20. android:layout_width="fill_parent"
    21. android:layout_height="wrap_content"
    22. android:text="Top Panel!"
    23. android:textSize="16dip"
    24. android:textColor="#eee"
    25. android:textStyle="bold"
    26. />
    27. <EditText
    28. android:layout_width="200dip"
    29. android:layout_height="wrap_content"
    30. />
    31. <Button
    32. android:layout_width="100dp"
    33. android:layout_height="wrap_content"
    34. android:text="OK!"
    35. />
    36. </LinearLayout>
    37. </org.panel.Panel>

    3. 解析该XML 并设置之

    Java代码 收藏代码

    1. public Panel(Context context, AttributeSet attrs) { 
    2. super(context, attrs); 
    4.         TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.Panel); 
    6.         mDuration = a.getInteger(R.styleable.Panel_animationDuration, 750); 
    7.         mPosition = a.getInteger(R.styleable.Panel_position, BOTTOM); 
    8.         isAnimation = a.getBoolean(R.styleable.Panel_animationEnable, true); 
    9.         a.recycle(); 
    11. //根据mPosition 决定LinearLayout的android:orientation属性
    12.         mOrientation = (mPosition == TOP || mPosition == BOTTOM)? VERTICAL : HORIZONTAL; 
    13.         setOrientation(mOrientation); 
    15. //初始化mHandle 背景图
    16.         initialHandlerBg(); 
    18.     } 

    4. 设定Button 背景图

    Java代码 收藏代码

    1. //设置mHandle所用背景图   
    2. private void initialHandlerBg(){ 
    3. if(mPosition == TOP){ 
    4.             mOpenedHandle = getResources().getDrawable(R.drawable.top_switcher_expanded_background); 
    5.             mClosedHandle = getResources().getDrawable(R.drawable.top_switcher_collapsed_background); 
    7.         } 
    8. else if(mPosition == BOTTOM) { 
    9.             mOpenedHandle = getResources().getDrawable(R.drawable.bottom_switcher_expanded_background); 
    10.             mClosedHandle = getResources().getDrawable(R.drawable.bottom_switcher_collapsed_background); 
    12.         } 
    13. else if(mPosition == LEFT) { 
    14.             mOpenedHandle = getResources().getDrawable(R.drawable.left_switcher_expanded_background); 
    15.             mClosedHandle = getResources().getDrawable(R.drawable.left_switcher_collapsed_background); 
    17.         } 
    18. else if(mPosition == RIGHT) { 
    19.             mOpenedHandle = getResources().getDrawable(R.drawable.right_switcher_expanded_background); 
    20.             mClosedHandle = getResources().getDrawable(R.drawable.right_switcher_collapsed_background); 
    22.         } 
    23.     } 

    5. 取出其中的 ViewGroup & Button

    Java代码 收藏代码

    1. //回调函数 界面初始化快结束时调用 用于得到 mHandle/mContent
    2. protected void onFinishInflate() { 
    3. super.onFinishInflate(); 
    5. //得到mHandle实例
    6.         mHandle = this.getChildAt(0); 
    8. if (mHandle == null) { 
    9. throw new RuntimeException("Your Panel must have a View - mHandle"); 
    10.         } 
    12.         mHandle.setOnClickListener(clickListener); 
    14. //得到mContent实例
    15.         mContent = this.getChildAt(1); 
    16. if (mContent == null) { 
    17. throw new RuntimeException("Your Panel must have a View - mContent"); 
    18.         } 
    21. //先移除mHandle/mContent 然后根据position决定二者的添加次序
    22.         removeView(mHandle); 
    23.         removeView(mContent); 
    24. if (mPosition == TOP || mPosition == LEFT) { 
    25.             addView(mContent); 
    26.             addView(mHandle); 
    27.         } else { 
    28.             addView(mHandle); 
    29.             addView(mContent); 
    30.         } 
    32. if (mClosedHandle != null) { 
    33.             mHandle.setBackgroundDrawable(mClosedHandle); 
    34.         } 
    36. //隐藏 mContent
    37.         mContent.setVisibility(GONE); 
    38.     } 

    6. 得到ViewGroup 宽度/高度 以决定动画演变范围

       注意其位置 并非放在开始地方 因为那时候返回值都是0

    Java代码 收藏代码

    1. @Override //回调函数 此时其内所有子View 宽度/高度 都已确定
    2. protected void onLayout(boolean changed, int l, int t, int r, int b) { 
    3. super.onLayout(changed, l, t, r, b); 
    5.         mContentWidth = mContent.getWidth(); 
    6.         mContentHeight = mContent.getHeight(); 
    8.         paddingTop = this.getPaddingTop(); 
    9.         paddingLeft = this.getPaddingLeft(); 
    10.     } 

    7.  定义Button 响应事情 执行 开合ViewGroup

    Java代码 收藏代码

    1. // 定义mHandle监听器 用于开合mContent
    2.     OnClickListener clickListener = new OnClickListener(){ 
    3. public void onClick(View v) { 
    4. // TODO Auto-generated method stub
    5. if(!isContentExpand){ 
    6.                 open(); 
    7.             } 
    8. else { 
    9.                 close(); 
    10.             } 
    12. //置反 即：开-合-开-合-开-...
    13.             isContentExpand = !isContentExpand; 
    14.         } 
    15.     }; 

    8. 定义开合的回调函数 具体效果 见：setOnClickListener(OnClickListener listener)

    Java代码 收藏代码

    1. //回调函数 用于监听 Panel 的开合 效果见：setOnClickLstener(OnClickListener listener)
    2. public static interface OnPanelListener { 
    3. //- open
    4. public void onPanelOpened(Panel panel); 
    6. //- close
    7. public void onPanelClosed(Panel panel); 
    8.     } 

    10. 开 即： 打开ViewGroup

    Java代码 收藏代码

    1. public void open(){ 
    2. if(isAnimation){ 
    3.             doAnimationOpen(); 
    4.         } 
    5. else { 
    6.             doOpen(); 
    7.         } 
    9.     } 
    10. public void doOpen(){ 
    11.         mContent.setVisibility(VISIBLE); 
    13.     } 
    15. public void doAnimationOpen(){ 
    16.         mContent.setVisibility(VISIBLE); 
    17.         post(aOpen); 
    18.     } 

    11. 定义开的Animation

    Java代码 收藏代码

    1. //- open
    2.     Runnable aOpen = new Runnable() { 
    3. public void run() { 
    4.             TranslateAnimation animation; 
    5. int fromXDelta = 0, toXDelta = 0, fromYDelta = 0, toYDelta = 0; 
    6. int calculatedDuration = 0; 
    8. if(mPosition == TOP){ 
    9.                 fromYDelta = -1 * mContentHeight; 
    10.                 toXDelta = 0; 
    12.                 calculatedDuration = mDuration * Math.abs(toYDelta - fromYDelta) / mContentHeight; 
    13.             } 
    14. else if(mPosition == BOTTOM){ 
    15.                 fromYDelta = paddingTop; 
    16.                 toYDelta = fromYDelta + 1 * mContentHeight; 
    18.                 calculatedDuration = mDuration * Math.abs(toYDelta - fromYDelta) / mContentHeight; 
    19.             } 
    20. else if(mPosition == LEFT){ 
    21.                 fromXDelta = -1 * mContentWidth; 
    22.                 toXDelta = 0; 
    24.                 calculatedDuration = mDuration * Math.abs(toXDelta - fromXDelta) / mContentWidth; 
    25.             } 
    26. else if(mPosition == RIGHT){ 
    27.                 fromXDelta = paddingLeft; 
    28.                 toXDelta = fromYDelta + 1 * mContentHeight; 
    30.                 calculatedDuration = mDuration * Math.abs(toYDelta - fromYDelta) / mContentHeight; 
    31.             } 
    33.             animation = new TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta); 
    34.             animation.setDuration(calculatedDuration); 
    35.             animation.setAnimationListener(aOListener); 
    37.             startAnimation(animation); 
    38.         } 
    39.     }; 

    12. 合 即：关闭ViewGroup

    Java代码 收藏代码

    1. public void close(){ 
    2. if(isAnimation){ 
    3.             doAnimationClose(); 
    4.         } 
    5. else { 
    6.             doClose(); 
    7.         } 
    8.     } 
    9. public void doClose(){ 
    10.         mContent.setVisibility(GONE); 
    12.     } 
    13. public void doAnimationClose(){ 
    14.         post(aClose); 
    16.     } 

    13. 定义合的Animation

    Java代码 收藏代码

    1. //- close
    2.     Runnable aClose = new Runnable() { 
    3. public void run() { 
    4.             TranslateAnimation animation; 
    5. int fromXDelta = 0, toXDelta = 0, fromYDelta = 0, toYDelta = 0; 
    6. int calculatedDuration = 0; 
    8. if(mPosition == TOP){ 
    9.                 toYDelta = -1 * mContentHeight; 
    11.                 calculatedDuration = mDuration * Math.abs(toYDelta - fromYDelta) / mContentHeight; 
    12.             } 
    13. else if(mPosition == BOTTOM){ 
    14.                 fromYDelta = 1 *  mContentHeight; 
    15.                 toYDelta = paddingTop; 
    17.                 calculatedDuration = mDuration * Math.abs(toYDelta - fromYDelta) / mContentHeight; 
    18.             } 
    19. else if(mPosition == LEFT){ 
    20.                 toXDelta = -1 * mContentWidth; 
    22.                 calculatedDuration = mDuration * Math.abs(toXDelta - fromXDelta) / mContentWidth; 
    23.             } 
    24. else if(mPosition == RIGHT){ 
    26.             } 
    28.             animation = new TranslateAnimation(fromXDelta, toXDelta, fromYDelta, toYDelta); 
    29.             animation.setDuration(calculatedDuration); 
    30.             animation.setAnimationListener(aCListener); 
    32.             startAnimation(animation); 
    33.         } 
    34.     }; 

    14. 定义二者Animation 的回调函数 即：结束后 更改Button背景图 通知OnPanelListener

    Java代码 收藏代码

    1. //善后工作 比如：改变mHandle背景图 通知开合监听器
    2. private void postProcess() { 
    3. // to update mHandle 's background
    4. if (!isContentExpand ) { 
    5.             mHandle.setBackgroundDrawable(mClosedHandle); 
    6.         }  
    7. else { 
    8.             mHandle.setBackgroundDrawable(mOpenedHandle); 
    9.         } 
    11. // invoke listener if any
    12. if (panelListener != null) { 
    13. if (isContentExpand) { 
    14.                 panelListener.onPanelOpened(Panel.this); 
    15.             } 
    16. else { 
    17.                 panelListener.onPanelClosed(Panel.this); 
    18.             } 
    19.         } 
    20.     } 

    15. emulator 运行截图：

    * 先贴其布局

    Xml代码 收藏代码

    1. <?xml version="1.0" encoding="utf-8"?>
    3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    4. xmlns:panel="http://schemas.android.com/apk/res/org.panel"
    5. android:layout_width="fill_parent"
    6. android:layout_height="fill_parent"
    7. android:orientation="vertical"
    8. >
    10. <org.panel.Panel
    11. android:id="@+id/leftPanel"
    12. android:layout_width="wrap_content"
    13. android:layout_height="wrap_content"
    14. panel:position="left"
    15. panel:animationDuration="10"
    16. panel:animationEnable="true"
    17. android:layout_gravity="left"
    18. >
    19. <Button
    20. android:layout_width="wrap_content"
    21. android:layout_height="wrap_content"
    22. />
    23. <LinearLayout
    24. android:orientation="vertical"
    25. android:layout_width="wrap_content"
    26. android:layout_height="wrap_content"
    27. >
    28. <CheckBox
    29. android:layout_width="fill_parent"
    30. android:layout_height="wrap_content"
    31. android:text="Top Panel!"
    32. android:textSize="16dip"
    33. android:textColor="#eee"
    34. android:textStyle="bold"
    35. />
    36. <EditText
    37. android:layout_width="200dip"
    38. android:layout_height="wrap_content"
    39. />
    40. <Button
    41. android:layout_width="100dp"
    42. android:layout_height="wrap_content"
    43. android:text="OK!"
    44. />
    45. </LinearLayout>
    46. </org.panel.Panel>
    48. <org.panel.Panel
    49. android:id="@+id/rightPanel"
    50. android:layout_width="wrap_content"
    51. android:layout_height="wrap_content"
    52. panel:position="right"
    53. panel:animationDuration="10"
    54. panel:animationEnable="true"
    55. android:layout_gravity="right"
    56. >
    57. <Button
    58. android:layout_width="wrap_content"
    59. android:layout_height="wrap_content"
    60. />
    61. <LinearLayout
    62. android:orientation="vertical"
    63. android:layout_width="wrap_content"
    64. android:layout_height="wrap_content"
    65. >
    66. <ImageView
    67. android:layout_width="wrap_content"
    68. android:layout_height="wrap_content"
    69. android:src="@drawable/beijing4_b"
    70. />
    71. </LinearLayout>
    72. </org.panel.Panel>
    74. <LinearLayout
    75. android:layout_width="fill_parent"
    76. android:layout_height="wrap_content"
    77. android:orientation="vertical"
    78. >
    79. <TextView
    80. android:layout_width="fill_parent"
    81. android:layout_height="wrap_content"
    82. android:textSize="16dip"
    83. android:textColor="#ddd"
    84. android:text="other area!!!!!!!!"
    85. />
    86. <Button
    87. android:id="@+id/button"
    88. android:layout_width="100dp"
    89. android:layout_height="wrap_content"
    90. android:text="Yes!"
    91. />
    92. </LinearLayout>
    95. </LinearLayout>

    * 运行截图：

    - 开

    - 合
  • 相关阅读:
    适配器模式（2）
    设计模式之6大设计原则（1）
    Mybatis框架基础支持层——反射工具箱之MetaClass（7）
    Mybatis框架基础支持层——反射工具箱之实体属性Property工具集（6）
    Mybatis框架基础支持层——反射工具箱之对象工厂ObjectFactory&DefaultObjectFactory（5）
    Mybatis框架基础支持层——反射工具箱之泛型解析工具TypeParameterResolver（4）
    Guava动态调用方法
    数据库的数据同步
    springboot(二十二)-sharding-jdbc-读写分离
    springboot(二十一)-集成memcached
  • 原文地址：https://www.cnblogs.com/GnagWang/p/2092411.html
Copyright © 2011-2022 走看看