Cocoa練習帳(2014-09-22)

iOS/iPhone/iPad/watchOS/tvOS/MacOSX/Android プログラミング, Objective-C, Cocoa, Swiftなど

2014-09-22 [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

_ 【Cocoa練習帳】

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

[ツッコミを入れる]

トップ «前の日記(2014-09-07) 最新次の日記(2014-09-24)» 編集

Cocoa練習帳

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

_ ソースコード

_ 関連情報

_ 【Cocoa練習帳】