LoginSignup
1
2

More than 5 years have passed since last update.

LinearLayoutに並べた場合に右側のViewが画面外に出てしまう事象の解決方法

Posted at

前置き

  • 今回の問題事項については、解決方法はいくつかあるかもしれませんが、その中の一つ実装方法として記載します。

問題事項

  • LinearLayout内に2つのViewを横並びで配置した場合、左側のViewが長くなると、右側のViewが画面外に押し出されてしまう。

要件

  • LinearLayoutで2つTextViewを置く
  • 2つのTextViewは可変長(wrap_content)とする
  • 2つのTextViewは改行させる
  • 左側のTextViewは右側のTextViewより長くなる可能性が高い

解決方法

  • 「左側View幅 = (親レイアウト幅 - 右側View幅)」を実現する。
  • 右側View幅は左側View幅が長い場合、0になってしまうので、右側View幅と同じダミーViewを用意し、「左側View幅 = (親レイアウト幅 - ダミー右側View幅)」をを実行する。

コード

  • 解決方法で実現したコードは以下のとおり。

import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutCompat;
import android.view.ViewTreeObserver;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

        // Viewアサイン
        final LinearLayout parentLayout = (LinearLayout) findViewById(R.id.parent_layout);
        final TextView textLeft = (TextView) findViewById(R.id.text_left);
        final TextView textRight = (TextView) findViewById(R.id.text_right);
        final TextView dummyTextRight = (TextView) findViewById(R.id.dummy_text_right);

        // 右側TextViewにセットする文字列
        String rightTextString = "aaa";
        // 左側TextViewにセットする文字列(折り返すくらいの長いテキスト)
        String longText = "あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお";

        // 左側のTextViewにテキストをセット
        textLeft.setText(longText);
        // 右側のTextViewにテキストをセット
        textRight.setText(rightTextString);
        // ダミーの左側TextViewにテキストをセット
        dummyTextRight.setText(rightTextString);

        final ViewTreeObserver viewTreeObserver = dummyTextRight.getViewTreeObserver();
        viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {

            @Override
            public void onGlobalLayout() {

                // ダミーの右側TextViewの幅取得
                int dummyTextRightWidth = dummyTextRight.getWidth();
                // 親レイアウトの幅取得
                int parentLayoutWidth = parentLayout.getWidth();
                // 左側TextViewの幅確定
                int textLeftWidth = parentLayoutWidth - dummyTextRightWidth;
                textLeft.setMaxWidth(textLeftWidth);

                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                    dummyTextRight.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                } else {
                    dummyTextRight.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                }
            }

        });
    }
}

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

    <!-- ダミー右側TextView -->
    <TextView
        android:id="@+id/dummy_text_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:visibility="invisible" />

    <!-- 親レイアウト -->
    <LinearLayout
        android:id="@+id/parent_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <!-- 左側TextView -->
        <TextView
            android:id="@+id/text_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12sp" />

        <!-- 右側TextView -->
        <TextView
            android:id="@+id/text_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12sp" />

    </LinearLayout>

</RelativeLayout>
1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2