自定义GridView并且实现拖拽(附源码)

写在前面的话
本篇blog实现了GridView的拖拽功能。方法和上一篇自定义ListView实现拖拽ListItem项交换位置一个原理。只是在交换位置上记录了X轴的相关坐标,计算了X轴的相关变量。

实现效果图如下
 
说明:
本篇给出实现代码,但是不做任何说明。如需了解请看上一篇blog:自定义ListView实现拖拽ListItem项交换位置

文件代码:
1、MainActivity.java


代码如下:

package com.jay.draggridview;
import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.app.Activity;
import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
public class MainActivity extends Activity {

private static List<String> list = null;
//自定义适配器
private DragGridAdapter adapter = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化数据
initData();

//后面用到的自定义GridView
DragGridView dragGridView = (DragGridView)findViewById(R.id.drag_grid);
adapter = new DragGridAdapter(this, list);
dragGridView.setAdapter(adapter);
}

public void initData(){
list = new ArrayList<String>();
for(int i= 0 ; i < 12 ; i++){
list.add("grid_"+i%12);
}
}

public static class DragGridAdapter extends ArrayAdapter<String>{

public DragGridAdapter(Context context, List<String> objects) {
super(context, 0, objects);
}
public List<String> getList(){
return list;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View view = convertView;
if(view==null){
view = LayoutInflater.from(getContext()).inflate(R.layout.drag_grid_item, null);
}
try {
Log.v("item", "------"+getItem(position));
//根据文件名获取资源文件夹中的图片资源
Field f= (Field)R.drawable.class.getDeclaredField(getItem(position));
int i=f.getInt(R.drawable.class);
ImageView imageview= (ImageView)view.findViewById(R.id.drag_grid_item_image);
imageview.setImageResource(i);
} catch (SecurityException e) {
e.printStackTrace();
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalArgumentException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
return view;
}
}
}

2、DragGridView.java


代码如下:

package com.jay.draggridview;
import com.jay.draggridview.MainActivity.DragGridAdapter;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.PixelFormat;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.Toast;
public class DragGridView extends GridView{
//定义基本的成员变量
private ImageView dragImageView;
private int dragSrcPosition;
private int dragPosition;
//x,y坐标的计算
private int dragPointX;
private int dragPointY;
private int dragOffsetX;
private int dragOffsetY;
private WindowManager windowManager;
private WindowManager.LayoutParams windowParams;
private int scaledTouchSlop;
private int upScrollBounce;
private int downScrollBounce;

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

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if(ev.getAction()==MotionEvent.ACTION_DOWN){
int x = (int)ev.getX();
int y = (int)ev.getY();

dragSrcPosition = dragPosition = pointToPosition(x, y);
if(dragPosition==AdapterView.INVALID_POSITION){
return super.onInterceptTouchEvent(ev);
}

ViewGroup itemView = (ViewGroup) getChildAt(dragPosition-getFirstVisiblePosition());
dragPointX = x - itemView.getLeft();
dragPointY = y - itemView.getTop();
dragOffsetX = (int) (ev.getRawX() - x);
dragOffsetY = (int) (ev.getRawY() - y);

View dragger = itemView.findViewById(R.id.drag_grid_item_drag);
//如果选中拖动图标
if(dragger!=null&&dragPointX>dragger.getLeft()&&dragPointX<dragger.getRight()&&dragPointY>dragger.getTop()&&dragPointY<dragger.getBottom()+20){

upScrollBounce = Math.min(y-scaledTouchSlop, getHeight()/4);
downScrollBounce = Math.max(y+scaledTouchSlop, getHeight()*3/4);

itemView.setDrawingCacheEnabled(true);
Bitmap bm = Bitmap.createBitmap(itemView.getDrawingCache());
startDrag(bm, x, y);
}
return false;
}
return super.onInterceptTouchEvent(ev);
}

@Override
public boolean onTouchEvent(MotionEvent ev) {
if(dragImageView!=null&&dragPosition!=INVALID_POSITION){
int action = ev.getAction();
switch(action){
case MotionEvent.ACTION_UP:
int upX = (int)ev.getX();
int upY = (int)ev.getY();
stopDrag();
onDrop(upX,upY);
break;
case MotionEvent.ACTION_MOVE:
int moveX = (int)ev.getX();
int moveY = (int)ev.getY();
onDrag(moveX,moveY);
break;
default:break;
}
return true;
}
return super.onTouchEvent(ev);
}

public void startDrag(Bitmap bm, int x, int y){
stopDrag();

windowParams = new WindowManager.LayoutParams();
windowParams.gravity = Gravity.TOP|Gravity.LEFT;
windowParams.x = x - dragPointX + dragOffsetX;
windowParams.y = y - dragPointY + dragOffsetY;
windowParams.width = WindowManager.LayoutParams.WRAP_CONTENT;
windowParams.height = WindowManager.LayoutParams.WRAP_CONTENT;
windowParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE
| WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE
| WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
| WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN;
windowParams.format = PixelFormat.TRANSLUCENT;
windowParams.windowAnimations = 0;

ImageView imageView = new ImageView(getContext());
imageView.setImageBitmap(bm);
windowManager = (WindowManager)getContext().getSystemService("window");
windowManager.addView(imageView, windowParams);
dragImageView = imageView;
}

public void onDrag(int x, int y){
if(dragImageView!=null){
windowParams.alpha = 0.8f;
windowParams.x = x - dragPointX + dragOffsetX;
windowParams.y = y - dragPointY + dragOffsetY;
windowManager.updateViewLayout(dragImageView, windowParams);
}

int tempPosition = pointToPosition(x, y);
if(tempPosition!=INVALID_POSITION){
dragPosition = tempPosition;
}

//滚动
if(y<upScrollBounce||y>downScrollBounce){
//使用setSelection来实现滚动
setSelection(dragPosition);
}
}

public void onDrop(int x, int y){
//为了避免滑动到分割线的时候,返回-1的问题
int tempPosition = pointToPosition(x, y);
if(tempPosition!=INVALID_POSITION){
dragPosition = tempPosition;
}
//超出边界处理
if(y<getChildAt(0).getTop()){
//超出上边界
dragPosition = 0;
}else if(y>getChildAt(getChildCount()-1).getBottom()||(y>getChildAt(getChildCount()-1).getTop()&&x>getChildAt(getChildCount()-1).getRight())){
//超出下边界
dragPosition = getAdapter().getCount()-1;
}
//数据交换
if(dragPosition!=dragSrcPosition&&dragPosition>-1&&dragPosition<getAdapter().getCount()){
DragGridAdapter adapter = (DragGridAdapter)getAdapter();
String dragItem = adapter.getItem(dragSrcPosition);
adapter.remove(dragItem);
adapter.insert(dragItem, dragPosition);
Toast.makeText(getContext(), adapter.getList().toString(), Toast.LENGTH_SHORT).show();
}
}

/***
* 停止拖动,去掉拖动时候的影像
*/
public void stopDrag(){
if(dragImageView != null){
windowManager.removeView(dragImageView);
dragImageView = null;
}
}
}

3、activity_main.xml


代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:padding="10dip"
>
<com.jay.draggridview.DragGridView
android:id="@+id/drag_grid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:cacheColorHint="#00000000"
android:numColumns="3"
android:stretchMode="columnWidth"
android:verticalSpacing="5dip"
android:horizontalSpacing="20dip"
android:background="#ffffff"/>
</LinearLayout>

4、drag_grid_item.xml


代码如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dip"
android:paddingRight="5dip">
<ImageView android:id="@+id/drag_grid_item_image"
android:layout_margin="5dip"
android:layout_alignParentTop="true"
android:layout_width="fill_parent"
android:layout_height="60dip"/>
<ImageView android:id="@+id/drag_grid_item_drag"
android:src="@drawable/p32_24_1"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>

源码下载

(0)

相关推荐

  • C#自定义DataGridViewColumn显示TreeView

    我们可以自定义DataGridView的DataGridViewColumn来实现自定义的列,下面介绍一下如何通过扩展DataGridViewColumn来实现一个TreeViewColumn 1.TreeViewColumn类 TreeViewColumn继承自DataGridViewColumn,为了动态给TreeViewColumn传入一个TreeView,这里暴露出一个公共属性_root,可以绑定一个初始化的TreeView. 另外需要重写DataGridCell类型的CellTempl

  • asp.net中的GridView分页问题

    本文实例讲述了asp.net中的GridView分页问题.分享给大家供大家参考.具体分析如下: 在ASP.NET中,经常会使用到GridView的分页,一般情况下,若使用Visual Studio自带的数据源控件,不会出现什么问题. 但是如果自己用代码设置GridView的数据源,GridView中第一页显示正常,这时如果点击第二页,则经常会出现如下错误 提示:GridView"GridView_test"激发了未处理的事件"PageIndexChanging".

  • GridView自定义分页实例详解(附demo源码下载)

    本文实例讲述了GridView自定义分页实现方法.分享给大家供大家参考,具体如下: CSS样式 首先把CSS样式代码粘贴过来: .gv { border: 1px solid #D7D7D7; font-size:12px; text-align:center; } .gvHeader { color: #3F6293; background-color: #F7F7F7; height: 24px; line-height: 24px; text-align: center; font-wei

  • asp.net Gridview分页保存选项

    复制代码 代码如下: #region //'Revision: 1.00 Created Date: 2013/08/02 Created ID: Una [#1300071]增加多選框        /// <summary>        /// Session獲取多選框值        /// </summary>        private void RememberOldValues()        {            ArrayList categoryIDL

  • GridView自定义删除操作的具体方法

    首先,我们前端的代码如下: 复制代码 代码如下: <asp:GridView ID="gridViewDxjk" CssClass="gridview" runat="server" AllowPaging="True"                   DataKeyNames="P_ID" AutoGenerateColumns="False"                

  • GridView分页的实现以及自定义分页样式功能实例

    GridView分页的实现 复制代码 代码如下: 要在GridView中加入 //实现分页 AllowPaging="true" //一页数据10行 PageSize="10" // 分页时触发的事件 OnPageIndexChanging="gvwDesignationName_PageIndexChanging" 在服务器事件里 复制代码 代码如下: protectedvoid gvwDesignationName_PageIndexChan

  • asp.net gridview自定义value值的代码

    model里: 复制代码 代码如下: public function item($items,$name){ $returnValue=''; foreach($items as $n=>$item){ if(isset($this->$name)){ if($n==$this->$name){ $returnValue=$item; } } } return $returnValue; } view里: 复制代码 代码如下: array('name'=>'isPass','val

  • GridView自定义分页的四种存储过程

    1. 为什么不使用GridView的默认分页功能 首先要说说为什么不用GridView的默认的分页功能,GridView控件并非真正知道如何获得一个新页面,它只是请求绑定的数据源控件返回适合规定页面的行,分页最终是由数据源控件完成.当我们使用SqlDataSource或使用以上的代码处理分页时.每次这个页面被请求或者回发时,所有和这个SELECT语句匹配的记录都被读取并存储到一个内部的DataSet中,但只显示适合当前页面大小的记录数.也就是说有可能使用Select语句返回1000000条记录,

  • asp.net gridview分页:第一页 下一页 1 2 3 4 上一页 最末页

    效果图: 功能简介:可使用上下键选中行,选中后点击修改,textbox获得gridview中的代码的数据.对你有帮助的话,请记得要点击"好文要顶"哦!!!不懂的,请留言.废话不多说了,贴码如下: <head runat="server"> <title>GridView分頁</title> <script type="text/javascript"> var currentRowId = 0; v

  • 基于GridView和ActivityGroup实现的TAB分页(附源码)

    分页大家都会用Android的TabHost和TabActivity的组合,今天我这里实现的是GridView和ActivityGroup实现的分页,这里需要将Activity转换成Window,然后再换成成View添加到容器中,效果如下  1.布局文件底部放一个GridView,然后一个LinearLayout容器在GridView之上,LinearLayout用于装载Activity的,这里布局位置错误,运行程序会抛异常,修改在下面 复制代码 代码如下: <RelativeLayout xm

  • yii2.0之GridView自定义按钮和链接用法

    本文实例讲述了yii2.0之GridView自定义按钮和链接用法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <?= GridView::widget([         'dataProvider' => $dataProvider,         //'filterModel' => $searchModel,         'columns' => [             ['class' => 'yii\grid\SerialColumn'

  • Android入门之ActivityGroup+GridView实现Tab分页标签的方法

    在Android程序中很多客户端软件和浏览器软件都喜欢用Tab分页标签来搭建界面框架.读者也许会马上想到使用TabHost 与 TabActivity的组合,其实最常用的不是它们,而是由GridView与ActivityGroup的组合.每当用户在GridView选中一项,ActivityGroup就把该项对应的Activity的Window作为View添加到ActivityGroup所指定的容器(LinearLayout)中. 先来贴出本例运行的效果图如下: ImageAdapter是本实例的

随机推荐