8月 15
以前、『レイアウトを分割しよう!』という記事を書きましたがそれと同じことが fragment を使うと簡単に実現できちゃいます。Fragment は Honeycomb(Android 3.0)から導入された機能ですが、Backport を使えば、それ以前のバージョンの Android でも使用できちゃいます。Google の中の人も積極的に使ってくださいと言っていますので、これを使わない手はないですね。

Fragment を使ったサンプルはまだ意外と少ないのでなるべき最小構成でのサンプルを目指します。といってもそれだけでは寂しいのでActionButton を付けてみました。ActionButton はメニューに変わる新しい機能でよく使うボタンはメニューを開くことなく押せるようになっています。この ActionButton は Fragment をホストする Activity に付与してもいいし、Activity の中に配置する Fragment に付与してもいいです。

では、今回のサンプルアプリの画面はこちら。

device-1.png

赤(Fragment1)、緑(Fragment2)、青(Fragment3)の部分は Fragment でそれぞれ対応するレイアウトファイルを持っています。

(Main.java)

public class Main extends Activity {

    private static final int MENU_FRAGMENT_0_0 = Menu.FIRST + 0;
    private static final int MENU_FRAGMENT_0_1 = Menu.FIRST + 1;
   
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
   
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        menu.add(0, MENU_FRAGMENT_0_0, 0, "Main_0")
            .setIcon(android.R.drawable.ic_menu_help)
            .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
        menu.add(0, MENU_FRAGMENT_0_1, 0, "Main_1")
            .setIcon(android.R.drawable.ic_menu_compass)
            .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
        return true;
    }
   
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        boolean result = true;
        switch (item.getItemId()){
        case MENU_FRAGMENT_0_0:
            Toast.makeText(this, "MENU_FRAGMENT_0_0 が選択された。", Toast.LENGTH_LONG).show();
            break;
        case MENU_FRAGMENT_0_1:
            Toast.makeText(this, "MENU_FRAGMENT_0_1 が選択された。", Toast.LENGTH_LONG).show();
            break;
        default:
            result = super.onOptionsItemSelected(item);
            break;
        }
        return result;
    }
}

(Fragment1.java)

public class MyFragment1 extends Fragment {

    private static final int MENU_FRAGMENT_1_0 = Menu.FIRST + 100;
    private static final int MENU_FRAGMENT_1_1 = Menu.FIRST + 101;
   
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       
        this.setHasOptionsMenu(true);
    }
   
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fragment1, container, false);
        return v;
    }

    @Override
    public void onCreateOptionsMenu(Menu menu, android.view.MenuInflater inflater) {
        menu.add(0, MENU_FRAGMENT_1_0, 0, "Fragment1_0")
            .setIcon(android.R.drawable.ic_menu_call)
            .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM | MenuItem.SHOW_AS_ACTION_WITH_TEXT);
        menu.add(0, MENU_FRAGMENT_1_1, 0, "Fragment1_1")
            .setIcon(android.R.drawable.ic_menu_gallery)
            .setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM | MenuItem.SHOW_AS_ACTION_WITH_TEXT);
    }
   
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        boolean result = true;
        switch (item.getItemId()){
        case MENU_FRAGMENT_1_0:
            Toast.makeText(getActivity(), "MENU_FRAGMENT_1_0 が選択された。", Toast.LENGTH_LONG).show();
            break;
        case MENU_FRAGMENT_1_1:
            Toast.makeText(getActivity(), "MENU_FRAGMENT_1_1 が選択された。", Toast.LENGTH_LONG).show();
            break;
        default:
            result = super.onOptionsItemSelected(item);
            break;
        }
        return result;
    }
}

(res/layout/main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="horizontal"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   >
    <fragment class="sak.samples.hellofragment.MyFragment1"
       android:id="@+id/fragment1"
       android:layout_height="match_parent"
       android:layout_width="0dp"
       android:layout_weight="1"
       />
    <LinearLayout
       android:orientation="vertical"
       android:layout_height="match_parent"
        android:layout_width="0dp"
       android:layout_weight="2"
        >
        <fragment class="sak.samples.hellofragment.MyFragment2"
           android:id="@+id/fragment2"
           android:orientation="horizontal"
           android:layout_height="0dp"
           android:layout_width="match_parent"
           android:layout_weight="1"
           />
        <fragment class="sak.samples.hellofragment.MyFragment3"
           android:id="@+id/fragment3"
           android:orientation="horizontal"
           android:layout_height="0dp"
           android:layout_width="match_parent"
           android:layout_weight="2"
           />
    </LinearLayout>
</LinearLayout>

(res/layout/fragment1.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"
   android:background="#ff00"
   >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Fragment 1"
        android:textColor="#ffff"
        android:textSize="64sp"
       />        
</RelativeLayout>

サンプルコード

サンプルアプリのソースコードは Google Code で公開しています。完全なサンプルコードを参照したい場合はそちらをどうぞ。



Posted by sak+

Comments are closed.

preload preload preload