点击查看详情显示更多布局

  • Post author:
  • Post category:其他


布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#eeff00"
        android:text="这是原先显示的一部分布局"
        android:gravity="center"
        />

    <LinearLayout
        android:id="@+id/layer2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="#60ff0000">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="66dp"
            android:gravity="center"
            android:text="详情内容"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:orientation="horizontal">
        <TextView
            android:id="@+id/look_detail"
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:gravity="center"
            android:textColor="#0083ce"
            android:clickable="true"
            android:textSize="12sp"
            android:text="查看详情"/>
        <ImageView
            android:id="@+id/icon1"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@mipmap/ic_launcher"/>
    </LinearLayout>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#ff0000"
        />
</LinearLayout>

在Activity中

首先获得控件
private void initView() {
    lookDetail = (TextView) findViewById(R.id.look_detail);  //这是查看详情文字
    layer2 = (LinearLayout) findViewById(R.id.layer2);       //这是隐藏的大布局
    icon1 = (ImageView) findViewById(R.id.icon1);            //这是查看详情后面的三角图片,会给它设置旋转动画
}

//主要实现代码

/**
 * 展开收起 执行动画
 */
private void initShowHide() {
    //布局完成   使控件高度为0,相当于隐藏
    layer2.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            //移除所有监听
            layer2.getViewTreeObserver().removeGlobalOnLayoutListener(this);
            mLayoutHeight = layer2.getHeight();
            System.out.println("得到的高度:" + mLayoutHeight);
            //隐藏当前控件
            layer2.setPadding(0,-mLayoutHeight,0,0);
        }
    });

    //点击,开始执行动画
    lookDetail.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            ValueAnimator valueAnimator = new ValueAnimator();
            if (isOpen){
                valueAnimator.setIntValues(0, -mLayoutHeight);
                lookDetail.setText("查看详情");
            }else {
                valueAnimator.setIntValues(-mLayoutHeight, 0);
                lookDetail.setText("收起");
            }
            //设置监听的值
            valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animator) {
                    int value = (int) animator.getAnimatedValue();
                    layer2.setPadding(0,value,0,0);
                }
            });
            //动画执行中监听
            valueAnimator.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animator) {
                    //动画开始,不能点击
                    lookDetail.setClickable(false);
                }

                @Override
                public void onAnimationEnd(Animator animator) {
                    lookDetail.setClickable(true);
                }

                @Override
                public void onAnimationCancel(Animator animator) {

                }

                @Override
                public void onAnimationRepeat(Animator animator) {

                }
            });

            valueAnimator.setDuration(500);
            valueAnimator.start();
            //状态更改
            isOpen = !isOpen;

            //进行旋转
            ViewCompat.animate(icon1).rotationBy(180f).setDuration(500).start();
        }
    });
}

这就实现好了,就是改变控件的高度来实现显示和隐藏的动画



版权声明:本文为ZhangXuxiaoqingnian原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。