2011年7月アーカイブ

複数のビューページを右から左などのスワイプ操作で切り替えることができる API (※)が、

Android Compatibility package, revision 3 からサポートされました!

※API :"ViewPager" ≒ "びゅーぶいーんぶいーん"

 

少しわかりにくいので、身近な Android アプリケーションで例えると、

以下のアプリケーションのようなビュー切り替え機能です(伝わるかな^^;)。

  • 標準の Launcher (ホーム)アプリの画面(ワークスペース)切り替え
  • Google I/O アプリのスケジュール切り替え
  • Google+ アプリのストリーム切り替え
  • TweetDeck アプリのカラム切り替え

 

サンプルアプリ実行結果

Compatible package に含まれる、Support v4 Demos というサンプルアプリの実行結果。

Fragment0.png →  Fragment0-0-1.png →  Fragment0-1-1.png →  Fragment1.png

 

サンプルアプリのソース

com.example.android.supportv4.app.FragmentPagerSupport

 

サンプルアプリのソースがわかりやすかったのですが、

フラグメントを使ってスワイプ操作に対応したビューの切り替えを実現したい場合、

ビューの切り替えをしたい領域に android.support.v4.view.ViewPager を配置・作成、

ページとフラグメントの紐づけを行う android.support.v4.app.FragmentPagerAdapter を作成し、

ViewPager インスタンスに FragmentPagerAdapter のインスタンスをセットするだけです。

 

興味のある方は、Compatibility package, revision 3 の以下のソースコードを読んでみると面白いと思います。

ViewPager は、ViewGroup で実現されていました。

  • /extras/android/compatibility/v4/src/java/android/support/v4/view/PagerAdapter.java
  • /extras/android/compatibility/v4/src/java/android/support/v4/view/ViewPager.java
  • /extras/android/compatibility/v4/src/java/android/support/v4/app/FragmentPagerAdapter.java
  • /extras/android/compatibility/v4/src/java/android/support/v4/app/FragmentStatePagerAdapter.java

 

x86 版の emulator をビルドされていた方 がいらっしゃったので、自分でも試してみました。

x86 環境で同エミュレーターを使用すると arm のエミュレートをしなくて済む分、実行速度が速くなります。

 

事前準備

Android Open Source Project の master ソースを取得する(repo sync)。

※Ubuntu 10.10(64bit) / Core2 Duo 2GHz + Memory 2GB 環境で試しました

 

ビルド方法

% cd mydroid
% source build/envsetup.sh
% lunch full_x86-eng
% make -j2

※make -j○ の部分はコア数に応じて設定してください(上記は Dual Core 環境なので 2)

※ビルド時間計測結果(real 124m0.992s、user 205m43.170s、sys 8m54.030s)

build.png

 

エミュレーター起動方法

% emulator-x86

※ただし、source build/envsetup.sh を実行済みであること

 

エミュレーターバージョン確認結果

x86-emulator.png 

 

あわせて読みたい

 

あわせてフォローしたい

ListFragment 内で表示する View をカスタマイズするには、

onCreateView() 内で、差し替えたい View をインフレートします。

 

以下では、ListFragment のビューを差し替えるために、ListFragment を継承した CustomListFragment クラスを作成し、

オーバーライドした onCreateView() 内で、自作のカスタムビューのリソース(R.layout.custom_listfragment)をインフレートしています。

 

リソースは、ListFragment の説明ページのもの(緑背景)に対して、幅を 250dp に変更したものを xml に記述しました。

 

ソースコード

package com.adakoda.android.sample.customlistfragmentsample;

import android.app.Activity;
import android.app.ListFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;

public class CustomListFragmentSampleActivity extends Activity {
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        if (getFragmentManager().findFragmentById(android.R.id.content) == null) {
            CustomListFragment fragment = new CustomListFragment();
            getFragmentManager().beginTransaction().add(android.R.id.content,
                    fragment).commit();
        }
    }

    public static class CustomListFragment extends ListFragment {

        public static final String[] ITEMS = { "1", "2", "3", "4", "5", "6",
                "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17",
                "18", "20" };

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            // 1. 画面幅いっぱいにレイアウトされる
//            View view = inflater.inflate(R.layout.custom_listfragment, null);
            
            // 2. クラッシュする
//            View view = inflater.inflate(R.layout.custom_listfragment, container);
            
            // 3. 期待した幅でレイアウトされる(正解)
            View view = inflater.inflate(R.layout.custom_listfragment, container, false);
            
            // 4. クラッシュする
//            View view = inflater.inflate(R.layout.custom_listfragment, container, true);
            return view;
        }

        @Override
        public void onActivityCreated(Bundle savedInstanceState) {
            super.onActivityCreated(savedInstanceState);
            setListAdapter(new ArrayAdapter<String>(getActivity(),
                    android.R.layout.simple_list_item_1, ITEMS));
        }

    }

}

 

リソース(res\layout\custom_listfragment.xml)

<?xml version="1.0" encoding="utf-8"?>
<!-- View の幅を250dpに変更しています(通常はmatch_parent)--> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="250dp" android:layout_height="match_parent" android:paddingLeft="8dp" android:paddingRight="8dp">
<!-- ListView用(idは定義済みのandroid:list)--> <ListView android:id="@id/android:list" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#00FF00" android:layout_weight="1" android:drawSelectorOnTop="false" />
<!-- アイテムが空の場合に使用するテキスト(idは定義済みのandroid:empty)--> <TextView android:id="@id/android:empty" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FF0000" android:text="No data" /> </LinearLayout>

 

結果

custom_listfragment_1.png

※画面が小さくてわかりにくいですが、ListView アイテムの背景が緑、幅が250dpになっています

※追記:android:empty だと setEmptyText() で IllegalStateException が発生します。。。(正しい id は?)

※追記2:続きはこちら・・・「Y.A.M の 雑記帳: Android ListFragment でカスタムレイアウトを使うと setEmptyText() が使えない

1

2016年8月

  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31