如果寫一個點選view帶動畫的下滑展開顯示隱藏內容的控制元件
阿新 • • 發佈：2019-02-03
原理是在onMeasure中得到隱藏內容的高度，點選這個view的時候對隱藏的view startAnimation,讓它的高度從0增長到onMeasure得到的這個View的measureHeight
具體這樣寫:
public class ExpandableLayout extends LinearLayout { private Context mContext; private LinearLayout mHandleView; private RelativeLayout mContentView; private ImageView mIconExpand; int mContentHeight = 0; int mTitleHeight = 0; private boolean isExpand; private Animation animationDown; private Animation animationUp; public ExpandableLayout(Context context, AttributeSet attrs) { super(context, attrs); this.mContext = context; } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { if (this.mContentHeight == 0) { this.mContentView.measure(widthMeasureSpec, 0); this.mContentHeight = this.mContentView.getMeasuredHeight(); } if (this.mTitleHeight == 0) { this.mHandleView.measure(widthMeasureSpec, 0); this.mTitleHeight = this.mHandleView.getMeasuredHeight(); } super.onMeasure(widthMeasureSpec, heightMeasureSpec); } @Override protected void onFinishInflate() { super.onFinishInflate(); this.mHandleView = (LinearLayout) this .findViewById(R.id.collapse_value); this.mContentView = (RelativeLayout) this.findViewById(R.id.expand_value); this.mIconExpand = (ImageView) this.findViewById(R.id.icon_value); this.mHandleView.setOnClickListener(new ExpandListener()); this.mContentView.setOnClickListener(new ExpandListener()); mContentView.setVisibility(View.GONE); } private class ExpandListener implements View.OnClickListener { @Override public final void onClick(View paramView) { //clearAnimation是view的方法 clearAnimation(); if (!isExpand) { if (animationDown == null) { animationDown = new DropDownAnim(mContentView, mContentHeight, true); animationDown.setDuration(200); // SUPPRESS CHECKSTYLE } startAnimation(animationDown); mContentView.startAnimation(AnimationUtils.loadAnimation( mContext, R.anim.animalpha)); mIconExpand.setImageResource(R.drawable.update_detail_up); isExpand = true; } else { isExpand = false; if (animationUp == null) { animationUp = new DropDownAnim(mContentView, mContentHeight, false); animationUp.setDuration(200); // SUPPRESS CHECKSTYLE } startAnimation(animationUp); mIconExpand.setImageResource(R.drawable.update_detail_down); } } } class DropDownAnim extends Animation { /** 目標的高度 */ private int targetHeight; /** 目標view */ private View view; /** 是否向下展開 */ private boolean down; /** * 構造方法 * * @param targetview * 需要被展現的view * @param vieweight * 目的高 * @param isdown * true:向下展開，false:收起 */ public DropDownAnim(View targetview, int vieweight, boolean isdown) { this.view = targetview; this.targetHeight = vieweight; this.down = isdown; } //down的時候，interpolatedTime從0增長到1，這樣newHeight也從0增長到targetHeight @Override protected void applyTransformation(float interpolatedTime, Transformation t) { int newHeight; if (down) { newHeight = (int) (targetHeight * interpolatedTime); } else { newHeight = (int) (targetHeight * (1 - interpolatedTime)); } view.getLayoutParams().height = newHeight; view.requestLayout(); if (view.getVisibility() == View.GONE) { view.setVisibility(View.VISIBLE); } } @Override public void initialize(int width, int height, int parentWidth, int parentHeight) { super.initialize(width, height, parentWidth, parentHeight); } @Override public boolean willChangeBounds() { return true; } } }
Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFF" > <com.example.view.ExpandableLayout android:id="@+id/app_detail_safety_info" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > <LinearLayout android:id="@+id/collapse_value" android:layout_width="fill_parent" android:layout_height="34dip" android:layout_marginLeft="14dip" android:gravity="center_vertical" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="30dp" android:text="點選我會顯示隱藏的內容" android:textColor="#000000" android:textSize="18sp" > </TextView> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="right|center_vertical" android:orientation="horizontal" > <ImageView android:id="@+id/icon_value" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="22dip" android:src="@drawable/update_detail_down" /> </LinearLayout> </LinearLayout> <RelativeLayout android:id="@+id/expand_value" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/app_detail_safety_info_bg" android:orientation="horizontal" android:paddingBottom="8dip" android:paddingTop="8dip" > <ImageButton android:id="@+id/btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="30dp" android:background="@null" android:src="@drawable/btn_icon" android:textColor="#0A84BD" android:textSize="16sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="30dp" android:layout_toRightOf="@id/btn" android:text="隱藏的內容" android:textColor="#000000" android:textSize="18sp" > </TextView> </RelativeLayout> </com.example.view.ExpandableLayout> </RelativeLayout>
只要在這個activity中setContentView這個layout,點選view就可以執行展開動畫
效果圖:
