http://blog.csdn.net/daditao/article/details/27668489

http://blog.csdn.net/daditao/article/details/27668489
http://blog.csdn.net/daditao/article/details/27668489
http://blog.csdn.net/daditao/article/details/27668489
http://blog.csdn.net/daditao/article/details/27668489

Android 高仿频道管理----网易、今日头条、腾讯视频（可以拖动的GridView）附源码DEMO

分类：android 2014-05-30 13:28 46人阅读评论(0) 收藏举报

目录(?)[+]

http://blog.csdn.net/vipzjyno1/article/details/25005851

距离上次发布（android高仿系列）今日头条 --新闻阅读器（二）

相关的内容已经半个月了，最近利用空闲时间，把今日头条客户端完善了下。完善的功能一个一个全部实现后，就放整个源码。开发的进度就是按照一个一个功能的思路走的，所以开发一个小的功能，如果有用，就写一个专门的博客以便有人用到独立的功能可以方便使用。

这次实现的功能是很多新闻阅读器（网易，今日头条，360新闻等）以及腾讯视频等里面都会出现的频道管理功能。

下面先上这次实现功能的效果图：(注：这个效果图没有拖拽的时候移动动画，DEMO里面有，可以下载看看)

一、开发心里历程

刚开始接触这个的时候，不知道要如何实现，去网上翻了一大堆资料，懂了个大概，就是目前可以找到的都是拖拽的时候，不带移动动画的，和线上的客户端交互效果相差甚远，在反反复复的尝试查看相关东西，大致的做了出来，目前在模拟器上似乎有一点小BUG，真机测试没有问题，就先放上来，如果发现问题在修改优化。代码反面，没有好好的修改调整，可能会有点乱，请见谅哈。

二、开发前的准备

1.了解重写View的相关知识，并且知道GridView的一些内部方法，如：怎么通过触摸的坐标获取对应的position等（这里我采用的是继承GridView控件）

2.了解屏幕触摸动作传递原理这里我以前转载的一篇或许会有帮助：Android事件分发机制完全解析，带你从源码的角度彻底理解(全)

3.了解位移动画Animation，本DEMO中主要用到：TranslateAnimation 平移动画

4.了解WindowManager的窗口机制，这里的item拖拽等都要设计到这个。

5.了解SQLiteDatabase 以及SQLiteOpenHelper等数据库操作相关的类，本DEMO中主要用到数据库进行存储频道信息，如果你要用文档进行存储读取也可以。

三、开发思路

1. 获取数据库中频道的列表，如果为空，赋予默认列表，并存入数据库，之后通过对应的适配器赋给对应的GridView

2. 2个GridView--（1.DragGrid 2. OtherGridView）

DragGrid 用于显示我的频道，带有长按拖拽效果

OtherGridView用于显示更多频道，不带推拽效果

注：由于屏幕大小不一定，外层使用ScrollView，所以2者都要重写计算高度

3. 点击2个GridView的时候，根据点击的Item对应的position，获取position对应的view，进行创建一层移动的动画层

起始位置：点击的positiongetLocationInWindow（）获取。终点位置：另一个GridView的最后个ITEM 的position+ 1的位置。

并赋予移动动画，等动画结束后对2者对应的频道列表进行数据的remove和add操作。

4. 设置点击和拖动的限制条件，如推荐这个ITEM是不允许用户操作的。

5. 拖动的DragGrid的操作：

（1）长按获取长按的ITEM的position -- dragPosition以及对应的view ，手指触摸屏幕的时候，调用onInterceptTouchEvent来获取MotionEvent.ACTION_DOWN事件，获取对应的数据。由于这里是继承了GridView，所以长按时间可以通过setOnItemLongClickListener监听来执行，或则你也可以通过计算点击时间来监听是否长按。

（2）通过onTouchEvent(MotionEvent ev)来监听手指的移动和抬起动作。当它移动到其它的item下面，并且下方的item对应的position 不等于dragPosition，进行数据交换，并且2者之间的所有item进行移动动画，动画结束后，数据更替刷新界面。

（3）抬起手后，清除掉拖动时候创建的view，让GridView中的数据显示。

6. 退出时候，将改变后的频道列表存入数据库。

四、流程图

下面是大体的流程图：

五、核心代码

点击进行添加删除： [java] view plain copy

/**GRIDVIEW对应的ITEM点击监听接口*/
@Override
publicvoidonItemClick(AdapterView<?>parent,finalViewview,finalintposition,longid){
//如果点击的时候，之前动画还没结束，那么就让点击事件无效
if(isMove){
return;
}
switch(parent.getId()){
caseR.id.userGridView:
//position为0，1的不可以进行任何操作
if(position!=0&&position!=1){
finalImageViewmoveImageView=getView(view);
if(moveImageView!=null){
TextViewnewTextView=(TextView)view.findViewById(R.id.text_item);
finalint[]startLocation=newint[2];
newTextView.getLocationInWindow(startLocation);
finalChannelItemchannel=((DragAdapter)parent.getAdapter()).getItem(position);//获取点击的频道内容
otherAdapter.setVisible(false);
//添加到最后一个
otherAdapter.addItem(channel);
newHandler().postDelayed(newRunnable(){
publicvoidrun(){
try{
int[]endLocation=newint[2];
//获取终点的坐标
otherGridView.getChildAt(otherGridView.getLastVisiblePosition()).getLocationInWindow(endLocation);
MoveAnim(moveImageView,startLocation,endLocation,channel,userGridView);
userAdapter.setRemove(position);
}catch(ExceptionlocalException){
}
}
},50L);
}
}
break;
caseR.id.otherGridView:
finalImageViewmoveImageView=getView(view);
if(moveImageView!=null){
TextViewnewTextView=(TextView)view.findViewById(R.id.text_item);
finalint[]startLocation=newint[2];
newTextView.getLocationInWindow(startLocation);
finalChannelItemchannel=((OtherAdapter)parent.getAdapter()).getItem(position);
userAdapter.setVisible(false);
//添加到最后一个
userAdapter.addItem(channel);
newHandler().postDelayed(newRunnable(){
publicvoidrun(){
try{
int[]endLocation=newint[2];
//获取终点的坐标
userGridView.getChildAt(userGridView.getLastVisiblePosition()).getLocationInWindow(endLocation);
MoveAnim(moveImageView,startLocation,endLocation,channel,otherGridView);
otherAdapter.setRemove(position);
}catch(ExceptionlocalException){
}
}
},50L);
}
break;
default:
break;
}
}

移动动画： [java] view plain copy

<spanstyle="font-size:14px;">privatevoidMoveAnim(ViewmoveView,int[]startLocation,int[]endLocation,finalChannelItemmoveChannel,
finalGridViewclickGridView){
int[]initLocation=newint[2];
//获取传递过来的VIEW的坐标
moveView.getLocationInWindow(initLocation);
//得到要移动的VIEW,并放入对应的容器中
finalViewGroupmoveViewGroup=getMoveViewGroup();
finalViewmMoveView=getMoveView(moveViewGroup,moveView,initLocation);
//创建移动动画
TranslateAnimationmoveAnimation=newTranslateAnimation(
startLocation[0],endLocation[0],startLocation[1],
endLocation[1]);
moveAnimation.setDuration(300L);//动画时间
//动画配置
AnimationSetmoveAnimationSet=newAnimationSet(true);
moveAnimationSet.setFillAfter(false);//动画效果执行完毕后，View对象不保留在终止的位置
moveAnimationSet.addAnimation(moveAnimation);
mMoveView.startAnimation(moveAnimationSet);
moveAnimationSet.setAnimationListener(newAnimationListener(){
@Override
publicvoidonAnimationStart(Animationanimation){
isMove=true;
}
@Override
publicvoidonAnimationRepeat(Animationanimation){
}
@Override
publicvoidonAnimationEnd(Animationanimation){
moveViewGroup.removeView(mMoveView);
//instanceof方法判断2边实例是不是一样，判断点击的是DragGrid还是OtherGridView
if(clickGridViewinstanceofDragGrid){
otherAdapter.setVisible(true);
otherAdapter.notifyDataSetChanged();
userAdapter.remove();
}else{
userAdapter.setVisible(true);
userAdapter.notifyDataSetChanged();
otherAdapter.remove();
}
isMove=false;
}
});
}</span>

可拖拽的DragGrid代码：
[java] view plain copy

publicclassDragGridextendsGridView{
/**点击时候的X位置*/
publicintdownX;
/**点击时候的Y位置*/
publicintdownY;
/**点击时候对应整个界面的X位置*/
publicintwindowX;
/**点击时候对应整个界面的Y位置*/
publicintwindowY;
/**屏幕上的X*/
privateintwin_view_x;
/**屏幕上的Y*/
privateintwin_view_y;
/**拖动的里x的距离*/
intdragOffsetX;
/**拖动的里Y的距离*/
intdragOffsetY;
/**长按时候对应postion*/
publicintdragPosition;
/**Up后对应的ITEM的Position*/
privateintdropPosition;
/**开始拖动的ITEM的Position*/
privateintstartPosition;
/**item高*/
privateintitemHeight;
/**item宽*/
privateintitemWidth;
/**拖动的时候对应ITEM的VIEW*/
privateViewdragImageView=null;
/**长按的时候ITEM的VIEW*/
privateViewGroupdragItemView=null;
/**WindowManager管理器*/
privateWindowManagerwindowManager=null;
/***/
privateWindowManager.LayoutParamswindowParams=null;
/**item总量*/
privateintitemTotalCount;
/**一行的ITEM数量*/
privateintnColumns=4;
/**行数*/
privateintnRows;
/**剩余部分*/
privateintRemainder;
/**是否在移动*/
privatebooleanisMoving=false;
/***/
privateintholdPosition;
/**拖动的时候放大的倍数*/
privatedoubledragScale=1.2D;
/**震动器*/
privateVibratormVibrator;
/**每个ITEM之间的水平间距*/
privateintmHorizontalSpacing=15;
/**每个ITEM之间的竖直间距*/
privateintmVerticalSpacing=15;
/*移动时候最后个动画的ID*/
privateStringLastAnimationID;
publicDragGrid(Contextcontext){
super(context);
init(context);
}
publicDragGrid(Contextcontext,AttributeSetattrs,intdefStyle){
super(context,attrs,defStyle);
init(context);
}
publicDragGrid(Contextcontext,AttributeSetattrs){
super(context,attrs);
init(context);
}
publicvoidinit(Contextcontext){
mVibrator=(Vibrator)context
.getSystemService(Context.VIBRATOR_SERVICE);
//将布局文件中设置的间距dip转为px
mHorizontalSpacing=DataTools.dip2px(context,mHorizontalSpacing);
}
@Override
publicbooleanonInterceptTouchEvent(MotionEventev){
//TODOAuto-generatedmethodstub
if(ev.getAction()==MotionEvent.ACTION_DOWN){
downX=(int)ev.getX();
downY=(int)ev.getY();
windowX=(int)ev.getX();
windowY=(int)ev.getY();
setOnItemClickListener(ev);
}
returnsuper.onInterceptTouchEvent(ev);
}
@Override
publicbooleanonTouchEvent(MotionEventev){
//TODOAuto-generatedmethodstub
booleanbool=true;
if(dragImageView!=null
&&dragPosition!=AdapterView.INVALID_POSITION){
//移动时候的对应x,y位置
bool=super.onTouchEvent(ev);
intx=(int)ev.getX();
inty=(int)ev.getY();
switch(ev.getAction()){
caseMotionEvent.ACTION_DOWN:
downX=(int)ev.getX();
windowX=(int)ev.getX();
downY=(int)ev.getY();
windowY=(int)ev.getY();
break;
caseMotionEvent.ACTION_MOVE:
onDrag(x,y,(int)ev.getRawX(),(int)ev.getRawY());
if(!isMoving){
OnMove(x,y);
}
if(pointToPosition(x,y)!=AdapterView.INVALID_POSITION){
break;
}
break;
caseMotionEvent.ACTION_UP:
stopDrag();
onDrop(x,y);
requestDisallowInterceptTouchEvent(false);
break;
default:
break;
}
}
returnsuper.onTouchEvent(ev);
}
/**在拖动的情况*/
privatevoidonDrag(intx,inty,intrawx,intrawy){
if(dragImageView!=null){
windowParams.alpha=0.6f;
windowParams.x=rawx-win_view_x;
windowParams.y=rawy-win_view_y;
windowManager.updateViewLayout(dragImageView,windowParams);
}
}
/**在松手下放的情况*/
privatevoidonDrop(intx,inty){
//根据拖动到的x,y坐标获取拖动位置下方的ITEM对应的POSTION
inttempPostion=pointToPosition(x,y);
dropPosition=tempPostion;
DragAdaptermDragAdapter=(DragAdapter)getAdapter();
//显示刚拖动的ITEM
mDragAdapter.setShowDropItem(true);
//刷新适配器，让对应的ITEM显示
mDragAdapter.notifyDataSetChanged();
}
/**
*长按点击监听
*@paramev
*/
publicvoidsetOnItemClickListener(finalMotionEventev){
setOnItemLongClickListener(newOnItemLongClickListener(){
@Override
publicbooleanonItemLongClick(AdapterView<?>parent,Viewview,
intposition,longid){
intx=(int)ev.getX();//长安事件的X位置
inty=(int)ev.getY();//长安事件的y位置
startPosition=position;//第一次点击的postion
dragPosition=position;
if(startPosition<=1){
returnfalse;
}
ViewGroupdragViewGroup=(ViewGroup)getChildAt(dragPosition
-getFirstVisiblePosition());
TextViewdragTextView=(TextView)dragViewGroup
.findViewById(R.id.text_item);
dragTextView.setSelected(true);
dragTextView.setEnabled(false);
itemHeight=dragViewGroup.getHeight();
itemWidth=dragViewGroup.getWidth();
itemTotalCount=DragGrid.this.getCount();
introw=itemTotalCount/nColumns;//算出行数
Remainder=(itemTotalCount%nColumns);//算出最后一行多余的数量
if(Remainder!=0){
nRows=row+1;
}else{
nRows=row;
}
//如果特殊的这个不等于拖动的那个,并且不等于-1
if(dragPosition!=AdapterView.INVALID_POSITION){
//释放的资源使用的绘图缓存。如果你调用buildDrawingCache()手动没有调用setDrawingCacheEnabled(真正的),你应该清理缓存使用这种方法。
win_view_x=windowX-dragViewGroup.getLeft();//VIEW相对自己的X，半斤
win_view_y=windowY-dragViewGroup.getTop();//VIEW相对自己的y，半斤
dragOffsetX=(int)(ev.getRawX()-x);//手指在屏幕的上X位置-手指在控件中的位置就是距离最左边的距离
dragOffsetY=(int)(ev.getRawY()-y);//手指在屏幕的上y位置-手指在控件中的位置就是距离最上边的距离
dragItemView=dragViewGroup;
dragViewGroup.destroyDrawingCache();
dragViewGroup.setDrawingCacheEnabled(true);
BitmapdragBitmap=Bitmap.createBitmap(dragViewGroup
.getDrawingCache());
mVibrator.vibrate(50);//设置震动时间
startDrag(dragBitmap,(int)ev.getRawX(),
(int)ev.getRawY());
hideDropItem();
dragViewGroup.setVisibility(View.INVISIBLE);
isMoving=false;
requestDisallowInterceptTouchEvent(true);
returntrue;
}
returnfalse;
}
});
}
publicvoidstartDrag(BitmapdragBitmap,intx,inty){
stopDrag();
windowParams=newWindowManager.LayoutParams();//获取WINDOW界面的
//Gravity.TOP|Gravity.LEFT;这个必须加
windowParams.gravity=Gravity.TOP|Gravity.LEFT;
//得到preview左上角相对于屏幕的坐标
windowParams.x=x-win_view_x;
windowParams.y=y-win_view_y;
//设置拖拽item的宽和高
windowParams.width=(int)(dragScale*dragBitmap.getWidth());//放大dragScale倍，可以设置拖动后的倍数
windowParams.height=(int)(dragScale*dragBitmap.getHeight());//放大dragScale倍，可以设置拖动后的倍数
this.windowParams.flags=WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE
|WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE
|WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
|WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN;
this.windowParams.format=PixelFormat.TRANSLUCENT;
this.windowParams.windowAnimations=0;
ImageViewiv=newImageView(getContext());
iv.setImageBitmap(dragBitmap);
windowManager=(WindowManager)getContext().getSystemService(
Context.WINDOW_SERVICE);//"window"
windowManager.addView(iv,windowParams);
dragImageView=iv;
}
/**停止拖动，释放并初始化*/
privatevoidstopDrag(){
if(dragImageView!=null){
windowManager.removeView(dragImageView);
dragImageView=null;
}
}
/**在ScrollView内，所以要进行计算高度*/
@Override
publicvoidonMeasure(intwidthMeasureSpec,intheightMeasureSpec){
intexpandSpec=MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE>>2,
MeasureSpec.AT_MOST);
super.onMeasure(widthMeasureSpec,expandSpec);
}
/**隐藏放下的ITEM*/
privatevoidhideDropItem(){
((DragAdapter)getAdapter()).setShowDropItem(false);
}
/**获取移动动画*/
publicAnimationgetMoveAnimation(floattoXValue,floattoYValue){
TranslateAnimationmTranslateAnimation=newTranslateAnimation(
Animation.RELATIVE_TO_SELF,0.0F,Animation.RELATIVE_TO_SELF,
toXValue,Animation.RELATIVE_TO_SELF,0.0F,
Animation.RELATIVE_TO_SELF,toYValue);//当前位置移动到指定位置
mTranslateAnimation.setFillAfter(true);//设置一个动画效果执行完毕后，View对象保留在终止的位置。
mTranslateAnimation.setDuration(300L);
returnmTranslateAnimation;
}
/**移动的时候触发*/
publicvoidOnMove(intx,inty){
//拖动的VIEW下方的POSTION
intdPosition=pointToPosition(x,y);
//判断下方的POSTION是否是最开始2个不能拖动的
if(dPosition>1){
if((dPosition==-1)||(dPosition==dragPosition)){
return;
}
dropPosition=dPosition;
if(dragPosition!=startPosition){
dragPosition=startPosition;
}
intmovecount;
//拖动的=开始拖的，并且拖动的不等于放下的
if((dragPosition==startPosition)
||(dragPosition!=dropPosition)){
//移需要移动的动ITEM数量
movecount=dropPosition-dragPosition;
}else{
//移需要移动的动ITEM数量为0
movecount=0;
}
if(movecount==0){
return;
}
intmovecount_abs=Math.abs(movecount);
if(dPosition!=dragPosition){
//dragGroup设置为不可见
ViewGroupdragGroup=(ViewGroup)getChildAt(dragPosition);
dragGroup.setVisibility(View.INVISIBLE);
floatto_x=1;//当前下方positon
floatto_y;//当前下方右边positon
//x_vlaue移动的距离百分比（相对于自己长度的百分比）
floatx_vlaue=((float)mHorizontalSpacing/(float)itemWidth)+1.0f;
//y_vlaue移动的距离百分比（相对于自己宽度的百分比）
floaty_vlaue=((float)mVerticalSpacing/(float)itemHeight)+1.0f;
Log.d("x_vlaue","x_vlaue="+x_vlaue);
for(inti=0;i<movecount_abs;i++){
to_x=x_vlaue;
to_y=y_vlaue;
//像左
if(movecount>0){
//判断是不是同一行的
holdPosition=dragPosition+i+1;
if(dragPosition/nColumns==holdPosition/nColumns){
to_x=-x_vlaue;
to_y=0;
}elseif(holdPosition%4==0){
to_x=3*x_vlaue;
to_y=-y_vlaue;
}else{
to_x=-x_vlaue;
to_y=0;
}
}else{
//向右,下移到上，右移到左
holdPosition=dragPosition-i-1;
if(dragPosition/nColumns==holdPosition/nColumns){
to_x=x_vlaue;
to_y=0;
}elseif((holdPosition+1)%4==0){
to_x=-3*x_vlaue;
to_y=y_vlaue;
}else{
to_x=x_vlaue;
to_y=0;
}
}
ViewGroupmoveViewGroup=(ViewGroup)getChildAt(holdPosition);
AnimationmoveAnimation=getMoveAnimation(to_x,to_y);
moveViewGroup.startAnimation(moveAnimation);
//如果是最后一个移动的，那么设置他的最后个动画ID为LastAnimationID
if(holdPosition==dropPosition){
LastAnimationID=moveAnimation.toString();
}
moveAnimation.setAnimationListener(newAnimationListener(){
@Override
publicvoidonAnimationStart(Animationanimation){
//TODOAuto-generatedmethodstub
isMoving=true;
}
@Override
publicvoidonAnimationRepeat(Animationanimation){
//TODOAuto-generatedmethodstub
}
@Override
publicvoidonAnimationEnd(Animationanimation){
//TODOAuto-generatedmethodstub
//如果为最后个动画结束，那执行下面的方法
if(animation.toString().equalsIgnoreCase(
LastAnimationID)){
DragAdaptermDragAdapter=(DragAdapter)getAdapter();
mDragAdapter.exchange(startPosition,
dropPosition);
startPosition=dropPosition;
dragPosition=dropPosition;
isMoving=false;
}
}
});
}
}
}
}
}

数据库SQLHelper文件 [java] view plain copy

publicclassSQLHelperextendsSQLiteOpenHelper{
publicstaticfinalStringDB_NAME="database.db";//数据库名称
publicstaticfinalintVERSION=1;
publicstaticfinalStringTABLE_CHANNEL="channel";//数据表
publicstaticfinalStringID="id";//
publicstaticfinalStringNAME="name";
publicstaticfinalStringORDERID="orderId";
publicstaticfinalStringSELECTED="selected";
privateContextcontext;
publicSQLHelper(Contextcontext){
super(context,DB_NAME,null,VERSION);
this.context=context;
}
publicContextgetContext(){
returncontext;
}
@Override
publicvoidonCreate(SQLiteDatabasedb){
//TODO创建数据库后，对数据库的操作
Stringsql="createtableifnotexists"+TABLE_CHANNEL+
"(_idINTEGERPRIMARYKEYAUTOINCREMENT,"+
ID+"INTEGER,"+
NAME+"TEXT,"+
ORDERID+"INTEGER,"+
SELECTED+"SELECTED)";
db.execSQL(sql);
}
@Override
publicvoidonUpgrade(SQLiteDatabasedb,intoldVersion,intnewVersion){
//TODO更改数据库版本的操作
onCreate(db);
}
}

注：本DEMO中，加入了长按震动，所以在权限里面记得加上“ [java] view plain copy

<uses-permissionandroid:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>
<uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permissionandroid:name="android.permission.VIBRATE"/>

六、源码下载

源码DEMO下载地址如下：下载地址

上一篇使用ViewPager实现高仿launcher拖动效果
下一篇Android桌面悬浮窗效果实现，仿360手机卫士悬浮窗效果

http://blog.csdn.net/daditao/article/details/27668489 http://blog.csdn.net/daditao/article/details/27668489 http://blog.csdn.net/daditao/article/details/27668489

Android(安卓)高仿频道管理----网易、今日头条、腾讯视频（可以拖动的GridView）附源码DEMO

Android 高仿频道管理----网易、今日头条、腾讯视频（可以拖动的GridView）附源码DEMO

一、开发心里历程

二、开发前的准备

三、开发思路

四、流程图

五、核心代码

六、源码下载

更多相关文章

随机推荐

Android(安卓)高仿 频道管理----网易、今日头条、腾讯视频 （可以拖动的GridView）附源码DEMO

Android 高仿 频道管理----网易、今日头条、腾讯视频 （可以拖动的GridView）附源码DEMO

一、开发心里历程

二、开发前的准备

三、开发思路

四、流程图

五、核心代码

六、源码下载

更多相关文章

随机推荐

Android(安卓)高仿频道管理----网易、今日头条、腾讯视频（可以拖动的GridView）附源码DEMO

Android 高仿频道管理----网易、今日头条、腾讯视频（可以拖动的GridView）附源码DEMO