android linearllayout 隐藏 动画,AnimatedLinearLayout：带删除动画的LinearLayout

本文介绍一个自定义ViewGroup：AnimatedLinearLayout，在普通的LinearLayout基础上，它实现了删除某一项后，后面的项依次前移或上移的动画效果，效果如下：

AnimatedLinearLayout效果

代码如下：

在onMeasure函数中加入init函数，该函数负责记录AnimatedLinearLayout下直属子view列表，并给每个子view添加点击事件，实现该子view点击消失，同时后面的view前移的效果。注意，这里由于AnimatedLinearLayout可能会使用wrap_content属性值，会导致onMeasure方法执行多次，所以我们加入了一个标志位isInited，只在第一次执行onMeasure的时候进行初始化操作。

public class AnimatedLinearLayout extends LinearLayout {

...

private boolean isInited = false;

...

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

if (!isInited) {

init();

isInited = true;

}

}

...

}

下面是init函数的实现，主要是两个操作：将子view添加到directChildViewList，给子view添加点击事件。点击事件又分三步，执行给AnimatedLinearLayout设置的listener，隐藏被点击的子view，将排在该view之后的view依次往前移动一个位置。这里移动的动画使用ObjectAnimator实现，Android动画技术可以参考这篇文章。首先记录需要移动的view当前的偏移量curTranslationX，然后向左或向上移动一个距离。需要注意的是，getTranslationX获取的是该view相对最初位置在X轴方向移动的距离，而不是该view距离屏幕左上角远点的X轴距离，所以AnimatedLinearLayout里面所有子view初始的偏移量都是0，移动的次数越多，偏移量越大。

public class AnimatedLinearLayout extends LinearLayout {

private List directChildViewList = new ArrayList<>();

private OnClickListener directChildOnClickListener = null;

...

private void init() {

// 获取直属子view数量

int directChildCnt = getChildCount();

for (int i = 0; i < directChildCnt; i++) {

// 将直属子view添加到list中

final View directChildView = getChildAt(i);

directChildViewList.add(directChildView);

// 给直属子view添加点击响应

directChildView.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// 如果设置了子view的点击事件,先执行点击事件

if (null != directChildOnClickListener) {

directChildOnClickListener.onClick(v);

}

// 然后隐藏该view

directChildView.setVisibility(INVISIBLE);

// 并将排在该view之后的view依次往前移动一个位置,移动的距离为点击消失的view的宽度(或高度)

MarginLayoutParams layoutParams = (MarginLayoutParams ) directChildView.getLayoutParams();

int currentPos = directChildViewList.indexOf(directChildView);

for (int j = currentPos + 1; j < directChildViewList.size(); j++) {

View viewToMove = directChildViewList.get(j);

if (getOrientation() == HORIZONTAL) {

float moveLeftVal = directChildView.getWidth() + layoutParams.leftMargin + layoutParams.rightMargin;

float curTranslationX = viewToMove.getTranslationX();

ObjectAnimator moveLeft = ObjectAnimator.ofFloat(viewToMove, "translationX", curTranslationX, curTranslationX - moveLeftVal);

moveLeft.setDuration(1000);

moveLeft.start();

} else {

float moveTopVal = directChildView.getHeight() + layoutParams.topMargin + layoutParams.bottomMargin;

float curTranslationY = viewToMove.getTranslationY();

ObjectAnimator moveTop = ObjectAnimator.ofFloat(viewToMove, "translationY", curTranslationY, curTranslationY - moveTopVal);

moveTop.setDuration(1000);

moveTop.start();

}

}

}

});

}

}

// 设置直属子view点击事件

public void setDirectChildOnClickListener(OnClickListener listener) {

directChildOnClickListener = listener;

}

}

AnimatedLinearLayout的使用：

布局文件

android:layout_width="match_parent"

android:layout_height="40dp"

android:scrollbars="none">

android:id="@+id/animated_layout"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:layout_gravity="center_vertical">

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="远上寒山石径斜"

android:textSize="15sp"

android:layout_marginLeft="20dp" />

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="白云深处有人家"

android:textSize="15sp"

android:layout_marginLeft="20dp"/>

设置AnimatedLinearLayout子view点击事件：

public class MainActivity extends AppCompatActivity {

...

@Override

protected void onCreate(Bundle savedInstanceState) {

...

mAnimatedLinearLayoutHorizental.setDirectChildOnClickListener(getOnClickListener());

...

}

private View.OnClickListener getOnClickListener() {

return new View.OnClickListener() {

@Override

public void onClick(View v) {

Toast.makeText(MainActivity.this, ((TextView)v).getText(), Toast.LENGTH_SHORT).show();

}

};

}