icon
icon

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

Androidアプリ開発でGUIコンポーネントの【SlidingDrawer】を追加する方法を初心者向けに解説した記事です。SlidingDrawerとは、ハンドルを引き出して新しい画面を表示させるためのウィジェットです。

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

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

今回はその中の1つである、SlidingDrawer(スライドドロワー)を追加する方法と基本的な使い方をご紹介します。

 

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

 

大石ゆかり

田島メンター!!SlidingDrawerっていうGUIコンポーネントがあるんですけど、これってなんですか〜?

田島悠介

SlidingDrawerっていうのは、画面上のハンドルで新しい画面をスライドして呼び出すことのできるGUIコンポーネントなんだ。

 

SlidingDrawerとは

SlidingDrawerは、ハンドルを引き出して新しい画面を表示させるためのウィジェットです。

Android端末のホーム画面でも、上から下にスライドして通知画面を表示させるというように使われています。

 

 

SlidingDrawerを配置する

SlidingDrawerはレイアウトエディタのパレットの「コンポジット」から配置できます。

パレット内のSlidingDrawerを、配置したい場所までドラッグしましょう。

※SlidingDrawerは、APIレベル17で非推奨となりました。パレットに出てこない場合は、下記のソースコードをレイアウトファイルに貼り付けてください。

 

この状態でxmlタブを見ると、「<LinearLayout」の下に赤い波線があります。これはエラーが発生していることを示しています。

 

グラフィカルレイアウトタブに戻り、Component Treeで「content(LinearLayout)」を選択し、プロパティの「orientation」の値を「horizontal」にしてください。

 

これでSlidingDrawerの配置は完了です。

xmlファイルには次のようなコードが追加されています。

<SlidingDrawer
android:id=”@+id/slidingDrawer1″
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_column=”0″
android:layout_gravity=”left|top”
android:layout_row=”0″
android:content=”@+id/content”
android:handle=”@+id/handle” >

<Button
android:id=”@+id/handle”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Handle” />

<LinearLayout
android:id=”@+id/content”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:background=”#FF0000″
android:orientation=”horizontal” >

</LinearLayout>
</SlidingDrawer>

 

それでは、実際に起動してみます。

画像では動きが分かりやすいように、アウトラインで「content(LinearLayout)」を選択し、プロパティの「Background」の値を「#FF0000」にして、引き出される画面の色を赤にしています。

「Handle」ボタンを上下にスライドさせると、画面を引き出したりしまったりすることができます。

 

 

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

ボタンを配置する

アウトラインで「content(LinearLayout)」を選択します。

この状態で、パレットの「フォーム・ウィジェット」にあるButtonをcontent(LinearLayout)の枠の上までドラッグします。

ドラッグしたボタンは枠しか見えませんが、配置はできています。

 

同じように、4つのボタンを配置して、起動して確認してみましょう。

SlidingDrawerの基本的な使い方は以上です。

 

他のGUIコンポーネントの使い方を知りたい場合は、Androidアプリ開発でProgressDialogを追加する方法も合わせてご覧ください。

 

大石ゆかり

SlideDrawerって活用方法がたくさんありそうですね♪

田島悠介

そうだね。通知とか画面外から出てくるような表示を使いたいときにはとても有効なコンポーネントだね。

大石ゆかり

はい♪

 

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