投稿
  1. 极客之音首页
  2. 后端开发
  3. Android

95.android 简单的布局隐藏与展开效果的属性动画（两种方式）

seven_ • • Android • 阅读 111

导读：本篇文章讲解 95.android 简单的布局隐藏与展开效果的属性动画（两种方式），希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

//效果图： 

95.android 简单的布局隐藏与展开效果的属性动画（两种方式）

95.android 简单的布局隐藏与展开效果的属性动画（两种方式）

//第一种方式（纯平移动画类型）： 

//第一步 我的Activity布局：

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.gannan.gannan.MainActivity">
    <TextView
        android:textSize="30sp"
        android:gravity="center"
        android:text="这是个标题"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <!--要是不写这个LinearLayout布局，平移效果将会在父窗体进行-->
    <LinearLayout
        android:clipChildren="true"
        android:clipToPadding="true"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/mData"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:gravity="center"
                android:textSize="20sp"
                android:text="我是内容1"
                android:background="@color/colorAccent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <TextView
                android:gravity="center"
                android:textSize="20sp"
                android:text="我是内容2"
                android:background="@color/colorPrimary"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <TextView
                android:gravity="center"
                android:textSize="20sp"
                android:text="我是内容3"
                android:background="@color/colorAccent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <TextView
                android:gravity="center"
                android:textSize="20sp"
                android:text="我是内容4"
                android:background="@color/colorPrimary"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </LinearLayout>

        <TextView
            android:layout_gravity="center"
            android:drawableRight="@mipmap/aa"
            android:textSize="20sp"
            android:id="@+id/mShowHidden"
            android:text="更多消息"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

</LinearLayout>

//第二步 我的Activity代码实现：

//初始化组件高度也可以用:

view.measure(View.MeasureSpec.UNSPECIFIED,View.MeasureSpec.UNSPECIFIED);

相应的获取组件高度时使用：view.getMeasuredHeight()

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private LinearLayout mData;
    private TextView mShowHidden;
    private int height;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mData = (LinearLayout) findViewById(R.id.mData);
        mShowHidden = (TextView) findViewById(R.id.mShowHidden);
        mShowHidden.setOnClickListener(this);
        //获取组件高度
        initOnPreDrawListener();
    }


    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.mShowHidden:
                if (mData.getVisibility() == View.GONE) {
                    start();
                } else {
                    end();
                }
                break;
        }
    }

    /*
   * 方法名：initOnPreDrawListener()
   * 功    能：初始化viewTreeObserver事件监听,重写OnPreDrawListener获取组件高度
   * 参    数：无
   * 返回值：无
   */
    private void initOnPreDrawListener() {
        final ViewTreeObserver viewTreeObserver = this.getWindow().getDecorView().getViewTreeObserver();
        viewTreeObserver.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                height = mData.getMeasuredHeight();
//                int width = mText1.getMeasuredWidth();
                Log.e("TAG", "高：" + height);
                // 移除OnPreDrawListener事件监听
                MainActivity.this.getWindow().getDecorView().getViewTreeObserver().removeOnPreDrawListener(this);
                //获取完高度后隐藏控件
                mData.setVisibility(View.GONE);
                return true;
            }
        });
    }

    /*
     * 方法名：start()
     * 功    能：显示控件,开启动画,判断,控件高度只获取一次
     * 参    数：无
     * 返回值：无
     */
    private void start() {
        // 显示控件
        mData.setVisibility(View.VISIBLE);

        //开启平移动画
        TranslateAnimation startTranslateAnim = new TranslateAnimation(0, 0, -height, 0);
        startTranslateAnim.setDuration(1600);
        Log.e("TAG2", "高：" + height);

        //控件开始动画
        mData.startAnimation(startTranslateAnim);
        mShowHidden.startAnimation(startTranslateAnim);

        //开启动画的监听
        startTranslateAnim.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                //动画开始调用
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //动画结束时调用
                //控件右边重新设置图片，相当于设置drawableRight
                Drawable drawable = getResources().getDrawable(R.mipmap.bb);
                drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight()); //设置边界
                mShowHidden.setCompoundDrawables(null, null, drawable, null);//画在右边
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                //动画重复时调用
            }
        });
    }

    /*
     * 方法名：end()
     * 功    能：关闭平移动画,控件开始执行关闭动画,动画的监听
     * 参    数：无
     * 返回值：无
     */
    private void end() {
        // 关闭平移动画
        TranslateAnimation endTranslateAnim = new TranslateAnimation(0, 0, 0, -height);
        endTranslateAnim.setDuration(1600);
        Log.e("TAG2", "高：" + height);

        //控件开始动画
        mData.startAnimation(endTranslateAnim);
        mShowHidden.startAnimation(endTranslateAnim);

        //关闭动画的监听
        endTranslateAnim.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                //动画开始调用
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                //动画结束时调用
                mData.setVisibility(View.GONE);
                Drawable drawable = getResources().getDrawable(R.mipmap.aa);
                drawable.setBounds(0, 0, drawable.getMinimumWidth(), drawable.getMinimumHeight()); //设置边界
                mShowHidden.setCompoundDrawables(null, null, drawable, null);//画在右边
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
                //动画重复时调用
            }
        });
    }

}

 

//第二种 方式（加了ValueAnimator来设置布局移动）：

 //第一步  Activity布局和第一个是一样的。

//第二步 Activity代码实现：

 

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private LinearLayout mData;
    private TextView mShowHidden;
    private int height;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mData = (LinearLayout) findViewById(R.id.mData);
        mShowHidden = (TextView) findViewById(R.id.mShowHidden);
        mShowHidden.setOnClickListener(this);
        //获取控件高度
        initOnPreDrawListener();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.mShowHidden:
                if (mData.getVisibility() == View.GONE) {
                    //开启布局动画
                    animateOpen(mData);
                    //开启平移动画
                    startTranslationAnimation();
                } else {
                    //关闭布局动画
                    animateClose(mData);
                    //关闭平移动画
                    endTranslationAnimation();
                }
                break;
        }
    }

    /*
     * 方法名：initOnPreDrawListener()
     * 功    能：获取控件高度
     * 参    数：无
     * 返回值：无
     */
    private void initOnPreDrawListener() {
        final ViewTreeObserver viewTreeObserver = this.getWindow().getDecorView().getViewTreeObserver();
        viewTreeObserver.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                height = mData.getMeasuredHeight();
//                int width = mText1.getMeasuredWidth();
                Log.e("TAG", "高：" + height);
                // 移除OnPreDrawListener事件监听
                MainActivity.this.getWindow().getDecorView().getViewTreeObserver().removeOnPreDrawListener(this);
                //获取完高度后隐藏控件
                mData.setVisibility(View.GONE);
                return true;
            }
        });
    }

    /*
     * 方法名：animateOpen(View v)
     * 功    能：布局向下移动
     * 参    数：View v
     * 返回值：无
     */
    private void animateOpen(View v) {
        v.setVisibility(View.VISIBLE);
        ValueAnimator animator = createDropAnimator(v, 0, height);
        animator.start();

    }

    /*
     * 方法名：animateClose(View v)
     * 功    能：布局向上移动
     * 参    数：View v
     * 返回值：无
     */
    private void animateClose(final View view) {
        int origHeight = view.getHeight();
        ValueAnimator animator = createDropAnimator(view, origHeight, 0);
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                view.setVisibility(View.GONE);
            }

        });
        animator.start();
    }

    /*
     * 方法名：startTranslationAnimation()
     * 功    能：开启平移动画
     * 参    数：无
     * 返回值：无
     */
    private void startTranslationAnimation() {
        TranslateAnimation startTranslateAnim = new TranslateAnimation(0, 0, -height, 0);
        startTranslateAnim.setDuration(300);
        mData.startAnimation(startTranslateAnim);
    }

    /*
     * 方法名：endTranslationAnimation()
     * 功    能：关闭平移动画
     * 参    数：无
     * 返回值：无
     */
    private void endTranslationAnimation() {
        TranslateAnimation endTranslateAnim= new TranslateAnimation(0, 0, 0, -height);
        endTranslateAnim.setDuration(300);
        mData.startAnimation(endTranslateAnim);
    }

    /*
     * 方法名：createDropAnimator(final View v, int start, int end)
     * 功    能：ValueAnimator动画,布局上下移动
     * 参    数：View v, int start, int end
     * 返回值：ValueAnimator animator
     */
    private ValueAnimator createDropAnimator(final View v, int start, int end) {
        ValueAnimator animator = ValueAnimator.ofInt(start, end);
        animator.setDuration(300);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator arg0) {
                int value = (int) arg0.getAnimatedValue();
                ViewGroup.LayoutParams layoutParams = v.getLayoutParams();
                layoutParams.height = value;
                v.setLayoutParams(layoutParams);
            }
        });
        return animator;
    }

}

 

//————————————————————————-完————————————————————————————-

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/118299.html

赞 (0)
seven_的头像seven_bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！