Mtk's Blog: Widget

ラベル Widget の投稿を表示しています。すべての投稿を表示

2012年7月21日土曜日

[Android] WebViewを使うときの注意点

What to be careful about the WebView widget.

先日、ActivityにWebViewを配置したアプリケーションを作っていたら妙な挙動に気付きました。
ActivityにボタンとYahoo! JapanのWebページを表示するだけの動作を期待して作ったアプリのソースです。

Activity(Main.java)

package jp.fujiu.webview_sample;

import android.os.Bundle;
import android.app.Activity;
import android.webkit.WebView;

public class Main extends Activity {
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  //WebViewの設定
  WebView web = (WebView) findViewById(R.id.webView);
  web.getSettings().setJavaScriptEnabled(true);
  web.loadUrl("http://yahoo.co.jp");
 }
}

レイアウト(activity_main.xml)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android1="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android1:orientation="vertical" >
    <Button
        android1:id="@+id/button1"
        android1:layout_width="fill_parent"
        android1:layout_height="wrap_content"
        android1:text="Button" />
    <WebView
        android:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

マニフェスト(AndroidManifest.xml)

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="jp.fujiu.webview_sample"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk
        android:minSdkVersion="4"
        android:targetSdkVersion="4" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:icon="@drawable/ic_launcher"
        android:label="WebView Sample" >
        <activity
            android:name=".Main"
            android:label="WebView Sample" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

しかし、起動してみるとWebページはActivityに表示されず、ブラウザーが起動してしまいます。
※Yahoo!を表示させるアプリを作っていたわけではないのですが、動作テスト中に偶然発見しました。

原因は、http://yahoo.co.jp をAndroid端末で開くと http://m.yahoo.co.jp/ にリダイレクトされるためでした。
URLのリダイレクトはYahoo!の仕様です。
そして、リダイレクト先のWebページ開くためにブラウザーを起動するのはAndroidの仕様です。
あらかじめリダイレクト先のURLを表示するようにソースを修正したら期待通りになりました。

修正後のActivity(Main.java)

package jp.fujiu.webview_sample;

import android.os.Bundle;
import android.app.Activity;
import android.webkit.WebView;

public class Main extends Activity {
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  //WebViewの設定
  WebView web = (WebView) findViewById(R.id.webView);
  web.getSettings().setJavaScriptEnabled(true);
  web.loadUrl("http://m.yahoo.co.jp/");
 }
}

WebViewウィジットで使用するWebコンテンツを作るときはページの遷移方法は注意深く設定しなければいけないようです。
※Googleで検索したらWebViewのサブクラスを作ってブラウザーを起動させない方法を紹介している方もいらっしゃいました。

関連ブログ
[Android] Webコンテンツを強制的に表示するには

以上、参考になれば幸いです。

2011年2月12日土曜日

[Android] 画面の回転に反応するウィジットアプリケーションを作るには #2

How to Handle Orientation Changes in AppWidgets #2

画面の回転に反応するウィジットアプリケーションを作るにはではブロードキャストレシーバーかサービスが必要でした。
この他にAppWidgetProviderクラスのonReceiveメソッドとマニフェストによる方法でも可能です。

マニフェスト(AndroidManifest.xml)
intent-filterに
<action android:name="android.intent.action.CONFIGURATION_CHANGED"/>
を追加する。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="jp.fujiu.widget_on_conf_changed"
 android:versionCode="1"
 android:versionName="1.0">
 <application android:icon="@drawable/icon" android:label="@string/app_name">
  <receiver android:name="AppWidget">  
   <intent-filter>
    <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
   </intent-filter>
   <intent-filter>
    <action android:name="android.intent.action.CONFIGURATION_CHANGED"/>
   </intent-filter>
   <meta-data android:name="android.appwidget.provider" android:resource="@xml/app_widget"/>
  </receiver>
 </application>
 <uses-sdk android:minSdkVersion="4" />
</manifest>

レイアウト(res/layout/app_widget.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 >
 <TextView android:text="@+id/TextView01" android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000000" android:textAppearance="?android:attr/textAppearanceLarge"/>
</LinearLayout>

appwidget-provider設定ファイル(res/xml/app_widget.xml.xml)
(resフォルダー配下に手動でxmlフォルダーを作ります)

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:updatePeriodMillis="0"
 android:minWidth="72dip"
 android:minHeight="72dip" android:initialLayout="@layout/app_widget">
</appwidget-provider>

ソース(AppWidget.java)

package jp.fujiu.widget_on_conf_changed;

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.ComponentName;
import android.content.Context;
import android.content.Intent;
import android.content.res.Configuration;
import android.widget.RemoteViews;

public class AppWidget extends AppWidgetProvider {
 @Override
 public void onReceive(Context context, Intent intent) {
  super.onReceive(context, intent);
  
  if (Intent.ACTION_CONFIGURATION_CHANGED.equals(intent.getAction())){
   showOrientation(context);
  }
 }

 @Override
 public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
  super.onUpdate(context, appWidgetManager, appWidgetIds);
  showOrientation(context);
 }
 
 private void showOrientation(Context context){
  String text;
  switch (context.getResources().getConfiguration().orientation){
   case Configuration.ORIENTATION_LANDSCAPE:
    text = "横です";
    break;
   case Configuration.ORIENTATION_PORTRAIT:
    text = "縦です";
    break;
   case Configuration.ORIENTATION_SQUARE:
    text = "縦横の区別不可";
    break;
   default:
    text = "不明です";
    break;
  }
  RemoteViews remoteViews = new RemoteViews(context.getPackageName(), R.layout.app_widget);
  ComponentName thisWidget = new ComponentName(context, AppWidget.class);
  AppWidgetManager manager = AppWidgetManager.getInstance(context);
  remoteViews.setTextViewText(R.id.TextView01, text);
  manager.updateAppWidget(thisWidget, remoteViews);
 }
}

試行錯誤して遠回りしてしまいましたがAppWidgetProviderクラスだけで回転に反応できるこの方法がベストだと思います。
マニフェストの<intent-filter><action android:name="･････"></intent-filter>を増やせば他のブロードキャストも受け取れるようです。

キーワード
AppWidgetProvider intent-filter onReceive Intent.ACTION_CONFIGURATION_CHANGED

以上、参考になれば幸いです。

画面に天気予報を常駐させるウィジットアプリ「お天気ロイド」
画面回転にも対応する「Eye元気！」
どちらも公開中です

2011年1月22日土曜日

[Android] 画面の回転に反応するウィジットアプリケーションを作るには

How to Handle Orientation Changes in AppWidgets

ウィジットアプリケーションはホーム画面に常駐するアプリケーションです。
Activityと比べると様々な制約があります。
そのうちの一つに、Activityに実装されている画面を回転させるたびに呼ばれるメソッド(onConfigurationChanged)を備えていません。
ただし工夫次第で回転に反応させることはできます。

画面の回転に対応する前のソースです。
マニフェスト(AndroidManifest.xml)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="jp.fujiu.widget_on_conf_changed"
 android:versionCode="1"
 android:versionName="1.0">
 <application android:icon="@drawable/icon" android:label="@string/app_name">
  <receiver android:name="AppWidget">
   <intent-filter>
    <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
   </intent-filter>
   <meta-data android:name="android.appwidget.provider" android:resource="@xml/app_widget"/>
  </receiver>
 </application>
 <uses-sdk android:minSdkVersion="4" />
</manifest>

レイアウト(res/layout/app_widget.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 >
 <TextView android:text="@+id/TextView01" android:id="@+id/TextView01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#000000" android:textAppearance="?android:attr/textAppearanceLarge"/>
</LinearLayout>

appwidget-provider設定ファイル(res/xml/app_widget.xml.xml)
(resフォルダー配下に手動でxmlフォルダーを作ります)

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:updatePeriodMillis="0"
 android:minWidth="72dip"
 android:minHeight="72dip" android:initialLayout="@layout/app_widget">
</appwidget-provider>

ソース(AppWidget.java)

package jp.fujiu.widget_on_conf_changed;

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.ComponentName;
import android.content.Context;
import android.widget.RemoteViews;

public class AppWidget extends AppWidgetProvider {

 @Override
 public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
  super.onUpdate(context, appWidgetManager, appWidgetIds);
  
  RemoteViews remoteViews = new RemoteViews(context.getPackageName(), R.layout.app_widget);
  ComponentName thisWidget = new ComponentName(context, AppWidget.class);
  AppWidgetManager manager = AppWidgetManager.getInstance(context);
  
  remoteViews.setTextViewText(R.id.TextView01, "TextView01");
  
  manager.updateAppWidget(thisWidget, remoteViews);
 }
}

画面を回転するたびに、このウィジットアプリケーションの「TextView01」の表示内容を変化させます。2つの方法をあげてみます。

1.ブロードキャストレシーバーを使う
2.サービスを使う

1.ブロードキャストレシーバーを使う
この方法はAppWidget.javaのみを改造します。

package jp.fujiu.widget_on_conf_changed;

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.BroadcastReceiver;
import android.content.ComponentName;
import android.content.Context;
import android.content.Intent;
import android.content.IntentFilter;
import android.content.res.Configuration;
import android.widget.RemoteViews;

public class AppWidget extends AppWidgetProvider {

 private class ConfChangedReceiver extends BroadcastReceiver{
  @Override
  public void onReceive(Context context, Intent intent) {
   
   RemoteViews remoteViews = new RemoteViews(context.getPackageName(), R.layout.app_widget);
   ComponentName thisWidget = new ComponentName(context, AppWidget.class);
   AppWidgetManager manager = AppWidgetManager.getInstance(context);
   
   String text;
   switch (context.getResources().getConfiguration().orientation){
    case Configuration.ORIENTATION_LANDSCAPE:
     text = "横です";
     break;
    case Configuration.ORIENTATION_PORTRAIT:
     text = "縦です";
     break;
    case Configuration.ORIENTATION_SQUARE:
     text = "縦横の区別不可";
     break;
    default:
     text = "不明です";
     break;
   }
   
   remoteViews.setTextViewText(R.id.TextView01, text);
   manager.updateAppWidget(thisWidget, remoteViews);
  }
 }
 private ConfChangedReceiver receiver = null;
 
 @Override
 public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
  super.onUpdate(context, appWidgetManager, appWidgetIds);
  
  RemoteViews remoteViews = new RemoteViews(context.getPackageName(), R.layout.app_widget);
  ComponentName thisWidget = new ComponentName(context, AppWidget.class);
  AppWidgetManager manager = AppWidgetManager.getInstance(context);
  
  remoteViews.setTextViewText(R.id.TextView01, "TextView01");
  
  manager.updateAppWidget(thisWidget, remoteViews);
  
  //ブロードキャストレシーバーの登録
  receiver = new ConfChangedReceiver();
  IntentFilter filter = new IntentFilter(Intent.ACTION_CONFIGURATION_CHANGED);
  context.getApplicationContext().registerReceiver(receiver, filter);
 }

 @Override
 public void onDeleted(Context context, int[] appWidgetIds) {
  super.onDeleted(context, appWidgetIds);
  
  //ブロードキャストレシーバーの解除
  if (receiver!=null){
   context.getApplicationContext().unregisterReceiver(receiver);
  }
 }
}

これで回転するたびに表示内容を変えることができました。

2.サービスを使う
ServiceクラスはonConfigurationChangedメソッドを持っているので、Activityと同じように画面の回転に対応できます。
この方法はAppWidget.javaの改造ととマニフェストの追記が必要です。
マニフェスト(AndroidManifest.xml)

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
 package="jp.fujiu.widget_on_conf_changed"
 android:versionCode="1"
 android:versionName="1.0">
 <application android:icon="@drawable/icon" android:label="@string/app_name" android:debuggable="true">
  <receiver android:name="AppWidget">
   <intent-filter>
    <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
   </intent-filter>
   <meta-data android:name="android.appwidget.provider" android:resource="@xml/app_widget"/>
  </receiver>
  <service android:name="AppWidget$AppWidgetService"/>
 </application>
 <uses-sdk android:minSdkVersion="4" />
</manifest>

AppWidget.java

package jp.fujiu.widget_on_conf_changed;

import android.app.Service;
import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.ComponentName;
import android.content.Context;
import android.content.Intent;
import android.content.res.Configuration;
import android.os.IBinder;
import android.widget.RemoteViews;

public class AppWidget extends AppWidgetProvider {

 public static class AppWidgetService extends Service{
  @Override
  public void onConfigurationChanged(Configuration newConfig) {
   super.onConfigurationChanged(newConfig);

   String text;
   switch (AppWidgetService.this.getResources().getConfiguration().orientation){
    case Configuration.ORIENTATION_LANDSCAPE:
     text = "横です";
     break;
    case Configuration.ORIENTATION_PORTRAIT:
     text = "縦です";
     break;
    case Configuration.ORIENTATION_SQUARE:
     text = "縦横の区別不可";
     break;
    default:
     text = "不明です";
     break;
   }
   RemoteViews remoteViews = new RemoteViews(AppWidgetService.this.getPackageName(), R.layout.app_widget);
   ComponentName thisWidget = new ComponentName(AppWidgetService.this, AppWidget.class);
   AppWidgetManager manager = AppWidgetManager.getInstance(AppWidgetService.this);
   
   remoteViews.setTextViewText(R.id.TextView01, text);
   
   manager.updateAppWidget(thisWidget, remoteViews);
  }

  @Override
  public IBinder onBind(Intent intent) {
   return null;
  }
 }
 private Intent serviceIntent = null;

 @Override
 public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
  super.onUpdate(context, appWidgetManager, appWidgetIds);
  
  RemoteViews remoteViews = new RemoteViews(context.getPackageName(), R.layout.app_widget);
  ComponentName thisWidget = new ComponentName(context, AppWidget.class);
  AppWidgetManager manager = AppWidgetManager.getInstance(context);
  
  remoteViews.setTextViewText(R.id.TextView01, "TextView01");
  
  manager.updateAppWidget(thisWidget, remoteViews);
  
  //サービス起動
  serviceIntent = new Intent(context, AppWidgetService.class);
  context.startService(serviceIntent);
 }

 @Override
 public void onDeleted(Context context, int[] appWidgetIds) {
  super.onDeleted(context, appWidgetIds);
  
  //サービス停止
  if (serviceIntent != null){
   context.stopService(serviceIntent);
  }
 }
}

この改造も同じように回転するたびに表示内容が変わります。

キーワード
AppWidgetProvider onConfigurationChanged AppWidgetProvider onConfigurationChanged Intent.ACTION_CONFIGURATION_CHANGED

以上、参考になれば幸いです。

画面に天気予報を常駐させるウィジットアプリ「お天気ロイド」
画面回転にも対応する「Eye元気！」
どちらも公開中です

登録: 投稿 (Atom)

新アプリケーション