Androidで動画広告用ライブラリーを作ってみたい(動画の一覧表示)

Androidで動画広告用ライブラリーを作ってみたい(動画の一覧表示)

お久しぶりです。本間です。
Androidで動画広告用のライブラリーを作ってみたい(動画ダウンロード)に引き続き動画広告用のライブラリーについて書いていこうと思います。

  1. 動画のダウンロード <- Done
  2. 動画の一覧表示 <- 今回はこれについて
  3. 動画の再生

前回は動画のダウンロードについて書いたので、今回はダウンロードした動画の一覧を表示出来るようにしたいと思います。


※ 画像はイメージです

動画の一覧表示

Androidで複数のデータを一覧表示する時にはAndroid 1.0(API Level 1)から使用できるListViewを使います。Android 5.0(API Level 21)からListViewよりレイアウトやアニメーションを自由にカスタマイズすることの出来るRecycleViewが追加されました。自由度が高い分自分で面倒を見なければならないことがListViewより多いようなので今回は安心安全のListViewを使っていきます。

ListViewを使って複数のデータを一覧表示するには

ListViewを使って複数のデータを一覧表示するには下記の要素が必要です。

src

  • ListViewActivity(Fragment).java
  • ArrayAdapter.java
  • Item.java

res

  • item_layout.xml
  • list_view_layout.xml

ListViewActivity(Fragment).java
　ダウンロードした動画の一覧を取得してListViewに表示するコントローラ
ArrayAdapter.java
　Itemをviewに当てはめるアダプター
Item.java
　ListViewに表示させる１つ１つのアイテム
item.xml
　ListViewに表示させるアイテム１つ１つのレイアウト
list_view.xml
　ListViewを含む全体のレイアウト

この構成はListViewを使う時によくある構成ですが、今回ライブラリ(jar)にすることを想定しているのでresが使えません。。。

jarにはresを含めることが出来ない

Androidではプロジェクトに組み込んだリソースをプログラムから利用するために、各リソースにリソースIDが割り当てられます。リソースIDはビルド時に自動で作成されるR.javaで管理されています。
そのためライブラリをjarで配布する場合、resを組み込んで配布することは困難なようです。Library Projectとして配布する場合はresを含めることは可能ですが、編集可能なソースを配布することなるので不正に繋がる可能性がでてきます。そのためresを組み込む事は出来ませんがjarで配布する事を想定して作成していきます。

res以下に作成したlayout.xmlをjavaに書き換える

srcの構成については省略します。
まず、ListViewを含む全体のレイアウトlist_view.xmlをjavaに書き換えます。

list_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

上記のxmlをjavaで書き換えるのはそこまで難しくないですね。
javaに書き換えたものが下記になります。

public class ListViewLayout extends LinearLayout {
  public ListView listView;
  public ListViewLayout(Context context) {
    super(context);
    init(context);
  }
  private void init(Context context) {
    listView = new ListView(context);
    LinearLayout.LayoutParams matchParent = new LinearLayout.LayoutParams(
        LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT
    );
    this.setLayoutParams(matchParent);
    this.setOrientation(LinearLayout.HORIZONTAL);
    this.addView(listView, matchParent);
  }
}

続いてListViewに表示する一つ一つのアイテムのレイアウトitem.xmlをjavaに書き換えます。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@+color/light_gray" >
    <RelativeLayout
        android:layout_width="120dp"
        android:layout_height="90dp" >
        <ImageView
            android:layout_width="120dp"
            android:layout_height="90dp"
            android:layout_centerInParent="true"
            android:background="@+color/black />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="2dp"
            android:layout_marginRight="2dp"
            android:background="@+color/trans_7_black"
            android:paddingLeft="2dp"
            android:paddingRight="2dp"
            android:textColor="@+color/white"
            android:textSize="10sp" />
    </RelativeLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@+color/white"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingLeft="3dp"
        android:paddingRight="3dp"
        android:paddingTop="5dp" >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:textColor="@+color/black"
            android:textSize="15sp"
            android:maxLines="3"
            android:ellipsize="end"
            android:paddingBottom="5dp"
            android:paddingLeft="3dp"
            android:paddingRight="3dp"
            android:paddingTop="5dp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="@+color/gray"
            android:textSize="12sp"
            android:gravity="right"
            android:paddingBottom="5dp"
            android:paddingLeft="3dp"
            android:paddingRight="3dp"
            android:paddingTop="5dp" />
    </LinearLayout>
</LinearLayout>

上記のxmlをjavaに書き換えるのは・・・
結構大変ですね。。。

public class ItemLayout extends LinearLayout {
  public ImageView  thumbnailView;
  public TextView   durationView;
  public TextView   titleView;
  public TextView   rewardView;
  public VideoInfoItemLayout(Context context) {
    super(context);
    init(context);
  }

  private void init(Context context) {
    RelativeLayout  thumbnailLayout = createThumbnailLayout(context);
    LinearLayout    infoLayout      = createInfoLayout(context);
    AbsListView.LayoutParams thumbnailLayoutParams = new AbsListView.LayoutParams(
        dp2px(Constant.THUMBNAIL_WIDTH_DP), dp2px(Constant.THUMBNAIL_HEIGHT_DP)
    );
    AbsListView.LayoutParams infoLayoutParams = new AbsListView.LayoutParams(
        AbsListView.LayoutParams.MATCH_PARENT, AbsListView.LayoutParams.MATCH_PARENT
    );
    this.setOrientation(HORIZONTAL);
    this.setBackgroundColor(Constant.VIDEO_INFO_ITEM_BACKGROUND_COLOR);
    this.addView(thumbnailLayout, thumbnailLayoutParams);
    this.addView(infoLayout     , infoLayoutParams);
  }

  private RelativeLayout createThumbnailLayout(Context context) {
    RelativeLayout  parentLayout = new RelativeLayout(context);
    addThumbnailViewToThumbnailLayout(context, parentLayout);
    addDurationViewToThumbnailLayout(context , parentLayout);
    return parentLayout;
  }

  private LinearLayout createInfoLayout(Context context) {
    LinearLayout parentLayout = new LinearLayout(context);
    parentLayout.setOrientation(VERTICAL);
    addTitleViewToInfoLayout(context　, parentLayout);
    addRewardViewToInfoLayout(context, parentLayout);
    return parentLayout;
  }

  private void addThumbnailViewToThumbnailLayout(Context context, RelativeLayout parentLayout) {
    thumbnailView = new ImageView(context);
    RelativeLayout.LayoutParams thumbnaliParams = new RelativeLayout.LayoutParams(
        dp2px(Constant.THUMBNAIL_WIDTH_DP), dp2px(Constant.THUMBNAIL_HEIGHT_DP)
    );
    thumbnaliParams.addRule(RelativeLayout.CENTER_IN_PARENT);
    thumbnailView.setBackgroundColor(Color.BLACK);
    parentLayout.addView(thumbnailView, thumbnaliParams);
  }

  private void addDurationViewToThumbnailLayout(Context context, RelativeLayout parentLayout) {
    durationView  = new TextView(context);
    RelativeLayout.LayoutParams durationParams = new RelativeLayout.LayoutParams(
        RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT
    );
    durationParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
    durationParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
    durationParams.rightMargin  = dp2px(Constant.DURATION_MARGIN_RIGHT_DP);
    durationParams.bottomMargin = dp2px(Constant.DURATION_MARGIN_BOTTOM_DP);
    durationView.setPadding(
        dp2px(Constant.DURATION_PADDING_DP),
        dp2px(Constant.DURATION_PADDING_DP),
        dp2px(Constant.DURATION_PADDING_DP),
        dp2px(Constant.DURATION_PADDING_DP)
    );
    durationView.setBackgroundColor(Constant.DURATION_BACKGROUND_COLOR);
    durationView.setTextColor(Constant.DURATION_TEXT_COLOR);
    durationView.setTextSize(Constant.DURATION_TEXT_SIZE_SP);
    parentLayout.addView(durationView, durationParams);
  }

  private void addTitleViewToInfoLayout(Context context, LinearLayout parentLayout) {
    titleView = new TextView(context);
    LinearLayout.LayoutParams titleViewParams = new LinearLayout.LayoutParams(
        AbsListView.LayoutParams.MATCH_PARENT, 0
    );
    titleViewParams.weight = Constant.TITLE_WEIGHT;
    titleView.setTextSize(Constant.TITLE_TEXT_SIZE);
    titleView.setTextColor(Constant.TITLE_TEXT_COLOR);
    titleView.setMaxLines(Constant.TITLE_MAX_LINE);
    titleView.setEllipsize(Constant.TITLE_ELLIPSIZE);
    titleView.setPadding(
        dp2px(Constant.TITLE_PADDING_LEFT_DP),
        dp2px(Constant.TITLE_PADDING_TOP_DP),
        dp2px(Constant.TITLE_PADDING_RIGHT_DP),
        dp2px(Constant.TITLE_PADDING_BOTTOM_DP)
    );
    parentLayout.addView(titleView, titleViewParams);
  }

  private void addRewardViewToInfoLayout(Context context, LinearLayout parentLayout) {
    rewardView = new TextView(context);
    LinearLayout.LayoutParams rewardViewParams = new LinearLayout.LayoutParams(
        LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT
    );
    rewardView.setTextSize(Constant.REWARD_TEXT_SIZE);
    rewardView.setTextColor(Constant.REWARD_TEXT_COLOR);
    rewardView.setGravity(Constant.REWARD_GRAVITY);
    rewardView.setPadding(
        dp2px(Constant.REWARD_PADDING_LEFT_DP),
        dp2px(Constant.REWARD_PADDING_TOP_DP),
        dp2px(Constant.REWARD_PADDING_RIGHT_DP),
        dp2px(Constant.REWARD_PADDING_BOTTOM_DP)
    );
    parentLayout.addView(rewardView, rewardViewParams);
  }
}

なんとか書き換えることができました。。。Android Studioではlayout.xmlを作成するときにGUIでプレビューしながら作成できるのですが、javaで作成する場合はプレビューできないので辛かったです。
これで冒頭の画像のように事前にダウンロードした動画の一覧を表示できるようになりました。

  1. 動画のダウンロード <- OK!!
  2. 動画の一覧表示 <- OK!!
  3. 動画の再生 <- Coming soon!

残すは動画の再生のみになりました。本ライブラリのメインになりますのでお楽しみに！

サービスの作り手を積極採用中

「Androidで動画広告用ライブラリーを作ってみたい(動画の一覧表示)」をお読みいただきありがとうございます。
株式会社アドウェイズでは一緒に働く仲間を募集しています。

AdwaysEngineerBlog