1. 程式人生 > >如何寫一個點選view帶動畫的下滑展開顯示隱藏內容的控制元件

如何寫一個點選view帶動畫的下滑展開顯示隱藏內容的控制元件

原博文地址:http://blog.csdn.net/baidu_nod/article/details/38815269

原理是在onMeasure中得到隱藏內容的高度,點選這個view的時候對隱藏的view startAnimation,讓它的高度從0增長到onMeasure得到的這個View的measureHeight

具體這樣寫:

  1. publicclass ExpandableLayout extends LinearLayout {  
  2.     private Context mContext;  
  3.     private LinearLayout mHandleView;  
  4.     private
     RelativeLayout mContentView;  
  5.     private ImageView mIconExpand;  
  6.     int mContentHeight = 0;  
  7.     int mTitleHeight = 0;  
  8.     privateboolean isExpand;  
  9.     private Animation animationDown;  
  10.     private Animation animationUp;  
  11.     public ExpandableLayout(Context context, AttributeSet attrs) {  
  12.         super(context, attrs);  
  13.         this.mContext = context;  
  14.     }  
  15.     @Override
  16.     protectedvoid onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
  17.         if (this.mContentHeight == 0) {  
  18.             this.mContentView.measure(widthMeasureSpec, 0);  
  19.             this.mContentHeight = 
    this.mContentView.getMeasuredHeight();  
  20.         }  
  21.         if (this.mTitleHeight == 0) {  
  22.             this.mHandleView.measure(widthMeasureSpec, 0);  
  23.             this.mTitleHeight = this.mHandleView.getMeasuredHeight();  
  24.         }  
  25.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
  26.     }  
  27.     @Override
  28.     protectedvoid onFinishInflate() {  
  29.         super.onFinishInflate();  
  30.         this.mHandleView = (LinearLayout) this
  31.                 .findViewById(R.id.collapse_value);  
  32.         this.mContentView = (RelativeLayout) this.findViewById(R.id.expand_value);  
  33.         this.mIconExpand = (ImageView) this.findViewById(R.id.icon_value);  
  34.         this.mHandleView.setOnClickListener(new ExpandListener());  
  35.         this.mContentView.setOnClickListener(new ExpandListener());  
  36.         mContentView.setVisibility(View.GONE);  
  37.     }  
  38.     privateclass ExpandListener implements View.OnClickListener {  
  39.         @Override
  40.         publicfinalvoid onClick(View paramView) {  
  41.             //clearAnimation是view的方法
  42.             clearAnimation();  
  43.             if (!isExpand) {  
  44.                 if (animationDown == null) {  
  45.                     animationDown = new DropDownAnim(mContentView,  
  46.                             mContentHeight, true);  
  47.                     animationDown.setDuration(200); // SUPPRESS CHECKSTYLE
  48.                 }  
  49.                 startAnimation(animationDown);  
  50.                 mContentView.startAnimation(AnimationUtils.loadAnimation(  
  51.                         mContext, R.anim.animalpha));  
  52.                 mIconExpand.setImageResource(R.drawable.update_detail_up);  
  53.                 isExpand = true;  
  54.             } else {  
  55.                 isExpand = false;  
  56.                 if (animationUp == null) {  
  57.                     animationUp = new DropDownAnim(mContentView,  
  58.                             mContentHeight, false);  
  59.                     animationUp.setDuration(200); // SUPPRESS CHECKSTYLE
  60.                 }  
  61.                 startAnimation(animationUp);  
  62.                 mIconExpand.setImageResource(R.drawable.update_detail_down);  
  63.             }  
  64.         }  
  65.     }  
  66.     class DropDownAnim extends Animation {  
  67.         /** 目標的高度 */
  68.         privateint targetHeight;  
  69.         /** 目標view */
  70.         private View view;  
  71.         /** 是否向下展開 */
  72.         privateboolean down;  
  73.         /** 
  74.          * 構造方法 
  75.          *  
  76.          * @param targetview 
  77.          *            需要被展現的view 
  78.          * @param vieweight 
  79.          *            目的高 
  80.          * @param isdown 
  81.          *            true:向下展開,false:收起 
  82.          */
  83.         public DropDownAnim(View targetview, int vieweight, boolean isdown) {  
  84.             this.view = targetview;  
  85.             this.targetHeight = vieweight;  
  86.             this.down = isdown;  
  87.         }  
  88.         //down的時候,interpolatedTime從0增長到1,這樣newHeight也從0增長到targetHeight
  89.         @Override
  90.         protectedvoid applyTransformation(float interpolatedTime,  
  91.                 Transformation t) {  
  92.             int newHeight;  
  93.             if (down) {  
  94.                 newHeight = (int) (targetHeight * interpolatedTime);  
  95.             } else {  
  96.                 newHeight = (int) (targetHeight * (1 - interpolatedTime));  
  97.             }  
  98.             view.getLayoutParams().height = newHeight;  
  99.             view.requestLayout();  
  100.             if (view.getVisibility() == View.GONE) {  
  101.                 view.setVisibility(View.VISIBLE);  
  102.             }  
  103.         }  
  104.         @Override
  105.         publicvoid initialize(int width, int height, int parentWidth,  
  106.                 int parentHeight) {  
  107.             super.initialize(width, height, parentWidth, parentHeight);  
  108.         }  
  109.         @Override
  110.         publicboolean willChangeBounds() {  
  111.             returntrue;  
  112.         }  
  113.     }  
  114. }  

Layout:
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:background="#FFFFFF" >  
  6.     <com.example.view.ExpandableLayout  
  7.         android:id="@+id/app_detail_safety_info"
  8.         android:layout_width="fill_parent"
  9.         android:layout_height="wrap_content"
  10.         android:orientation="vertical" >  
  11.         <LinearLayout  
  12.             android:id="@+id/collapse_value"
  13.             android:layout_width="fill_parent"
  14.             android:layout_height="34dip"
  15.             android:layout_marginLeft="14dip"
  16.             android:gravity="center_vertical"
  17.             android:orientation="horizontal" >  
  18.             <TextView  
  19.                 android:layout_width="wrap_content"
  20.                 android:layout_height="wrap_content"
  21.                 android:layout_marginLeft="30dp"
  22.                 android:text="點選我會顯示隱藏的內容"
  23.                 android:textColor="#000000"
  24.                 android:textSize="18sp" >  
  25.             </TextView>  
  26.             <LinearLayout  
  27.                 android:layout_width="fill_parent"
  28.                 android:layout_height="fil