分享好友 移动开发首页 频道列表

写一写虎扑 APP 首页效果，jrs 都进来看一眼！

Android开发  2016-12-01 15:560

首先先上效果图：

首先我们先考虑这个界面有什么难点：

1.日期悬停。

2.今日和其他日期在悬停布局上的处理

3.首次进入时，自动滑动到今日比赛

4.向上滑动向下滑动一定距离后，出现向上向下的图标，并滚动到今日的比赛界面

5.向上加载更多，向下加载更多，当然这个并不算是难点，只是比较新颖~。

好了，首先我们一项一项的开始解决这几个难点，首先这样的列表布局，强烈推荐大家使用RecyclerView,谷歌粑粑真的是赋予了它无穷的潜力。观看本文前依然推荐一波博客地址：点击打开链接一个头像狂魔的博客。

如果你已经看过了上篇博客，你可能会对这个界面已经有一定的了解，那么首先我们实现ItemDecoration的编写，首先我们应该考虑后台与我们交互时给出来的数据，一般为List或者Map格式，所以我们在编写时应充分考虑两种格式写法上的差异（其实也没什么差异的地方）。

public class HuPuItemDecoration<T extends HuPuBaseBean> extends RecyclerView.ItemDecoration {

    private int todayPosition;
    private List<T> mData;

    private Map<String, List<T>> mapData;

    private Paint mPaint;


    private int itemHeight;

    private int background;

    private int textSize;

    private int textColor;

    private Context context;

    private Rect outBounds = new Rect();


    public HuPuItemDecoration(Context context, int todayPosition, List<T> mData) {
        this.context = context;
        this.todayPosition = todayPosition;
        this.mData = mData;
        mPaint = new Paint();
        itemHeight = dip2px(context, 25);
        background = ContextCompat.getColor(context, android.R.color.darker_gray);
        textSize = sp2px(context, 15);
        textColor = ContextCompat.getColor(context, android.R.color.black);
    }

    public HuPuItemDecoration(Context context, int todayPosition, Map<String, List<T>> mapData) {
        this.context = context;
        this.todayPosition = todayPosition;
        this.mapData = mapData;
        mPaint = new Paint();
        itemHeight = dip2px(context, 25);
        background = ContextCompat.getColor(context, android.R.color.darker_gray);
        textSize = sp2px(context, 15);
        textColor = ContextCompat.getColor(context, android.R.color.black);
        for (Map.Entry<String, List<T>> entry : mapData.entrySet()) {
            mData.addAll(entry.getValue());
        }
    }

这里的HuPuBaseBean是一个bean类，内部实现了getDayType的方法，这里是基于封装而写出的基类，如果在实际项目中可以直接引入我们所需要的实体类来进行赋值。

初始化完成后，我们开始一步一步实现：代码很简单，一梭子给出来一部分先：

关于这部分方法的意义，推荐大家去鸿洋sama的博客去充值信仰!!!:点击打开链接 

@Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        int position = ((RecyclerView.LayoutParams) view.getLayoutParams()).getViewLayoutPosition();
        if (null != mData && null != mapData) {
            throw new IllegalArgumentException("这里不会走到的,只是判断一下");
        }

        if (position > -1) {
            if (position == 0) {
                outRect.set(0, itemHeight, 0, 0);
            } else {
                if (!mData.get(position).getDayType().equals(mData.get(position - 1).getDayType())) {
                    outRect.set(0, itemHeight, 0, 0);
                } else {
                    outRect.set(0, 0, 0, 0);
                }
            }
        }
    }

这里的代码逻辑比较简单，就是当position==0时，我们必然会有一个divider去标识日期，而后当前的type不等于它所在位置的上一个position的type时，这时两个position所在的view中间应有一个divider来进行标识！这部分代码非常的简单，我们继续一梭子撸下面的代码：

@Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        int left = parent.getPaddingLeft();
        int right = parent.getRight() - parent.getPaddingRight();
        int count = parent.getChildCount();
        for (int i = 0; i < count; i++) {
            View child = parent.getChildAt(i);
            RecyclerView.LayoutParams lp = (RecyclerView.LayoutParams) child.getLayoutParams();
            int position = lp.getViewLayoutPosition();
            if (position == 0) {
                mPaint.setColor(background);
                c.drawRect(left, child.getTop() - itemHeight - lp.topMargin, right, child.getTop() - lp.topMargin, mPaint);
                mPaint.setColor(textColor);
                mPaint.setTextSize(textSize);
                String type = mData.get(position).getDayType();
                mPaint.getTextBounds(type, 0, type.length(), outBounds);
                c.drawText(type, child.getRight() / 2 - outBounds.width() / 2, child.getTop() - lp.topMargin -
	 (itemHeight / 2 - outBounds.height() / 2), mPaint);
            } else {
                if (!mData.get(position).getDayType().equals(mData.get(position - 1).getDayType())) {
                    mPaint.setColor(background);
                    c.drawRect(left, child.getTop() - itemHeight - lp.topMargin, right, child.getTop() - lp.topMargin, mPaint);
                    if (position == todayPosition) {
                        mPaint.setColor(Color.RED);
                        c.drawRect(left, child.getTop() - itemHeight - lp.topMargin, 15, child.getTop() - lp.topMargin, mPaint);
                    }
                    mPaint.setColor(background);
                    mPaint.setTextSize(textSize);
                    mPaint.setColor(textColor);
                    String type = mData.get(position).getDayType();
                    mPaint.getTextBounds(type, 0, type.length(), outBounds);
                    c.drawText(type, child.getRight() / 2 - outBounds.width() / 2, child.getTop() -
	 lp.topMargin - (itemHeight / 2 - outBounds.height() / 2), mPaint);
                } else {

                }
            }
        }

    }

这部分代码其实跟上面的代码在逻辑上非常接近，如果你已经看了最上面的博客链接，这里的逻辑你应该也能看得懂，这里和推荐博客在这里并没有什么不同，如果这里有任何疑问，我强烈大家去推荐博客那里去看详细的解释，（什么是甩锅，这就叫甩锅）。

最后一段代码：

@Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDrawOver(c, parent, state);
        int position = ((LinearLayoutManager) parent.getLayoutManager()).findFirstVisibleItemPosition();
        View itemView = parent.findViewHolderForAdapterPosition(position).itemView;
        if (mData.size() - 1 >= position) {
            if (!mData.get(position).getDayType().equals(mData.get(position + 1).getDayType())) {
                if (itemView.getHeight() + itemView.getTop() < itemHeight) {
                    c.translate(0, itemView.getHeight() + itemView.getTop() - itemHeight);

                }
            }

        }

        mPaint.setColor(background);
        c.drawRect(parent.getPaddingLeft(), parent.getPaddingTop(), parent.getRight() - parent.getPaddingRight(), 
parent.getPaddingTop() + itemHeight, mPaint);
        if (position >= todayPosition && mData.get(todayPosition).getDayType().equals(mData.get(position).getDayType())) {
            mPaint.setColor(Color.RED);
            c.drawRect(parent.getPaddingLeft(), parent.getPaddingTop(), 15, parent.getPaddingTop() + itemHeight, mPaint);
        }
        mPaint.setColor(textColor);
        mPaint.setTextSize(textSize);
        String dayType = mData.get(position).getDayType();
        mPaint.getTextBounds(dayType, 0, dayType.length(), outBounds);
        c.drawText(dayType, (parent.getRight() - parent.getPaddingRight() - parent.getPaddingLeft() - outBounds.width()) / 2,
parent.getPaddingTop() + itemHeight - (itemHeight / 2 - outBounds.height() / 2), mPaint);

    }

这里就是做悬停部分的代码，这里唯一需要注意的就是我们对于今日比赛悬停界面的处理。

if (position >= todayPosition && mData.get(todayPosition).getDayType().equals(mData.get(position).getDayType())) {
            mPaint.setColor(Color.RED);
            c.drawRect(parent.getPaddingLeft(), parent.getPaddingTop(), 15, parent.getPaddingTop() + itemHeight, mPaint);
        }

如果当前的position大于等于我们传过来的todayPos，然后type相等，既判定为今日比赛。其他则无视之。

写完了这部分代码后，我们就简单写一个RecyclerView出来：

rv = (RecyclerView) findViewById(R.id.rv);
        top= (ImageView) findViewById(R.id.top);
        bottom= (ImageView) findViewById(R.id.bottom);

        for (int i = 0; i < 10; i++) {
            HuPuBean bean = new HuPuBean("雷霆", "火箭", "早上8:00", 124, 100, "昨日", false);
            mData.add(bean);
        }
        for (int i = 0; i < 10; i++) {
            HuPuBean bean = new HuPuBean("雷霆", "火箭", "早上8:00", 124, 100, "今日", true);
            mData.add(bean);
        }
        for (int i = 0; i < 10; i++) {
            HuPuBean bean = new HuPuBean("雷霆", "火箭", "早上8:00", 124, 100, "明日", true);
            mData.add(bean);
        }

        rv.addItemDecoration(new HuPuItemDecoration<HuPuBean>(MainActivity.this, Utils.getTodayPosition("今日", mData), mData));
        final LinearLayoutManager manger = new LinearLayoutManager(MainActivity.this, LinearLayoutManager.VERTICAL, false);
        rv.setLayoutManager(manger);
        rv.setAdapter(new RecyclerView.Adapter<Holder>() {
            @Override
            public Holder onCreateViewHolder(ViewGroup parent, int viewType) {
                View itemView = LayoutInflater.from(MainActivity.this).inflate(R.layout.item, parent, false);
                return new Holder(itemView);
            }

            @Override
            public void onBindViewHolder(Holder holder, int position) {
                HuPuBean bean = mData.get(position);
                holder.teamOne.setText(bean.getTeamOne());
                holder.teamTwo.setText(bean.getTeamTwo());
                holder.teamOnePoint.setText("" + bean.getTeamOnePoint());
                holder.teamOnePoint.setText("" + bean.getTeamTwoPoint());
            }

            @Override
            public int getItemCount() {
                return mData.size();
            }
        });

这里代码写得比较粗糙，勿怪。

然后我们来看一下效果图。

我们来看一下utils方法，也非常简单，因为涉及到加载刷新的逻辑，todayPostion的位置会发生改变，不建议使用赋值，

public class Utils {


    public static int getTodayPosition(String type, List<? extends HuPuBaseBean> mData) {
        for (int i = 0; i < mData.size(); i++) {
            if (mData.get(i).getDayType().equals(type)) {
                return i;
            }
        }
        return 0;
    }


}

最后我们来处理上滑下滑时top bottom图片的显示隐藏：

首先我们看MianActivity的布局：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/rv"
        ></android.support.v7.widget.RecyclerView>

    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="right"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        android:id="@+id/bottom"
        android:background="@mipmap/ic_launcher"
        android:visibility="gone"
        />
    <ImageView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:id="@+id/top"
        android:background="@mipmap/ic_launcher"
        android:visibility="gone"
        />
</FrameLayout>

然后通过RecyclerView的对滑动监听来实现两张图片的显示和隐藏：

rv.addOnScrollListener(new RecyclerView.OnScrollListener() {

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                int position = manger.findFirstVisibleItemPosition();
                if(position-Utils.getTodayPosition("今日",mData)>=10){
                    bottom.setVisibility(View.GONE);
                    top.setVisibility(View.VISIBLE);
                }else if(position-Utils.getTodayPosition("今日",mData)<=-10){
                    bottom.setVisibility(View.VISIBLE);
                    top.setVisibility(View.GONE);
                }else {
                    bottom.setVisibility(View.GONE);
                    top.setVisibility(View.GONE);
                }
            }
        });

当然这种实现方式是最常见的，不过我们还可以通过自定义behavior这种方式来实现滑动的联动效果，但是本篇就不在这里实现了。

最后首次加载滑动到今日比赛，和点击图片滑动到今日比赛，其实非常简单，一行代码搞定：

manger.scrollToPositionWithOffset(Utils.getTodayPosition("今日", mData), 0);

至此，基本的虎扑看球页面的效果就已经实现了，是不是非常简单，当然虎扑的页面更加复杂，itemType有数种，这里就不再实现了。最后去愉快的水群了。临走前在发一张我老婆的美图：

查看更多关于【Android开发】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
Supporting Multiple Screens
术语和概念Screen size 屏幕尺寸又称「屏幕大小」，是屏幕对角线的物理尺寸。单位英寸 inch，比如 Samsung Note4 是 5.7 英寸。Resolution 屏幕分辨率屏幕纵横方向上物理像素的总数，比如 Samsung Note4 是 2560x1440，表示纵向有 2560 个像素，横向有 1440

0评论2017-02-05363

Android插件化(4):OpenAtlasの插件的卸载与更新
如果看过我的前两篇博客Android插件化(2):OpenAtlas插件安装过程分析和Android插件化(3):OpenAtlas的插件重建以及使用时安装，就知道在插件的安装过程中OpenAtlas做了哪些事，那么插件的卸载就只需要把持久化和内存中的内容移除即可。1.插件的卸载插件卸载的

0评论2017-02-05229

个人简历
吴朝晖/男/1993.1本科/南京师范大学中北学院信息系工作年限：1年以内技术博客：wuzhaohui026.github.ioGitHub：https://github.com/wuzhaohui026期望职位：Android开发(初级Android工程师)期望薪资：税前月薪5.5k~7k期望城市：常州工作经历常州慧展信息科技有

0评论2017-02-05126

Android插件化（五）:OpenAtlasの四大组件的Hack
引言到目前为止，我们已经分析了OpenAtlas中插件的安装，卸载，更新，以及安装好插件之后组件类的加载过程，但是对于这些是如何引发的还不知道，比如，在宿主的一个Activit中调用startActivity()跳转到插件中的一个Activity,如何判断这个Activity在的插件是否

0评论2017-02-0598

更多推荐