CodeZine(コードジン)

特集ページ一覧

Androidアプリの画面部品 ~ LinearLayout/ラジオボタン/ドロップダウンリスト/リストビュー

Android Studio 2で始めるアプリ開発入門 第4回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2016/05/25 14:00

目次

他のビュー部品

 これまでのサンプルで、文字列を表示するTextView、テキストボックスを表すEditText、ボタンのButton、チェックボックスのCheckBoxのビュー画面部品が登場しました。

 ここからさらに3個ほどビュー画面部品を紹介します。

ラジオボタン

 最初に紹介するのがラジオボタンです。前回のサンプルのactivity_view_sample.xmlファイルのチェックボックスの<LinearLayout>の閉じタグと<Button>タグの間に部分に以下のコードを追加します。

リスト3 activity_view_sample.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  ~省略~
    </LinearLayout>

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:background="#df7401"
        android:orientation="horizontal" (1)
        android:paddingBottom="10dp"
        android:paddingTop="10dp">

        <RadioButton
            android:id="@+id/rbMale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="25dp"
            android:layout_marginRight="25dp"
            android:background="#ffffff"
            android:text="@string/rb_male"/>

        <RadioButton
            android:id="@+id/rbFemale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:text="@string/rb_female"/>
    </RadioGroup>

    <Button
  ~省略~

 LinearLayout追加時と同様、このままだとラジオボタンの表示文字列が不足していますので、strings.xmlにタグを追加します。以下の2個のタグを追加してください。

リスト4 strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
  ~省略~
    <string name="rb_male">男</string>
    <string name="rb_female">女</string>

</resources>

 入力が終了し、特に問題がなければアプリを実行してみてください。以下のような画面が表示されれば成功です。

図4 ラジオボタンが追加された画面部品サンプルアプリ実行結果
図4 ラジオボタンが追加された画面部品サンプルアプリ実行結果

 ラジオボタンは、<RadioButton>タグを使用します。また、今回のサンプルの「男」か「女」のように、通常は複数のラジオボタンをワンセットとしてそのうちのどれかひとつを選択してもらうのに使用します。その場合、それらワンセットとしてグループ化される<RadioButton>タグを<RadioGroup>タグで囲みます。

 ところで、今回、ラジオボタンが横並びになっています。画面構成を図にすると以下のようになります。

図5 ラジオボタンを追加した画面構成
図5 ラジオボタンを追加した画面構成

 このRadioGroupは、LinearLayoutと同様に、並べる方向をandroid:orientation属性で指定できます(リスト3 activity_view_sample.xmlの(1))。現在「horizontal」となっているこの属性値を、「vertical」に変更すると、以下のようにラジオボタンが縦並びになります。

図6 ラジオボタンが縦並びの実行結果画面
図6 ラジオボタンが縦並びの実行結果画面

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Android Studio 2で始めるアプリ開発入門

もっと読む

著者プロフィール

  • WINGSプロジェクト 齊藤 新三(サイトウ シンゾウ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きた...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5