AnimatedLinearLayout：带删除动画的Linea

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

AnimatedLinearLayout效果

GitHub下载地址

代码如下：
在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();        
            }   
    };
}