サイトのトップへ戻る

Twitter 開発者 ドキュメント日本語訳

サイト内検索

ツイートを表示する

TweetUi キットでは、あなたのアプリでコードやXMLでツイートを描写するツイートビューが使用できます。

機能:

  • 以下二つの中から選びます:
    • TweetView: 写真や共有ボタンの付いた標準的なツイートビュー。
    • CompactTweetView:写真を切り取って一覧表示するツイートビュー。
  • ツイートビューをタップすると、既定のurlインテントを使ってツイートのリンクを開きます。
  • ツイートの一覧の表示をシンプルにするアダプター。

注意

ユーザー認証ゲスト認証を使った場合でもツイートを表示することができます。


ツイートビュー

TweetUi キットではツイートを描写するのに TweetView と CompactTweetView が使用できます。このビューのコンストラクタでは、context、描写されるツイート、必要に応じてスタイル、といったものを引数として設定します。

ツイートは、有効なセッション(例えば、ユーザーがログインしている状態)でのTwitterCore Tweet API、もしくはトークンを使わない TweetUiの TweetUtilsによってリクエストすることができます。 以下に、TweetUtils を使ってツイートを読み込み、success メソッド内でツリービューのコンストラクタを実行する例を示します。



ツイートを一つ表示する

// EmbeddedTweetsActivity
import com.twitter.sdk.android.core.models.Tweet;
import com.twitter.sdk.android.core.TwitterException;
import com.twitter.sdk.android.tweetui.LoadCallback;
import com.twitter.sdk.android.tweetui.TweetUtils;
import com.twitter.sdk.android.tweetui.TweetView;
...

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_embedded_tweets);

    final LinearLayout myLayout
            = (LinearLayout) findViewById(R.id.my_tweet_layout);

    final long tweetId = 510908133917487104L;
    TweetUtils.loadTweet(tweetId, new LoadCallback<Tweet>() {
        @Override
        public void success(Tweet tweet) {
            myLayout.addView(new TweetView(
                    EmbeddedTweetsActivity.this, tweet));
        }

        @Override
        public void failure(TwitterException exception) {
            // Toast.makeText(...).show();
        }
    });
}

写真が付いたTweetView。



ツイートを複数表示する

// EmbeddedTweetsActivity
import com.twitter.sdk.android.core.models.Tweet;
import com.twitter.sdk.android.core.TwitterException;
import com.twitter.sdk.android.tweetui.LoadCallback;
import com.twitter.sdk.android.tweetui.TweetUtils;
import com.twitter.sdk.android.tweetui.CompactTweetView;
...

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_embedded_tweets);

    final LinearLayout myLayout
            = (LinearLayout) findViewById(R.id.my_tweet_layout);

    final List<Long> tweetIds = 
                Arrays.asList(510908133917487104L, 20L);
    TweetUtils.loadTweets(tweetIds, new LoadCallback<List<Tweet>>() {
        @Override
        public void success(List<Tweet> tweets) {
            for (Tweet tweet : tweets) {
                myLayout.addView(
                        new CompactTweetView(
                                EmbeddedTweetsActivity.this, 
                                tweet));
            }
        }

        @Override
        public void failure(TwitterException exception) {
            // Toast.makeText(...).show();
        }
    });
}

セッションが有効であれば、StatusesService APIを使用してツイートを読み込むことができます。successメソッド内で TweetViews とCompactTweetViews のコンストラクタを実行し、レイアウトに追加することができます。

注意

Fragmentsを使用している場合、successメソッド内でツリービューのコンストラクタに渡すcontext引数がnullにならないようにしてください。


XML

The TweetView and CompactTweetView can be inflated from an XML layout as well. For this usage, the tw__tweet_id attribute must specify the Tweet id and the Tweet will be loaded and rendered upon inflation.

<!--my_tweet_activity.xml-->

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:twittersdk="http://schemas.android.com/apk/res-auto">

    <com.twitter.sdk.android.tweetui.TweetView
        android:id="@+id/bike_tweet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        twittersdk:tw__tweet_id="510908133917487104"/>

</FrameLayout>

注意

レイアウトのパラメータにはandroid:layout_width="match_parent"layout_height="wrap_content"を使用しなければなりません。


ツイート一覧 Adapters

ツイートをListView や同様のViewGroupに設置するには、TweetViewAdapter もしくはTweetViewFetchAdapterが推奨されています。 TweetViewAdapter は、 ツイートコレクションを更新するsetTweets メソッドを追加してAndroidのBaseAdapter を拡張しています。 TweetViewFetchAdapter は、IDから基コレクションにツイートを読み込み、必要に応じてコールバック関数の設定できるsetTweetIds メソッドを追加して、TweetViewAdapter をさらに拡張しています。

既定では、このアダプターはListViewsに適している CompactTweetView を提供します。

以下がツイートビューのListActivity のサンプルです。

import com.twitter.sdk.android.core.models.Tweet;
import com.twitter.sdk.android.core.TwitterException;
import com.twitter.sdk.android.tweetui.LoadCallback;
import com.twitter.sdk.android.tweetui.CompactTweetView;
import com.twitter.sdk.android.tweetui.TweetViewFetchAdapter;
...

public class TweetListActivity extends ListActivity {

    List<Long> tweetIds = Arrays.asList(503435417459249153L, 
                                                                      510908133917487104L, 
                                                                      473514864153870337L, 
                                                                     477788140900347904L);
    final TweetViewFetchAdapter adapter =
            new TweetViewFetchAdapter<CompactTweetView>(
                                            TweetListActivity.this);

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tweet_list);
        setListAdapter(adapter);
        adapter.setTweetIds(tweetIds, 
                                new LoadCallback<List<Tweet>>() {
            @Override
            public void success(List<Tweet> tweets) {
                // my custom actions
            }

            @Override
            public void failure(TwitterException exception) {
                // Toast.makeText(...).show();
            }
        });
    }
}

そして以下が対応するtweet_list.xml レイアウトです:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <TextView android:id="@id/android:empty"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:gravity="center_horizontal|center_vertical"
              android:text="@string/empty"/>

    <ListView android:id="@id/android:list"
              android:layout_width="match_parent"
              android:layout_height="0dp"
              android:layout_weight="1"
              android:drawSelectorOnTop="false"/>
</LinearLayout>

CompactTweetViewsを設置したListView



スタイル設定

TweetUi キットではtw__TweetLightStyletw__TweetDarkStyleの二つのAndroid スタイルが使用できます。既定ではtw__TweetLightStyleが使用されます。

設定したいスタイルは、ビューのコンストラクタ実行時に設定できます。

// EmbeddedTweetActivity.java
import com.twitter.sdk.android.tweetui.TweetView;
...

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_embedded_tweet);

    final LinearLayout myLayout
            = (LinearLayout) findViewById(R.id.my_tweet_layout);

    final long tweetId = 510908133917487104L;
    TweetUtils.loadTweet(tweetId, new LoadCallback<Tweet>() {
        @Override
        public void success(Tweet tweet) {
            myLayout.addView(new TweetView(EmbeddedTweetsActivity.this, 
                                                                       tweet, 
                                                                       R.style.tw__TweetDarkStyle));
        }

        @Override
        public void failure(TwitterException exception) {
            // Toast.makeText(...).show();
        }
    });
}

ダークスタイルの TweetView.



XMLのTweet viewsでは、スタイルは標準の @style 属性で設定できます。

<!--my_tweet_activity.xml-->

<com.twitter.sdk.android.tweetui.TweetView
    android:id="@+id/city_hall_tweet"
    style="@style/tw__TweetDarkStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    twittersdk:tw__tweet_id="521061104445693952"/>

TweetViewAdapter やTweetViewFetchAdapterの戻り値として取得されるツイートビューのスタイルを設定するには、 getTweetView メソッドをオーバーライドし、希望するスタイルを設定してツイートビューのコンストラクタを実行してください。

final TweetViewFetchAdapter adapter = new TweetViewFetchAdapter<CompactTweetView>(getActivity()) {
    @Override
    public CompactTweetView getTweetView(Context context, 
                                                                            Tweet tweet) {
        return new CompactTweetView(context, 
                                                            tweet, 
                                                            R.style.tw__TweetDarkStyle);
    }
};


カスタムスタイル設定

TweetView とCompactTweetView はカスタムスタイル属性に従い、ツイートの見栄えを変更しますs:

  • tw__container_bg_color - ツイートの背景色t
  • tw__primary_text_color - ツイートのテキスト色と発言者名の色
  • tw__action_color - 共有するツイートのテキストとリンクの色

The tw__TweetLightStyle and tw__TweetDarkStyle you’ve seen set these custom attributes to fixed values that produce light and dark versions. To customize the style of a Tweet view further, the easiest approach is to extend the light or dark styles.

<!--styles.xml-->

<style name="CustomLightTweetStyle" parent="tw__TweetDarkStyle">
    <item name="tw__primary_text_color">@color/custom_color_1</item>
    <item name="tw__action_color">@color/custom_color_2</item>
</style>

もしくはカスタム属性を一つ以上設定してテーマやスタイルを作成することもできます。スタイルは個々のビューに適用できますが、テーマはアプリやアクティビティに適用できます。

<!--styles.xml-->

<style name="CustomStyle">
    <item name="tw__container_bg_color">@color/custom_color_1</item>
    <item name="tw__primary_text_color">@color/custom_color_2</item>
</style>

<style name="CustomTheme" parent="android:Theme.Holo.Light">
    <item name="tw__container_bg_color">@color/custom_color_1</item>
</style>

描写されたツイートビューのカスタムスタイル属性が一つも設定されていなかった場合、tw__TweetLightStyleの値が既定値になります。




エンジェル戦記