[Android] ToggleButton:トグルボタンを表示する

トグルボタンとは、クリックすることで2つの状態を交互に切り替えられるコンポーネントです。オン状態でクリックするとオフに、オフ状態でクリックするとオンになるようなボタンで、プレイヤーの再生・一時停止を切り替えるボタン等によく使用されます。ここではトグルボタンの表示方法について説明します。
広 告
目次
前提条件
動作確認端末
- Google Nexus 5 – 5.0.0 – API21(エミュレータ)
1. ToggleButtonの概要
トグルボタンを表示させるためにはToggleButtonクラスか<ToggleButton>
タグを使います。Buttonクラスを継承しているため、Buttonクラスのメソッドを使用することが可能です。また<Button>
タグで使える属性を使用することが可能です。
2. トグルボタンを表示する
レイアウトXMLを使ってトグルボタンを表示させるためには、<ToggleButton>
タグを使用します。ラベルに表示するテキストについては、オン状態のラベルはtextOn
属性で、オフ状態のラベルはtextOff
属性で指定することが出来ます。
<ToggleButton>
タグの使用例は以下のとおりです。
res/layout/activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <!-- @string/toggle_onの参照先は「ON」 --> <!-- @string/toggle_offの参照先は「OFF」 --> <ToggleButton android:id="@+id/toggle_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textOn="@string/toggle_on" android:textOff="@string/toggle_off" /> </RelativeLayout>
アプリを実行すると以下のようにトグルボタンが画面に表示されます。
オン状態

オフ状態

ボタンをクリックするとオン・オフ状態が切り替わります。
Javaコードでトグルボタンを扱うためにはToggleButtonクラスを使用します。ラベルに表示するテキストについては、オン状態のラベルはsetTextOn()メソッドで設定し、オフ状態のラベルはsetTextOff()メソッドで指定します。
以下に例を示します。
java/<packagename>/MainActivity.java
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final ToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggle_button); toggleButton.setTextOn(getString(R.string.toggle_on)); toggleButton.setTextOff(getString(R.string.toggle_off)); } }
res/layout/activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"> <ToggleButton android:id="@+id/toggle_button" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout>
アプリを実行すると以下のようにトグルボタンが画面に表示されます。
オン状態

オフ状態
