【Android開発基礎】複数のtextviewを配置してそれぞれに文字を設定したい

Question

###前提・実現したいこと

###発生している問題・エラーメッセージ
アンドロイドスタジオのエミュレータでテキストビューで文字を表示させようとしているが、
実行後エミュレータ上で複数の文字が一箇所に表示される。

エラーメッセージ

###該当のソースコード

package com.example.operatingtime;

import android.os.SystemClock;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);


        setContentView(R.layout.activity_main);

        long ut = SystemClock.uptimeMillis();

        TextView tv2 = (TextView) findViewById(R.id.textView2);
        TextView tv3 = (TextView) findViewById(R.id.textView3);
        TextView tv4 = (TextView) findViewById(R.id.textView4);
        TextView tv5 = (TextView) findViewById(R.id.textView5);

        String ms = "(ミリ秒単位)"+ut;
        String sec = "(秒単位)"+(ut/1000);
        String min = "(分単位)"+(ut/1000/60);
        String hr = "(時間単位)"+(ut/1000/60/60)+":"+(ut/1000/60%60);

        tv2.setText(ms);
        tv3.setText(sec);
        tv4.setText(min);
        tv5.setText(hr);
    }
}


```XML
<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.operatingtime.MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="204dp"
        android:layout_height="23dp"
        android:text="起動後の経過時間"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="27dp" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="190dp"
        android:layout_height="21dp"
        android:text="TextView"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="66dp" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="183dp"
        android:layout_height="15dp"
        android:text="TextView"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="111dp" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="185dp"
        android:layout_height="18dp"
        android:text="TextView"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="159dp" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="185dp"
        android:layout_height="20dp"
        android:text="TextView"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="203dp" />
</android.support.constraint.ConstraintLayout>

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Answer 1

Android 2.3から導入されたConstraintLayoutは、配置するコンポーネント（View）の水平方向と垂直方向に制約（Constraint）を与えることで位置決めをします。質問に記述されたXMLの内容だと、制約が一切与えられていない形になっているため、そのまま実行すると全てのコンポーネントが左上に寄ってしまいます。それが問題になっている症状でしょう。

ConstraintLayoutは慣れないと扱いが難しいので、てっとり早い解決法としては旧来のRelativeLayoutを使ってみることですかね。レイアウトエディターのXMLソースを編集して、

<android.support.constraint.ConstraintLayout

の部分を

<RelativeLayout

に書き換えましょう。閉じタグは自動的に連動するはずです。

この状態でデザインエディターに戻ってコンポーネント配置をやり直せば、配置したイメージ通りに実行されるのではないかと思います。

Comments

[shoco]

回答ありがとうございます。
助言どおり開始タグを修正したら個別に配置することができました
ありがとうございました。