本文介绍一个自定义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<View> 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的使用：
布局文件
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="40dp"
android:scrollbars="none">
<com.magic.wdl.animatedlinearlayout.AnimatedLinearLayout
android:id="@+id/animated_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="远上寒山石径斜"
android:textSize="15sp"
android:layout_marginLeft="20dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="白云深处有人家"
android:textSize="15sp"
android:layout_marginLeft="20dp"/>
</com.magic.wdl.animatedlinearlayout.AnimatedLinearLayout>
</HorizontalScrollView>
设置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();
}
};
}
