距离上次公布(android高仿系列)今日头条 --新闻阅读器 (二)
相关的内容已经半个月了。近期利用空暇时间,把今日头条client完好了下。完好的功能一个一个所有实现后。就放整个源代码。开发的进度就是依照一个一个功能的思路走的,所以开发一个小的功能,假设实用,就写一个专门的博客以便有人用到独立的功能能够方便使用。
这次实现的功能是非常多新闻阅读器(网易,今日头条。360新闻等)以及腾讯视频等里面都会出现的频道管理功能。
以下先上这次实现功能的效果图:(注:这个效果图没有拖拽的时候移动动画,DEMO里面有,能够下载看看)
一、开发心里历程
刚開始接触这个的时候。不知道要怎样实现,去网上翻了一大堆资料,懂了个大概,就是眼下能够找到的都是拖拽的时候,不带移动动画的。和线上的client交互效果相差甚远。在反重复复的尝试查看相关东西,大致的做了出来,眼下在模拟器上似乎有一点小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. 退出时候,将改变后的频道列表存入数据库。
四、流程图
以下是大体的流程图:
五、核心代码
/** GRIDVIEW相应的ITEM点击监听接口 */
@Override
public void onItemClick(AdapterView<?> parent, final View view, final int position,long id) {
//假设点击的时候。之前动画还没结束,那么就让点击事件无效
if(isMove){
return;
}
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 ChannelItem channel = ((DragAdapter) parent.getAdapter()).getItem(position);//获取点击的频道内容
otherAdapter.setVisible(false);
//加入到最后一个
otherAdapter.addItem(channel);
new Handler().postDelayed(new Runnable() {
public void run() {
try {
int[] endLocation = new int[2];
//获取终点的坐标
otherGridView.getChildAt(otherGridView.getLastVisiblePosition()).getLocationInWindow(endLocation);
MoveAnim(moveImageView, startLocation , endLocation, channel,userGridView);
userAdapter.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 ChannelItem channel = ((OtherAdapter) parent.getAdapter()).getItem(position);
userAdapter.setVisible(false);
//加入到最后一个
userAdapter.addItem(channel);
new Handler().postDelayed(new Runnable() {
public void run() {
try {
int[] endLocation = new int[2];
//获取终点的坐标
userGridView.getChildAt(userGridView.getLastVisiblePosition()).getLocationInWindow(endLocation);
MoveAnim(moveImageView, startLocation , endLocation, channel,otherGridView);
otherAdapter.setRemove(position);
} catch (Exception localException) {
}
}
}, 50L);
}
break;
default:
break;
}
}
private void MoveAnim(View moveView, int[] startLocation,int[] endLocation, final ChannelItem moveChannel,
final GridView clickGridView) {
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 AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
isMove = true;
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
moveViewGroup.removeView(mMoveView);
// instanceof 方法推断2边实例是不是一样。推断点击的是DragGrid还是OtherGridView
if (clickGridView instanceof DragGrid) {
otherAdapter.setVisible(true);
otherAdapter.notifyDataSetChanged();
userAdapter.remove();
}else{
userAdapter.setVisible(true);
userAdapter.notifyDataSetChanged();
otherAdapter.remove();
}
isMove = false;
}
});
}
可拖拽的DragGrid代码:
public class DragGrid extends GridView {
/** 点击时候的X位置 */
public int downX;
/** 点击时候的Y位置 */
public int downY;
/** 点击时候相应整个界面的X位置 */
public int windowX;
/** 点击时候相应整个界面的Y位置 */
public int windowY;
/** 屏幕上的X */
private int win_view_x;
/** 屏幕上的Y */
private int win_view_y;
/** 拖动的里x的距离 */
int dragOffsetX;
/** 拖动的里Y的距离 */
int dragOffsetY;
/** 长按时候相应postion */
public int dragPosition;
/** Up后相应的ITEM的Position */
private int dropPosition;
/** 開始拖动的ITEM的Position */
private int startPosition;
/** item高 */
private int itemHeight;
/** item宽 */
private int itemWidth;
/** 拖动的时候相应ITEM的VIEW */
private View dragImageView = null;
/** 长按的时候ITEM的VIEW */
private ViewGroup dragItemView = null;
/** WindowManager管理器 */
private WindowManager windowManager = null;
/** */
private WindowManager.LayoutParams windowParams = null;
/** item总量 */
private int itemTotalCount;
/** 一行的ITEM数量 */
private int nColumns = 4;
/** 行数 */
private int nRows;
/** 剩余部分 */
private int Remainder;
/** 是否在移动 */
private boolean isMoving = false;
/** */
private int holdPosition;
/** 拖动的时候放大的倍数 */
private double dragScale = 1.2D;
/** 震动器 */
private Vibrator mVibrator;
/** 每一个ITEM之间的水平间距 */
private int mHorizontalSpacing = 15;
/** 每一个ITEM之间的竖直间距 */
private int mVerticalSpacing = 15;
/* 移动时候最后个动画的ID */
private String LastAnimationID;
public DragGrid(Context context) {
super(context);
init(context);
}
public DragGrid(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
public DragGrid(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public void init(Context context) {
mVibrator = (Vibrator) context
.getSystemService(Context.VIBRATOR_SERVICE);
// 将布局文件里设置的间距dip转为px
mHorizontalSpacing = DataTools.dip2px(context, mHorizontalSpacing);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
// TODO Auto-generated method stub
if (ev.getAction() == MotionEvent.ACTION_DOWN) {
downX = (int) ev.getX();
downY = (int) ev.getY();
windowX = (int) ev.getX();
windowY = (int) ev.getY();
setOnItemClickListener(ev);
}
return super.onInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
// TODO Auto-generated method stub
boolean bool = true;
if (dragImageView != null
&& dragPosition != AdapterView.INVALID_POSITION) {
// 移动时候的相应x,y位置
bool = super.onTouchEvent(ev);
int x = (int) ev.getX();
int y = (int) ev.getY();
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = (int) ev.getX();
windowX = (int) ev.getX();
downY = (int) ev.getY();
windowY = (int) ev.getY();
break;
case MotionEvent.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;
case MotionEvent.ACTION_UP:
stopDrag();
onDrop(x, y);
requestDisallowInterceptTouchEvent(false);
break;
default:
break;
}
}
return super.onTouchEvent(ev);
}
/** 在拖动的情况 */
private void onDrag(int x, int y, int rawx, int rawy) {
if (dragImageView != null) {
windowParams.alpha = 0.6f;
windowParams.x = rawx - win_view_x;
windowParams.y = rawy - win_view_y;
windowManager.updateViewLayout(dragImageView, windowParams);
}
}
/** 在松手下放的情况 */
private void onDrop(int x, int y) {
// 依据拖动到的x,y坐标获取拖动位置下方的ITEM相应的POSTION
int tempPostion = pointToPosition(x, y);
dropPosition = tempPostion;
DragAdapter mDragAdapter = (DragAdapter) getAdapter();
// 显示刚拖动的ITEM
mDragAdapter.setShowDropItem(true);
// 刷新适配器,让相应的ITEM显示
mDragAdapter.notifyDataSetChanged();
}
/**
* 长按点击监听
* @param ev
*/
public void setOnItemClickListener(final MotionEvent ev) {
setOnItemLongClickListener(new OnItemLongClickListener() {
@Override
public boolean onItemLongClick(AdapterView<?
> parent, View view, int position, long id) { int x = (int) ev.getX();// 长安事件的X位置 int y = (int) ev.getY();// 长安事件的y位置 startPosition = position;// 第一次点击的postion dragPosition = position; if (startPosition <= 1) { return false; } ViewGroup dragViewGroup = (ViewGroup) getChildAt(dragPosition - getFirstVisiblePosition()); TextView dragTextView = (TextView) dragViewGroup .findViewById(R.id.text_item); dragTextView.setSelected(true); dragTextView.setEnabled(false); itemHeight = dragViewGroup.getHeight(); itemWidth = dragViewGroup.getWidth(); itemTotalCount = DragGrid.this.getCount(); int row = 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); Bitmap dragBitmap = Bitmap.createBitmap(dragViewGroup .getDrawingCache()); mVibrator.vibrate(50);// 设置震动时间 startDrag(dragBitmap, (int) ev.getRawX(), (int) ev.getRawY()); hideDropItem(); dragViewGroup.setVisibility(View.INVISIBLE); isMoving = false; requestDisallowInterceptTouchEvent(true); return true; } return false; } }); } public void startDrag(Bitmap dragBitmap, int x, int y) { stopDrag(); windowParams = new WindowManager.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; ImageView iv = new ImageView(getContext()); iv.setImageBitmap(dragBitmap); windowManager = (WindowManager) getContext().getSystemService( Context.WINDOW_SERVICE);// "window" windowManager.addView(iv, windowParams); dragImageView = iv; } /** 停止拖动 。释放并初始化 */ private void stopDrag() { if (dragImageView != null) { windowManager.removeView(dragImageView); dragImageView = null; } } /** 在ScrollView内。所以要进行计算高度 */ @Override public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, MeasureSpec.AT_MOST); super.onMeasure(widthMeasureSpec, expandSpec); } /** 隐藏 放下 的ITEM */ private void hideDropItem() { ((DragAdapter) getAdapter()).setShowDropItem(false); } /** 获取移动动画 */ public Animation getMoveAnimation(float toXValue, float toYValue) { TranslateAnimation mTranslateAnimation = new TranslateAnimation( 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); return mTranslateAnimation; } /** 移动的时候触发 */ public void OnMove(int x, int y) { // 拖动的VIEW下方的POSTION int dPosition = pointToPosition(x, y); // 推断下方的POSTION是否是最開始2个不能拖动的 if (dPosition > 1) { if ((dPosition == -1) || (dPosition == dragPosition)) { return; } dropPosition = dPosition; if (dragPosition != startPosition) { dragPosition = startPosition; } int movecount; // 拖动的=開始拖的,而且 拖动的 不等于放下的 if ((dragPosition == startPosition) || (dragPosition != dropPosition)) { // 移须要移动的动ITEM数量 movecount = dropPosition - dragPosition; } else { // 移须要移动的动ITEM数量为0 movecount = 0; } if (movecount == 0) { return; } int movecount_abs = Math.abs(movecount); if (dPosition != dragPosition) { // dragGroup设置为不可见 ViewGroup dragGroup = (ViewGroup) getChildAt(dragPosition); dragGroup.setVisibility(View.INVISIBLE); float to_x = 1;// 当前下方positon float to_y;// 当前下方右边positon // x_vlaue移动的距离百分比(相对于自己长度的百分比) float x_vlaue = ((float) mHorizontalSpacing / (float) itemWidth) + 1.0f; // y_vlaue移动的距离百分比(相对于自己宽度的百分比) float y_vlaue = ((float) mVerticalSpacing / (float) itemHeight) + 1.0f; Log.d("x_vlaue", "x_vlaue = " + x_vlaue); for (int i = 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; } else if (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; } else if ((holdPosition + 1) % 4 == 0) { to_x = -3 * x_vlaue; to_y = y_vlaue; } else { to_x = x_vlaue; to_y = 0; } } ViewGroup moveViewGroup = (ViewGroup) getChildAt(holdPosition); Animation moveAnimation = getMoveAnimation(to_x, to_y); moveViewGroup.startAnimation(moveAnimation); // 假设是最后一个移动的,那么设置他的最后个动画ID为LastAnimationID if (holdPosition == dropPosition) { LastAnimationID = moveAnimation.toString(); } moveAnimation.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation animation) { // TODO Auto-generated method stub isMoving = true; } @Override public void onAnimationRepeat(Animation animation) { // TODO Auto-generated method stub } @Override public void onAnimationEnd(Animation animation) { // TODO Auto-generated method stub // 假设为最后个动画结束,那运行以下的方法 if (animation.toString().equalsIgnoreCase( LastAnimationID)) { DragAdapter mDragAdapter = (DragAdapter) getAdapter(); mDragAdapter.exchange(startPosition, dropPosition); startPosition = dropPosition; dragPosition = dropPosition; isMoving = false; } } }); } } } } }
public class SQLHelper extends SQLiteOpenHelper {
public static final String DB_NAME = "database.db";// 数据库名称
public static final int VERSION = 1;
public static final String TABLE_CHANNEL = "channel";//数据表
public static final String ID = "id";//
public static final String NAME = "name";
public static final String ORDERID = "orderId";
public static final String SELECTED = "selected";
private Context context;
public SQLHelper(Context context) {
super(context, DB_NAME, null, VERSION);
this.context = context;
}
public Context getContext(){
return context;
}
@Override
public void onCreate(SQLiteDatabase db) {
// TODO 创建数据库后,对数据库的操作
String sql = "create table if not exists "+TABLE_CHANNEL +
"(_id INTEGER PRIMARY KEY AUTOINCREMENT, " +
ID + " INTEGER , " +
NAME + " TEXT , " +
ORDERID + " INTEGER , " +
SELECTED + " SELECTED)";
db.execSQL(sql);
}
@Override
public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
// TODO 更改数据库版本号的操作
onCreate(db);
}
}
<!-- 在SDCard中创建与删除文件权限 -->
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />
<!-- 往SDCard写入数据权限 -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!-- 震动权限 -->
<uses-permission android:name="android.permission.VIBRATE"/>