Browsing articles in "ユーザインターフェース"

PopupMenuが消えるときに処理を行う

11月 5, 2011   //   by kkato   //   ユーザインターフェース  //  No Comments

Android 3.0(Honeycomb)からメニュー項目がポップアップ状に表示されるPopupMenuが追加されました。

そのPopupMenuがAndroid4.0(ICS)で拡張されています。

3.0からの違い

  • inflateメソッドが追加され、Menu Resourceからコンテンツを生成することが可能になった
  • メニューが破棄された(消えた)ことを受け取るリスナーが追加された

PopupMenuの基本的な使い方は「PopupMenuを使う」を参照してください。

それでは続きでICSで拡張された内容を説明します。

Read more >>

Gelleryを使って画像を一覧表示する / Getting Started

10月 28, 2011   //   by kseto   //   Android, ユーザインターフェース  //  No Comments

Galleryを使うと画像データを簡単に一覧表示することができます。
多くの画像データを効率よく扱いたい場合、GalleryViewやGridViewは重宝します。

※Android 3.0以降ではGelleyは推奨されていませんので、プラットフォームに応じてご使用ください。

Galleryを使うには以下のような手順で設定を行います。

  • Adapterの作成
  • GalleryにAdapterを設定

それでは続きからGalleryの使い方を詳しく説明します。

Read more >>

widget間に空間を作る(Spaceを使う)

10月 26, 2011   //   by furusin   //   ユーザインターフェース  //  No Comments

Android 4.0 IceCreamSandwich(以後ICS) では、新しくスペース(Space)が追加されました。

Android3.xまでは画面設計において、部品と部品(widget)の間にスペースを開けるには、パディング(padding)を用いたり、空の文字列を持ったテキストビューを用いたりしてきました。

ICS以降、スペースを利用することで、部品と部品の間にスペースを開ける事が非常に容易となりました。

「ここにちょっとだけスペースを入れたいんだけど・・・!」という、かゆいところに手が届くのがスペースです。

スペースを利用する上で重要になるクラスはSpaceクラスです。

リファレンスはこちら

それでは、実際に画面設計のXMLにSpaceを入れてみましょう。
Android3.xまで通り、次のように普通に画像を並べた場合、画像と画像の間にスペースは無く、連結されて表示されてします。

■res/main.xml

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/tb" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/tb" />
</LinearLayout>

ここで表示させた2つの画像の間に、少しだけスペースを開けたい場合に、前述の通り、Android3.xまではパディング等を用いてきました。
ICS以降では、スペースを文字通り「置いて」、空間を作ることができます。

スペースを使うには、具体的には次のようにします。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/tb" />

    <Space android:layout_width="match_parent" 
        android:layout_height="25dip"/>
    
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/tb" />
</LinearLayout>

上記ソースコードの13,14行目のように、Speceを入れると、次の図のように、画像と画像の間にスペースが空きます。

また、2つ目の画像を、少しだけ右にズラしたい時は、次のようにLinearLayout等を応用します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/tb" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Space
            android:layout_width="25dip"
            android:layout_height="match_parent" />
        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/tb" />
    </LinearLayout>

</LinearLayout>

上記ソースコードの場合、次の図のように、2つ目の画像の左側に空白ができ、画像が少し右へズレます。

以上のように、XMLで簡単に画面レイアウトの微妙な調整ができます。

また、JavaコードでSpaceを利用するには、イカのようにします。
まずはXMLから。
res/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
</LinearLayout>

次に、Javaコードです。
■src/SpaceSampleActivity.java

package org.jpn.techbooster.sample.space;

import android.app.Activity;
import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Space;

public class SpaceSampleActivity extends Activity {
	private final int WC = ViewGroup.LayoutParams.WRAP_CONTENT; 
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        LinearLayout layout = (LinearLayout)findViewById(R.id.linearLayout1);
        
        ImageView imageView1 = new ImageView(this);
        imageView1.setImageResource(R.drawable.tb);
        layout.addView(imageView1, new LinearLayout.LayoutParams(WC, WC));
        
        Space sp = new Space(this);
        layout.addView(sp, new LinearLayout.LayoutParams(20, 20));

        ImageView imageView2 = new ImageView(this);
        imageView2.setImageResource(R.drawable.tb);
        layout.addView(imageView2, new LinearLayout.LayoutParams(WC, WC));
    }
}

上記コードでは、次の図のようになります。

上記コード24行目でSpaceのインスタンスを生成し、25行目でLinearLayoutへ追加しています。

非常に簡単に、UIへ空白を作ることができました。

トグルスイッチを利用して設定を変更する

10月 23, 2011   //   by UpDown-G   //   Android, ユーザインターフェース  //  No Comments

これまでAndroidでは、機能のON/OFFの切り替えを行う際には、ボタンやチェックボックス、ラジオボタンを利用していました。
Android 4.0 IceCreamSandwich(以後ICS) では、ここにさらに新しく、トグルスイッチ(Switch)が追加されました。

図1:トグルスイッチONとOFF

トグルスイッチを利用することで、これまで以上に簡単に、またユーザーにもわかりやすく、機能のON/OFFを切り替ることが可能です。

トルグスイッチを利用する上で重要になるクラスはSwitchクラスです。
Switchクラスの中で、今回紹介する主なメソッドは以下の通りです。

表:使用するメソッド

API概要
setSwitchTypeface()トグルスイッチ内に表示するテキストの書体を変更する
onCheckedChanged()トグルスイッチのOn/Offが切り替わる際に呼び出されるCallBack関数
setChecked()On/Offを切り替える

それでは以下で詳しく見ていきましょう。

Read more >>

GridLayoutを使って、格子状にViewを表示する

10月 20, 2011   //   by UpDown-G   //   Android, アプリケーション, ユーザインターフェース, リソース  //  No Comments

先日Android4.0(コードネーム IceCreamSandwich:ICS)が公開されました。
TechBoosterでは、本日よりICSのAPIを中心に紹介していきます。

本タイトルでは、ICSから追加されたGridLayoutを紹介します。
GridLayoutは、格子状にViewを配置する事に向いています。
※以前まではLinearLayoutを複数使用するなどし、作成する必要がありました。

今回はGridLayoutを用いて電卓の画面(上記画像)を作成するサンプルを紹介していきます。

GridLayoutを使用する際に重要となるパラメータは以下の表の通りです。

GridLayoutに指定する重要パラメータ(表1)

パラメータ概要
android:columnCount横方向のマスの数
android:rowCount縦方向のマスの数

GridLayoutの子Viewに指定する重要パラメータ(表2)

パラメータ概要
android:layout_column列の指定(0オリジン)
android:layout_columnSpan列方向に何マス消費するか
android:layout_row行の指定(0オリジン)
android:layout_rowSpan行方向に何マス消費するか
android:layout_gravity格子内でのgravity指定を行う

それではつづきをどうぞ。
Read more >>

ラジオボタンで複数の選択肢から1つを選択させる / Getting Started

10月 19, 2011   //   by kkato   //   ユーザインターフェース  //  No Comments

アンケートや設定する項目の選択などで複数の選択肢の中から1つを選択するラジオボタンがAndroidでも用意されています。

アプリケーションの設定をユーザーに行ってもらう場合には欠かせません。

ラジオボタンを利用するのに必要なクラス/インタフェースは以下の3つです。

ラジオボタンを利用する際に必要なクラス

クラス/インタフェース説明
RadioButtonそれぞれの項目に相当するクラス
RadioGroup複数のRadioButtonを持つ。それらのRadioButtonのうち、1つだけが選択することが可能
OnCheckedChangeListener選択されている項目が変わった時にonCheckedChangedメソッドで通知を受ける

RadioGroupクラスで重要なメソッドは以下の通りです。

RadioGroupクラスの重要なメソッド

メソッド説明
void check(int id)引数で指定したラジオボタンを選択する
int getCheckRadioButtonId()選択中のラジオボタンのIDを取得する
void clearCheck()選択を解除する

それでは続きで説明していきます。

Read more >>

ProgressDialogの使い方/Getting Started

10月 14, 2011   //   by furusin   //   ユーザインターフェース  //  No Comments

Androidで進捗状況や処理待ちのダイアログを表示するには、ProgressDialogを使います。

時間のかかる処理を行なっている間にProgressDialogを表示することで、「処理中である」ということを知らせることができます。

 
Read more >>

ToggleButtonを使ってON/OFFを切り替える / Getting Started

10月 9, 2011   //   by kseto   //   Android, ユーザインターフェース  //  No Comments

ToggleButton(トグルボタン)とはクリックすることでON/OFFを切り替えられるボタンのことです。
下図のように、ボタンを見ればON/OFFをすぐに把握することができますので、
オプション機能のON/OFFを切り替えるといった用途に最適です。

ToggleButtonを使うときに重要になるメソッドは以下の通りです。

ToggleButtonを使う際に大事なメソッド

メソッド・インタフェース説明
CompoundButtonクラスのOnCheckedChangeListenerインタフェース
ToggleButtonのクリック時に呼び出されるOnCheckedChangeListenerクラスを登録
CompoundButtonクラスのonCheckedChangedメソッドToggleButtonのクリック時に呼び出される

これらのメソッドを使って以下の手順を踏むことでToggleButtonを使うことができます。

それでは続きから詳しく説明していきます。

Read more >>

Toastを表示してユーザーに通知する/Getting Startted

10月 7, 2011   //   by UpDown-G   //   Android, ユーザインターフェース  //  No Comments

Androidでは、Toastを用いて簡単にユーザーへの通知を行うことが可能です。

ダウンロード完了通知やユーザ登録完了通知のように、ユーザーの判断を仰ぐ必要のないバックグラウンド処理の完了通知などを行う際には非常に簡単で便利です。

例えば、以下に示すようにソースコードにたった一行付け足すだけで、図に示すようなToastの表示を行うことが可能です。

Toast.makeText(this, "Toast example", Toast.LENGTH_LONG).show();

主に利用するToastクラスのメソッドは以下の通りです。

メソッド概要
makeText(Context context, CharSequence text, int duration)Toastインスタンスの生成とテキスト、表示時間の設定
show()Toastの表示

詳しい使い方については続きにて解説します

Read more >>

リストビュー(ListView)を使う/Getting started

10月 4, 2011   //   by furusin   //   ユーザインターフェース  //  No Comments


Androidでデータの一覧を表示するには、ListViewを使うと便利です。

ListViewを使うと、配列やデータベース上のデータなど、
複数のデータを一覧表示することができます。
アドレス帳やメモ帳など、さまざまな用途で使用することができます。

ListViewで代表的なものとして、Androidの設定画面があります。

それでは、ListViewの詳しい使い方はイカから。

Read more >>

ページ:«12345678910»

技術書新刊 発売中

アンドロイドアカデミアには、CIやテスト、互換検証など実務に生きるノウハウをあつめています

技術書新刊 発売中

Android Next!はAndroid 7.0に対応したはじめての技術書です!


The Web Explorer 2はCSSの中央寄せやWebAudioなど未来を読み解く一冊です


Revised TypeScript in DefinitelylandはTypeScript 2.0(β)に対応した解説書です。インストールから型定義まで幅広くサポートしています


技術書をかこう!はエンジニアらしい執筆環境を構築、HowTo本です