[Android]Android高級UI開發系列教程（一） - Android拖拽教程

本文轉載自查看原文 2012-11-13 23:46 13114

教程索引

Android 拖拽（Drag and Drop）教程
Android 繪制（Drawables）教程
Android 樣式和主題（Styles and Themes）教程
Android 動態壁紙（Live Wallpaper）教程
Android 主屏幕小部件（Homescreen Widgets）教程
Android 自定義視圖（Custom Views）教程
Android 支持不同大小屏幕（Support different screensize）教程
Android 動畫（animations）教程
Android 觸摸（Touch）教程

Android拖拽教程

開發環境：

Eclipse 3.7（Indigo）、Java 1.6 和 Android 4.0（Ice Cream Sandwich）

前言：

Android 4.0 開始支持視圖（Views）的拖拽。你需要在視圖（View）上注冊一個監聽器（Listener），比如 OnTouchListener 或者 LongClickListener，並且需要定義一個視圖（View）作為拖拽的目標視圖對象，比如拖放區（drop zones）。下面我們通過兩段代碼來學習一下。

第一段代碼我們定義一個視圖，你可以拖拽該視圖，我們在該視圖上使用setOnTouchListener方法注冊了一個OnTouchListener事件。

1 // Assign the touch listener to your view which you want to move
2 findViewById(R.id.myimage1).setOnTouchListener( new MyTouchListener());
3
4 // This defines your touch listener
5 private final class MyTouchListener implements OnTouchListener {
6    public boolean onTouch(View view, MotionEvent motionEvent) {
7      if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
8       ClipData data = ClipData.newPlainText("", "");
9       DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
10       view.startDrag(data, shadowBuilder, view, 0);
11       view.setVisibility(View.INVISIBLE);
12        return true;
13     } else {
14      return false;
15     }
16   }
17 }

上面的第 8 行代碼，我們構造了一個 ClipData 對象，可以使用該對象來存放數據，並且該對象可以被處於拖放區（drop zones）的視圖接收，即 ClipData 可用於視圖拖拽前后數據的傳遞。第 9 行代碼，DragShadowBuilder 允許你指定拖拽操作的效果，通常你直接在視圖上進行拖拽操作。

第二段代碼我們將定義一個拖放區（drag zone），你可以將定義好的視圖拖拽到該視圖上，我們在該拖放區視圖上通過 setOnDragListener() 方法注冊了一個 OnDragListener 監聽器，在 OnDragListener 監聽器中你可以定義相關的事件處理方法。

1 findViewById(R.id.bottomright).setOnDragListener( new MyDragListener());
2
3 class MyDragListener implements OnDragListener {
4   Drawable enterShape = getResources().getDrawable(R.drawable.shape_droptarget);
5   Drawable normalShape = getResources().getDrawable(R.drawable.shape);
6
7   @Override
8    public boolean onDrag(View v, DragEvent event) {
9      int action = event.getAction();
10      switch (event.getAction()) {
11      case DragEvent.ACTION_DRAG_STARTED:
12      // Do nothing
13        break;
14      case DragEvent.ACTION_DRAG_ENTERED:
15       v.setBackgroundDrawable(enterShape);
16        break;
17      case DragEvent.ACTION_DRAG_EXITED:
18       v.setBackgroundDrawable(normalShape);
19        break;
20      case DragEvent.ACTION_DROP:
21        // Dropped, reassign View to ViewGroup
22       View view = (View) event.getLocalState();
23       ViewGroup owner = (ViewGroup) view.getParent();
24       owner.removeView(view);
25       LinearLayout container = (LinearLayout) v;
26       container.addView(view);
27       view.setVisibility(View.VISIBLE);
28        break;
29      case DragEvent.ACTION_DRAG_ENDED:
30       v.setBackgroundDrawable(normalShape);
31        default:
32        break;
33     }
34      return true;
35   }
36 }

教程實踐

1. 創建一個新的 Android Project

-> project name: "de.vogella.android.draganddrop"

-> create activity: "DragActivity"

2. 在項目的res目錄下創建一個 "drawable" 文件夾，在該文件夾中創建文件 "shape.xml"

<? xml version="1.0" encoding="UTF-8" ?>
< shape xmlns:android ="http://schemas.android.com/apk/res/android"
    android:shape ="rectangle" >
     < stroke
         android:width ="2dp"
        android:color ="#FFFFFFFF" />
     < gradient
         android:angle ="225"
        android:endColor ="#DD2ECCFA"
        android:startColor ="#DD000000" />
     < corners
         android:bottomLeftRadius ="7dp"
        android:bottomRightRadius ="7dp"
        android:topLeftRadius ="7dp"
        android:topRightRadius ="7dp" />
</ shape >

3. 在 "drawable" 文件夾中創建文件 "shape_droptarget.xml"

<? xml version="1.0" encoding="UTF-8" ?>
< shape xmlns:android ="http://schemas.android.com/apk/res/android"
    android:shape ="rectangle" >
     < stroke
         android:width ="2dp"
        android:color ="#FFFF0000" />
     < gradient
         android:angle ="225"
        android:endColor ="#DD2ECCFA"
        android:startColor ="#DD000000" />
     < corners
         android:bottomLeftRadius ="7dp"
        android:bottomRightRadius ="7dp"
        android:topLeftRadius ="7dp"
        android:topRightRadius ="7dp" />
</ shape >

4. 按照下面代碼修改"res/layout/main.xml"文件

<? xml version="1.0" encoding="utf-8" ?>
< GridLayout xmlns:android ="http://schemas.android.com/apk/res/android"
    android:layout_width ="match_parent"
    android:layout_height ="match_parent"
    android:columnCount ="2"
    android:columnWidth ="300dp"
    android:orientation ="vertical"
    android:rowCount ="2"
    android:stretchMode ="columnWidth" >

     < LinearLayout
         android:id ="@+id/topleft"
        android:layout_width ="160dp"
        android:layout_height ="200dp"
        android:layout_column ="0"
        android:layout_row ="0"
        android:background ="@drawable/shape" >

         < ImageView
             android:id ="@+id/myimage1"
            android:layout_width ="wrap_content"
            android:layout_height ="wrap_content"
            android:layout_column ="0"
            android:layout_row ="0"
            android:src ="@drawable/ic_launcher" />
     </ LinearLayout >

     < LinearLayout
         android:id ="@+id/topright"
        android:layout_width ="160dp"
        android:layout_height ="200dp"
        android:layout_column ="1"
        android:layout_row ="0"
        android:background ="@drawable/shape" >

         < ImageView
             android:id ="@+id/myimage2"
            android:layout_width ="wrap_content"
            android:layout_height ="wrap_content"
            android:layout_column ="0"
            android:layout_row ="0"
            android:src ="@drawable/ic_launcher" />
     </ LinearLayout >

     < LinearLayout
         android:id ="@+id/bottomleft"
        android:layout_width ="160dp"
        android:layout_height ="200dp"
        android:layout_column ="0"
        android:layout_row ="1"
        android:background ="@drawable/shape" >

         < ImageView
             android:id ="@+id/myimage3"
            android:layout_width ="wrap_content"
            android:layout_height ="wrap_content"
            android:src ="@drawable/ic_launcher" />
     </ LinearLayout >

     < LinearLayout
         android:id ="@+id/bottomright"
        android:layout_width ="160dp"
        android:layout_height ="200dp"
        android:layout_column ="1"
        android:layout_row ="1"
        android:background ="@drawable/shape" >

         < ImageView
             android:id ="@+id/myimage4"
            android:layout_width ="wrap_content"
            android:layout_height ="wrap_content"
            android:layout_column ="0"
            android:layout_row ="0"
            android:src ="@drawable/ic_launcher" />
     </ LinearLayout >

</ GridLayout >

5. 修改 Activity文件

package de.vogella.android.draganddrop;

import android.app.Activity;
import android.content.ClipData;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.DragEvent;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.DragShadowBuilder;
import android.view.View.OnDragListener;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.widget.LinearLayout;

public class DragActivity extends Activity {

/** Called when the activity is first created. */

  @Override
   public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    findViewById(R.id.myimage1).setOnTouchListener( new MyTouchListener());
    findViewById(R.id.myimage2).setOnTouchListener( new MyTouchListener());
    findViewById(R.id.myimage3).setOnTouchListener( new MyTouchListener());
    findViewById(R.id.myimage4).setOnTouchListener( new MyTouchListener());
    findViewById(R.id.topleft).setOnDragListener( new MyDragListener());
    findViewById(R.id.topright).setOnDragListener( new MyDragListener());
    findViewById(R.id.bottomleft).setOnDragListener( new MyDragListener());
    findViewById(R.id.bottomright).setOnDragListener( new MyDragListener());

  }

   private final class MyTouchListener implements OnTouchListener {
     public boolean onTouch(View view, MotionEvent motionEvent) {
       if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
        ClipData data = ClipData.newPlainText("", "");
        DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
        view.startDrag(data, shadowBuilder, view, 0);
        view.setVisibility(View.INVISIBLE);
         return true;
      } else {
         return false;
      }
    }
  }

   class MyDragListener implements OnDragListener {
    Drawable enterShape = getResources().getDrawable(R.drawable.shape_droptarget);
    Drawable normalShape = getResources().getDrawable(R.drawable.shape);

    @Override
     public boolean onDrag(View v, DragEvent event) {
       int action = event.getAction();
       switch (event.getAction()) {
       case DragEvent.ACTION_DRAG_STARTED:
         // Do nothing
         break;
       case DragEvent.ACTION_DRAG_ENTERED:
        v.setBackgroundDrawable(enterShape);
         break;
       case DragEvent.ACTION_DRAG_EXITED:
        v.setBackgroundDrawable(normalShape);
         break;
       case DragEvent.ACTION_DROP:
         // Dropped, reassign View to ViewGroup
        View view = (View) event.getLocalState();
        ViewGroup owner = (ViewGroup) view.getParent();
        owner.removeView(view);
        LinearLayout container = (LinearLayout) v;
        container.addView(view);
        view.setVisibility(View.VISIBLE);
         break;
       case DragEvent.ACTION_DRAG_ENDED:
        v.setBackgroundDrawable(normalShape);
       default:
         break;
      }
       return true;
    }
  }
}

6. 啟動你創建的Activity，你就可以拖拽 ImageViews 到另一個容器里面。

參考鏈接：

http://www.vogella.com/articles/AndroidDragAndDrop/article.html

交流QQ: 1321518080

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 [Android]Android高級UI開發系列教程（二） - Android繪制教程 [Android]Android高級UI開發系列教程（三） - Android樣式和主題教程 Android開發教程匯總 Android開發簡易教程 Android項目實戰--手機衛士開發系列教程基於Android的小巫新聞客戶端開發系列教程 Android開發教程 --- Content Provider 老羅Android開發視頻教程 (android常用UI編程) 25集集合 Android Studio系列教程--下載與安裝 mono for android學習過程系列教程(1)