首先先上效果图：
首先我们先考虑这个界面有什么难点：
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的布局：
<Frame Layout 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" /> </Frame Layout>
然后通过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 API 指南](http://file.lexue001.com/www/201702/05/140208816.jpg?x-oss-process=image/auto-orient,1/resize,m_fill,w_240,h_180/quality,q_90)
