お問い合わせ
    氏名

    メールアドレス

    件名

    お問い合わせ内容



    会員登録(無料)
    ログイン
    WordPressのスキルアップ!▶

    【Androidアプリ作成】Layout(レイアウト)の作り方・使い方|activity_main.xml

    Apps(アプリ)
    この記事は約6分で読めます。
    「ワードプレスで未来を変える!」
    誰でも挑戦できます!!
    【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して未来を変えたい!という方をお待ちしています↓↓

    Androidアプリ作成を始めてみましたが、layout(レイアウト)作成が思ったようにいかず難しかったので、備忘録的に書き留めてみたいと思います。

    Empty Activity

    まずはプロジェクトの新規作成から、プロジェクト作成時に「Empty Activity」を選択すると、何も入っていない空のレイアウトが作られます。

    レイアウトにテキストもボタンも何も無い状態です。

    layoutの読み込み方法

    Android プロジェクトの res/layout/ ディレクトリ内の .xml 拡張子から読み込みます。プロジェクト作成時には「activity_main.xml」が準備されています。

    XMLを読み込む方法

    setContentView() を呼び出し、R.layout.layout_file_name の形式でレイアウトリソースへの参照を渡します。

    プロジェクト作成時は下記のようになっており、何も手を付けずに実行した場合、activity_main.xmlを読み込むように設定されています。

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

    ConstraintLayout

    activity_main.xmlを開いたら、上のPaletteタブから下のComponent TreeへtextViewをドラッグアンドドロップすると、テキストが配置されます。

    ドラッグアンドドロップでテキストビューを中央に移動すれば、画面の中央に配置されるのでは?と思いましたが、そういうことには、なりません。

    xmlの方では中央に配置されていますが、実機(エミュレーター)では、左上に配置されたままです。

    This view is not constrained.

    This view is not constrained. It only has designtime positions, so it will jump to (0,0) at runtime unless you add the constraints The layout editor allows you to place widgets anywhere on the canvas, and it records the current position with designtime attributes (such as layout_editor_absoluteX). These attributes are not applied at runtime, so if you push your layout on a device, the widgets may appear in a different location than shown in the editor. To fix this, make sure a widget has both horizontal and vertical constraints by dragging from the edge connections. Issue id: MissingConstraints

    このビューは制約されていません。 デザインタイムの位置しか持たないため、制約を追加しない限り、実行時に(0,0)にジャンプします。レイアウトエディターでは、キャンバス上の任意の場所にウィジェットを配置でき、デザインタイム属性(layout_editor_absoluteXなど)で現在の位置を記録します 。 これらの属性は実行時に適用されないため、デバイスにレイアウトをプッシュすると、ウィジェットがエディターに表示される場所とは異なる場所に表示される場合があります。 これを修正するには、エッジ接続からドラッグして、ウィジェットに水平方向と垂直方向の両方の制約があることを確認してください。 問題ID:MissingConstraints

    こんな感じで・・・エラーが出ます。

    It only has designtime positions, so it will jump to (0,0) at runtime unless you add the constraints
    設計時の位置のみがあるため、制約を追加しない限り、実行時に(0,0)にジャンプします。

    To fix this, make sure a widget has both horizontal and vertical constraints by dragging from the edge connections.
    これを修正するには、エッジ接続からドラッグして、ウィジェットに水平方向と垂直方向の両方の制約があることを確認してください。

    水平方向と垂直方向の両方の設定が必要なようです。

    layout_constraint

    layout_constraintで配置を設定できます。

    属性効果RelativeLayout
    layout_constraintEnd_toStartOf指定したViewの左側に配置layout_toStartOf
    layout_constraintStart_toEndOf指定したViewの右側に配置layout_toEndOf
    layout_constraintRight_toLeftOf指定したViewの左側に配置layout_toLeftOf
    layout_constraintLeft_toRightOf指定したViewの右側に配置layout_toRightOf
    layout_constraintBottom_toTopOf指定したViewの上側に配置layout_above
    layout_constraintTop_toBottomOf指定したViewの下側に配置layout_below

    Constrain Parent

    textWiew右クリック>Constrain>parent top&parent start
    で上(垂直方向)と左(水平方向)の値をセットします。

    配置できました!が、このままだと数値が直接入っていますので、画面のサイズによって位置がずれてしまいます。

    上下左右の中央をセット

    app:layout_constraintBottom_toBottomOf=”parent”
    app:layout_constraintEnd_toEndOf=”parent”
    app:layout_constraintStart_toStartOf=”parent”
    app:layout_constraintTop_toTopOf=”parent”

    このように上下左右をparentで配置すると、テキストが中央に配置できます!!

    まとめ

    テキストひとつ中央に揃えるので…この大変さです。上下左右のparentがひとつでも消えると、いっきに位置がずれます。

    layout_constraintTop_toTopOfを削除すると、下にドーンと下がっていきます。

    GUIで操作はできますが、パワーポイントやイラストレーターのようにドラッグアンドドロップで並べる・・・という簡単な感じではありません。

    この先上手くいくのか心配ですが、ここから、他のボタンや入力テキストを配置していきます!

    つづく(^ ^)/

    タイトルとURLをコピーしました