安卓动画-------布局变化动画

在安卓开发中，动画是必不可少也是相当重要的，看了很多博客，似乎动画与自定义view决定了一个安卓开发者的上限，做了三年安卓，从一开始简单的逐帧动画到慢慢随着UI的进步开始使用属性动画，从不懂到慢慢加深理解，感觉自己会的越来越多，不会的也有很多，长话短说，除了我们常见的属性动画、补间动画、逐帧动画，还有系统的自带的动画，可以实现很多UI要求的而你觉得很费劲的动画，下面先上效果图：

大家可以看到点击“展开课表”会有中间的列表展示出来，点击“收起课表”，列表会被逐渐隐藏。这就是个动画，至于那个箭头上方的半透明效果很简单，在属性设置个alpha就可以了。

那么该如何使用呢？

1.首先在动画的根布局，我这里是RelativeLayout,xml里的属性加上 android:animateLayoutChanges="true"；这个看英文就知道是布局发生变化的动画开关。

至于布局代码，下面就是，RelativeLayout就两个元素，一个是上方的列表，一个是遮挡列表的箭头也是动画的触摸开关。

<RelativeLayout
    android:id="@+id/rl_bottom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:animateLayoutChanges="true">

    <LinearLayout
        android:id="@+id/ll_time_table"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_time_table"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:paddingTop="9dp"
            android:paddingBottom="12dp"></android.support.v7.widget.RecyclerView>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/ll_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/ll_time_table"
        android:animateLayoutChanges="true"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/ll_fold"
            android:layout_width="match_parent"
            android:layout_height="90dp"
            android:background="@drawable/white_gradient"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/iv_fold"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_marginTop="30dp"
                android:src="@mipmap/icon_fold" />

            <TextView
                android:id="@+id/tv_fold"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="展开课表"
                android:textColor="#ff666666"
                android:textSize="10sp" />
        </LinearLayout>

2.我们要动态改变布局代码。

private void handleTimeTableVisible() {
    //在xml设置父布局支持动画
    final ImageView imageView = new ImageView(getActivity());
    imageView.setVisibility(View.GONE);
    imageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            rlBottom.removeView(imageView);
        }
    });
    rlBottom.addView(imageView, 0);
    if (showTable) {
        showTable = false;
        tvFold.setText("展开课表");
        ivFold.setImageResource(R.mipmap.icon_fold);
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) llBottom.getLayoutParams();
       //要先移除之前的布局约束 不然相对布局更改不会发生变化
        params.removeRule(RelativeLayout.BELOW);
        params.addRule(RelativeLayout.ALIGN_TOP, R.id.ll_time_table);
        llBottom.setLayoutParams(params);
    } else {
        showTable = true;
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) llBottom.getLayoutParams();
        params.removeRule(RelativeLayout.ALIGN_TOP);
        params.addRule(RelativeLayout.BELOW, R.id.ll_time_table);
        llBottom.setLayoutParams(params);
        tvFold.setText("收起课表");
        ivFold.setImageResource(R.mipmap.icon_unfold);
    }
}

就是这么简单，如果恰好帮到你，请帮忙点个赞或者评论下，谢谢。

安卓动画-------布局变化动画

猜你喜欢