前言：剧集类控件，在TV app中非常常见，今天将介绍构建一个TV app中的剧集列表控件,此控件上传到我的Github:https://github.com/hejunlin2013/EpisodeListView，点击【阅读原文】，可看对应的github, 喜欢可以star。Agenda如下：效果图

效果图gif

实现思路

代码分析

效果图

效果图gif：

实现思路：1、用两个RecycleView作为控件横向布局

2、PopupWindow作为该集剧情简介

3、当焦点到达Parent时，对Child进行监听,并发生变化,同理,如果Child超过10个时,通知Parent

代码分析：

EpisodeListView.java 作用：负责组配两个RecycleView填充对应的数据

焦点监听及获焦情况

public class EpisodeListView extends RelativeLayout implements View.OnFocusChangeListener {    public static final String TAG = EpisodeListView.class.getSimpleName();    private Context mContext;    private RelativeLayout mContentPanel;    private RecyclerView mChildrenView;    private RecyclerView mParentView;    private LinearLayoutManager mEpisodesLayoutManager;    private LinearLayoutManager mGroupLayoutManager;    private EpisodeListViewAdapter mEpisodeListAdapter;    private ChildrenAdapter mChildrenAdapter;    private ParentAdapter mParentAdapter;    private Handler mHandler = new Handler(Looper.getMainLooper());    public EpisodeListView(Context context) {        this(context, null);    }    public EpisodeListView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public EpisodeListView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        if (!isInEditMode()) {            mContext = context;            init();        }    }    private void init() {        LayoutInflater inflater = LayoutInflater.from(mContext);        inflater.inflate(R.layout.episodelist_layout, this, true);        mChildrenView = (RecyclerView) findViewById(R.id.episodes);        mParentView = (RecyclerView) findViewById(R.id.groups);        mEpisodesLayoutManager = new LinearLayoutManager(mContext, LinearLayout.HORIZONTAL, false);        mGroupLayoutManager = new LinearLayoutManager(mContext, LinearLayout.HORIZONTAL, false);        mChildrenView.setLayoutManager(mEpisodesLayoutManager);        mParentView.setLayoutManager(mGroupLayoutManager);        mChildrenView.setItemAnimator(new DefaultItemAnimator());        mParentView.setItemAnimator(new DefaultItemAnimator());        mChildrenView.setOnFocusChangeListener(this);        mParentView.setOnFocusChangeListener(this);        this.setOnFocusChangeListener(this);    }    public void setAdapter(final EpisodeListViewAdapter adapter) {        mEpisodeListAdapter = adapter;        mChildrenAdapter = adapter.getEpisodesAdapter();        mParentAdapter = adapter.getGroupAdapter();        mChildrenView.setAdapter(mChildrenAdapter);        mParentView.setAdapter(mParentAdapter);        mParentAdapter.setOnItemClickListener(new ParentAdapter.OnItemClickListener() {            @Override            public void onGroupItemClick(View view, int position) {                mEpisodesLayoutManager.scrollToPositionWithOffset(adapter.getChildrenPosition(position), 0);            }        });        mParentAdapter.setOnItemFocusListener(new ParentAdapter.OnItemFocusListener() {            @Override            public void onGroupItemFocus(View view, int position, boolean hasFocus) {                int episodePosition = adapter.getChildrenPosition(position);                mChildrenAdapter.setCurrentPosition(episodePosition);                mEpisodesLayoutManager.scrollToPositionWithOffset(adapter.getChildrenPosition(position), 0);            }        });        mChildrenAdapter.setOnItemFocusListener(new ChildrenAdapter.OnItemFocusListener() {            @Override            public void onEpisodesItemFocus(View view, int position, boolean hasFocus) {                if (hasFocus) {                    int groupPosition = adapter.getParentPosition(position);                    mGroupLayoutManager.scrollToPositionWithOffset(groupPosition, 0);                    mParentAdapter.setCurrentPosition(adapter.getParentPosition(groupPosition));                }            }        });        mChildrenAdapter.setOnItemClickListener(new ChildrenAdapter.OnItemClickListener() {            @Override            public void onEpisodesItemClick(View view, int position) {            }        });    }    public void setLongFocusListener(ChildrenAdapter.OnItemLongFocusListener listener) {        mChildrenAdapter.setOnItemLongFocusListener(listener);    }    @Override    public boolean dispatchKeyEvent(KeyEvent event) {        if (event.getAction() == KeyEvent.ACTION_DOWN) {            switch (event.getKeyCode()) {                case KeyEvent.KEYCODE_DPAD_UP:                    if (mParentView.hasFocus()) {                        mChildrenView.requestFocus();                        return true;                    }                    break;                case KeyEvent.KEYCODE_DPAD_DOWN:                    if (mChildrenView.hasFocus()) {                        mParentView.requestFocus();                        return true;                    }                    break;                case KeyEvent.KEYCODE_DPAD_RIGHT:                    if (mChildrenView.hasFocus()                            && mChildrenAdapter.getCurrentPosition() >= mChildrenAdapter.getData().size() - 1) {                        return true;                    }                    if (mParentView.hasFocus()                            && mParentAdapter.getCurrentPosition() >= mParentAdapter.getDatas().size() - 1) {                        return true;                    }            }        }        return super.dispatchKeyEvent(event);    }    @Override    public void onFocusChange(View v, boolean hasFocus) {        if (v == this && hasFocus) {            mChildrenView.requestFocus();        } else if (v == mChildrenView && hasFocus) {            View child = mChildrenView.getLayoutManager().findViewByPosition(mChildrenAdapter.getCurrentPosition());            if (child != null) {                child.requestFocus();            } else {                int lastPosition = mEpisodesLayoutManager.findLastVisibleItemPosition();                child = mEpisodesLayoutManager.findViewByPosition(lastPosition);                if (child != null)                    child.requestFocus();            }        } else if (v == mParentView && hasFocus) {            View child = mParentView.getLayoutManager().findViewByPosition(mParentAdapter.getCurrentPosition());            if (child != null) {                child.requestFocus();            }        }    }}

EpisodeListViewAdapter 作用：抽象类，在实例化时负责将外部数据转成list传入

实例化ParentAdapter及ChildrenAdapter

public abstract class EpisodeListViewAdapter{    private ChildrenAdapter mChildrenAdapter;    private ParentAdapter mParentAdapter;    public EpisodeListViewAdapter() {        mChildrenAdapter = new ChildrenAdapter(getChildrenList());        mParentAdapter = new ParentAdapter(getParentList());    }    public ChildrenAdapter getEpisodesAdapter() {        return mChildrenAdapter;    }    public ParentAdapter getGroupAdapter() {        return mParentAdapter;    }    public void setSelectedPositions(List positions) {        mChildrenAdapter.setSelectedPositions(positions);    }    public abstract List getChildrenList();    public abstract List getParentList();    public abstract int getChildrenPosition(int childPosition);    public abstract int getParentPosition(int parentPosition);}

ParentAdapter 作用：每10集为一组，进行控制

public class ParentAdapter extends RecyclerView.Adapter {    private static final int GROUPS_COLUMN_COUNT = 10;    private OnItemClickListener mItemClickListener;    private OnItemFocusListener mItemFocusListener;    private List mDatas;    private int parentWidth;    private int itemWidth;    private int mCurrentPosition;    public ParentAdapter(List datas) {        mDatas = datas;    }    @Override    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        View view = LayoutInflater.from(parent.getContext())                .inflate(R.layout.parent_item, parent, false);        MyViewHolder holder = new MyViewHolder(view);        parentWidth = parent.getMeasuredWidth();        itemWidth = (parentWidth -                (holder.textView.getPaddingLeft() + holder.textView.getPaddingRight()) * (GROUPS_COLUMN_COUNT))                / GROUPS_COLUMN_COUNT + 1;        return holder;    }    @Override    public void onBindViewHolder(MyViewHolder holder, final int position) {        holder.textView.setText(mDatas.get(position));        holder.textView.setWidth(itemWidth);        holder.textView.setFocusable(true);        holder.textView.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                mItemClickListener.onGroupItemClick(v, position);            }        });        holder.textView.setOnFocusChangeListener(new View.OnFocusChangeListener() {            @Override            public void onFocusChange(View v, boolean hasFocus) {                if (hasFocus) {                    mItemFocusListener.onGroupItemFocus(v, position, hasFocus);                    mCurrentPosition = position;                }            }        });    }    @Override    public int getItemCount() {        return mDatas.size();    }    public List getDatas() {        return mDatas;    }    public int getCurrentPosition() {        return mCurrentPosition;    }    public void setCurrentPosition(int position) {        mCurrentPosition = position;    }    public void setOnItemFocusListener(OnItemFocusListener listener) {        mItemFocusListener = listener;    }    public void setOnItemClickListener(OnItemClickListener listener) {        mItemClickListener = listener;    }    class MyViewHolder extends RecyclerView.ViewHolder {        TextView textView;        public MyViewHolder(View view) {            super(view);            textView = (TextView) view.findViewById(R.id.item);        }    }    public interface OnItemClickListener {        void onGroupItemClick(View view, int position);    }    public interface OnItemFocusListener {        void onGroupItemFocus(View view, int position, boolean hasFocus);    }}

ChildrenAdapter 作用：每行最多显示10个，大于10可以左右变换

parent之间焦点变换时，children可立即响应。字数限制，不贴代码，可直接对应github看。