冰糖葫芦三剑客

Android 仿今日头条频道管理（GridView之间Item的移动和拖拽）

很多博客上都有类似今日头条的一些案例，频道管理GridView之间的拖拽移动，flowtaglayout taglayout 流式布局等不相上下，下面我们来看看这次的效果：

上图是2个gridview组成、2个gridview之间的Item是可以相互更换的、而且我的频道的Item是可以拖拽进行排序。仔细观察、今日头条有些细节做的的非常好，当一个gridview1的item移动到另一个gridview2时、gridview1的item不会立即消失、而是有一个没有内容的背景框、等item移动gridview2操作完毕才会消失、并且gridview2在gridview1的Item到达之前也有一个没有内容的背景框，等到达后覆盖。给用户一个很强的交互体验，很赞。而且在item拖拽移动排序时、拖拽的item会变大变色、效果很赞，体验极好。感兴趣的话可以下一个今日头条的客户端看看。当看到这么赞的交互体验，我就想看看是怎么实现的，这篇博客先讲2个Gridview之间item的移动。

实现思路：

1、首先我们获取我们点击的位置、处于gridview哪个位置

2、获取位置后、我们就能拿到这个Item的View，我们获取item绘制缓存的Bitmap对象。

3、将Bitmap设置的一个Imageview上，然后将这个ImageView放到一个容器中去进行移动操作，这样可能有人有疑问，为什么不直接把item放到容器中去呢，是因为item已经有自己的父容器gridview，所以我们new一个Imageview来代替item

4、然后我们将imageview移动到另一个gridview的最后一个位置。

5、最后刷新2个gridview的视图、就能实现我们所见的效果。

实现代码：

1.MainActivity

import android.graphics.Bitmap;  
import android.os.Bundle;  
import android.os.Handler;  
import android.support.v7.app.AppCompatActivity;  
import android.view.View;  
import android.view.ViewGroup;  
import android.view.animation.Animation;  
import android.view.animation.AnimationSet;  
import android.view.animation.TranslateAnimation;  
import android.widget.AdapterView;  
import android.widget.AdapterView.OnItemClickListener;  
import android.widget.GridView;  
import android.widget.ImageView;  
import android.widget.LinearLayout;  
import android.widget.TextView;  
  
import com.test.drag.view.MyGridView;  
  
import java.util.ArrayList;  
import java.util.List;  
  
public class MainActivity extends AppCompatActivity implements OnItemClickListener {  
    private MyGridView mUserGv, mOtherGv;  
    private List mUserList = new ArrayList<>();  
    private List mOtherList = new ArrayList<>();  
    private OtherAdapter mUserAdapter, mOtherAdapter;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        initView();  
    }  
  
    public void initView() {  
        mUserGv = (MyGridView) findViewById(R.id.userGridView);  
        mOtherGv = (MyGridView) findViewById(R.id.otherGridView);  
        mUserList.add("推荐");  
        mUserList.add("热点");  
        mUserList.add("上海");  
        mUserList.add("时尚");  
        mUserList.add("科技");  
        mUserList.add("体育");  
        mUserList.add("军事");  
        mUserList.add("财经");  
        mUserList.add("网络");  
        mOtherList.add("汽车");  
        mOtherList.add("房产");  
        mOtherList.add("社会");  
        mOtherList.add("情感");  
        mOtherList.add("女人");  
        mOtherList.add("旅游");  
        mOtherList.add("健康");  
        mOtherList.add("美女");  
        mOtherList.add("游戏");  
        mOtherList.add("数码");  
        mOtherList.add("娱乐");  
        mOtherList.add("探索");  
        mUserAdapter = new OtherAdapter(this, mUserList,true);  
        mOtherAdapter = new OtherAdapter(this, mOtherList,false);  
        mUserGv.setAdapter(mUserAdapter);  
        mOtherGv.setAdapter(mOtherAdapter);  
        mUserGv.setOnItemClickListener(this);  
        mOtherGv.setOnItemClickListener(this);  
    }  
  
    /**  
     *获取点击的Item的对应View，  
     *因为点击的Item已经有了自己归属的父容器MyGridView，所有我们要是有一个ImageView来代替Item移动  
     * @param view  
     * @return  
     */  
    private ImageView getView(View view) {  
        view.destroyDrawingCache();  
        view.setDrawingCacheEnabled(true);  
        Bitmap cache = Bitmap.createBitmap(view.getDrawingCache());  
        view.setDrawingCacheEnabled(false);  
        ImageView iv = new ImageView(this);  
        iv.setImageBitmap(cache);  
        return iv;  
    }  
    /**  
     * 获取移动的VIEW，放入对应ViewGroup布局容器  
     * @param viewGroup  
     * @param view  
     * @param initLocation  
     * @return  
     */  
    private View getMoveView(ViewGroup viewGroup, View view, int[] initLocation) {  
        int x = initLocation[0];  
        int y = initLocation[1];  
        viewGroup.addView(view);  
        LinearLayout.LayoutParams mLayoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);  
        mLayoutParams.leftMargin = x;  
        mLayoutParams.topMargin = y;  
        view.setLayoutParams(mLayoutParams);  
        return view;  
    }  
  
    /**  
     * 创建移动的ITEM对应的ViewGroup布局容器  
     * 用于存放我们移动的View  
     */  
    private ViewGroup getMoveViewGroup() {  
        //window中最顶层的view  
        ViewGroup moveViewGroup = (ViewGroup) getWindow().getDecorView();  
        LinearLayout moveLinearLayout = new LinearLayout(this);  
        moveLinearLayout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));  
        moveViewGroup.addView(moveLinearLayout);  
        return moveLinearLayout;  
    }  
    /**  
     * 点击ITEM移动动画  
     *  
     * @param moveView  
     * @param startLocation  
     * @param endLocation  
     * @param moveChannel  
     * @param clickGridView  
     */  
    private void MoveAnim(View moveView, int[] startLocation, int[] endLocation, final String moveChannel,  
                          final GridView clickGridView, final boolean isUser) {  
        int[] initLocation = new int[2];  
        //获取传递过来的VIEW的坐标  
        moveView.getLocationInWindow(initLocation);  
        //得到要移动的VIEW,并放入对应的容器中  
        final ViewGroup moveViewGroup = getMoveViewGroup();  
        final View mMoveView = getMoveView(moveViewGroup, moveView, initLocation);  
        //创建移动动画  
        TranslateAnimation moveAnimation = new TranslateAnimation(  
                startLocation[0], endLocation[0], startLocation[1],  
                endLocation[1]);  
        moveAnimation.setDuration(300L);//动画时间  
        //动画配置  
        AnimationSet moveAnimationSet = new AnimationSet(true);  
        moveAnimationSet.setFillAfter(false);//动画效果执行完毕后，View对象不保留在终止的位置  
        moveAnimationSet.addAnimation(moveAnimation);  
        mMoveView.startAnimation(moveAnimationSet);  
        moveAnimationSet.setAnimationListener(new Animation.AnimationListener() {  
  
            @Override  
            public void onAnimationStart(Animation animation) {  
            }  
  
            @Override  
            public void onAnimationRepeat(Animation animation) {  
            }  
  
            @Override  
            public void onAnimationEnd(Animation animation) {  
                moveViewGroup.removeView(mMoveView);  
                // 判断点击的是DragGrid还是OtherGridView  
                if (isUser) {  
                    mOtherAdapter.setVisible(true);  
                    mOtherAdapter.notifyDataSetChanged();  
                    mUserAdapter.remove();  
                } else {  
                    mUserAdapter.setVisible(true);  
                    mUserAdapter.notifyDataSetChanged();  
                    mOtherAdapter.remove();  
                }  
            }  
        });  
    }  
  
    @Override  
    public void onItemClick(AdapterView parent, View view, final int position, long id) {  
        switch (parent.getId()) {  
            case R.id.userGridView:  
                //position为 0，1 的不可以进行任何操作  
                if (position != 0 && position != 1) {  
                    final ImageView moveImageView = getView(view);  
                    if (moveImageView != null) {  
                        TextView newTextView = (TextView) view.findViewById(R.id.text_item);  
                        final int[] startLocation = new int[2];  
                        newTextView.getLocationInWindow(startLocation);  
                        final String channel = ((OtherAdapter) parent.getAdapter()).getItem(position);//获取点击的频道内容  
                        mOtherAdapter.setVisible(false);  
                        //添加到最后一个  
                        mOtherAdapter.addItem(channel);  
                        new Handler().postDelayed(new Runnable() {  
                            public void run() {  
                                try {  
                                    int[] endLocation = new int[2];  
                                    //获取终点的坐标  
                                    mOtherGv.getChildAt(mOtherGv.getLastVisiblePosition()).getLocationInWindow(endLocation);  
                                    MoveAnim(moveImageView, startLocation, endLocation, channel, mUserGv, true);  
                                    mUserAdapter.setRemove(position);  
                                } catch (Exception localException) {  
                                }  
                            }  
                        }, 50L);  
                    }  
                }  
                break;  
            case R.id.otherGridView:  
                final ImageView moveImageView = getView(view);  
                if (moveImageView != null) {  
                    TextView newTextView = (TextView) view.findViewById(R.id.text_item);  
                    final int[] startLocation = new int[2];  
                    newTextView.getLocationInWindow(startLocation);  
                    final String channel = ((OtherAdapter) parent.getAdapter()).getItem(position);  
                    mUserAdapter.setVisible(false);  
                    //添加到最后一个  
                    mUserAdapter.addItem(channel);  
                    new Handler().postDelayed(new Runnable() {  
                        public void run() {  
                            try {  
                                int[] endLocation = new int[2];  
                                //获取终点的坐标  
                                mUserGv.getChildAt(mUserGv.getLastVisiblePosition()).getLocationInWindow(endLocation);  
                                MoveAnim(moveImageView, startLocation, endLocation, channel, mOtherGv,false);  
                                mOtherAdapter.setRemove(position);  
                            } catch (Exception localException) {  
                            }  
                        }  
                    }, 50L);  
                }  
                break;  
            default:  
                break;  
        }  
    }  
}

2.适配器：

import android.content.Context;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.view.ViewGroup;  
import android.widget.BaseAdapter;  
import android.widget.TextView;  
  
import java.util.List;  
  
/**  
 * Created by fuweiwei on 2016/1/8.  
 */  
public class OtherAdapter extends BaseAdapter {  
  
    private Context context;  
    public List channelList;  
    private TextView item_text;  
    /** 是否可见 在移动动画完毕之前不可见，动画完毕后可见*/  
    boolean isVisible = true;  
    /** 要删除的position */  
    public int remove_position = -1;  
    /** 是否是用户频道 */  
    private boolean isUser = false;  
  
    public OtherAdapter(Context context, List channelList ,boolean isUser) {  
        this.context = context;  
        this.channelList = channelList;  
        this.isUser = isUser;  
    }  
  
    @Override  
    public int getCount() {  
        return channelList == null ? 0 : channelList.size();  
    }  
  
    @Override  
    public String getItem(int position) {  
        if (channelList != null && channelList.size() != 0) {  
            return channelList.get(position);  
        }  
        return null;  
    }  
  
    @Override  
    public long getItemId(int position) {  
        return position;  
    }  
  
    @Override  
    public View getView(int position, View convertView, ViewGroup parent) {  
        View view = LayoutInflater.from(context).inflate(R.layout.adapter_mygridview_item, null);  
        item_text = (TextView) view.findViewById(R.id.text_item);  
        String channel = getItem(position);  
        item_text.setText(channel);  
        if(isUser){  
            if ((position == 0) || (position == 1)){  
                item_text.setEnabled(false);  
            }  
        }  
        if (!isVisible && (position == -1 + channelList.size())){  
            item_text.setText("");  
            item_text.setSelected(true);  
            item_text.setEnabled(true);  
        }  
        if(remove_position == position){  
            item_text.setText("");  
        }  
        return view;  
    }  
  
    /** 获取频道列表 */  
    public List getChannnelLst() {  
        return channelList;  
    }  
  
    /** 添加频道列表 */  
    public void addItem(String channel) {  
        channelList.add(channel);  
        notifyDataSetChanged();  
    }  
  
    /** 设置删除的position */  
    public void setRemove(int position) {  
        remove_position = position;  
        notifyDataSetChanged();  
        // notifyDataSetChanged();  
    }  
  
    /** 删除频道列表 */  
    public void remove() {  
        channelList.remove(remove_position);  
        remove_position = -1;  
        notifyDataSetChanged();  
    }  
    /** 设置频道列表 */  
    public void setListDate(List list) {  
        channelList = list;  
    }  
  
    /** 获取是否可见 */  
    public boolean isVisible() {  
        return isVisible;  
    }  
  
    /** 设置是否可见 */  
    public void setVisible(boolean visible) {  
        isVisible = visible;  
    }

3.自定义GridView:

import android.content.Context;  
import android.util.AttributeSet;  
import android.widget.GridView;  
  
/**  
 * Created by fuweiwei on 2016/1/8.  
 */  
public class MyGridView extends GridView {  
    public MyGridView(Context paramContext, AttributeSet paramAttributeSet) {  
        super(paramContext, paramAttributeSet);  
    }  
  
    @Override  
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
        int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,  
                MeasureSpec.AT_MOST);  
        super.onMeasure(widthMeasureSpec, expandSpec);  
    }  
}

4.主函数布局：

5.背景色：subscribe_item_bg.xml

6.适配器布局：

实现效果如下：

Android 仿今日头条频道管理（GridView之间Item的移动和拖拽）

你可能感兴趣的:(Android控件的功能)