とあるTwitterクライアントのTLをRelativeLayoutからConstraintLayoutに変更してみた

概要

ConstraintLayoutが今後標準になるという噂を聞いて使ってみました。

ついでにTextViewで集約できるところを片っ端から集約していきました。

バージョン

compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha7'

結果と雑感

主に赤枠部分が青枠部分に集約されている感じ。

• 名前が ～～line_text という TextView は複数の要素を Span で結合して集約したもので、実はその効果がほとんど。

• LinearLayoutが1つだけ残ったのが悔やまれるけどアプリの仕様上仕方ないし、今後のConstraintLayoutに期待。
  (retweet_user_iconとretweet_follow_count_line_textのどちらが大きくなるのかツイートや画面サイズによって不定なのでその下に配置する要素の拘束を指定できない)

• 正直言ってこれくらいならRelativeLayoutでも十分だった。でもConstraintLayoutの拘束の書き方は好き(align_leftよりもconstraintLeft_toLeftOfのほうが分かりやすくて好き。試行錯誤しやすいし。嫌いという人がいるのもまあ分かる)

• あと、ConstraintLayout特有の事象として特定のViewをgoneにしてもマージンが残ってしまうのでJava側でマージンをいちいち消したり復活させたりしてる。これも今後に期待。

• 性能はベンチマーク取ってないから分からない。ぶっちゃけ体感では変わらない。

変更前後のXML

せっかくなので恥ずかしいけどXMLも晒しておく。参考まで。

変更前

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_height="fill_parent" android:layout_width="fill_parent"
                android:orientation="vertical"
                android:id="@+id/list_row_root"
    >

    <!-- ページャ関連 -->
    <RelativeLayout android:id="@+id/relativeLayoutForPager"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:paddingTop="@dimen/padding_small"
        android:paddingBottom="@dimen/padding_small"
        >

        <ImageView 
            android:id="@+id/pagerMoreIcon"
            android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:src="@drawable/ic_menu_moreoverflow_normal_holo_light"
            android:layout_centerInParent="true"
            android:contentDescription="@string/pager_more"
            />

        <ProgressBar
            android:id="@+id/pagerRefreshProgress"
            style="?android:attr/progressBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:indeterminate="true"
            android:layout_centerInParent="true"
            />

    </RelativeLayout>

    <!-- 複数ツイート選択用のチェックマーク -->
    <ImageView android:id="@+id/tweet_select_mark"
        android:layout_width="40dip"
        android:layout_height="40dip"
        android:visibility="gone"
        android:src="@drawable/dummy_image"
        android:layout_alignTop="@+id/RelativeLayoutForStatus"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="@dimen/padding_small"
        android:layout_marginBottom="@dimen/padding_small"
        android:layout_marginLeft="@dimen/padding_small"
        android:layout_marginRight="@dimen/padding_small"
        />

    <!-- カラーラベル -->
    <View
        android:id="@+id/left_label_color_indicator"
        android:layout_width="6dip"
        android:layout_height="100dip"
        android:background="#e60011"
        android:layout_alignTop="@+id/RelativeLayoutForStatus"
        android:layout_alignBottom="@+id/RelativeLayoutForStatus"
        android:layout_toRightOf="@id/tweet_select_mark"
        android:layout_marginTop="0.2dp"
        android:layout_marginBottom="0.2dp"
    />

    <!-- 通常のツイート関連 -->
    <RelativeLayout android:id="@+id/RelativeLayoutForStatus"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@id/tweet_select_mark"
        android:layout_marginBottom="@dimen/padding_medium"
        android:paddingTop="@dimen/padding_medium"
        android:paddingLeft="@dimen/padding_medium"
        android:paddingBottom="@dimen/padding_medium"
        >

        <!-- サムネイル画像 -->
        <ImageView android:id="@+id/ImageThumb"
            android:layout_width="24dip"
            android:layout_height="24dip" android:visibility="gone"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true"
            android:paddingLeft="@dimen/padding_tiny"
            />

        <!-- 返信先サムネイル画像 -->
        <ImageView android:id="@+id/reply_user_thumb_icon"
            android:layout_width="16dip"
            android:layout_height="16dip" android:visibility="gone"
            android:layout_alignRight="@id/ImageThumb"
            android:layout_alignBottom="@id/ImageThumb"
            android:paddingLeft="@dimen/padding_tiny"
            android:layout_marginBottom="-4dip"
            android:layout_marginRight="-4dip"
            />


        <!-- 1行目: name protected_icon verified_icon screen_name date -->
        <LinearLayout android:id="@+id/linearlayoutForLine1"
            android:layout_height="fill_parent" android:layout_width="wrap_content"
            android:layout_marginLeft="@dimen/padding_medium"
            android:gravity="top"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@id/ImageThumb"
            android:layout_toLeftOf="@+id/date_text"
            >

            <!-- ミュートマーク(フォロー一覧など) -->
            <ImageView android:id="@+id/mute_mark_image" android:visibility="gone"
                       android:layout_height="24dip" android:layout_width="24dip"
                       android:layout_weight="0"
                       android:layout_marginTop="@dimen/padding_tiny"
                       android:layout_marginRight="@dimen/padding_tiny"
                />

            <!-- 相互フォローマーク -->
            <ImageView android:id="@+id/mutual_mark_image" android:visibility="gone"
                android:layout_height="24dip" android:layout_width="24dip"
                android:layout_weight="0"
                android:layout_marginTop="@dimen/padding_tiny"
                android:layout_marginRight="@dimen/padding_tiny"
                />

            <TextView android:id="@+id/name_text"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_weight="0"
                android:maxLines="1" />

            <ImageView android:id="@+id/protected_icon"
                android:src="@drawable/dummy_image"
                android:layout_width="10dip" android:layout_height="10dip"
                android:layout_weight="0"
                android:layout_marginLeft="@dimen/padding_tiny"
                android:layout_marginTop="@dimen/padding_tiny"
                android:layout_marginRight="@dimen/padding_tiny" />

            <ImageView android:id="@+id/verified_icon"
                android:src="@drawable/twitter_verified_mark"
                android:layout_width="8dip" android:layout_height="8dip"
                android:layout_weight="0"
                android:layout_marginLeft="@dimen/padding_tiny"
                android:layout_marginTop="@dimen/padding_tiny"
                android:layout_marginRight="@dimen/padding_tiny" />

            <!-- screen name -->
            <TextView android:id="@+id/screen_name_text"
                android:layout_height="fill_parent" android:layout_width="wrap_content"
                android:layout_weight="1"
                android:layout_gravity="top"
                android:gravity="top"
                android:maxLines="1"
                android:layout_marginLeft="@dimen/padding_medium"
                android:layout_marginRight="@dimen/padding_tiny" />

        </LinearLayout>

        <!-- date -->
        <TextView android:id="@+id/date_text" android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="0"
            android:maxLines="1"
            android:layout_gravity="top"
            android:layout_marginRight="10dip"
            android:layout_marginTop="@dimen/padding_tiny"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true" />


        <!-- 2行目:body -->
        <com.twitpane.ui.MyClickableTextView android:layout_height="wrap_content" android:id="@+id/body_text"
            android:layout_width="fill_parent"
            android:layout_marginRight="@dimen/padding_small"
            android:layout_below="@id/linearlayoutForLine1"
            android:layout_alignLeft="@id/linearlayoutForLine1"
            android:layout_alignParentRight="true" />


        <!-- 写真行1 -->
        <ImageView android:id="@+id/photo_image1"
            android:layout_width="100dip"
            android:layout_height="100dip"
            android:visibility="gone"
            android:layout_margin="1dip"
            android:layout_below="@id/body_text"
            android:layout_alignLeft="@id/linearlayoutForLine1"
            />
        <ImageView android:id="@+id/photo_image1_video_mark"
            android:layout_width="24dip"
            android:layout_height="24dip"
            android:visibility="gone"
            android:layout_alignLeft="@id/photo_image1"
            android:layout_alignRight="@id/photo_image1"
            android:layout_alignTop="@id/photo_image1"
            android:layout_alignBottom="@id/photo_image1"
            />


        <!-- 写真行2 -->
        <ImageView android:id="@+id/photo_image2"
            android:layout_width="100dip"
            android:layout_height="100dip"
            android:visibility="gone"
            android:layout_margin="1dip"
            android:layout_below="@id/body_text"
            android:layout_toRightOf="@id/photo_image1"
            />
        <ImageView android:id="@+id/photo_image2_video_mark"
            android:layout_width="24dip"
            android:layout_height="24dip"
            android:visibility="gone"
            android:layout_alignLeft="@id/photo_image2"
            android:layout_alignRight="@id/photo_image2"
            android:layout_alignTop="@id/photo_image2"
            android:layout_alignBottom="@id/photo_image2"
            />


        <!-- 写真行3 -->
        <ImageView android:id="@+id/photo_image3"
            android:layout_width="100dip"
            android:layout_height="100dip"
            android:visibility="gone"
            android:layout_margin="1dip"
            android:layout_below="@id/photo_image1"
            android:layout_alignLeft="@id/linearlayoutForLine1"
            />
        <ImageView android:id="@+id/photo_image3_video_mark"
            android:layout_width="24dip"
            android:layout_height="24dip"
            android:visibility="gone"
            android:layout_alignLeft="@id/photo_image3"
            android:layout_alignRight="@id/photo_image3"
            android:layout_alignTop="@id/photo_image3"
            android:layout_alignBottom="@id/photo_image3"
            />


        <!-- 写真行4 -->
        <ImageView android:id="@+id/photo_image4"
            android:layout_width="100dip"
            android:layout_height="100dip"
            android:visibility="gone"
            android:layout_margin="1dip"
            android:layout_below="@id/photo_image1"
            android:layout_toRightOf="@id/photo_image3"
            />
        <ImageView android:id="@+id/photo_image4_video_mark"
            android:layout_width="24dip"
            android:layout_height="24dip"
            android:visibility="gone"
            android:layout_alignLeft="@id/photo_image4"
            android:layout_alignRight="@id/photo_image4"
            android:layout_alignTop="@id/photo_image4"
            android:layout_alignBottom="@id/photo_image4"
            />


        <!-- 写真行5 -->
        <ImageView android:id="@+id/photo_image5"
            android:layout_width="100dip"
            android:layout_height="100dip"
            android:visibility="gone"
            android:layout_margin="1dip"
            android:layout_below="@id/photo_image3"
            android:layout_alignLeft="@id/linearlayoutForLine1"
            />
        <ImageView android:id="@+id/photo_image5_video_mark"
            android:layout_width="24dip"
            android:layout_height="24dip"
            android:visibility="gone"
            android:layout_alignLeft="@id/photo_image5"
            android:layout_alignRight="@id/photo_image5"
            android:layout_alignTop="@id/photo_image5"
            android:layout_alignBottom="@id/photo_image5"
            />


        <!-- 3行目:favorite_icon / source -->
        <ImageView android:id="@+id/favorite_icon" android:layout_width="12dip"
            android:src="@drawable/twitter_retweet_mark"
            android:layout_height="12dip"
            android:layout_marginTop="@dimen/padding_tiny"
            android:layout_marginRight="@dimen/padding_tiny"
            android:layout_below="@id/photo_image5"
            android:layout_alignLeft="@id/linearlayoutForLine1" />

        <TextView android:layout_height="wrap_content" android:id="@+id/favorite_text"
            android:layout_width="wrap_content"
            android:layout_marginRight="@dimen/padding_small"
            android:layout_alignBaseline="@+id/source_text"
            android:layout_toRightOf="@id/favorite_icon" />

        <TextView android:layout_height="wrap_content" android:id="@+id/source_text"
            android:layout_width="fill_parent"
            android:layout_below="@id/photo_image5"
            android:layout_toRightOf="@id/favorite_text" />

        <!-- 引用ツイートエリア -->
        <RelativeLayout android:id="@+id/RelativeLayoutForQuoteTweet"
                        android:layout_height="wrap_content"
                        android:layout_width="match_parent"
                        android:layout_below="@id/source_text"
                        android:layout_alignLeft="@id/linearlayoutForLine1"
                        android:paddingTop="@dimen/padding_small"
                        android:paddingBottom="@dimen/padding_small"
                        android:paddingRight="@dimen/padding_tiny"
                        android:layout_marginTop="@dimen/padding_small"
                        android:layout_marginBottom="@dimen/padding_tiny"
                        android:layout_marginRight="@dimen/padding_small"
                        android:background="@drawable/quote_tweet_background"
                        android:visibility="gone"
            >

            <!-- 名前 -->
            <LinearLayout android:id="@+id/linearlayoutForQuoteNameLine"
                          android:layout_height="fill_parent"
                          android:layout_width="wrap_content"
                          android:layout_marginLeft="@dimen/padding_medium"
                          android:gravity="top"
                          android:layout_alignParentTop="true"
                          android:layout_alignParentLeft="true"
                          android:layout_alignParentRight="true"
                          >

                <TextView android:id="@+id/quote_name_text"
                          android:layout_height="wrap_content"
                          android:layout_width="wrap_content"
                          android:layout_weight="0"
                          android:maxLines="1" />

                <!-- screen name -->
                <TextView android:id="@+id/quote_screen_name_text"
                          android:layout_height="fill_parent" android:layout_width="wrap_content"
                          android:layout_weight="1"
                          android:layout_gravity="top"
                          android:gravity="top"
                          android:maxLines="1"
                          android:layout_marginLeft="@dimen/padding_medium"
                          android:layout_marginRight="@dimen/padding_tiny" />

            </LinearLayout>

            <TextView
                android:id="@+id/quote_body_text"
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:layout_marginRight="@dimen/padding_small"
                android:layout_below="@id/linearlayoutForQuoteNameLine"
                android:layout_toLeftOf="@+id/quote_photo_image1"
                android:layout_alignLeft="@id/linearlayoutForQuoteNameLine"
                />

            <!-- 引用ツイートの写真 -->
            <ImageView android:id="@+id/quote_photo_image1"
                       android:layout_width="48dip"
                       android:layout_height="48dip"
                       android:visibility="gone"
                       android:layout_margin="1dip"
                       android:layout_below="@+id/linearlayoutForQuoteNameLine"
                       android:layout_alignParentRight="true"
                />
            <ImageView android:id="@+id/quote_photo_image1_video_mark"
                       android:layout_width="16dip"
                       android:layout_height="16dip"
                       android:visibility="gone"
                       android:layout_alignLeft="@id/quote_photo_image1"
                       android:layout_alignRight="@id/quote_photo_image1"
                       android:layout_alignTop="@id/quote_photo_image1"
                       android:layout_alignBottom="@id/quote_photo_image1"
                />

        </RelativeLayout>

        <!-- 4行目:RT mark / サムネイル / RT text / 相互フォローマーク / フォロー・フォロワー・fav数 text -->
        <LinearLayout
            android:id="@+id/linearlayoutForRTLine"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/RelativeLayoutForQuoteTweet"
            android:layout_alignLeft="@id/linearlayoutForLine1"
            android:gravity="bottom">

            <ImageView android:id="@+id/retweet_icon"
                       android:src="@drawable/twitter_retweet_mark"
                       android:layout_height="12dip" android:layout_width="12dip"
                       android:layout_marginRight="@dimen/padding_tiny" />

            <!-- RTサムネイル画像 -->
            <ImageView android:id="@+id/rt_image" android:visibility="gone"
                       android:layout_height="24dip" android:layout_width="24dip"
                       android:layout_marginTop="@dimen/padding_tiny"
                       android:layout_marginRight="@dimen/padding_tiny" />

            <TextView android:id="@+id/retweet_text"
                      android:layout_height="wrap_content"
                      android:layout_width="wrap_content"
                      android:layout_marginRight="@dimen/padding_small" />

            <!-- フォロー・フォロワー・fav数 text -->
            <TextView android:id="@+id/follow_count_text"
                      android:layout_height="wrap_content"
                      android:layout_width="fill_parent" />
        </LinearLayout>

    </RelativeLayout>

    <!-- 下部ツールバー用ダミースペーサー -->
    <View
        android:id="@+id/dummy_spacer"
        android:layout_width="match_parent"
        android:layout_height="100dip"
        android:background="#fffe8888"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        />

    <!-- Divider -->
    <View
        android:id="@+id/my_list_divider"
        android:layout_width="fill_parent"
        android:layout_height="0.5dp"
        android:layout_marginLeft="6.5dip"
        android:layout_marginRight="2dip"
        android:background="#B0B0B0"
        android:layout_alignParentBottom="true"
    />

</RelativeLayout>

変更後

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:id="@+id/list_row_root"
    >

    <!-- ============================================================ -->
    <!-- ページャ関連 -->
    <!-- ============================================================ -->
    <ImageView
        android:id="@+id/pagerMoreIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_menu_moreoverflow_normal_holo_light"
        android:contentDescription="@string/pager_more"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:paddingTop="@dimen/padding_small"
        android:paddingBottom="@dimen/padding_small"
        />

    <ProgressBar
        android:id="@+id/pagerRefreshProgress"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:indeterminate="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:paddingTop="@dimen/padding_small"
        android:paddingBottom="@dimen/padding_small"
        />

    <!-- ============================================================ -->
    <!-- 通常ツイート左側 -->
    <!-- ============================================================ -->

    <!-- 複数ツイート選択用のチェックマーク -->
    <ImageView
        android:id="@+id/tweet_select_mark"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="gone"
        android:src="@drawable/dummy_image"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginTop="@dimen/padding_small"
        android:layout_marginLeft="@dimen/padding_small"
        />

    <!-- カラーラベル -->
    <View
        android:id="@+id/left_label_color_indicator"
        android:layout_width="6dp"
        android:layout_height="0dp"
        android:background="#e60011"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/tweet_select_mark"
        />

    <!-- ============================================================ -->
    <!-- 通常のツイート関連 -->
    <!-- ============================================================ -->

    <!-- 左上のスペース -->
    <android.support.v7.widget.Space
        android:id="@+id/status_area_left_top_space"
        android:layout_height="@dimen/padding_medium"
        android:layout_width="@dimen/padding_medium"
        app:layout_constraintLeft_toRightOf="@+id/tweet_select_mark"
        app:layout_constraintTop_toTopOf="parent"
        />

    <!-- サムネイル画像 -->
    <ImageView android:id="@+id/thumb_image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="gone"
        android:paddingLeft="@dimen/padding_tiny"
        app:layout_constraintLeft_toRightOf="@+id/status_area_left_top_space"
        app:layout_constraintTop_toBottomOf="@+id/status_area_left_top_space"
        />

    <!-- 返信先サムネイル画像 -->
    <ImageView android:id="@+id/reply_user_thumb_icon"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="gone"

        app:layout_constraintLeft_toLeftOf="@+id/thumb_image"
        app:layout_constraintTop_toTopOf="@+id/thumb_image"
        />

    <!-- 1行目: [mute_mark] [mutual_mark] [name] [protected_icon] [verified_icon] [screen_name] -->
    <TextView android:id="@+id/name_line_text"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:maxLines="100"
        android:ellipsize="none"
        android:scrollHorizontally="false"
        android:layout_marginLeft="@dimen/padding_medium"
        android:layout_marginRight="@dimen/padding_small"
        android:gravity="center_vertical"
        app:layout_constraintLeft_toRightOf="@+id/thumb_image"
        app:layout_constraintRight_toLeftOf="@+id/date_text"
        app:layout_constraintTop_toBottomOf="@+id/status_area_left_top_space"
        app:layout_constraintHorizontal_bias="0.0"
        />

    <!-- date -->
    <TextView android:id="@+id/date_text"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:maxLines="1"
        android:layout_gravity="top"
        android:layout_marginRight="@dimen/padding_medium"
        android:layout_marginTop="@dimen/padding_tiny"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/status_area_left_top_space"
        />

    <!-- 2行目:body -->
    <com.twitpane.ui.MyClickableTextView
        android:id="@+id/body_text"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_marginRight="@dimen/padding_small"
        app:layout_constraintLeft_toLeftOf="@+id/name_line_text"
        app:layout_constraintTop_toBottomOf="@+id/name_line_text"
        app:layout_constraintRight_toRightOf="parent"
        />


    <!-- 写真行1 -->
    <ImageView android:id="@+id/photo_image1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="1dip"
        app:layout_constraintTop_toBottomOf="@+id/body_text"
        app:layout_constraintLeft_toLeftOf="@+id/name_line_text"
        />
    <ImageView android:id="@+id/photo_image1_video_mark"
        android:src="@drawable/ic_action_reply"
        android:layout_width="@dimen/videomark_size"
        android:layout_height="@dimen/videomark_size"
        app:layout_constraintLeft_toLeftOf="@+id/photo_image1"
        app:layout_constraintRight_toRightOf="@+id/photo_image1"
        app:layout_constraintTop_toTopOf="@+id/photo_image1"
        app:layout_constraintBottom_toBottomOf="@+id/photo_image1"
        />

    <!-- 写真行2 -->
    <ImageView android:id="@+id/photo_image2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="1dip"
        android:layout_below="@id/body_text"
        app:layout_constraintTop_toBottomOf="@+id/body_text"
        app:layout_constraintLeft_toRightOf="@+id/photo_image1"
        />
    <ImageView android:id="@+id/photo_image2_video_mark"
        android:layout_width="@dimen/videomark_size"
        android:layout_height="@dimen/videomark_size"
        app:layout_constraintLeft_toLeftOf="@+id/photo_image2"
        app:layout_constraintRight_toRightOf="@+id/photo_image2"
        app:layout_constraintTop_toTopOf="@+id/photo_image2"
        app:layout_constraintBottom_toBottomOf="@+id/photo_image2"
        />

    <!-- 写真行3 -->
    <ImageView android:id="@+id/photo_image3"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="1dip"
        app:layout_constraintTop_toBottomOf="@+id/photo_image1"
        app:layout_constraintLeft_toLeftOf="@+id/photo_image1"
        />
    <ImageView android:id="@+id/photo_image3_video_mark"
        android:layout_width="@dimen/videomark_size"
        android:layout_height="@dimen/videomark_size"
        app:layout_constraintLeft_toLeftOf="@+id/photo_image3"
        app:layout_constraintRight_toRightOf="@+id/photo_image3"
        app:layout_constraintTop_toTopOf="@+id/photo_image3"
        app:layout_constraintBottom_toBottomOf="@+id/photo_image3"
        />

    <!-- 写真行4 -->
    <ImageView android:id="@+id/photo_image4"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="1dip"
        app:layout_constraintTop_toBottomOf="@+id/photo_image1"
        app:layout_constraintLeft_toRightOf="@+id/photo_image3"
        />
    <ImageView android:id="@+id/photo_image4_video_mark"
        android:layout_width="@dimen/videomark_size"
        android:layout_height="@dimen/videomark_size"
        app:layout_constraintLeft_toLeftOf="@+id/photo_image4"
        app:layout_constraintRight_toRightOf="@+id/photo_image4"
        app:layout_constraintTop_toTopOf="@+id/photo_image4"
        app:layout_constraintBottom_toBottomOf="@+id/photo_image4"
        />

    <!-- 写真行5 -->
    <ImageView android:id="@+id/photo_image5"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="1dip"
        app:layout_constraintTop_toBottomOf="@+id/photo_image3"
        app:layout_constraintLeft_toLeftOf="@+id/photo_image1"
        />
    <ImageView android:id="@+id/photo_image5_video_mark"
        android:layout_width="@dimen/videomark_size"
        android:layout_height="@dimen/videomark_size"
        app:layout_constraintLeft_toLeftOf="@+id/photo_image5"
        app:layout_constraintRight_toRightOf="@+id/photo_image5"
        app:layout_constraintTop_toTopOf="@+id/photo_image5"
        app:layout_constraintBottom_toBottomOf="@+id/photo_image5"
        />


    <!-- 3行目:[favorited_icon] [favorite_text] [source] -->
    <TextView
        android:id="@+id/favorite_source_line_text"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/photo_image5"
        app:layout_constraintLeft_toLeftOf="@+id/name_line_text"
        />

    <!-- ============================================================ -->
    <!-- 引用ツイートエリア -->
    <!-- ============================================================ -->
    <!-- 名前, ScreenName -->
    <TextView android:id="@+id/quote_name_line_text"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:maxLines="100"
        android:ellipsize="none"
        android:scrollHorizontally="false"
        app:layout_constraintTop_toBottomOf="@+id/favorite_source_line_text"
        app:layout_constraintLeft_toLeftOf="@+id/name_line_text"
        app:layout_constraintRight_toRightOf="parent"
        />

    <!-- 引用ツイート本文 -->
    <TextView
        android:id="@+id/quote_body_text"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:maxLines="3"
        android:ellipsize="end"
        android:scrollHorizontally="false"
        android:paddingBottom="@dimen/padding_small"
        app:layout_constraintTop_toBottomOf="@+id/quote_name_line_text"
        app:layout_constraintLeft_toLeftOf="@+id/name_line_text"
        app:layout_constraintRight_toLeftOf="@+id/quote_photo_image1"
        />

    <!-- 引用ツイートの写真 -->
    <ImageView android:id="@+id/quote_photo_image1"
        android:layout_width="48dip"
        android:layout_height="48dip"
        android:visibility="gone"
        android:layout_margin="1dip"
        app:layout_constraintTop_toBottomOf="@+id/quote_name_line_text"
        app:layout_constraintRight_toRightOf="parent"
        />
    <ImageView android:id="@+id/quote_photo_image1_video_mark"
        android:layout_width="16dip"
        android:layout_height="16dip"
        android:visibility="gone"
        app:layout_constraintLeft_toLeftOf="@+id/quote_photo_image1"
        app:layout_constraintRight_toRightOf="@+id/quote_photo_image1"
        app:layout_constraintTop_toTopOf="@+id/quote_photo_image1"
        app:layout_constraintBottom_toBottomOf="@+id/quote_photo_image1"
        />

    <!-- 引用エリアのボーダー -->
    <View android:id="@+id/quote_area_border"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/quote_tweet_background"
        app:layout_constraintLeft_toLeftOf="@id/name_line_text"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/favorite_source_line_text"
        app:layout_constraintBottom_toBottomOf="@+id/quote_body_text"
        />

    <!-- 4行目:[RT icon] [RTユーザーサムネイル] [RT text] [フォロー・フォロワー・fav数 text] -->
    <LinearLayout
        android:id="@+id/linearlayoutForRTLine"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/quote_body_text"
        app:layout_constraintLeft_toLeftOf="@+id/name_line_text"
        app:layout_constraintRight_toRightOf="parent"
        android:gravity="bottom">

        <ImageView android:id="@+id/retweet_icon"
            android:src="@drawable/twitter_retweet_mark"
            android:layout_height="12dip"
            android:layout_width="12dip"
            android:layout_marginRight="@dimen/padding_tiny"
            />

        <!-- RTユーザーサムネイル -->
        <ImageView android:id="@+id/retweet_user_icon"
            android:visibility="gone"
            android:layout_height="24dip"
            android:layout_width="24dip"
            android:layout_marginTop="@dimen/padding_tiny"
            android:layout_marginRight="@dimen/padding_tiny"
            />

        <!-- RT text, フォロー・フォロワー・fav数 text -->
        <TextView android:id="@+id/retweet_follow_count_line_text"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_marginRight="@dimen/padding_small"
            android:maxLines="100"
            android:ellipsize="none"
            android:scrollHorizontally="false"
            />
    </LinearLayout>

    <!-- 左下のスペース -->
    <android.support.v7.widget.Space
        android:id="@+id/status_area_left_bottom_space"
        android:layout_height="@dimen/padding_medium"
        android:layout_width="@dimen/padding_medium"
        app:layout_constraintLeft_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/linearlayoutForRTLine"
        />


    <!-- 下部ツールバー用ダミースペーサー -->
    <View
        android:id="@+id/dummy_spacer"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:background="#fffe8888"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <!-- Divider -->
    <View
        android:id="@+id/my_list_divider"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:layout_marginLeft="7dp"
        android:layout_marginRight="2dp"
        android:background="#B0B0B0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
    />

</android.support.constraint.ConstraintLayout>