自訂GridLayout實現條目的拖動動畫特效

標籤：設定   listen   res   ret   uil   ams   事件   判斷   extends   

1、自訂GridLayout實現增加條目過度動畫操作

public class MyGridLayout extends GridLayout {        public MyGridLayout(Context context) {            //super(context);            this(context,null);        }        public MyGridLayout(Context context, AttributeSet attrs) {            //super(context, attrs);            this(context,attrs,-1);        }        public MyGridLayout(Context context, AttributeSet attrs, int defStyleAttr) {            super(context, attrs, defStyleAttr);            // 設定 GridLayout 中的條目增加過渡動畫***********************            this.setLayoutTransition(new LayoutTransition());        }    }

2、建立條目

private void addTextView(String string) {        TextView textView = new TextView(getContext());        textView.setText(string);        textView.setTextColor(Color.BLACK);        textView.setBackgroundResource(R.drawable.shape_selecitem_black_bg);        textView.setGravity(Gravity.CENTER);        textView.setPadding(15, 5, 15, 5);        GridLayout.LayoutParams params = new LayoutParams();        params.setMargins(5, 5, 5, 5);        // 設定 params 給 TextView, 使用 margins 效果生效        textView.setLayoutParams(params);        // 將 textview 添加 Gridlayout 中展示        this.addView(textView);    }

3、拖拽效果的實現

    3.1 設定條目的長按事件

　　

public void addTextView(String string) {            ....            // 設定 textview 的長按事件，實現拖拽效果            textView.setOnLongClickListener(longClickListener);            // 將 textview 添加 Gridlayout 中展示            this.addView(textView);        }

　 3.2 長按事件中實現拖拽效果　

　　

private OnLongClickListener longClickListener = new OnLongClickListener() {            // 長按控制項調用的方法            // 參數：被長按的控制項            @Override            public boolean onLongClick(View v) {            // 設定控制項開始拖拽            // 參數 1 ：拖拽要顯示的資料，一般 null            // 參數 2 ：拖拽顯示的陰影樣式 ,DragShadowBuilder(v): 根據拖拽的控制項，設定拖拽陰影的樣式效果            // 參數 3 ：拖拽的控制項的狀態，一般 null            // 參數 4 ：拖拽的其他設定的標示，一般 0            v.startDrag(null, new DragShadowBuilder(v), null, 0);            // 返回 true 表示處理長按事件， false 就是不處理            return true;            }        };

4、拖拽移動操作的實現

核心理念：根據 textview 建立矩形，矩形中包含有原先 textview 的左上方和右下角的座標，移動的時候，判斷按下的座標是否在矩形的座標內，如果在就說明移動到了相應的矩形的位置，也就是相應的 textview 的位置

/** 拖拽監聽操作 **/    private OnDragListener dragListener = new OnDragListener() {        // 當拖拽操作執行的時候調用的方法        // 參數 1 ：拖拽的控制項        // 參數 2 ：拖拽的事件        @Override        public boolean onDrag(View v, DragEvent event) {            switch (event.getAction()) {                case DragEvent.ACTION_DRAG_STARTED:// 開始拖拽                    System.out.println(" 開始拖拽 ");                    // 根據 textview 建立矩形                    createRect();                break;                case DragEvent.ACTION_DRAG_ENTERED:// 開始拖拽控制項後，進入拖拽控制項範圍事件                    System.out.println(" 進入拖拽控制項範圍 ");                break;                case DragEvent.ACTION_DRAG_EXITED:// 開始拖拽控制項後，離開拖拽控制項範圍事件                    System.out.println(" 離開拖拽控制項範圍 ");                break;                case DragEvent.ACTION_DRAG_LOCATION:// 開始拖拽控制項後，行動控制項或者是拖拽控制項執行的操作                    System.out.println(" 拖拽控制項移動 ");                    // 根據拖拽的按下的座標，擷取拖拽控制項移動的位置                    int index = getIndex(event);                    //MyGridLayout.this.getChildAt(index) != currentView :  判斷移動到位置的 textview 和拖拽的 textview 是否一致，一致不進行移動，不一致進行移動操作                    if (index != -1 && currentView != null && MyGridLayout.this.getChildAt(index) != currentView) {                        // 實現 Gridlayout 的移動操作                        // 將原來位置的拖拽的特性 tview 刪除                        MyGridLayout.this.removeView(currentView);                        // 將拖拽的 textview 添加到移動的位置                        MyGridLayout.this.addView(currentView, index);// 將 view 對象，添加到那個位置                    }                break;                case DragEvent.ACTION_DRAG_ENDED:// 結束拖拽                    System.out.println(" 結束拖拽 ");                    // 設定拖拽的 textview 背景改為黑色邊框的背景                    if (currentView != null) {                        currentView.setEnabled(true);                    }                break;                case DragEvent.ACTION_DROP:// 結束拖拽，在控制項範圍內，鬆開手指，在控制項範圍外不執行操作                    System.out.println(" 鬆開手指 ");                break;            }            return true;        }    };    /**    *  根據 textview 建立矩形    *    * 2016 年 12 月 30 日 上午 11:44:08    */    protected void createRect() {        //getChildCount() :  擷取 Gridlayout 的子控制項的個數        rects = new Rect[this.getChildCount()];        // 根據孩子的個數，建立相應個數的矩形        for (int i = 0; i < this.getChildCount(); i++) {        // 根據子控制項的索引，擷取子控制項的 view 對象        View view = this.getChildAt(i);        // 建立一個矩形        // 參數 1,2 ：左上方的 x 和 y 的座標        // 參數 3,4 ：右下角的 x 和 y 的座標        Rect rect = new Rect(view.getLeft(), view.getTop(), view.getRight(), view.getBottom());        // 儲存到就行到數組中        rects[i] = rect;        }    }    /**    *  根據拖拽按下的座標，擷取拖拽控制項移動的位置    *    * 2016 年 12 月 30 日 上午 11:50:20    */    protected int getIndex(DragEvent event) {        for (int i = 0; i < rects.length; i++) {            // 判斷按下的座標是否包含在矩形的座標範圍內容            if (rects[i].contains((int)event.getX(), (int)event.getY())) {                return i;            }        }        return -1;    }

 

自訂GridLayout實現條目的拖動動畫特效