TechAcademy（テックアカデミー） Androidアプリコース スマートフォンアプリ開発 Androidアプリ開発 Androidアプリ開発のTableLayoutの使い方【初心者向け】
オーダーメイドコース
icon
icon
Androidアプリ開発

Androidアプリ開発のTableLayoutの使い方【初心者向け】

Androidアプリ開発におけるレイアウトのうち【TableLayout】の使い方について初心者向けに解説した記事です。パーツを格子状に並べるときに使用するレイアウト。HTMLのtableタグと似たように表示されます。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。

今回はそのなかの1つである、TableLayout（テーブルレイアウト）を追加する方法と基本的な使い方をご紹介します。

 

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

 

大石ゆかり

田島メンター！！HTMLのtableタグみたいにAndroidアプリのパーツを並べる方法ってないですか〜？

田島悠介

TableLayoutっていうレイアウトを使うと、tableタグと同じようにパーツを設置できるよ。

大石ゆかり

あ、そうなんですか〜！？

 

TableLayoutとは

TableLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。

HTMLのtableタグと似ているので、ホームページ作成をしたことがある人は使いやすいレイアウトかもしれません。

ただし、行をまたいでパーツを配置することはできませんのでご注意ください。

 

 

TableLayoutを配置する

今回は、TableLayoutを使用して次のような画面を作成してみます。

TableLayoutは、大枠である「TableLayout」とテーブルの行である「TableRow」でできています。

 

最初にTableLayoutを配置します。

TableLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のTableLayoutを、プレビュー画面までドラッグしましょう。

 

次に、作成する画面には4行必要なので、TableRowを4回プレビュー画面までドラッグして配置します。（行の数によってドラッグする回数を変えてください）

配置をしたらアウトラインで、レイアウトが正しく配置されているか確認をしましょう。

 

 

[PR] Androidアプリ開発コース

TableLayoutにパーツを配置する

TableLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。

横の位置は後ほど調整しますので、目的の行に対して順番にパーツを配置できていれば大丈夫です。

 

 

TableLayoutのコードを確認する

XMLタブでコードを確認すると、下記のようになっています。

<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”match_parent”
android:layout_height=”match_parent” >
<TableRow
android:id=”@+id/tableRow1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” >
<Button
android:id=”@+id/button1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”7″ />
<Button
android:id=”@+id/button2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”8″ />
<Button
android:id=”@+id/button3″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”9″ />
<Button
android:id=”@+id/button15″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”/” />
</TableRow>
<TableRow
android:id=”@+id/tableRow2″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” >
<Button
android:id=”@+id/button4″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”4″ />
<Button
android:id=”@+id/button5″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”5″ />
<Button
android:id=”@+id/button6″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”6″ />
<Button
android:id=”@+id/button14″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”*” />
</TableRow>
<TableRow
android:id=”@+id/tableRow3″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” >
<Button
android:id=”@+id/button7″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”1″ />
<Button
android:id=”@+id/button8″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”2″ />
<Button
android:id=”@+id/button9″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”3″ />
<Button
android:id=”@+id/button12″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”-” />
</TableRow>
<TableRow
android:id=”@+id/tableRow4″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” >
<Button
android:id=”@+id/button10″
android:layout_width=”wrap_content”
android:text=”0″ />
<Button
android:id=”@+id/button11″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”.” />
<Button
android:id=”@+id/button13″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”+” />
</TableRow>
</TableLayout>

 

 

TableLayout上のパーツの配置を調整する

「0」ボタンは2つのセルをまたいで配置されています。

複数のセルをまたぎたい場合は、「android:layout_span」を追加してください。

<Button
android:id=”@+id/button10″
android:layout_width=”wrap_content”
android:layout_span=”2″
android:text=”0″ />

 

実行すると、この画像のようにボタンが表示されます。

 

また、途中のセルを空白にしたい場合は、「android:layout_column」を追加し、列番号を指定します。

列番号は、一番左から「0,1,2,3…」となっています。

<TableRow
android:id=”@+id/tableRow4″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” >
<Button
android:id=”@+id/button10″
android:layout_width=”wrap_content”
android:layout_span=”2″
android:text=”0″ />
<Button
android:id=”@+id/button13″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_column=”3″
android:text=”+” />
</TableRow>

 

さらに実行すると、この画像のようにボタンが表示されます。

これで完成です。

 

さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。

 

大石ゆかり

tableタグを同じように設置できますね！

田島悠介

そうだね。GridLayoutもそうだけど一定の間隔でパーツを並べる場面って結構あるから、そういう時に使うと良いね。

大石ゆかり

そうですね〜♪

 

[お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。

記事を検索

関連するキーワード

関連する記事

KotlinでAndroidアプリのボタンを作成する方法を現役エンジニアが解説【初心者向け】

KotlinでAndroidアプリのボタンを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
Androidアプリ開発

Androidアプリ開発でTimePickerDialogを追加する方法【初心者向け】

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。 今回はそのうちの1つである、TimePick...
Androidアプリ開発

Kotlinのcontainsメソッドの使い方を現役エンジニアが解説【初心者向け】

Kotlinのcontainsメソッドの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
Androidアプリ開発

KotlinでAndroidアプリのradiobuttonを追加する方法を現役エンジニアが解説【初心者向け】

KotlinでAndroidアプリのradiobuttonを追加する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心...
Androidアプリ開発

KotlinのArrayとListの違いを現役エンジニアが解説【初心者向け】

KotlinのArrayとListの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 初心...
Androidアプリ開発

Kotlinのcompanion objectの基礎について現役エンジニアが解説【初心者向け】

Kotlinのcompanion objectの基礎について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
Androidアプリ開発

あわせてよく読まれている記事

Androidアプリ開発のGridLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、GridLayout（グリッドレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！電卓アプリを作っているんですけど、ボタンを等間隔に設置する方法ってないですか〜？ 田島悠介 それならGridLayoutがいいよ。格子状にパーツを並べることができるんだ。 大石ゆかり あ、どうやって使うんですか〜？   GridLayoutとは GridLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。TableLayoutと似ていますが、GridLayoutでは列をまたいでパーツを配置することができます。 Android4.0で公開された比較的新しいレイアウトです。     GridLayoutを配置する 今回は、GridLayoutを使用してこの画像のような画面を作成してみます。   GridLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。 パレット内のGridLayoutを、プレビュー画面までドラッグしましょう。   次に、GridLayoutの列数を指定します。 列数は、プロパティの「ColumnCount」で指定できます。今回は5列必要なので、「ColumnCount」の値を「5」にします。     [PR] Androidアプリ開発コースGridLayoutにパーツを配置する GridLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。 ボタンを画面に配置したら、ボタンを配置するセルを指定しましょう。   セルの指定はプロパティの「Layout Parameters – Row」で、配置する行を指定できます。また、「Layout Parameters – Column」で、配置する列も指定できます。 上から2行目の3列目に配置したい場合は、layout_rowを「1」、layout_columnを「2」といった具合に指定していきましょう。   また、複数のセルをまたぐ場合は、「android:layout_rowSpan」「android:layout_columnSpan」を指定します。 「CE」ボタンや「0」ボタンのように、横にまたぐ場合は「android:layout_columnSpan」を「2」にします。   同じように、「+」ボタンのように縦にまたぐ場合は「android:layout_rowSpan」を「2」にします。 すべてのボタンが配置できたら実行して、画面を確認してください。     GridLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <GridLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”fill_parent” android:columnCount=”5″ > <Button android:id=”@+id/button1″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”0″ android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”0″ android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”0″ android:text=”9″ /> <Button android:id=”@+id/button4″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_columnSpan=”2″ android:layout_row=”0″ android:text=”CE” /> <Button android:id=”@+id/button5″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”1″ android:text=”4″ /> <Button android:id=”@+id/button6″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”1″ android:text=”5″ /> <Button android:id=”@+id/button7″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”1″ android:text=”6″ /> <Button android:id=”@+id/button8″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_row=”1″ android:text=”×” /> <Button android:id=”@+id/button9″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”1″ android:text=”÷” /> <Button android:id=”@+id/button10″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button11″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”2″ android:text=”2″ /> <Button android:id=”@+id/button12″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”2″ android:text=”3″ /> <Button android:id=”@+id/button13″ android:layout_width=”60dp” android:layout_height=”120dp” android:layout_column=”3″ android:layout_row=”2″ android:layout_rowSpan=”2″ android:text=”+” /> <Button android:id=”@+id/button14″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button15″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_columnSpan=”2″ android:layout_row=”3″ android:text=”0″ /> <Button android:id=”@+id/button16″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”3″ android:text=”=” /> </GridLayout> 今回の記事は以上です。   さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。   大石ゆかり GridLayout、とても便利ですね〜♪ 田島悠介 そうだね。Androidは色々なレイアウトが用意されているから、他のレイアウトも使ってみると良いよ♪ 大石ゆかり はい♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

Androidアプリ開発のFrameLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、FrameLayout（フレームレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！FrameLayoutっていうレイアウトがあるんですけど、これって何に使うんですか〜？ 田島悠介 FrameLayoutはビューを重ねて表示したい時に使うんだ。ちょっと試しにやってみようか。   FrameLayoutとは FrameLayoutとは、パーツをひとつだけ配置して使用するレイアウトです。位置の指定はできず、FrameLayoutに配置したパーツは左上に表示されます。 また、FrameLayoutに複数のパーツを配置した場合、パーツが重なって表示されます。     FrameLayoutを配置する FrameLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。 パレット内のFrameLayoutを、プレビュー画面までドラッグしましょう。     [PR] Androidアプリ開発コースFrameLayoutにパーツを配置する FrameLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。   配置したパーツの位置を指定することはできず、画面の左上に表示されます。   さらにもうひとつパーツを配置してみましょう。すると先ほど配置したパーツの上に重なって表示されます。     FrameLayoutの応用 最後に応用として、FrameLayoutを利用して次のような画面のレイアウトを作る例を紹介します。 ボタンを押すことで表示される内容が変わる画面です。   レイアウトは、次のようになっています。 最初にLinearLayout（Vertical）（黄色枠）を配置します。 次に、LinearLayout（Hrizontal）（青枠）を配置し、画面を切り替えるためのボタンを配置します。 さらに、FrameLayout（赤枠）を配置し、その中に表示する画面を作成するために、レイアウトを3つ重ねた状態で配置しています。   なお、表示する画面の切り替えは、FrameLayoutの中に作成したレイアウトを、javaで制御しています。 レイアウトのソースは以下のようになります。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="画面1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="画面2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:text="画面3" /> </LinearLayout> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/layout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:visibility="invisible"> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="40dp" android:text="画面１" android:textSize="40dp" /> </LinearLayout> <LinearLayout android:id="@+id/layout2" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:visibility="invisible"> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="40dp" android:layout_gravity="center" android:layout_marginTop="40dp" android:text="画面２" /> </LinearLayout> <LinearLayout android:id="@+id/layout3" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:visibility="invisible"> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="40dp" android:layout_gravity="center" android:layout_marginTop="40dp" android:text="画面３" /> </LinearLayout> </FrameLayout> </LinearLayout> MainActivityには以下のように記述しました。 public class MainActivity extends AppCompatActivity { private LinearLayout mLayout1; private LinearLayout mLayout2; private LinearLayout mLayout3; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mLayout1 = (LinearLayout)findViewById(R.id.layout1); mLayout2 = (LinearLayout)findViewById(R.id.layout2); mLayout3 = (LinearLayout)findViewById(R.id.layout3); findViewById(R.id.button1).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mLayout1.setVisibility(View.VISIBLE); mLayout2.setVisibility(View.INVISIBLE); mLayout3.setVisibility(View.INVISIBLE); } }); findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mLayout2.setVisibility(View.VISIBLE); mLayout1.setVisibility(View.INVISIBLE); mLayout3.setVisibility(View.INVISIBLE); } }); findViewById(R.id.button3).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { mLayout3.setVisibility(View.VISIBLE); mLayout2.setVisibility(View.INVISIBLE); mLayout1.setVisibility(View.INVISIBLE); } }); } } 今回の記事は以上です。 さらに他のレイアウトを試したい場合はGridLayoutの使い方も合わせてご覧ください。   大石ゆかり なるほど、こうやって使うんですね！ 田島悠介 使うのが少し難しいLayoutだけど、使い方によっては画面内で画面を切り替えるようなこともできるから、覚えておくと良いね。 大石ゆかり はい！   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

Androidアプリ開発のLinearLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが用意されています。 今回はそのなかの1つである、LinearLayout（リニアレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！Androidアプリでパーツを1列に並べたいんですけど、どうしたらいいんですか〜？ 田島悠介 いくつか方法はあるけど、1列に並べたいだけならLinearLayoutはどうかな？ 大石ゆかり どうやって使うんですか〜？   LinearLayoutとは LinearLayoutとは、パーツを縦一列もしくは横一列に並べる場合に使用するレイアウトです。 Eclpseで開発をする場合、LinearLayoutは縦一列に並べるLinearLayout（Vertical）と横一列に並べるLinearLayout（Horizontal）の2種類が用意されています。     LinearLayoutを配置する 今回は、LinearLayoutを使用して画像のような画面を作成してみます。 レイアウトは入れ子にして使用することができます。この例では、赤枠で表したLinearLayout（Vertical）に、青枠で表した３つのLinearLayout（Horizontal）が入れ子になって配置されています。   LinearLayout（Vertical）を配置します。 LinearLayout（Vertical）はレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のLinearLayout（Vertical）を、プレビュー画面までドラッグしましょう。   次に、同様にLinearLayout（Horizontal）を3回プレビュー画面までドラッグして配置します。 アウトラインで、レイアウトが正しく配置されているか確認をしましょう。   LinearLayoutにパーツを配置する LinearLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。 もしも配置したいレイアウト以外の場所に配置をしてしまった場合は、プレビュー画面に配置されたパーツをドラッグするか、アウトラインに表示されているパーツをドラッグして移動しましょう。   ３行目のボタンのように、LinearLayoutに配置されたパーツを中央寄せで表示したい場合は、レイアウトを選択し、プロパティの「Gravity」の値を「center_horizontal」に変更します。   起動をして、画面を確認します。 配置はこれで完了です。     [PR] Androidアプリ開発コースLinearLayoutのコードを確認する 最後にコードを確認してみましょう。 XMLタブでコードを確認すると、下記のようになっています。LinearLayoutが入れ子になっていることがわかると思います。 <LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”match_parent” android:layout_height=”match_parent” android:orientation=”vertical” > <LinearLayout android:layout_width=”match_parent” android:layout_height=”wrap_content” > <TextView android:id=”@+id/textView1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”名前” /> <EditText android:id=”@+id/editText1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_weight=”1″ android:ems=”10″ > <requestFocus /> </EditText> </LinearLayout> <LinearLayout android:layout_width=”match_parent” android:layout_height=”wrap_content” > <TextView android:id=”@+id/textView2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_weight=”1″ android:text=”コメント” /> <EditText android:id=”@+id/editText2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_weight=”1″ android:ems=”10″ /> </LinearLayout> <LinearLayout android:layout_width=”match_parent” android:layout_height=”wrap_content” android:gravity=”center_horizontal” > <Button android:id=”@+id/button1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”送信” /> <Button android:id=”@+id/button2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”リセット” /> </LinearLayout> </LinearLayout> 今回は以上です。   他のレイアウトも試したい場合はRelativeLayoutの使い方も合わせてご覧ください。   大石ゆかり 簡単に1列に並べられるんですね〜♪ 田島悠介 そうだね。縦でも横でも並べられるから、使う場面がとても多いレイアウトの一つだね。 大石ゆかり そうですね〜♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

KotlinでAndroidアプリのradiobuttonを追加する方法を現役エンジニアが解説【初心者向け】

KotlinでAndroidアプリのradiobuttonを追加する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 初心者向けにKotlinの入門向けサイトをまとめた記事もありますので読んでみてください。 なお本記事は、TechAcademyのオンラインブートキャンプ、Androidアプリ開発講座の内容をもとに作成しています。 田島悠介 今回は、Androidアプリ開発に関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 KotlinでAndroidアプリのradiobuttonを追加する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 radiobuttonとは radiobuttonを配置してみよう radiobuttonが選択された時の処理を追加してみよう まとめ   radiobuttonとは radiobuttonとは複数の選択肢から1つだけを選択する際に使用するUI部品です。 [PR] Androidアプリ開発コースradiobuttonを配置してみよう radiobuttonはRadioGroupの中にRadioButtonを配置する構成です。Android Developerにサンプルが紹介されていますので確認しながら進めましょう。 Android Developer – Radio Button 例えば「さくら、うめ、ぼたん」のRadio Buttonを配置するには以下のように記述します。 <RadioGroup android:id="@+id/group" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"> <RadioButton android:id="@+id/radio1" android:layout_width="wrap_content" android:layout_height="wrap_content"
Androidアプリ開発

Androidアプリ開発のRelativeLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、RelativeLayout（リラティブレイアウト・相対レイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！Androidアプリでボタンの並びを相対的に並べたいんですけど、何かいい方法ってないですか〜？ 田島悠介 それならRelativeLayoutを使うとできるよ。パーツの位置を相対的に設置できるんだ。 大石ゆかり RelativeLayout、ですか？   RelativeLayoutとは RelativeLayoutとは、基準となるパーツを決め、それとの相対的な関係で位置を決めていくというレイアウトです。     RelativeLayoutを配置する 画面を最初から作成する場合は、xmlタブを開いてデフォルトで記述されているコードをすべて削除しておきましょう。 RelativeLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のRelativeLayoutを、プレビュー画面までドラッグしましょう。     [PR] Androidアプリ開発コースRelativeLayoutにパーツを配置する RelativeLayout上にパーツを配置してみましょう。 一番最初に配置したパーツはレイアウトの基準として配置されています。   次に配置したパーツは、一つ前に配置したパーツを基準に配置されます。また、基準にしているパーツは矢印で確認できます。   パーツを移動させると、そのパーツを基準としている他のパーツも同じように移動します。     RelativeLayoutのコードを確認する 最後に、RelativeLayoutで、下の画像のようにボタンを3つ配置した画面を作成しコードを確認してみましょう。   xmlタブでコードを確認すると、このようになっています。 <RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”match_parent” android:layout_height=”match_parent” > <Button android:id=”@+id/button1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_alignParentLeft=”true” android:layout_alignParentTop=”true” android:layout_marginLeft=”59dp” android:layout_marginTop=”56dp” android:text=”Button” /> <Button android:id=”@+id/button2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_alignLeft=”@+id/button1″ android:layout_below=”@+id/button1″ android:layout_marginTop=”80dp” android:text=”Button” /> <Button android:id=”@+id/button3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_below=”@+id/button2″ android:layout_marginLeft=”43dp” android:layout_marginTop=”68dp” android:layout_toRightOf=”@+id/button2″ android:text=”Button” /> </RelativeLayout> グラフィカルレイアウトでうまく微調整ができない場合は、コードを使って微調整をするようにしましょう。各コードを編集する際は、下記の内容を参考にしてください。   レイアウトを基準に配置したい場合は、下記の属性を「true」にする android:layout_alignParentTop　：　レイアウトの上端に配置する android:layout_alignParentBottoｍ　：　レイアウトの下端に配置する android:layout_alignParentLeft　：　レイアウトの左端に配置する android:layout_alignParentRight　：　レイアウトの右端に配置する android:layout_centerHorizontal　：　レイアウトの水平方向の中央に配置する android:layout_centerVertical　：　レイアウトの垂直方向の中央に配置する android:layout_centerInParent　：　レイアウトの中央に配置する   パーツを基準に配置をしている場合は、下記の属性に基準としているパーツIDを指定する layout_below　：　指定したパーツの下に配置 layout_alignLeft　：　指定したパーツの左に配置 ayout_toRightOf　：　指定したパーツの右に配置   基準としたパーツやレイアウトからの距離を指定する場合は、下記の属性に距離を指定する layout_marginTop　：　上の距離 layout_marginBottom　：　下の距離 layout_marginLeft　：　左側の距離 layout_marginRight　：　右側の距離 （指定がない場合は、基準のパーツの位置と揃えて配置します）   今回の記事は以上です。 さらに他のレイアウトを試したい場合はTableLayoutの使い方も合わせてご覧ください。   大石ゆかり RelativeLayoutはとても使う場面が多そうなレイアウトですね〜♪ 田島悠介 そうだね。絶対的な位置関係だと一つパーツをずらした時に他のパーツも動かさないといけないから、使うととても便利だね。 大石ゆかり はい！   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。
Androidアプリ開発

Webデザインの知識がなくてもOK！Bootstrapの使い方【入門者向け】

独学でHTML/CSSを勉強してもデザインがいまいち…という経験はないでしょうか。そんなときに便利なBootstrapの使い方を初心者向けに解説します。   HTML/CSSがわからない方も読むことができますが、HTMLの書き方、CSSの書き方は理解しておいた方がスムーズに読み進めることができるでしょう。 なお、今回はBootstrapのバージョン「3.3.5」を使用します。   本記事は、オンライン完結のBootstrap講座のカリキュラムをもとに執筆しています。   なお、今回の記事の内容は動画でもご覧いただけます。 テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。   大石ゆかり 田島メンター！！Bootstrapというのは何ですか〜？ 田島悠介 Bootstrapはレスポンシブデザインに対応したフロントエンドのフレームワークだよ。 大石ゆかり フロントエンドというとHTML・CSS・JavaScriptですか？ 田島悠介 そうだね。シンプルな指示でグリッドシステムを使用できたり、本格的なフォームやボタンを作成できたりと非常に便利なんだ。基本の使い方を見てみよう。   目次 本記事では、Bootstrapの基礎をおさえた上で、よく使う、グリッドシステム、テーブル、ボタン、フォームの具体的な使い方を順番に紹介します。 Bootstrapとは Bootstrapを使う準備 グリッドシステムの使い方 テーブルの使い方 ボタンの使い方 フォームの使い方 Bootstrapとは BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。 もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在では「Bootstrap」のみで呼ばれるようになっています。   Bootstrapを使うメリット Bootstrapを使うメリットとして、レスポンシブWebデザインに対応しているという点があります。通常、スマートフォンやタブレットなど個別に対応するスタイルを作っていると大変手間がかかります。BootstrapはCSS3のメディアクエリを使用しているので、ブラウザの横幅サイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。   このページから確認できますが、バージョン3.3.5ではこちらのブラウザに対応しています。 この際の注意点ですが、Internet Explorer 7以下とFirefox 3.6以下はサポートされません。これは、CSS3メディアクエリがサポートされていないブラウザだからです。     [PR] Androidアプリ開発コースBootstrapを使う準備 実際にBootstrapを使う前の準備が必要ですので、まずはこちらに着手しましょう。PCだけあればすぐに準備できます。   Bootstrapを使用するには、BootstrapとjQuery（JavaScriptのライブラリ）を読み込む必要があります。読み込みの方法は下記の2パターンです。 ソースをダウンロードして、ローカルに配置して読み込む すでにホストされているファイルをインターネット経由で読み込む 今回は、前者の方法を紹介します。   ダウンロードするには、BootstrapのTOPページにアクセスしましょう。 「Download Bootstrap」のボタンをクリックしてください。   次に表示されるページで、左にある「Download Bootstrap」をクリックするとダウンロードが始まります。   ダウンロードしたZIPファイルを解凍すると、「css」、「js」、「fonts」の3つのフォルダがあることがわかるはずです。   続いてHTMLファイルを用意しましょう。Bootstrapのページにもテンプレートが用意されていますが、コメントアウトが日本語の方がわかりやすいと思いますので、TechAcademyで用意しています。こちらのコードをコピーして「index.html」としてHTMLファイルを作成してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Sample</title> <!-- BootstrapのCSS読み込み --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery読み込み -->
Bootstrap

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Androidアプリコース スマートフォンアプリ開発 Androidアプリ開発 Androidアプリ開発のTableLayoutの使い方【初心者向け】