登录 立即注册
安币:

安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户

查看: 102|回复: 0

Android 高仿腾讯新闻频道定制页面

[复制链接]

279

主题

279

帖子

3004

安币

手工艺人

发表于 2019-5-17 10:15:01 | 显示全部楼层 |阅读模式
如果对本篇文章感兴趣,请前往,原文地址:http://www.apkbus.com/blog-864937-80083.html

先上效果图




腾讯效果





高仿效果


移除频道的动画效果模仿得不是很像,如果有更好的实现方法可以在下面留言告诉我。
页面效果拆解


  • 部分已选频道位置固定,不能拖动
  • 已选频道可以长按拖拽改变顺序,长按后背景色改变,删除按钮隐藏,原本的位置会出现一个虚线的矩形
  • 点击已选频道或删除按钮会移除该频道,这里会分两种情况,若频道属于下方显示的频道,则移动到下方第一个,隐藏删除按钮;不属于则出现一个动画进行移除
  • 点击推荐频道或地方新闻下方内容会进行切换
  • 点击推荐频道或地方新闻下的频道,频道会移动到已选频道的最后一个,同时出现删除按钮
既然它是一个列表,可以拖动,又需要动画,那这里就使用recyclerView ItemTouchHelper来实现整个页面的效果
拖拽实现

这里需要新建一个类继承ItemTouchHelper.Callback,并重写其中的几个方法

  • public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder)
    这个方法返回的是拖拽和滑动的方向。一般使用makeMovementFlags(int,int)或者makeFlag(int,int)构造返回值。我们需要的所有方向的拖拽,不需要滑动,所以可以这么写:
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {        int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;        int swipeFlags = 0;        return makeMovementFlags(dragFlags, swipeFlags);    }但已选频道这里是有一个或多个固定频道的,而且我们是一个recyclerView去实现整个页面,tab及tab下面的item都是不能拖动的,所以还需要处理一下:
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {        //固定位置及tab下面的channel不能拖动        if (viewHolder.getLayoutPosition() < mAdapter.getFixSize()   1 || viewHolder.getLayoutPosition() > mAdapter.getSelectedSize()) {            return makeMovementFlags(0, 0);        }        int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN | ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;        int swipeFlags = 0;        return makeMovementFlags(dragFlags, swipeFlags);    }

  • public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target)
    当用户拖动item进行移动时会回调这个方法,如果item移动到新的位置,返回true;否则返回false。我们可以在这里实现item的位置交换。要注意的是,某些item是不能改变位置的,所以也要进行处理:
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {        int fromPosition = viewHolder.getAdapterPosition();   //拖动的position        int toPosition = target.getAdapterPosition();     //释放的position        //固定位置及tab下面的channel不能拖动        if (toPosition < mAdapter.getFixSize()   1 || toPosition > mAdapter.getSelectedSize())            return false;        mAdapter.itemMove(fromPosition, toPosition);        return true;    }

  • public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction)
    当用户滑动item的时候会回调此方法,这里我们不需要滑动,不需要重写这个方法
    重写完以上两个方法就可以实现拖拽滑动了,但距离我们想要的效果还是有点差距的。




    拖拽中


    长按拖拽的时候item的颜色会改变,出现阴影,删除按钮会隐藏,原本的位置还会出现一个虚线的方框。



    吐槽完了还得继续做啊......
    emmmmm...看一下ItemTouchHelper.Callback还有哪些方法能用得上吧





  • public void onSelectedChanged(ViewHolder viewHolder, int actionState)
    当viewHolder被拖拽或滑动时回调(感觉这么翻译有点怪...)。这里有个actionState参数,它的值共有3个:ACTION_STATE_IDLE、ACTION_STATE_SWIPE、ACTION_STATE_DRAG。这里可以根据actionState改变item的样式。
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {        super.onSelectedChanged(viewHolder, actionState);        if(actionState==ACTION_STATE_DRAG){            //长按时调用            ChannelAdapter.ChannelHolder holder= (ChannelAdapter.ChannelHolder) viewHolder;            holder.name.setBackgroundColor(Color.parseColor("#FDFDFE"));            holder.delete.setVisibility(View.GONE);            holder.name.setElevation(5f);        }    }这里需要注意一下,不能当actionState为ACTION_STATE_IDLE时重置item的状态,viewHolder有可能为空指针

  • public void clearView(RecyclerView recyclerView, ViewHolder viewHolder)
    当交互完成后会回调此方法。重写这个方法重置item的样式。
    public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {        super.clearView(recyclerView, viewHolder);        ChannelAdapter.ChannelHolder holder= (ChannelAdapter.ChannelHolder) viewHolder;        holder.name.setBackgroundColor(Color.parseColor("#f0f0f0"));        holder.name.setElevation(0f);        holder.delete.setVisibility(View.VISIBLE);    }虚线方框需要绘制,只能找跟draw相关的方法罗

  • onChildDraw
  • onChildDrawOver
    区别想必大家都懂的,这里不多说,重写一下onChildDrawOver方法绘制虚线方框。
public void onChildDrawOver(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {        super.onChildDrawOver(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);        if (dX != 0 && dY != 0 || isCurrentlyActive) {            //长按拖拽时底部绘制一个虚线矩形            c.drawRect(viewHolder.itemView.getLeft(),viewHolder.itemView.getTop()-mPadding,viewHolder.itemView.getRight(),viewHolder.itemView.getBottom(),mPaint);        }    }

拖拽终于写完了

适配器

多布局什么的我想大家都懂的,就不细说了。tab这里为了方便直接使用了两个textView实现。
着重说一下要注意的几个地方吧:

  • 频道的长按事件需要返回true,否则长按频道触发拖动但却不移动的话会触发后面的点击事件
  • 如果使用的ItemDecoration,频道添加和删除后需要调用recyclerView.invalidateItemDecorations()刷新ItemDecoration
  • 频道的移除分两种:移除的频道属于当前下方显示的频道,直接移动item,利用系统动画完成;不属于则移动到tab的位置并逐渐消失。
    这里我的做法是用ObjectAnimator同时实现平移和透明度动画。但是会出现下面的问题...







    这里(应该是吧,其实我也不太清楚啊...)recyclerView的复用引起的问题,所以在动画结束后需要重置view的属性
    emmmm...... 贴一下部分代码吧
    private void setChannel(final ChannelHolder holder, ChannelBean bean) {        final int position = holder.getLayoutPosition();        holder.name.setText(bean.getName());        holder.name.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                if (holder.getLayoutPosition() < selectedSize   1) {                    //tab上面的 点击移除                    removeFromSelected(holder);                } else {                    //tab下面的 点击添加到已选频道                    selectedSize  ;                    itemMove(holder.getLayoutPosition(), selectedSize);                    notifyItemChanged(selectedSize);                    if (onItemRangeChangeListener != null) {                        onItemRangeChangeListener.refreshItemDecoration();                    }                }            }        });        holder.name.setOnLongClickListener(new View.OnLongClickListener() {            @Override            public boolean onLongClick(View v) {                //返回true 防止长按拖拽事件跟点击事件冲突                return true;            }        });        holder.delete.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                removeFromSelected(holder);            }        });    }    private void removeFromSelected(ChannelHolder holder) {        int position = holder.getLayoutPosition();        holder.delete.setVisibility(View.GONE);        ChannelBean bean = mList.get(position);        if ((isRecommend && bean.isRecommend()) || (!isRecommend && !bean.isRecommend())) {            //移除的频道属于当前tab显示的频道,直接调用系统的移除动画            itemMove(position, selectedSize   1);            notifyItemRangeChanged(selectedSize   1, 1);            if (onItemRangeChangeListener != null) {                //如果设置了itemDecoration,必须调用recyclerView.invalidateItemDecorations(),否则间距会不对                onItemRangeChangeListener.refreshItemDecoration();            }        } else {            //不属于当前tab显示的频道            removeAnimation(holder.itemView, isRecommend ? mRight : mLeft, mTabY, position);        }        selectedSize--;    }    void itemMove(int fromPosition, int toPosition) {        if (fromPosition < toPosition) {            for (int i = fromPosition; i < toPosition; i  ) {                Collections.swap(mList, i, i   1);            }        } else {            for (int i = fromPosition; i > toPosition; i--) {                Collections.swap(mList, i, i - 1);            }        }        notifyItemMoved(fromPosition, toPosition);    }}由于使用了textView代替tab,所以会有一些计算用于蓝色线条的位置改变。

上面只是我个人的实现方式,如果有更好的方式,可以在下方留言。

源码:http://www.apkbus.com/thread-607143-1-1.html
  继续阅读全文



想在安卓巴士找到更多优质博文,可移步博客区

如果对本篇文章感兴趣,请前往,
原文地址:
http://www.apkbus.com/blog-864937-80083.html
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站长推荐

通过邮件订阅最新安卓weekly信息
上一条 /4 下一条

下载安卓巴士客户端

全国最大的安卓开发者社区

广告投放| 广东互联网违法和不良信息举报中心|中国互联网举报中心|下载客户端|申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

快速回复 返回顶部 返回列表