柔軟なウィジェット レイアウトを提供する

Compose をお試しください

Jetpack Compose は、Android で推奨される UI ツールキットです。Compose スタイルの API を使用してウィジェットを作成する方法を学習します。

Jetpack Glance →

このページでは、Android 12（API レベル 31）で導入されたウィジェットのサイズ調整の改善と柔軟性の向上について説明します。また、ウィジェットのサイズを決定する方法についても詳しく説明します。

改良された API を使用してウィジェットのサイズとレイアウトを設定する

Android 12（API レベル 31）以降では、次のセクションで説明するように、次の操作を行うことで、サイズ属性とレイアウトをきめ細かく設定できます。

1. ウィジェットのサイズ調整に関する追加の制約を指定する。

2. レスポンシブ レイアウトまたは正確な レイアウトを提供する。

以前のバージョンの Android では、 ウィジェットのサイズ範囲を OPTION_APPWIDGET_MIN_WIDTH、 OPTION_APPWIDGET_MIN_HEIGHT、 OPTION_APPWIDGET_MAX_WIDTH、 および OPTION_APPWIDGET_MAX_HEIGHT の各エクストラを使用して取得し、ウィジェットのサイズを推定することができましたが、このロジックはすべての 状況で使用できるわけではありません。Android 12 以降をターゲットとするウィジェットについては、 レスポンシブ レイアウトまたは正確な レイアウトを提供することをおすすめします。

ウィジェットのサイズ調整に関する追加の制約を指定する

Android 12 には、画面サイズの異なるさまざまなデバイスでウィジェットのサイズをより確実に調整できるようにする API が追加されています。

既存の minWidth、 minHeight、 minResizeWidth、 および minResizeHeight 属性に加えて、次の新しい appwidget-provider 属性を使用します。

• targetCellWidth 、targetCellHeight: ランチャーのグリッドセルの観点で、ウィジェットのターゲット サイズを定義します。定義されている場合は、minWidth や minHeight の代わりにこれらの属性が使用されます。

• maxResizeWidth 、maxResizeHeight: ランチャーでユーザーがウィジェットのサイズを変更する際に指定できる最大サイズを定義します。

次の XML は、サイズ調整属性の使用方法を示しています。

<appwidget-provider
  ...
  android:targetCellWidth="3"
  android:targetCellHeight="2"
  android:maxResizeWidth="250dp"
  android:maxResizeHeight="110dp">
</appwidget-provider>

レスポンシブ レイアウトを提供する

ウィジェットのサイズに応じてレイアウトを変更する必要がある場合は、さまざまなサイズに対して有効な、少数のレイアウトを作成することをおすすめします （それができない場合は、このページで説明するように、ランタイムでの正確なウィジェット サイズに基づいてレイアウトを提供する方法もあります）。

この機能を実装すると、ウィジェットのサイズが変わるたびにアプリを復帰させる必要がなくなるため、スムーズなスケーリングが可能になり、全体的なシステムの健全性が改善されます。

次のコードサンプルは、レイアウトのリストを提供する方法を示しています。

override fun onUpdate(...) {
    val smallView = ...
    val tallView = ...
    val wideView = ...

    val viewMapping: Map<SizeF, RemoteViews> = mapOf(
            SizeF(150f, 100f) to smallView,
            SizeF(150f, 200f) to tallView,
            SizeF(215f, 100f) to wideView
    )
    val remoteViews = RemoteViews(viewMapping)

    appWidgetManager.updateAppWidget(id, remoteViews)
}

@Override
public void onUpdate(...) {
    RemoteViews smallView = ...;
    RemoteViews tallView = ...;
    RemoteViews wideView = ...;

    Map<SizeF, RemoteViews> viewMapping = new ArrayMap<>();
    viewMapping.put(new SizeF(150f, 100f), smallView);
    viewMapping.put(new SizeF(150f, 200f), tallView);
    viewMapping.put(new SizeF(215f, 100f), wideView);
    RemoteViews remoteViews = new RemoteViews(viewMapping);

    appWidgetManager.updateAppWidget(id, remoteViews);
}

ウィジェットに次の属性があるとします。

<appwidget-provider
    android:minResizeWidth="160dp"
    android:minResizeHeight="110dp"
    android:maxResizeWidth="250dp"
    android:maxResizeHeight="200dp">
</appwidget-provider>

上記のコード スニペットは次のことを意味します。

• smallView は、160 dp（minResizeWidth）× 110 dp（minResizeHeight）から 160 dp × 199 dp（次のカットオフ ポイント - 1 dp）までをサポートします。
• tallView は、160 dp × 200 dp から 214 dp（次のカットオフ ポイント - 1）× 200 dp までをサポートします。

• wideView は、215 dp × 110 dp（minResizeHeight）から 250 dp（maxResizeWidth）× 200 dp（maxResizeHeight）までをサポートします。

ウィジェットは、minResizeWidth × minResizeHeight から maxResizeWidth × maxResizeHeight までのサイズ範囲をサポートする必要があります。この範囲内で、レイアウトを切り替えるカットオフ ポイントを決定できます。

正確なレイアウトを提供する

少数のレスポンシブ レイアウトを提供できない場合は、ウィジェットを表示するサイズに合わせてさまざまなレイアウトを提供できます。これは通常、スマートフォン用の 2 つのサイズ（縦向きと横向き）と、折りたたみ式デバイス用の 4 つのサイズで構成されます。

このソリューションを実装するには、アプリで次の手順を行う必要があります。

1. サイズセットが変更されたときに呼び出される AppWidgetProvider.onAppWidgetOptionsChanged() をオーバーロードします。

2. サイズを含む Bundle を返す AppWidgetManager.getAppWidgetOptions() を呼び出します。

3. Bundle から AppWidgetManager.OPTION_APPWIDGET_SIZES キーにアクセスします。

次のコードサンプルは、正確なレイアウトを提供する方法を示しています。

override fun onAppWidgetOptionsChanged(
        context: Context,
        appWidgetManager: AppWidgetManager,
        id: Int,
        newOptions: Bundle?
) {
    super.onAppWidgetOptionsChanged(context, appWidgetManager, id, newOptions)
    // Get the new sizes.
    val sizes = newOptions?.getParcelableArrayList<SizeF>(
            AppWidgetManager.OPTION_APPWIDGET_SIZES
    )
    // Check that the list of sizes is provided by the launcher.
    if (sizes.isNullOrEmpty()) {
        return
    }
    // Map the sizes to the RemoteViews that you want.
    val remoteViews = RemoteViews(sizes.associateWith(::createRemoteViews))
    appWidgetManager.updateAppWidget(id, remoteViews)
}

// Create the RemoteViews for the given size.
private fun createRemoteViews(size: SizeF): RemoteViews { }

@Override
public void onAppWidgetOptionsChanged(
    Context context, AppWidgetManager appWidgetManager, int appWidgetId, Bundle newOptions) {
    super.onAppWidgetOptionsChanged(context, appWidgetManager, appWidgetId, newOptions);
    // Get the new sizes.
    ArrayList<SizeF> sizes =
        newOptions.getParcelableArrayList(AppWidgetManager.OPTION_APPWIDGET_SIZES);
    // Check that the list of sizes is provided by the launcher.
    if (sizes == null || sizes.isEmpty()) {
      return;
    }
    // Map the sizes to the RemoteViews that you want.
    Map<SizeF, RemoteViews> viewMapping = new ArrayMap<>();
    for (SizeF size : sizes) {
        viewMapping.put(size, createRemoteViews(size));
    }
    RemoteViews remoteViews = new RemoteViews(viewMapping);
    appWidgetManager.updateAppWidget(id, remoteViews);
}

// Create the RemoteViews for the given size.
private RemoteViews createRemoteViews(SizeF size) { }

ウィジェットのサイズを決定する

各ウィジェットでは、Android 12 以降を搭載したデバイスの場合は targetCellWidth と targetCellHeight、すべてのバージョンの Android の場合は minWidth と minHeight を定義する必要があります。これは、デフォルトで使用する最小スペースを示します。ただし、ユーザーがウィジェットをホーム画面に追加すると、通常は指定した最小の幅と高さより大きいスペースが占有されます。

Android のホーム画面には、ウィジェットやアイコンを配置可能なスペースのグリッドがユーザーに表示されます。このグリッドはデバイスによって異なります。たとえば、多くのスマートフォンに表示されるグリッドは 5×4、タブレットに表示されるグリッドはそれより大きいグリッドです。ウィジェットが追加されると、Android 12 以降を搭載したデバイスでは targetCellWidth と targetCellHeight の制約、Android 11（API レベル 30）以前を搭載したデバイスでは minWidth と minHeight の制約を満たすために必要な最小限の数のセルを占有するように、グリッドが縦方向と横方向に引き伸ばされます。

セルの幅と高さ、およびウィジェットに適用される自動マージンのサイズは、デバイスによって異なります。占有するグリッドセルの数を指定して、次の表を使用して、一般的な 5×4 グリッドのスマートフォンでのウィジェットのおおよその最小サイズを見積もります。

縦向きのセルのサイズを使用して、minWidth、minResizeWidth、maxResizeWidth 属性に指定する値を決定します。同様に、横表示のセルのサイズを使用して、minHeight、minResizeHeight、maxResizeHeight 属性に指定する値を決定します。

これは、通常、縦向きのセルの幅は横表示のセルの幅よりも小さく、同様に、横表示のセルの高さは縦向きのセルの高さよりも小さいためです。

たとえば、Google Pixel 4 でウィジェットの幅を 1 セルまでサイズ変更できるようにするには、minResizeWidth 属性の値が 57 dp より小さくなるように、minResizeWidth を 56 dp 以下に設定する必要があります。これは、縦向きのセルの幅が 57 dp 以上であるためです。 同様に、同じデバイスでウィジェットの高さを 1 セルでサイズ変更できるようにするには、minResizeHeight 属性の値が 51 dp より小さくなるように、minResizeHeight を 50 dp 以下に設定する必要があります。これは、横表示のセルの高さが 51 dp 以上であるためです。

各ウィジェットは、minResizeWidth/minResizeHeight 属性と maxResizeWidth/maxResizeHeight 属性の間のサイズ範囲内でサイズ変更できます。つまり、これらの間のサイズ範囲に対応する必要があります。

たとえば、プレースメントでウィジェットのデフォルト サイズを設定するには、次の属性を設定します。

<appwidget-provider
    android:targetCellWidth="3"
    android:targetCellHeight="2"
    android:minWidth="180dp"
    android:minHeight="110dp">
</appwidget-provider>

これは、targetCellWidth 属性と targetCellHeight 属性で指定されているように、ウィジェットのデフォルト サイズが 3x2 セルであることを意味します。または、Android 11 以前を搭載したデバイスの場合は、minWidth と minHeight で指定されているように、180×110 dp です。後者の場合、セルのサイズはデバイスによって異なります。

また、ウィジェットでサポートされるサイズ範囲を設定するには、次の属性を設定します。

<appwidget-provider
    android:minResizeWidth="180dp"
    android:minResizeHeight="110dp"
    android:maxResizeWidth="530dp"
    android:maxResizeHeight="450dp">
</appwidget-provider>

上記の属性で指定されているように、ウィジェットの幅は 180 dp から 530 dp まで、高さは 110 dp から 450 dp までサイズ変更できます。 次の条件が満たされている限り、ウィジェットのサイズを 3x2 セルから 5x2 セルに変更できます。

• デバイスに 5x4 グリッドがある。
• セルの数と dp で使用可能なサイズのマッピング は、このページで説明する最小 サイズの見積もりを示す表に従います。
• ウィジェットがそのサイズ範囲に対応している。

val smallView = RemoteViews(context.packageName, R.layout.widget_weather_forecast_small)
val mediumView = RemoteViews(context.packageName, R.layout.widget_weather_forecast_medium)
val largeView = RemoteViews(context.packageName, R.layout.widget_weather_forecast_large)

val viewMapping: Map<SizeF, RemoteViews> = mapOf(
        SizeF(180f, 110f) to smallView,
        SizeF(270f, 110f) to mediumView,
        SizeF(270f, 280f) to largeView
)

appWidgetManager.updateAppWidget(appWidgetId, RemoteViews(viewMapping))

RemoteViews smallView = 
    new RemoteViews(context.getPackageName(), R.layout.widget_weather_forecast_small);
RemoteViews mediumView = 
    new RemoteViews(context.getPackageName(), R.layout.widget_weather_forecast_medium);
RemoteViews largeView = 
    new RemoteViews(context.getPackageName(), R.layout.widget_weather_forecast_large);

Map<SizeF, RemoteViews> viewMapping = new ArrayMap<>();
viewMapping.put(new SizeF(180f, 110f), smallView);
viewMapping.put(new SizeF(270f, 110f), mediumView);
viewMapping.put(new SizeF(270f, 280f), largeView);
RemoteViews remoteViews = new RemoteViews(viewMapping);

appWidgetManager.updateAppWidget(id, remoteViews);

ウィジェットが上記のコード スニペットで定義されているレスポンシブ レイアウトを使用しているとします。つまり、R.layout.widget_weather_forecast_small として指定されたレイアウトは、180 dp（minResizeWidth）× 110 dp（minResizeHeight）から 269x279 dp（次のカットオフ ポイント - 1）まで使用されます。同様に、R.layout.widget_weather_forecast_medium は 270x110 dp から 270x279 dp まで、R.layout.widget_weather_forecast_large は 270x280 dp から 530 dp（maxResizeWidth）× 450 dp（maxResizeHeight）まで使用されます。

ユーザーがウィジェットのサイズを変更すると、次の例に示すように、セルの各サイズに合わせて外観が変化します。