自定义ViewGroup动态添加删除Tab

公司的手机OS升级，在最新的Camera拟用这样的交互。感觉还不错。

思路：
1.ViewGroup中包含imageView按钮，根据显示的个数动态计算布局，在onLayout中重新排布ImageView的位置。
2.重新排布ImageView的位置的时候使用动画，动画需要坐标即需要自定义ImageView添加位置属性。
3.提供给外界方法用以决定显示哪个按钮，显示几个。

下面先来给imageView控件添加坐标属性。

public class ItemView extends ImageView
{
    private int mLastStaus = View.VISIBLE;
    private float mLastPosition = 0;
    private float mCurrentPosition = 0;
    public ItemView(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);        
    }

    public ItemView(Context context, AttributeSet attrs)
    {
        super(context, attrs);  
    }

    public ItemView(Context context)
    {
        super(context);     
    }

    public float getmLastPosition()
    {
        return mLastPosition;
    }

    public void setmLastPosition(float mLastPosition)
    {
        this.mLastPosition = mLastPosition;
    }

    /**
     * @return the mLastStaus
     */
    public int getmLastStaus()
    {
        return mLastStaus;
    }

    /**
     * @param mLastStaus the mLastStaus to set
     */
    public void setmLastStaus(int mLastStaus)
    {
        this.mLastStaus = mLastStaus;
    }

    /**
     * @return the mCurrentPosition
     */
    public float getmCurrentPosition()
    {
        return mCurrentPosition;
    }

    /**
     * @param mCurrentPosition the mCurrentPosition to set
     */
    public void setmCurrentPosition(float mCurrentPosition)
    {
        this.mCurrentPosition = mCurrentPosition;
    }
}    

现在imageView已经有了mLastPosition mCurrentPosition 这个的位置属性。

现在定义ViewGroup以动态添加删除按钮。新控件继承LinearLayout方便实现

JPowerTranslateView extends LinearLayout

然后在XML中添加控件及按钮

 <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:orientation="horizontal"
            android:layout_alignParentTop="true">
        <Button 
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button1"/>

        <Button 
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button2"/>
    </LinearLayout>

    <com.ws.jpower.animation.JPowerTranslateView
            android:id="@+id/animation_main_view"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:background="#50ffffff"
            android:orientation="horizontal"
            android:layout_centerInParent="true">
        <com.ws.jpower.animation.ItemView 
            android:id="@+id/image_btn1"
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:scaleType="center"
            android:src="@drawable/ic_lava_flash_auto_normal"/>


        <com.ws.jpower.animation.ItemView 
            android:id="@+id/image_btn2"
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:src="@drawable/lava_hdr_auto_normal"
            android:scaleType="center"/>

        <com.ws.jpower.animation.ItemView 
            android:id="@+id/image_btn3"
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:scaleType="center"
            android:src="@drawable/lava_shutter_type_gesture_5s_normal"/>

        <com.ws.jpower.animation.ItemView 
            android:id="@+id/image_btn4"
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:scaleType="center"
            android:src="@drawable/lava_switch_camera_normal"
            android:visibility="gone"/>
    </com.ws.jpower.animation.JPowerTranslateView>          
</RelativeLayout>

布局添加完后，在onFinishInflate方法中把GONE与VISIBLE的View分别放进不同的ArrayList

    @Override
    protected void onFinishInflate()
    {     
        super.onFinishInflate();
        mGoneView = new ArrayList<ItemView>();
        mVisibledView = new ArrayList<ItemView>();
        mVisibleView = new ArrayList<ItemView>();
        for (int i = 0; i < getChildCount(); i++)
        {
            if (getChildAt(i).getVisibility() == View.GONE)
            {
                mGoneView.add((ItemView) getChildAt(i));
            } else
            {
                mVisibledView.add((ItemView) getChildAt(i));
                mVisibleView.add((ItemView) getChildAt(i));
            }
        }

    }

然后根据需要显示的View，从新排布

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = getMeasuredWidth();
        if (mWidth == 0)
        {
            mWidth = mDisplayWith;
        }
    }
    //排布子View
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b)
    {      
        super.onLayout(changed, l, t, r, b);
        if (mVisibleView != null && mVisibleView.size() > 0)
        {
            int visibleCount = mVisibleView.size();//需要显示View的数量
            itemWidth = mWidth / visibleCount;     //等分父容器
            for (int i = 0; i < visibleCount; i++)
            {
                int itemWh = 0;
                ItemView itemView = mVisibleView.get(i);
                itemWh = itemView.getWidth();
                if (itemWh == 0)
                {
                    itemWh = 80;
                }

                int maginLeft = itemWidth * i + (itemWidth - itemWh) / 2;//子View的left坐标，即把每个子View放置在每份的中间

                itemView.layout(maginLeft, itemView.getTop(), maginLeft + itemWh, itemView.getBottom());
                itemView.setmLastPosition(maginLeft);//保存位置信息，便于后期根据坐标做动画 LastPosition
            }
        }
    }

给外界提供一个方法，动态隐藏添加按钮。
先回顾一下动画demo

// 原始平移动画TranslateAnimation
    private Animation getAnimation(float fromXValue, float toXValue, float fromYValue, float toYValue, long duration)
    {
        /*TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta,             float toYDelta)
       float fromXDelta 动画开始的点离当前View X坐标上的差值
       float toXDelta 动画结束的点离当前View X坐标上的差值
       float fromYDelta 动画开始的点离当前View Y坐标上的差值
       float toYDelta 动画开始的点离当前View Y坐标上的差值*/
        TranslateAnimation animation = new TranslateAnimation(fromXValue, toXValue, fromYValue, toYValue);
        animation.setDuration(duration);
        animation.setInterpolator(new AccelerateInterpolator());
        return animation;
    }

    // 属性动画PropertyValuesHolder
    public void propertyValuesHolder(View view, float fromXValue, float toXValue, float fromYValue, float toYValue, long duration)
    {
        PropertyValuesHolder pvhX = PropertyValuesHolder.ofFloat("translationX", fromXValue, toXValue);
        PropertyValuesHolder pvhY = PropertyValuesHolder.ofFloat("scaleY", fromYValue, toYValue);

        ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(view, pvhX, pvhY);
        animator.setDuration(duration).start();
        animator.addListener(new AnimatorListenerAdapter()
        {
            @Override
            public void onAnimationEnd(Animator animation)
            {

            }

        });
    }

    // 属性动画ObjectAnimator，AnimatorSet
    public void togetherAnimator(View view)
    {
        ObjectAnimator anim1 = ObjectAnimator.ofFloat(view, "alpha", 1.0f, 2f);
        ObjectAnimator anim2 = ObjectAnimator.ofFloat(view, "rotation", 1.0f, 2f);
        AnimatorSet animSet = new AnimatorSet();
        animSet.setDuration(2000);
        animSet.setInterpolator(new LinearInterpolator());
        // 两个动画同时执行
        animSet.playTogether(anim1, anim2);
        animSet.start();
    }

updateView方法

//status数组决定哪个View是显示的，visibleCount决定要显示的数目
    public void updateView(boolean[] status, int visibleCount)
    {
        Log.e("updateView", "updateView start ");
        mGoneView = new ArrayList<ItemView>();
        mVisibledView = new ArrayList<ItemView>();
        mVisiblingView = new ArrayList<ItemView>();
        mVisibleView = new ArrayList<ItemView>();

        itemWidth = mWidth / visibleCount;//重新计算每份的长度
        Log.e("updateView", "onLayout itemWidth = " + itemWidth);
        Log.e("updateView", "onLayout visibleCount = " + visibleCount);
        int count = 0;
        for (int i = 0; i < status.length; i++)
        {
            final ItemView itemView = (ItemView) getChildAt(i);
            if (status[i])//根据boolean，这是要显示的View
            {
                int itemWh = 0;
                itemWh = itemView.getWidth();
                if (itemWh == 0)
                {
                    itemWh = 80;
                }
                int maginLeft = itemWidth * count + (itemWidth - itemWh) / 2;//View的left坐标
                count++;
                itemView.setmCurrentPosition(maginLeft);//保存位置信息，便于后期根据坐标做动画  CurrentPosition
                Log.e("updateView", "updateView setmCurrentPosition " + maginLeft + " , i = " + i);
                if (itemView.getVisibility() == View.VISIBLE)
                {
                    // ((ItemView)getChildAt(i)).setmLastPosition(getChildAt(i).getLeft());
                    Log.e("updateView", "updateView getChildAt(i).getLeft() " + itemView.getLeft() + " , i = " + i);
                    mVisibledView.add(itemView);//已经显示了，本来就是显示的

                } else
                {
                    mVisiblingView.add(itemView);//本来没显示，这次要显示的
                }

                mVisibleView.add(itemView);

            } else
            {
                mGoneView.add(itemView);//本次需要隐藏的

                if (itemView.getVisibility() != View.GONE)
                {
                    itemView.setVisibility(View.GONE);

                }
            }
        }
        //准备完数据后开始动画
        for (int i = 0; i < mVisibleView.size(); i++)
        {
            if (mVisibledView.contains(mVisibleView.get(i)))  //本来就显示的做平移动画
            {
                Log.e("updateView", "updateView getChildAt(i).getmCurrentPosition() " + mVisibleView.get(i).getmCurrentPosition());
                Log.e("updateView", "updateView getChildAt(i).getmLastPosition() " + mVisibleView.get(i).getmLastPosition());
               ObjectAnimator
                          .ofFloat(mVisibleView.get(i), "translationX",
                                (mVisibleView.get(i).getmLastPosition() - mVisibleView.get(i).getmCurrentPosition()), 0f).setDuration(500).start();
            } else//未显示的setVisibility(View.VISIBLE)
            {
                mVisibleView.get(i).setVisibility(View.VISIBLE);
                AlphaAnimation mAlphaAnimation = new AlphaAnimation(0.0f, 1.0f);
                mAlphaAnimation.setDuration(200);
                mAlphaAnimation.setInterpolator(new AccelerateInterpolator());
                mVisibleView.get(i).startAnimation(mAlphaAnimation);
            }
        }
        Log.e("updateView", "updateView end ");

    }

下面是使用demo：

public class AnimationActivity extends Activity
{
    private Button button1 = null;
    private Button button2 = null;

    private JPowerTranslateView mJPowerTranslateView;
    boolean isReset = false;
    boolean isReset2 = false;

    int visibleCount = 4;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.animation_activity);
        mJPowerTranslateView = (JPowerTranslateView) findViewById(R.id.animation_main_view);
        mJPowerTranslateView.setBackgroundResource(R.drawable.lava_pro_single_settings_bg);

        button1 = (Button) findViewById(R.id.button1);
        button2 = (Button) findViewById(R.id.button2);
        button1.setOnClickListener(new OnClickListener()
        {

            @Override
            public void onClick(View v)
            {
                // TODO Auto-generated method stub
                boolean status[] =
                { true, true, false, true };
                boolean reset[] =
                { true, true, true, true };
                if (isReset)
                {

                    mJPowerTranslateView.updateView(status, 3);
                    isReset = false;
                } else
                {

                    isReset = true;
                    mJPowerTranslateView.updateView(reset, 4);
                }
                // mJPowerTranslateView.updateView();
            }
        });
        button2.setOnClickListener(new OnClickListener()
        {

            @Override
            public void onClick(View v)
            {
                // TODO Auto-generated method stub
                boolean status[] =
                { true, false, true, false };
                boolean reset[] =
                { false, true, false, false };
                if (isReset)
                {
                    mJPowerTranslateView.updateView(status, 2);
                    isReset = false;
                } else
                {
                    mJPowerTranslateView.updateView(reset, 1);
                    isReset = true;
                }
                // mJPowerTranslateView.updateView();
            }
        });
    }
}

JPowerTranslateView 完整代码

import java.util.ArrayList;
import java.util.List;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.animation.ValueAnimator;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.LinearInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class JPowerTranslateView extends LinearLayout
{

    private int mDisplayWith = 720;
    private int mWidth = 720;
    private int itemWidth;
    int visibleCount = 4;
    private List<ItemView> mGoneView = null;
    private List<ItemView> mVisibledView = null;
    private List<ItemView> mVisiblingView = null;
    private List<ItemView> mVisibleView = null;

    public JPowerTranslateView(Context context)
    {
        super(context, null);
    }
    public JPowerTranslateView(Context context, AttributeSet attrs)
    {
        this(context, attrs, 0);     
    }

    public JPowerTranslateView(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        mDisplayWith = wm.getDefaultDisplay().getWidth();
    }
   //初始化 把GONE与VISIBLE的View分别放进不同的ArrayList
    @Override
    protected void onFinishInflate()
    {
        // TODO Auto-generated method stub
        super.onFinishInflate();
        mGoneView = new ArrayList<ItemView>();
        mVisibledView = new ArrayList<ItemView>();
        mVisibleView = new ArrayList<ItemView>();
        for (int i = 0; i < getChildCount(); i++)
        {
            if (getChildAt(i).getVisibility() == View.GONE)
            {
                mGoneView.add((ItemView) getChildAt(i));
            } else
            {
                mVisibledView.add((ItemView) getChildAt(i));
                mVisibleView.add((ItemView) getChildAt(i));
            }
        }

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = getMeasuredWidth();

        if (mWidth == 0)
        {
            mWidth = mDisplayWith;
        }
    }
    //排布子View
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b)
    {      
        super.onLayout(changed, l, t, r, b);
        if (mVisibleView != null && mVisibleView.size() > 0)
        {
            int visibleCount = mVisibleView.size();//需要显示View的数量
            itemWidth = mWidth / visibleCount;     //等分父容器

            for (int i = 0; i < visibleCount; i++)
            {
                int itemWh = 0;
                ItemView itemView = mVisibleView.get(i);
                itemWh = itemView.getWidth();
                if (itemWh == 0)
                {
                    itemWh = 80;
                }

                int maginLeft = itemWidth * i + (itemWidth - itemWh) / 2;//子View的left坐标，即把每个子View放置在每份的中间

                itemView.layout(maginLeft, itemView.getTop(), maginLeft + itemWh, itemView.getBottom());
                itemView.setmLastPosition(maginLeft);//保存位置信息，便于后期根据坐标做动画 LastPosition
            }
        }  
    }

       //status数组决定哪个View是显示的，visibleCount决定要显示的数目
    public void updateView(boolean[] status, int visibleCount)
    {
        Log.e("updateView", "updateView start ");
        mGoneView = new ArrayList<ItemView>();
        mVisibledView = new ArrayList<ItemView>();
        mVisiblingView = new ArrayList<ItemView>();
        mVisibleView = new ArrayList<ItemView>();

        itemWidth = mWidth / visibleCount;//重新计算每份的长度
        int count = 0;
        for (int i = 0; i < status.length; i++)
        {
            final ItemView itemView = (ItemView) getChildAt(i);
            if (status[i])//根据boolean，这是要显示的View
            {
                int itemWh = 0;
                itemWh = itemView.getWidth();
                if (itemWh == 0)
                {
                    itemWh = 80;
                }
                int maginLeft = itemWidth * count + (itemWidth - itemWh) / 2;//View的left坐标
                count++;
                itemView.setmCurrentPosition(maginLeft);//保存位置信息，便于后期根据坐标做动画  CurrentPosition

                if (itemView.getVisibility() == View.VISIBLE)
                {
                    // ((ItemView)getChildAt(i)).setmLastPosition(getChildAt(i).getLeft());

                    mVisibledView.add(itemView);//已经显示了，本来就是显示的

                } else
                {
                    mVisiblingView.add(itemView);//本来没显示，这次要显示的
                }

                mVisibleView.add(itemView);

            } else
            {
                mGoneView.add(itemView);//本次需要隐藏的

                if (itemView.getVisibility() != View.GONE)
                {
                    itemView.setVisibility(View.GONE);         
                }
            }
        }
        //准备完数据后开始动画
        for (int i = 0; i < mVisibleView.size(); i++)
        {
            if (mVisibledView.contains(mVisibleView.get(i)))  //本来就显示的做平移动画
            {

               ObjectAnimator
                          .ofFloat(mVisibleView.get(i), "translationX",
                                (mVisibleView.get(i).getmLastPosition() - mVisibleView.get(i).getmCurrentPosition()), 0f).setDuration(500).start();

            } else//未显示的setVisibility(View.VISIBLE)
            {
                mVisibleView.get(i).setVisibility(View.VISIBLE);
                AlphaAnimation mAlphaAnimation = new AlphaAnimation(0.0f, 1.0f);
                mAlphaAnimation.setDuration(200);
                mAlphaAnimation.setInterpolator(new AccelerateInterpolator());
                mVisibleView.get(i).startAnimation(mAlphaAnimation);
            }
        }
    }
}