Skip to content

CodingGuideForAndroidListView

Jump to bottom
yunkwanho edited this page May 23, 2016 · 1 revision

リストビュー Guide for Android

1. リストビュー広告

表示広告種類は、画像の有無、テキストの長さなどによって、以下の3タイプあります

Table 1. ネイティブ広告の種類
広告枠フォーマット 表示広告種類

リストビュー型

一行テキスト

アイコン画像＋テキスト

メイン画像＋テキスト

1.1. レイアウト作成

Table 2. 下記表を参考にレイアウトを作成する
パターン オブジェクト クラス タグ名（android:tag）

アイコン画像＋テキスト

アイコン画像

ImageView

AMoAdNativeViewIconImage

メイン画像＋テキスト

メイン画像

ImageView

AMoAdNativeViewMainImage

共通

タイトルショート

TextView

AMoAdNativeViewTitleShort

共通

タイトルロング

TextView

AMoAdNativeViewTitleLong

共通

サービス名

TextView

AMoAdNativeViewServiceName
一行テキスト広告のサンプル
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="5dp" >

    <TextView
        android:id="@+id/TitleShort"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/ServiceName"
        android:ellipsize="end"
        android:singleLine="true"
        android:tag="AMoAdNativeViewTitleShort"/>

    <TextView
        android:id="@+id/ServiceName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="10dp"
        android:ellipsize="end"
        android:singleLine="true"
        android:tag="AMoAdNativeViewServiceName"/>

</RelativeLayout>
アイコン画像+テキスト広告のサンプル
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp" >

    <ImageView
        android:id="@+id/IconImage"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:scaleType="fitXY"
        android:tag="AMoAdNativeViewIconImage" />

    <TextView
        android:id="@+id/TitleShort"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/IconImage"
        android:ellipsize="end"
        android:singleLine="true"
        android:tag="AMoAdNativeViewTitleShort"/>

    <TextView
        android:id="@+id/TitleLong"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/TitleShort"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/IconImage"
        android:ellipsize="end"
        android:singleLine="true"
        android:tag="AMoAdNativeViewTitleLong"/>

    <TextView
        android:id="@+id/ServiceName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/TitleLong"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/IconImage"
        android:ellipsize="end"
        android:tag="AMoAdNativeViewServiceName"/>

</RelativeLayout>
メイン画像+テキスト広告のサンプル
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp" >

    <ImageView
        android:id="@+id/IconImage"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:scaleType="fitXY"
        android:tag="AMoAdNativeViewIconImage" />

    <TextView
        android:id="@+id/ServiceName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/IconImage"
        android:ellipsize="end"
        android:tag="AMoAdNativeViewServiceName"/>

    <ImageView
        android:id="@+id/MainImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/IconImage"
        android:layout_marginTop="5dp"
        android:scaleType="fitXY"
        android:tag="AMoAdNativeViewMainImage" />

    <TextView
        android:id="@+id/TitleShort"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/MainImage"
        android:layout_marginTop="5dp"
        android:ellipsize="end"
        android:singleLine="true"
        android:tag="AMoAdNativeViewTitleShort"/>

    <TextView
        android:id="@+id/TitleLong"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/TitleShort"
        android:ellipsize="end"
        android:singleLine="true"
        android:tag="AMoAdNativeViewTitleLong"/>

</RelativeLayout>
Tip
 クリック領域の設定 :
「android:tag="AMoAdNativeViewLink"」でクリック領域の設定ができます。
指定しない場合はレイアウト全体がクリック領域になります。
クリック領域の設定サンプル
<RelativeLayout ... >
    ...
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:tag="AMoAdNativeViewLink"
        android:text="アプリをダウンロードする" />
    ...
</RelativeLayout>

1.2. 表示

一行テキスト広告の実装
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    AMoAdNativeViewManager.getInstance(this).prepareAd(SID, 1, 5);

    ArrayAdapter<String> adapter == new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1);

    BaseAdapter nativeAdAdapter == AMoAdNativeViewManager.getInstance(this).createAdapter(SID, TAG, adapter, R.layout.native_text);

    listView.setAdapter(nativeAdAdapter);
}
Tip
SIDとは
管理画面で広告枠を作成したときに発行されるIDです。 SDKの機能を呼び出すために複数の箇所から参照しますので、 文字列定数などに保持しておくことをお勧めします。
Tip
TAGとは
同一SIDで複数の広告を表示するための識別IDです。
SID + TAG1、SID + TAG2で分けて使うことで同じ広告が表示されることを避けます。
Tip
広告表示位置の開始位置(beginIndex)とは
一覧上、広告の表示開始位置
Tip
広告表示位置の間隔(interval)とは
広告と次の広告との間隔
アイコン画像+テキスト広告の実装
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    AMoAdNativeViewManager.getInstance(this).prepareAd(SID, 1, 5, true);

    ArrayAdapter<String> adapter == new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1);

    BaseAdapter nativeAdAdapter == AMoAdNativeViewManager.getInstance(this).createAdapter(SID, TAG, adapter, R.layout.native_icon);

    listView.setAdapter(nativeAdAdapter);
}
メイン画像+テキスト広告の実装
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    AMoAdNativeViewManager.getInstance(this).prepareAd(SID, 1, 5, true, true);

    ArrayAdapter<String> adapter == new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, android.R.id.text1);

    BaseAdapter nativeAdAdapter == AMoAdNativeViewManager.getInstance(this).createAdapter(SID, TAG, adapter, R.layout.native_image);

    listView.setAdapter(nativeAdAdapter);
}
Tip
利用可能なリスト形式(BaseAdapterが使える)UIの例
ListView
GridView
AdapterViewFlipper
StackView
Gallery

1.3. 更新

該当するSIDのTAGの広告が更新されます。

AMoAdNativeViewManager.getInstance(context).updateAd(SID, TAG);

1.4. ダブルタップの設定

AMoAdNativeViewCoder coder == new AMoAdNativeViewCoder();
coder.setTouchType(AMoAdNativeViewCoder.TouchType.DoubleTap);

BaseAdapter adAdapter == AMoAdNativeViewManager.getInstance(this).createAdapter(SID, TAG, mAdapter, R.layout.template, coder);
setListAdapter(adAdapter);
AMoAdNativeViewManager.getInstance(context).renderAd(sid, tag, templateView, new AMoAdNativeFailureListener() {
  @Override
  public void onFailure(String sid, String tag, View templateView) {
    // 広告の取得失敗を検知
  }
});

1.5. 広告リスナーを設定する

1.5.1. 実装例

該当するSIDのTAGの広告の取得結果などを通知する。
createAdapter関数にリスナーを渡す。

BaseAdapter adAdapter == AMoAdNativeViewManager.getInstance(this).createAdapter(SID, TAG, mAdapter, R.layout.template, new AMoAdNativeListener() {

		@Override
		public void onReceived(String sid, String tag, View templateView, AMoAdNativeListener.Result result) {
			// 広告情報の取得処理が終わったら呼ばれる
			if (result == AMoAdNativeListener.Result.Success) {
				// ...
			} else if (result == AMoAdNativeListener.Result.Failure) {
				// ...
			}
		}

		@Override
		public void onIconReceived(String sid, String tag, View templateView, AMoAdNativeListener.Result result) {
			// アイコン画像の取得処理が終わったら呼ばれる
			if (result == AMoAdNativeListener.Result.Success) {
				// ...
			} else if (result == AMoAdNativeListener.Result.Failure) {
				// ...
			}
		}

		@Override
		public void onImageReceived(String sid, String tag, View templateView, AMoAdNativeListener.Result result) {
			// メイン画像の取得処理が終わったら呼ばれる
			if (result == AMoAdNativeListener.Result.Success) {
				// ...
			} else if (result == AMoAdNativeListener.Result.Failure) {
				// ...
			}
		}

		@Override
		public void onClicked(String sid, String tag, View templateView) {
			// 広告がクリックされたら呼ばれる
		}
	});
setListAdapter(adAdapter);

1.5.2. タイミング

CallbackTiming

1.5.3. ステータス

CallbackStatus

1.6. デバッグ方法

ログをコンソールに出力する
AMoAdLogger.getInstance().setEnabled(true);
SDKログをキャッチする
AMoAdLogger.getInstance().setEnabled(true);
AMoAdLogger.getInstance().addAMoAdLoggerListener(new AMoAdLoggerListener() {
 @Override
    public void onLog(int level, String tag, String msg, Throwable throwable) {
        // ログをキャッチする
    }
});

広告 SDK

WebView サポート SDK

Clone this wiki locally