家里的电视看不了CCTV直播?那我们就自己写一个吧

原因:

上周上班正在划水,忽然群里有个老司机说家里电视看不了直播了,之前充的会员也给退了;

经过一系列的百度,google,调研了好几个晚上终究确认了两个方案

1. 直接android原生webview内嵌CCTV官网直播这种方式简略,但是做好,电视遥控器交互性不是很好
2. 自己撸一个原生的android tv

说干就干,本文选用第二种方案手撸一个tv app大约分为四个步骤

• 首要翻开AndroidStudio创立一个 android项目
• 找了一个开源的播映器copy进来
• 找了一个开源的直播源然后再copy进去
• 然后将代码+资源,删删改改,完事,先上图展示一下

这儿模拟了55寸720p和55寸1080P分辨率的电视

看起来还不错 下面进入正题纯干货,由于手机app跟电视app仍是有差别的总结一下有以下几点

用户操作视点

1. 电视遥控器操作只能上下左右+确定+回来
2. 没有触摸,不必处理手机app手指的触摸问题

开发者视点

1. 电视app每一步操作逻辑都是view获取焦点,失掉焦点的操作
2. 监听遥控器的按键事情
3. 获取焦点后要有增加选中状况方便用户知道遥控器指到了哪里
4. 页面布局+适配

下面咱们具体看下开发者视点

google官方给咱们供给了一套完整的开发tv的库以及官方文档先看看google供给的结构demo

设计风格仍是有差异的 回到咱们手撸的电视app主页用到的控件是官方供给的leanback

implementation 'androidx.leanback:leanback:1.0.0'
implementation 'androidx.leanback:leanback-preference:1.0.0'
implementation "androidx.leanback:leanback-tab:1.1.0-beta01"

主页是LeanbackTabLayout+LeanbackViewPager跟手机app用法一致

<androidx.leanback.tab.LeanbackTabLayout
    android:id="@+id/tab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:tabBackground="@color/home_color"
    app:tabGravity="start"
    android:layout_marginStart="12dp"
    app:tabIndicatorColor="@color/color_CF3231"
    app:tabMode="scrollable"
    app:tabSelectedTextColor="@color/color_CF3231"
    app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"
    app:tabTextColor="@color/white" />
<androidx.leanback.tab.LeanbackViewPager
    android:id="@+id/viewPager"
    android:nextFocusUp="@+id/tab"
    android:layout_width="match_parent"
    android:descendantFocusability="afterDescendants"
    android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/tab" />

看了下源码发现leanbackTabLayout内部现已帮咱们处理好了焦点问题

public void addFocusables(@SuppressLint("ConcreteCollection") @NonNull ArrayList<View> views,
        int direction, int focusableMode) {
    boolean isViewPagerFocused = this.mViewPager != null && this.mViewPager.hasFocus();
    boolean isCurrentlyFocused = this.hasFocus();
    LinearLayout tabStrip = (LinearLayout) this.getChildAt(0);
    if ((direction == View.FOCUS_DOWN || direction == View.FOCUS_UP)
            && tabStrip != null && tabStrip.getChildCount() > 0 && this.mViewPager != null) {
        View selectedTab =  tabStrip.getChildAt(this.mViewPager.getCurrentItem());
        if (selectedTab != null) {
            views.add(selectedTab);
        }
    } else if ((direction == View.FOCUS_RIGHT || direction == View.FOCUS_LEFT)
            && !isCurrentlyFocused && isViewPagerFocused) {
        return;
    } else {
        super.addFocusables(views, direction, focusableMode);
    }
}
void updatePageTabs() {
    LinearLayout tabStrip = (LinearLayout) this.getChildAt(0);
    if (tabStrip == null) {
        return;
    }
    int tabCount = tabStrip.getChildCount();
    for (int i = 0; i < tabCount; i++) {
        final View tabView = tabStrip.getChildAt(i);
        tabView.setFocusable(true);
        tabView.setOnFocusChangeListener(
                new TabFocusChangeListener(this, this.mViewPager));
    }
}

播映页面

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    android:gravity="center"
    android:orientation="vertical">
    <com.cookiecatspop.ceop.main.CusVideoPlayer
        android:id="@+id/mVideoPlayer"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <androidx.leanback.widget.VerticalGridView
        android:id="@+id/verticalGridview"
        android:layout_width="270dp"
        android:layout_height="match_parent"
        android:nextFocusLeft="@id/verticalGridview"
        android:nextFocusRight="@id/verticalGridview"
        tools:listitem="@layout/item_address" />
</FrameLayout>

这儿用到了CusVideoPlayer(这个是自己基于开源库封装的电视专用的播映器)和VerticalGridView(这个也是官方供给的组件用来显示列表父类是recycleView,所以用法跟recycleView差不多)

好了今日就到这儿了我要去看成人频道了