[Android]マルチスクリーンに対応する

iOSのiPhoneとiPadの両方に対応したMaster-DetailアプリケーションのAndroid版だ。

サンプルのアプリケーション名は、WebViewを使ったアプリケーションということでNeXTSTEP上で開発された世界で最初のWebブラウザと同じ名前にした。

AndroidManifest.xmlでは、WebViewを使うので通信を有効にするのと、スマートフォンの画面サイズでは、詳細画面でWebViewを表示するので詳細画面アクティビティを宣言する。

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.example.nexus"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk

        android:minSdkVersion="8"

        android:targetSdkVersion="21" />

    <uses-permission android:name="android.permission.INTERNET"/>

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name=".MainActivity"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

        <activity android:name=".DetailActivity" />

    </application>

</manifest>

スマートフォンとタブレットの画面サイズで、主アクティビティの表示内容を変えるため、主アクティビティのXMLファイルは、res/layoutとres/layout-largeの二種類を用意する。

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/parent"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<fragment

android:id="@+id/masterFragment"

android:name="com.example.nexus.MasterFragment"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal" >

<fragment

android:id="@+id/masterFragment"

android:tag="masterFragment"

android:name="com.example.nexus.MasterFragment"

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1.0" />

<FrameLayout

   android:id="@+id/detailPane"

   android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="2.0" />

</LinearLayout>

主アクティビティでは、画面サイズの判定結果をメンバ変数で保持する。

package com.example.nexus;

import android.support.v7.app.ActionBarActivity;

import android.content.res.Configuration;

import android.os.Bundle;

import android.util.Log;

import android.view.Menu;

import android.view.MenuItem;

public class MainActivity extends ActionBarActivity {

static boolean isLargeScreen = false;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

isLargeScreen = isLargeScreen();

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.main, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

int id = item.getItemId();

if (id == R.id.action_settings) {

return true;

}

return super.onOptionsItemSelected(item);

}

public boolean isLargeScreen() {

int layout = getResources().getConfiguration().screenLayout;

return (layout & Configuration.SCREENLAYOUT_SIZE_MASK) == Configuration.SCREENLAYOUT_SIZE_LARGE; 

}

}

一覧のXMLファイル。表示するサイト毎にボタンを用意。

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <TextView

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="Index"

        android:textSize="50sp"

         />

<Button

   android:id="@+id/button_google"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="Google"

   />

<Button

   android:id="@+id/button_bing"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="Bing"

   />

</LinearLayout>

一覧のフラグメントのソースコード。画面サイズ毎に処理を分けている。

package com.example.nexus;

import android.annotation.SuppressLint;

import android.content.Intent;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentTransaction;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.widget.Button;

@SuppressLint("NewApi")

public class MasterFragment extends Fragment implements OnClickListener {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

return inflater.inflate(R.layout.fragment_master, container, false);

}

@Override

public void onActivityCreated(Bundle savedInstanceState) {

super.onActivityCreated(savedInstanceState);

Button mButtonGoogle = (Button) getActivity().findViewById(R.id.button_google);

mButtonGoogle.setOnClickListener(this);

Button mButtonBing = (Button) getActivity().findViewById(R.id.button_bing);

mButtonBing.setOnClickListener(this);

}

public void onClick(View v) {

if (MainActivity.isLargeScreen) {

FragmentTransaction transaction = getFragmentManager().beginTransaction();

DetailFragment detailFragment = new DetailFragment();

Bundle args = new Bundle();

switch (v.getId()) {

case R.id.button_google:

args.putString("URL", "http://www.google.com/");

break;

case R.id.button_bing:

args.putString("URL", "http://bing.com/");

break;

}

detailFragment.setArguments(args);

transaction.replace(R.id.detailPane, detailFragment);

transaction.addToBackStack(null);

transaction.commit();

}

else {

Intent intent;

switch (v.getId()) {

case R.id.button_google:

intent = new Intent(getActivity(), DetailActivity.class);

intent.putExtra("URL",  "http://www.google.com/");

           getActivity().startActivity(intent);

           break;

case R.id.button_bing:

intent = new Intent(getActivity(), DetailActivity.class);

intent.putExtra("URL",  "http://bing.com/");

           getActivity().startActivity(intent);

break;

}

}

}

}

WebViewを配置して詳細画面のXMLファイル。

<?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" >

<WebView 

   android:id="@+id/detailWebView"

   android:layout_width="match_parent"

   android:layout_height="match_parent" />

</LinearLayout>

詳細画面のフラグメント。

package com.example.nexus;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.webkit.WebView;

import android.webkit.WebViewClient;

public class DetailFragment extends Fragment {

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle saveInstanceState) {

super.onCreateView(inflater, container, saveInstanceState);

View view = inflater.inflate(R.layout.fragment_detail,  container, false);

WebView webView = (WebView)view.findViewById(R.id.detailWebView);

webView.setWebViewClient(new WebViewClient());

String url = getArguments().getString("URL");

webView.loadUrl(url);

return view;

}

}

詳細画面のアクティビティ版のXMLファイル。

<?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" >

    <WebView 

   android:id="@+id/detailWebView"

   android:layout_width="match_parent"

   android:layout_height="match_parent" />

</LinearLayout>

対応するソースコード。

package com.example.nexus;

import android.app.Activity;

import android.os.Bundle;

import android.webkit.WebView;

import android.webkit.WebViewClient;

public class DetailActivity extends Activity {

@Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_detail);

        WebView webView = (WebView)findViewById(R.id.detailWebView);

        webView.setWebViewClient(new WebViewClient());

        String url = getIntent().getStringExtra("URL");

webView.loadUrl(url);

    }

}

エミュレータの調子が悪いため、画面ダンプがとれなかった。残念。

ソースコード

GitHubからどうぞ。

https://github.com/murakami/workbook/tree/master/android/Nexus - GitHub

関連情報

初めてのAndroid 第3版

プログラミングAndroid

改訂2版 Android SDK逆引きハンドブック

【Cocoa練習帳】

http://www.bitz.co.jp/weblog/

http://ameblo.jp/bitz/（ミラー・サイト）

初めてのAndroid 第3版/オライリージャパン

￥2,484

Amazon.co.jp

プログラミングAndroid/オライリージャパン

￥3,672

Amazon.co.jp

改訂2版 Android SDK逆引きハンドブック/シーアンドアール研究所

￥4,644

Amazon.co.jp