Android 仿网易新闻客户端分类排序功能

先来看看网易新闻客户端以及自己实现的效果图,效果当然还是网易的好

gridviewsort.gif

如何实现拖拽一个Item

用WindowManager添加一个ImageView,并且将这个ImageView的显示图片设置成被拖拽item的截图,截图可以通过View的getDrawingCache获得。拖拽的时候,隐藏原始的item。处理触摸事件的ActionMove,调整ImageView的位置,跟随手指移动。在ActionUp的时候removeView

GridView

 @Override
  public boolean onItemLongClick(AdapterView<?> adapterView, View view, int i, long l)
  {
    // 至少有两个item的时候,才有排序
    if (getChildCount() >= 2)
    {
      mView = view;
      // 在调用getDrawingCache必须先调用
      view.setDrawingCacheEnabled(true);
      // 获取截图并设置
      Bitmap bitmap = view.getDrawingCache();
      mDragItemView.setImageBitmap(bitmap);
      // 设置拖拽的imageview的params
      mDragItemLayoutParams.gravity = Gravity.TOP | Gravity.LEFT;
      mDragItemLayoutParams.width = bitmap.getWidth();
      mDragItemLayoutParams.height = bitmap.getHeight();
      mDragItemLayoutParams.x = (mDownX - mDragItemLayoutParams.width / 2);
      mDragItemLayoutParams.y = (mDownY - mDragItemLayoutParams.height / 2);
      // 设置拖拽imageview的中心位于长按点击点
      mDragItemLayoutParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE //不接受按键事件
          | WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE // 不接收触摸事件
          | WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON  // 保持常亮
          | WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN; // place the window within the entire screen, ignoring decorations around the border (such as the status bar)
      mDragItemLayoutParams.format = PixelFormat.TRANSLUCENT;
      mDragItemLayoutParams.windowAnimations = 0;
      // 往WindowManager中添加拖拽的View
      mWindowManager.addView(mDragItemView, mDragItemLayoutParams);
      ((GridViewSortAdapter) getAdapter()).init();
      ((GridViewSortAdapter) getAdapter()).hideView(i);
      Log.d(TAG, "long click = " + i);
      mDragStarted = true;
    }
    return true;
  }
@Override
public boolean onTouchEvent(MotionEvent ev)
{
  switch (ev.getAction() & ev.getActionMasked())
  {
    case MotionEvent.ACTION_DOWN:
      mDownX = (int) ev.getRawX();
      mDownY = (int) ev.getRawY();
      break;
    case MotionEvent.ACTION_MOVE:
      if (mDragStarted)
      {
        // 保持中心
        mDragItemLayoutParams.x = (int) (ev.getRawX() - mDragItemView.getWidth() / 2);
        mDragItemLayoutParams.y = (int) (ev.getRawY() - mDragItemView.getHeight() / 2);
        // 更新params
        mWindowManager.updateViewLayout(mDragItemView, mDragItemLayoutParams);
        // ......
      }
      break;
    case MotionEvent.ACTION_UP:
      // ......
      break;
  }
  return super.onTouchEvent(ev);
}

如何实现隐藏拖拽的Item

在开始拖拽的时候,把隐藏的item的position告诉Adapter,调用Adapter的notifyDataSetChanged刷新数据,在getView方法中判断当前的构建的item的position是不是需要隐藏的position是的话就设置view为inVisible

GridView

@Override
public boolean onItemLongClick(AdapterView<?> adapterView, View view, int i, long l)
{
  // ......
  ((GridViewSortAdapter) getAdapter()).hideView(i);
  // ......
}
GridViewSortAdapter
public void hideView(int item)
{
  // ......
  mStartHideItemPosition = item;
  notifyDataSetChanged();
}
private int mStartHideItemPosition = AdapterView.INVALID_POSITION;
@Override
public View getView(int position, View convertView, ViewGroup parent)
{
  ViewHolder holder = null;
  if (convertView == null)
  {
    convertView = LayoutInflater.from(mContext).inflate(R.layout.view_item_grid_view_sort, null);
    holder = new ViewHolder();
    holder.title = (TextView) convertView.findViewById(R.id.view_item_grid_view_sort_title);
    convertView.setTag(holder);
  }
  else
  {
    holder = (ViewHolder) convertView.getTag();
  }
  holder.title.setText(mTypeTitle.get(position));
  if (mStartHideItemPosition == position)
  {
    convertView.setVisibility(View.INVISIBLE);
  }
  else
  {
    convertView.setVisibility(View.VISIBLE);
  }
  return convertView;
}

如何知道当前拖拽到哪一个item之上

要想在拖拽到其他item上面时互换位置,那必须得知道当前拖拽到了哪一个item之上。GrideView提供了一个方法叫pointToPosition,可以在处理触摸事件的ACTION_MOVE时,获取手指触摸的x,y来得到当前拖拽到item之上的position。这里需要注意的一点是,在拖拽的过程,同一个item的position是不会变的,除非调用了Adapter的notifyDataSetChanged,position才会重新计算。比如position为2的item,在拖拽的过程无论怎么动画移动位置,他的position都是2,知道一次拖拽结束,ActionUp的时候,会调用notifyDataSetChanged

GridView

@Override
 public boolean onTouchEvent(MotionEvent ev)
 {
  case MotionEvent.ACTION_MOVE:
  if (mDragStarted)
  {
    // ......
    int position = pointToPosition((int) ev.getX(), (int) ev.getY());
    // ......
  }
  break;
}

如何实现动画

一个item需要水平以及垂直需要移动的距离可以事先先计算出来,其实水平距离不管怎么样一定会是GridView一个单元格的宽度加上水平间距,垂直距离无论如何都是一个单元格的高度加上垂直距离,宽度非常好取,高度的话,这里默认item 的高度和单元格的高度相同。

GridViewSortAdapter

View view = mGridView.getChildAt(0);
mTranslateX = view.getWidth() + mHorizontalSpace;
mTranslateY = view.getHeight() + mVerticalSpace;

当拖拽到其他item之上时,开始动画

SortGridView

if (position != AdapterView.INVALID_POSITION && !((GridViewSortAdapter) getAdapter()).isInAnimation())
{
   Log.d(TAG, "position = " + position);
   ((GridViewSortAdapter) getAdapter()).swap(position);
}
GridSortAdapter
public void swap(int position)
{
  mAnimatorSetList.clear();
  int r_p = mPositionList.indexOf(position);
  Log.d(TAG, "r_p = " + r_p);
  if (mCurrentHideItemPosition < r_p)
  {
    for (int i = mCurrentHideItemPosition + 1; i <= r_p; i++)
    {
      View v = mGridView.getChildAt(mPositionList.get(i));
      if (i % mColsNum == 0 && i > 0)
      {
        startMoveAnimation(v, v.getTranslationX() + mTranslateX * (mColsNum - 1), v.getTranslationY() -
            mTranslateY);
      }
      else
      {
        startMoveAnimation(v, v.getTranslationX() - mTranslateX, 0);
      }
    }
  }
  else if (mCurrentHideItemPosition > r_p)
  {
    for (int i = r_p; i < mCurrentHideItemPosition; i++)
    {
      View v = mGridView.getChildAt(mPositionList.get(i));
      if ((i + 1) % mColsNum == 0)
      {
        startMoveAnimation(v, v.getTranslationX() - mTranslateX * (mColsNum - 1), v.getTranslationY() + mTranslateY);
      }
      else
      {
        startMoveAnimation(v, v.getTranslationX() + mTranslateX, 0);
      }
    }
  }
  resetPositionList();
  int value = mPositionList.get(mStartHideItemPosition);
  if (mStartHideItemPosition < r_p)
  {
    mPositionList.add(r_p + 1, value);
    mPositionList.remove(mStartHideItemPosition);
  }
  else if (mStartHideItemPosition > r_p)
  {
    mPositionList.add(r_p, value);
    mPositionList.remove(mStartHideItemPosition + 1);
  }
  mCurrentHideItemPosition = r_p;
}
public boolean isInAnimation()
{
  return mInAnimation;
}
private void resetPositionList()
{
  mPositionList.clear();
  for (int i = 0; i < mGridView.getChildCount(); i++)
  {
    mPositionList.add(i);
  }
}
private void startMoveAnimation(View myView, float x, float y)
{
  AnimatorSet set = new AnimatorSet();
  set.playTogether(
      ObjectAnimator.ofFloat(myView, "translationX", myView.getTranslationX(), x),
      ObjectAnimator.ofFloat(myView, "translationY", myView.getTranslationY(), y)
  );
  set.addListener(new Animator.AnimatorListener()
  {
    @Override
    public void onAnimationStart(Animator animator)
    {
      mInAnimation = true;
    }
    @Override
    public void onAnimationEnd(Animator animator)
    {
      mInAnimation = false;
    }
    @Override
    public void onAnimationCancel(Animator animator)
    {
    }
    @Override
    public void onAnimationRepeat(Animator animator)
    {
    }
  });
  mAnimatorSetList.add(set);
  set.setDuration(150).start();
}

这里我主要解释一下代码中 mPositionList这个列表的作用,之前说过一次拖拽的时候,item的position是不会变化的。

假设有一组数据

a b c d
e f g h
i j k l

此时mPositionList的内容就是 0 1 2 3 4 5 6 7 8 9 10 11 12

现在将c拖拽到g上,拖拽完成之后的数据应该是,未释放手指

a b d e
f g c h
i j k l

此时mPositionList的内容就是 0 1 2 4 5 6 7 3 8 9 10 11 12

紧接着,继续拖拽c到e上,你会发现调用pointToPosition方法得到的position是5,但是e现在的索引是4

因此你只需要调用

mPositionList.indexOf(pointToPosition(x,y))

就能得到真实的item的position

其他

如果把GridView的列数变成1那么似曾相识啊

gridviewex.gif

源码地址

https://github.com/jiahuanyu/android-example-code/tree/master/app/src/main/java/com/github/jiahuanyu/example/ui/dragsortgird

以上所述是小编给大家介绍的Android 仿网易新闻客户端分类排序功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android模拟实现网易新闻客户端

    首先我们先看一下要模拟的界面 我们主要实现的就是ListView解析json文件中的数据,UI布局很简单不做赘述. 这里我们需要一个服务器来实现数据的动态更新, 这里我们用到的是Tomcat8.0. 首先我们把需要解析的json文件放置到Tomcat的webapp文件下的ROOT里面,方便我们解析. 首先我们创建一个JsonParse类用来解析json文件: package cn.edu.bzu.myapplication.Tools; import com.google.gson.Gson;

  • Android网络编程之简易新闻客户端

    一. 通过一个案例"新闻客户端"向大家演示AsyncHttpClient和SmartImageView的综合使用. 运行结果如下: 1.首先我们了解一下相关知识: SmartImageView的使用 市面上一些常见软件,例如手机QQ.天猫.京东商场等,都加载了大量网络上的图片.用Android自带的API实现这一功能十分麻烦而且耗时.为此,编程爱好者开发了一个开源项目--SmartImageView. https://github.com/loopj/android-smart-ima

  • Android实现网易新闻客户端侧滑菜单(1)

    Android中很多产品(比如360手机助手.网易菜单...)都采用侧滑菜单的展现形式,采用这种展现形式 1.能把更多的展现内容都存放在菜单中 2.设计上也能体现出视觉效果 现在这种交互方式越来越流行了,虽然这种交互方式可以通过自定义组件的方式来实现,但是用三方开源库更简单. SlidingMenu:SlidingMenu的是一种比较新的设置界面或配置界面效果,在主界面左滑或者右滑出现设置界面,能方便的进行各种操作.目前有大量的应用都在使用这一效果. 地址:https://github.com/

  • Android打造属于自己的新闻平台(客户端+服务器)

    完全属于自己的新闻展示平台,展示给大家,希望大家喜欢. 一.新闻的数据库的构建 脚本代码如下:(使用的mysql5.0 数据库) SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; -- Database: `newsdemo` -- 表的结构 `news` CREATE TABLE IF NOT EXISTS `news` ( `id` int(10) NOT NULL AUTO_IN

  • Android实现网易新闻客户端首页效果

    关于实现网易新闻客户端的界面,以前写过很多博客,请参考: Android实现网易新闻客户端效果 Android实现网易新闻客户端侧滑菜单(一) Android实现网易新闻客户端侧滑菜单(二) 今天用ViewPager + FragmentAdapter + ViewPagerIndicator来实现. ViewPagerIndicator是一款分页指标小部件兼容ViewPager,封装上做得非常不错,目前已为众多知名应用所使用.具体API的使用,大家可以下载官方demo示例研究研究就知道啦! 下

  • Android实现网易新闻客户端侧滑菜单(2)

    前面已经讲过通过三方开源库SlideMenu来实现这种效果,请参考Android实现网易新闻客户端侧滑菜单(一) 今天通过自定义View来实现这种功能. 代码如下: SlideMenu.java package com.jackie.slidemenu.view; import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.view

  • 基于PHP后台的Android新闻浏览客户端

    本文实例为大家分享了Android新闻浏览客户端,基于php后台,供大家参考,具体内容如下 1.使用HBuilder进行PHP环境配置,测试是否可以查询MySQL语句,之前都已经详细说明过了. 2.此处php后台实现mysql的查询功能,并以JSON数据格式返回个客户端 在PHP此处建立一个mysql_connect.php文件,实现数据库的连接,并设置字符集格式. <?php $con = mysql_connect("localhost","root",&

  • Android 仿网易新闻客户端分类排序功能

    先来看看网易新闻客户端以及自己实现的效果图,效果当然还是网易的好 gridviewsort.gif 如何实现拖拽一个Item 用WindowManager添加一个ImageView,并且将这个ImageView的显示图片设置成被拖拽item的截图,截图可以通过View的getDrawingCache获得.拖拽的时候,隐藏原始的item.处理触摸事件的ActionMove,调整ImageView的位置,跟随手指移动.在ActionUp的时候removeView GridView @Override

  • 仿网易新闻客户端头条ViewPager嵌套实例

    要点: 1.重写组件public boolean onInterceptTouchEvent(MotionEvent event)方法 2.正确使用requestDisallowInterceptTouchEvent(boolean flag)方法 关于以上两个方法,请大家多看看相关介绍,这里就不在叙述了^_^ 接下来上例子: 1.外层ViewPager布局 (假定文件名为viewpager_layout.xml) 复制代码 代码如下: <?xml version="1.0" e

  • Android组件DrawerLayout仿网易新闻v4.4侧滑菜单

    概述 今天这篇博客将记录一些关于DrawerLayout的基本用法,我想关于DrawerLayout的用法也许有不少不够了解,这也是比较正常的事情,因为DrawerLayout作为Android组件是Google后来在android中添加的,在android.support.v4包下.那么,DrawerLayout是一个怎么的组件呢?我们知道,当我们使用Android上各类App的时候,是不是注意过App主页上通常有一个"侧滑菜单"?关于侧滑菜单的实现,我在前面博客里有一些介绍,想多些

  • Android项目实战之仿网易新闻的页面(RecyclerView )

    本文实例实现一个仿网易新闻的页面,上面是轮播的图片,下面是 RecyclerView 显示新闻列表,具体内容如下 错误方法 <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...> <ViewPager ... /> <android.support.v7.widget.RecyclerView .../> </LinearLayout> 这样布局

  • Android实现仿网易新闻的顶部导航指示器

    我们知道,页面导航器(Navigator)在几乎所有的项目中都会用到,平时大多数时候为了节省时间,都会直接在github上面拿别人的开源项目来用,最近自己在复习自定义View,就尝试封装了一下,源码参考项目PagerSlidingTabStrip 大家先来看一下效果图 基于文字的页面导航器 基于图片的页面导航器 使用方法 主要步骤分为三步 1)在xml文件里面 <com.xujun.viewpagertabindicator.TabPagerIndicator android:id="@+

  • Android仿网易一元夺宝客户端下拉加载动画效果(一)

    上上周写的一个demo,仿照网易一元夺宝的下拉刷新效果. 原效果是(第一部分)一个小太阳拉下来,然后松开回弹上去, (第二部分)再掉下来一个硬币进行中轴旋转. 本文实现的效果的是第一部分的,效果演示图如下: Gif图看起来比较卡顿...其实真机演示效果还是很流畅的. 下面分析实现过程: 当时因为时间有限没有写在下拉刷新的组件中,也没有封装成一个单独的组件,只是在主布局后面写了一个View然后实现相应的操作,进行封装并不难,这里就不花时间BB了,下面是布局文件: <RelativeLayout x

  • Android仿网易客户端顶部导航栏效果

    最近刚写了一个网易客户端首页导航条的动画效果,现在分享出来给大家学习学习.我说一下这个效果的核心原理.下面是效果图: 首先是布局,这个布局是我从网易客户端反编译后弄来的.大家看后应该明白,布局文件如下: <FrameLayout android:id="@id/column_navi" android:layout_width="fill_parent" android:layout_height="wrap_content" androi

随机推荐