プログラミングマガジン

プログラミングを中心にIT技術をできるだけわかりやすくまとめます。

  • ホーム
  • Android
  • 【Android】Android Studioでの画面レイアウトの作り方~その2:レイアウ…
 
 
     
  • サーバー言語  
    • Python
    • Ruby
    • PHP
    • SQL
  •  
  • インフラ  
       
    • AWS
    •  
    • 基本
    • Git
  • Web
       
    • Web開発
    • JavaScript
    • Vue.js
    • React
  •  
  • 設計  
       
    • 実装設計
    • DB設計
  • 問い合わせ
  

【Android】Android Studioでの画面レイアウトの作り方~その2:レイアウト部品の使い方~、文言の出し方

04.07

  • miyabisan2
  • コメントを書く

この記事は3分で読めます

下記の記事で、画面レイアウトを行うのに便利な「デザインモード」についてご紹介させて頂きました。

【Android】Android Studioでの画面レイアウトの作り方~その1:デザインモードを覚えよう~

次は、基本となる「ビューグループ(レイアウト部品)」の使い方を覚えていきましょう。

事前準備

新規プロジェクトで、出てくる「Hello Worldアプリ」があることを前提に説明させていただきます。

まだ、新規プロジェクトを作成されていない方は、下記の記事を参考に「空のプロジェクト」を作成してください。

【Android】Android Studio 3.1で新規プロジェクトを作成する。

「空のプロジェクト」を作成したら「デザインモード」を開いて、「Component Tree」の中の「TextView」(Hello World!と表示されている部分)を消しておきます。

これで事前準備は完了です。

LinerLayout(horizontal)

まずは、「LinerLayOut(horizontal)です。このレイアウトを使うと、画面部品を横一列に並べて配置ができます。

現状、「Hello Worldアプリ」では、「ConstraintLayout」と表示されているので、「Convert view」をクリックします。

「LinearLayout」→「Apply」をクリックします。

「LinearLayout(horizontal)」と表示が変わりました。(デフォルトだと、Verticalではなく、horizontalとなるようです。)

後は、適当にButtnをドラック&ドロップすると、下記のようにボタンが横に水平に並べることができます。

LinerLayout(Vertical)

LinerLayout(Vertical)は、画面部品を縦一列に並べて配置ができます。

一旦「Linearlayout(horizontal)」を選択して、「LinearLayout」→「Convert orientation to vertical」を選択します。

LinearLayut(vertical)になっていることを確認できます。

下記のように、縦にボタンレイアウトができています。

TableLayout

「TableLayout」は、表形式で画面部品を配置できます。

「TableLayout」は、直接はレイアウトとして置けませんので、「LinearLayout(vertical)」の上にドラッグ&ドロップします。

Tablelayoutの中には、「TableRow」というレイアウト部品が出来ているので、その中に以下のように部品をドラッグ&ドロップすると、表形式で部品を並べることができます。

FrameLayout

FrameLayoutは、画面部品を重ねて配置ができるレイアウトです。

下記の例では、「Button」と「text」を重ねて配置しています。

ConstraintLayout

「ConstraintLayout」は、画面部品を相対的に配置することができるレイアウトです。

下記のように、部品のマージンの数値をいじることで、相対的な位置に自由に配置をすることができます。(Hello Worldアプリのデフォルトもこのレイアウトでしたよね。)

文言の出し方

Androidアプリは、基本的に画面で使う文言は、string.xmlファイルに外出しするようにするとは、下記の記事で解説させて頂きました。

【Android】Androidプロジェクトのフォルダ構成(Android Studio3.1にて)

では、具体的にどのように記入していけばよいか実装してみましょう。

実際にやってみる。

まず、編集していくファイルとしては、Androidアプリの「values/strings.xml」になります。

まずは、サンプルアプリとして、下記のように、「LinearLayout」の下に、「textView部品」を配置しましょう。

まだ、配置しただけでは、下記のように「TextView」と表示されてしまっていて、何のパーツかわからない状態になっています。

まずは、直接値を入力してみる。

まずは、直接値を入力してみましょう。「TextView」をクリックして、Attributeにある「text」にためしに、「検索したい文言を入力してください。」と入力すると値が入りました。

ただ、このままでは固定値の管理として、微妙な感じがしますし、何よりAndroid的にも推奨されていません。

固定値を外出しして書く

下記のように、strings.xmlを選択し、検索したい文言のタグを書きます。

name属性は、必須になります。

textには、「@string/(name属性で設定した値)」と入力します。

固定値がtextViewに埋め込まれました。

スポンサーリンク
  • 2018 04.07
  • miyabisan2
  • コメントを書く
  • Android
  • Tweets Twitter
  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. 2018 04.08

    【Android】サンプル1~検索画面っぽいデザインを作る~(Android Studio3.1にて)

  2. 2018 04.05

    【Android】レイアウトファイル(res/layout/~.xml)の構成要素

  3. 2018 04.04

    【Android】Hello Worldを試してみる。

  4. 2018 04.04

    【Android】Androidプロジェクトのフォルダ構成(Android Studio3.1にて)

  5. 2018 04.08

    【Android】アクティビティファイル(Javaコード)の基本

  6. 2018 04.07

    【Android】Android Studioでの画面レイアウトの作り方~その1:デザインモードを覚えよう~

  • コメント ( 0 )
  • トラックバック ( 0 )
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

返信をキャンセルする。

【Android】Android Studioでの画面…

【データベース設計】ユーザーテーブルの設計について考え…

RETURN TOP

著者プロフィール

エンジニア歴10年で過去に業務系、Webデザイン、インフラ系なども経験あります。現在はWeb系でフロントエンド開発中心です。

詳細なプロフィールはこちら

スポンサーリンク

カテゴリー

  • Android
  • AngularJS
  • API
  • AWS
  • C++
  • CSS
  • cursor
  • C言語
  • DDD
  • DevOps
  • Django
  • Docker
  • Figma
  • Git
  • GitLab
  • GraphQL
  • gRPC
  • Hasura
  • Java
  • JavaScript
  • Kubernetes
  • Laravel
  • linux
  • MySQL
  • Next.js
  • nginx
  • Node.js
  • NoSQL
  • Nuxt.js
  • Oracle
  • PHP
  • Python
  • React
  • Redux
  • Rspec
  • Ruby
  • Ruby on Rails
  • Sass
  • Spring Framework
  • SQL
  • TypeScript
  • Unity
  • Vue.js
  • Webサービス開発
  • Webデザイン
  • Web技術
  • インフラ
  • オブジェクト指向
  • システム開発
  • セキュリティ
  • その他
  • データベース
  • デザインパターン
  • テスト
  • ネットワーク
  • プログラミング全般
  • マイクロサービス
  • マイクロソフト系技術
  • マルチメディア
  • リファクタリング
  • 副業
  • 未分類
  • 業務知識
  • 生成AI
  • 設計
  • 関数型言語
RETURN TOP

Copyright ©  プログラミングマガジン | プライバシーポリシー