Triển khai thẻ nội dung nghe nhìn trong AAOS

Thẻ nội dung nghe nhìn là một ViewGroup độc lập hiển thị siêu dữ liệu nội dung nghe nhìn, chẳng hạn như tiêu đề, ảnh bìa đĩa nhạc, v.v., đồng thời hiển thị các nút điều khiển phát như Phát và Tạm dừng, Bỏ qua và thậm chí cả các thao tác tuỳ chỉnh do ứng dụng đa phương tiện bên thứ ba cung cấp. Thẻ nội dung nghe nhìn cũng có thể hiển thị hàng đợi các mục nội dung nghe nhìn, chẳng hạn như danh sách phát.

Hình 1. Triển khai mẫu Thẻ nội dung đa phương tiện.

Thẻ nội dung nghe nhìn được triển khai như thế nào trong AAOS?

Các ViewGroup hiển thị thông tin nội dung nghe nhìn sẽ quan sát nội dung cập nhật LiveData từ mô hình dữ liệu của thư viện car-media-common, PlaybackViewModel, để điền sẵn vào ViewGroup. Mỗi lần cập nhật LiveData tương ứng với một tập hợp con thông tin về nội dung nghe nhìn đã thay đổi, chẳng hạn như MediaItemMetadata, PlaybackStateWrapper và MediaSource.

Vì phương pháp này dẫn đến mã lặp lại (mỗi ứng dụng khách thêm Đối tượng tiếp nhận dữ liệu trên mỗi phần LiveData và nhiều Chế độ xem tương tự được chỉ định dữ liệu đã cập nhật), nên chúng tôi đã tạo PlaybackCardController.

PlaybackCardController

PlaybackCardController đã được thêm vào thư viện car-media-common để hỗ trợ việc tạo thẻ phương tiện. Đây là một lớp công khai được tạo bằng một thực thể ViewGroup (mView), PlaybackViewModel (mDataModel), PlaybackCardViewModel (mViewModel) và MediaItemsRepository (mItemsRepository).

Trong hàm setupController, ViewGroup được phân tích cú pháp cho một số khung hiển thị nhất định bằng Mã nhận dạng, bằng mView.findViewById(R.id.xxx) và được gán cho các đối tượng Khung hiển thị được bảo vệ.

private void getViewsFromWidget() {
        mTitle = mView.findViewById(R.id.title);
        mAlbumCover = mView.findViewById(R.id.album_art);
        mDescription = mView.findViewById(R.id.album_title);
        mLogo = mView.findViewById(R.id.content_format);

        mAppIcon = mView.findViewById(R.id.media_widget_app_icon);
        mAppName = mView.findViewById(R.id.media_widget_app_name);

         // ...
}

Mỗi lần cập nhật LiveData từ PlaybackViewModel được quan sát trong một lớp được bảo vệ và thực hiện các lượt tương tác với Chế độ xem liên quan đến dữ liệu đã nhận được. Ví dụ: trình quan sát trên MediaItemMetadata đặt tiêu đề trên mTitle TextView và chuyển MediaItemMetadata.ArtworkRef vào album tác phẩm nghệ thuật ImageBinder mAlbumArtBinder. Nếu siêu dữ liệu rỗng, các Chế độ xem sẽ có giá trị là bị ẩn. Các lớp con của Trình điều khiển có thể ghi đè logic này nếu cần.

mDataModel.getMetadata().observe(mViewLifecycle, this::updateMetadata);
// ...

/** Update views with {@link MediaItemMetadata} */
protected void updateMetadata(MediaItemMetadata metadata) {
        if (metadata != null) {
            String defaultTitle = mView.getContext().getString(
                    R.string.metadata_default_title);
            updateTextViewAndVisibility(mTitle, metadata.getTitle(),    defaultTitle);
            updateTextViewAndVisibility(mSubtitle, metadata.getSubtitle());
            updateMediaLink(mSubtitleLinker,metadata.getSubtitleLinkMediaId());
            updateTextViewAndVisibility(mDescription, metadata.getDescription());
            updateMediaLink(mDescriptionLinker, metadata.getDescriptionLinkMediaId());
            updateMetadataAlbumCoverArtworkRef(metadata.getArtworkKey());
            updateMetadataLogoWithUri(metadata);
        } else {
            ViewUtils.setVisible(mTitle, false);
            ViewUtils.setVisible(mSubtitle, false);
            ViewUtils.setVisible(mAlbumCover, false);
            ViewUtils.setVisible(mDescription, false);
            ViewUtils.setVisible(mLogo, false);
        }
    }

Mở rộng PlaybackCardController

Các ứng dụng khách muốn tạo thẻ nội dung nghe nhìn phải mở rộng PlaybackCardController nếu có thêm chức năng mà họ muốn xử lý trong mỗi lần cập nhật LiveData. Các ứng dụng hiện tại trong AAOS đều tuân theo mẫu này. Trước tiên, bạn nên tạo một lớp con PlaybackCardController, chẳng hạn như MediaCardController. Tiếp theo, MediaCardController sẽ thêm một đối tượng tĩnh bên trong Lớp Builder mở rộng lớp đó của PlaybackCardController.

public class MediaCardController extends PlaybackCardController {

    // extra fields specific to MediaCardController

    /** Builder for {@link MediaCardController}. Overrides build() method to
     * return NowPlayingController rather than base {@link PlaybackCardController}
     */
    public static class Builder extends PlaybackCardController.Builder {

        @Override
        public MediaCardController build() {
            MediaCardController controller = new MediaCardController(this);
            controller.setupController();
            return controller;
        }
    }

    public MediaCardController(Builder builder) {
        super(builder);
    // any other function calls needed in constructor
    // ...

  }
}

Tạo thực thể cho PlaybackCardController hoặc một lớp con

Bạn phải tạo thực thể cho lớp Bộ điều khiển từ một Mảnh hoặc Hoạt động theo thứ tự để có một LifecycleOwner cho các đối tượng tiếp nhận dữ liệu LiveData.

mMediaCardController = (MediaCardController) new MediaCardController.Builder()
                    .setModels(mViewModel.getPlaybackViewModel(),
                            mViewModel,
                            mViewModel.getMediaItemsRepository())
                    .setViewGroup((ViewGroup) view)
                    .build();

mViewModel là một thực thể của PlaybackCardViewModel (hoặc lớp con).

PlaybackCardViewModel để lưu trạng thái

PlaybackCardViewModel là một ViewModel lưu trạng thái liên kết với một Mảnh hoặc Hoạt động cần được dùng để tạo lại nội dung của thẻ phương tiện nếu cấu hình thay đổi (chẳng hạn như chuyển đổi từ giao diện sáng sang giao diện tối khi người dùng lái xe qua đường hầm). PlaybackCardViewModel mặc định xử lý việc lưu trữ các thực thể của MediaModel để phát, từ đó có thể truy xuất PlaybackViewModel và MediaItemsRepository. Sử dụng PlaybackCardViewModel để theo dõi trạng thái của hàng đợi, nhật ký và mục bổ sung thông qua phương thức getter và phương thức setter được cung cấp.

public class PlaybackCardViewModel extends AndroidViewModel {

    private MediaModels mModels;
    private boolean mNeedsInitialization = true;
    private boolean mQueueVisible = false;
    private boolean mHistoryVisible = false;
    private boolean mOverflowExpanded = false;

    public PlaybackCardViewModel(@NonNull Application application) {
        super(application);
    }

    /** Initialize the PlaybackCardViewModel */
    public void init(MediaModels models) {
        mModels = models;
        mNeedsInitialization = false;
    }

    /**
     * Returns whether the ViewModel needs to be initialized. The ViewModel may
     * need re-initialization if a config change occurs or if the system kills
     * the Fragment.
     */
    public boolean needsInitialization() {
        return mNeedsInitialization;
    }

    public MediaItemsRepository getMediaItemsRepository() {
        return mModels.getMediaItemsRepository();
    }

    public PlaybackViewModel getPlaybackViewModel() {
        return mModels.getPlaybackViewModel();
    }

    public MediaSourceViewModel getMediaSourceViewModel() {
        return mModels.getMediaSourceViewModel();
    }

    public void setQueueVisible(boolean visible) {
        mQueueVisible = visible;
    }

    public boolean getQueueVisible() {
        return mQueueVisible;
    }

    public void setHistoryVisible(boolean visible) {
        mHistoryVisible = visible;
    }

    public boolean getHistoryVisible() {
        return mHistoryVisible;
    }

    public void setOverflowExpanded(boolean expanded) {
        mOverflowExpanded = expanded;
    }

    public boolean getOverflowExpanded() {
        return mOverflowExpanded;
    }
}

Lớp này có thể được mở rộng nếu cần theo dõi thêm các tiểu bang khác.

Hiển thị hàng đợi trong thẻ nội dung nghe nhìn

PlaybackViewModel cung cấp các API LiveData để phát hiện xem MediaSource có hỗ trợ hàng đợi và truy xuất danh sách đối tượng MediaItemMetadata trong hàng đợi. Mặc dù bạn có thể sử dụng trực tiếp các API này để điền thông tin hàng đợi vào đối tượng RecyclerView, nhưng chúng tôi đã thêm lớp PlaybackQueueController vào thư viện car-media-common để đơn giản hoá quy trình này. Bố cục cho mỗi mục trong CarUiRecyclerView do ứng dụng khách chỉ định cũng như bố cục Tiêu đề không bắt buộc. Ứng dụng khách này cũng có thể chọn giới hạn số lượng các mục hiển thị trong hàng đợi ở trạng thái lái xe với các quy tắc hạn chế tuỳ chỉnh liên quan đến trải nghiệm người dùng.

Hàm khởi tạo và phương thức setter của PlaybackQueueController được hiển thị trong mẫu sau. Bạn có thể truyền các tài nguyên bố cục queueResource và headerResource là Resources.ID_NULL nếu, trong trường hợp trước, vùng chứa đã chứa CarUiRecyclerView với id queue_list và trong trường hợp sau là hàng đợi không có Tiêu đề.

   /**
    * Construct a PlaybackQueueController. If clients don't have a separate
    * layout for the queue, where the queue is already inflated within the
    * container, they should pass {@link Resources.ID_NULL} as the LayoutRes
    * resource. If clients don't require a UxrContentLimiter, they should pass
    * null for uxrContentLimiter and the int passed for uxrConfigurationId will
    * be ignored.
    */
    public PlaybackQueueController(
            ViewGroup container,
            @LayoutRes int queueResource,
            @LayoutRes int queueItemResource,
            @LayoutRes int headerResource,
            LifecycleOwner lifecycleOwner,
            PlaybackViewModel playbackViewModel,
            MediaItemsRepository itemsRepository,
            @Nullable LifeCycleObserverUxrContentLimiter uxrContentLimiter,
            int uxrConfigurationId) {
      // ...
    }

    public void setShowTimeForActiveQueueItem(boolean show) {
        mShowTimeForActiveQueueItem = show;
    }

    public void setShowIconForActiveQueueItem(boolean show) {
        mShowIconForActiveQueueItem = show;
    }

    public void setShowThumbnailForQueueItem(boolean show) {
        mShowThumbnailForQueueItem = show;
    }

    public void setShowSubtitleForQueueItem(boolean show) {
        mShowSubtitleForQueueItem = show;
    }

    /** Calls {@link RecyclerView#setVerticalFadingEdgeEnabled(boolean)} */
    public void setVerticalFadingEdgeLengthEnabled(boolean enabled) {
        mQueue.setVerticalFadingEdgeEnabled(enabled);
    }

    public void setCallback(PlaybackQueueCallback callback) {
        mPlaybackQueueCallback = callback;
    }

Bố cục cho mỗi mục trong hàng đợi phải chứa mã nhận dạng của các Chế độ xem mà nó sẽ muốn hiển thị tương ứng với các mã được dùng trong lớp bên trong QueueViewHolder.

QueueViewHolder(View itemView) {
            super(itemView);
            mView = itemView;
            mThumbnailContainer = itemView.findViewById(R.id.thumbnail_container);
            mThumbnail = itemView.findViewById(R.id.thumbnail);
            mSpacer = itemView.findViewById(R.id.spacer);
            mTitle = itemView.findViewById(R.id.queue_list_item_title);
            mSubtitle = itemView.findViewById(R.id.queue_list_item_subtitle);
            mCurrentTime = itemView.findViewById(R.id.current_time);
            mMaxTime = itemView.findViewById(R.id.max_time);
            mTimeSeparator = itemView.findViewById(R.id.separator);
            mActiveIcon = itemView.findViewById(R.id.now_playing_icon);

            // ...
}

Để hiển thị hàng đợi trong thẻ nội dung nghe nhìn được tạo bằng PlaybackCardController (hoặc lớp con), bạn có thể tạo PlaybackQueueController trong hàm khởi tạo PlaybackCardController bằng cách sử dụng mDataModel và mItemsRepository cho các thực thể PlaybackViewModel và MediaItemsRepository tương ứng.

Hiển thị nhật ký của các MediaSource đã phát trước đó

Trong phần này, bạn sẽ tìm hiểu cách hiển thị và hiển thị nhật ký của các nguồn nội dung đa phương tiện đã phát trước đó.

Nhận danh sách nhật ký bằng API PlaybackCardViewModel

PlaybackCardViewModel cung cấp một API LiveData có tên là getHistoryList() để truy xuất danh sách nhật ký nội dung nghe nhìn. Phương thức này trả về một LiveData chứa danh sách MediaSources đã được phát trước đây. Bạn có thể dùng dữ liệu này để điền sẵn đối tượng CarUiRecyclerView. Tương tự như PlaybackQueueController, một lớp tên là PlaybackHistoryController đã được thêm vào thư viện car-media-common để đơn giản hoá quy trình.

public class PlaybackCardViewModel extends AndroidViewModel {

    public PlaybackCardViewModel(@NonNull Application application) {
    }

    /** Initialize the PlaybackCardViewModel */
    public void init(MediaModels models) {
    }

    public LiveData<List<MediaSource>> getHistoryList() {
        return mHistoryListData;
    }
}

Giao diện người dùng nhật ký trên Surface bằng PlaybackHistoryController

Sử dụng PlaybackHistoryController mới để điền dữ liệu nhật ký vào CarUiRecyclerView. Các hàm khởi tạo và hàm chính của lớp này như sau. Vùng chứa được truyền từ ứng dụng khách phải chứa một CarUiRecyclerView có mã history_list. CarUiRecyclerView hiển thị các mục trong danh sách và một tiêu đề không bắt buộc. Cả bố cục cho mục danh sách và tiêu đề đều có thể được truyền từ ứng dụng khách. Nếu bạn đặt Resources.ID_NULL làm headerResource, thì tiêu đề sẽ không hiển thị. Sau PlaybackCardViewModel được truyền vào bộ điều khiển, nó sẽ giám sát Đã truy xuất LiveData<List<MediaSource>> từ playbackCardViewModel.getHistoryList().

public class PlaybackHistoryController {

    public PlaybackHistoryController(
            LifecycleOwner lifecycleOwner,
            PlaybackCardViewModel playbackCardViewModel,
            ViewGroup container,
            @LayoutRes int itemResource,
            @LayoutRes int headerResource,
            int uxrConfigurationId) {
    }

    /**
     * Renders the view.
     */
    public void setupView() {
    }
}

Bố cục cho từng mục phải chứa mã của các Chế độ xem mà mục đó muốn hiển thị tương ứng với các mã được dùng ở lớp bên trong ViewHolder.

HistoryItemViewHolder(View itemView) {
            super(itemView);
            mContext = itemView.getContext();
            mActiveView = itemView.findViewById(R.id.history_card_container_active);
            mInactiveView = itemView.findViewById(R.id.history_card_container_inactive);
            mMetadataTitleView = itemView.findViewById(R.id.history_card_title_active);
            mAdditionalInfo = itemView.findViewById(R.id.history_card_subtitle_active);
            mAppIcon = itemView.findViewById(R.id.history_card_app_thumbnail);
            mAlbumArt = itemView.findViewById(R.id.history_card_album_art);
            mAppTitleInactive = itemView.findViewById(R.id.history_card_app_title_inactive);
            mAppIconInactive = itemView.findViewById(R.id.history_item_app_icon_inactive);
// ...
}

Để hiển thị danh sách lịch sử trong thẻ phương tiện được tạo bằng PlaybackCardController (hoặc một lớp con), PlaybackHistoryController có thể là được tạo trong hàm khởi tạo của PlaybackCardController.