Stosowanie elastycznych układów widżetów

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Na tej stronie opisujemy ulepszenia dotyczące rozmiaru widżetów i większą elastyczność wprowadzone w Androidzie 12 (poziom API 31). Znajdziesz w nim też informacje o tym, Określ rozmiar widżetu.

Używanie ulepszonych interfejsów API do obsługi rozmiarów i układów widżetów

Począwszy od Androida 12 (poziom interfejsu API 31) możesz podawać bardziej dokładne atrybuty rozmiarów i elastyczne układy, wykonując czynności opisane w następnych sekcjach:

1. Określ dodatkowe ograniczenia rozmiaru widżetu.

2. Udostępnianie elastycznego układu strony lub dokładnego układu strony.

W poprzednich wersjach Androida można uzyskać zakresy rozmiarów widżetu za pomocą dodatkowych informacji OPTION_APPWIDGET_MIN_WIDTH, OPTION_APPWIDGET_MIN_HEIGHT, OPTION_APPWIDGET_MAX_WIDTH i OPTION_APPWIDGET_MAX_HEIGHT, a następnie oszacować rozmiar widżetu, ale ta logika nie działa we wszystkich sytuacjach. W przypadku widżetów kierowanych na Androida 12 lub nowszego zalecamy podając elastyczne lub dokładniejsze informacje układy scalone.

Określ dodatkowe ograniczenia rozmiaru widżetów

Android 12 zawiera interfejsy API, które umożliwiają bardziej niezawodne dopasowywanie rozmiaru widżetu na różnych urządzeniach z różnymi rozmiarami ekranu.

Oprócz istniejących funkcji minWidth minHeight, minResizeWidth, oraz minResizeHeight użyj tych nowych atrybutów appwidget-provider:

• targetCellWidth i targetCellHeight: określić docelowy rozmiar widżetu w postaci komórek siatki programu uruchamiającego. Jeśli te atrybuty są używane zamiast atrybutów minWidth i minHeight.

• maxResizeWidth i maxResizeHeight: określić maksymalny rozmiar widżetu, na jaki pozwala program uruchamiający – jego rozmiar.

Poniższy kod XML pokazuje, jak korzystać z atrybutów dobierania rozmiaru.

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

Zastosowanie układów elastycznych

Jeśli układ musi się zmieniać w zależności od rozmiaru widżetu, zalecamy tworząc mały zestaw układów, z których każdy może mieć różne rozmiary. Jeśli nie jest możliwe, inną opcją jest określenie układów na podstawie dokładnie tego widżetu rozmiaru w czasie działania, jak opisano na tej stronie.

Ta funkcja zapewnia płynniejsze skalowanie i ogólne lepsze działanie systemu, ponieważ nie musi on budzić aplikacji za każdym razem, gdy wyświetla widżet w innej wielkości.

Poniższy przykład kodu pokazuje, jak podać listę układów.

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);
}

Załóżmy, że widżet ma te atrybuty:

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

Fragment kodu oznacza, że:

• smallView obsługuje formaty od 160 dp (minResizeWidth) × 110 dp (minResizeHeight) do 160 dp × 199 dp (następny punkt graniczny – 1 dp).
• tallView obsługuje wartości od 160 x 200 dp do 214 dp (następny punkt graniczny – 1) x 200 dp.

• wideView obsługuje formaty od 215 dp x 110 dp (minResizeHeight) do 250 dp (maxResizeWidth) x 200 dp (maxResizeHeight).

Widżet musi obsługiwać zakres rozmiarów od minResizeWidth × minResizeHeight do maxResizeWidth × maxResizeHeight. W tym zakresie możesz wybrać punkt ostateczny, od którego chcesz zmienić układ.

Podawanie dokładnych układów

Jeśli nie możesz wykorzystać małego zestawu układów elastycznych, różne układy dostosowane do rozmiarów, w których wyświetla się widżet. Zwykle są to 2 rozmiary na telefony (w orientacji pionowej i poziomej) oraz 4 rozmiary na urządzenia składane.

Aby wdrożyć to rozwiązanie, aplikacja musi wykonać te czynności:

1. Overload AppWidgetProvider.onAppWidgetOptionsChanged(), która jest wywoływana, gdy zmienia się zestaw rozmiarów.

2. Zadzwoń pod numer AppWidgetManager.getAppWidgetOptions(). , który zwraca Bundle zawierający rozmiary.

3. Uzyskaj dostęp do klucza AppWidgetManager.OPTION_APPWIDGET_SIZES z systemu Bundle.

Ten przykładowy kod pokazuje, jak określić dokładne układy.

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) { }

Określanie rozmiaru widżetu

Każdy widżet musi definiować targetCellWidth i targetCellHeight dla urządzeń z Androidem 12 lub nowszym albo z systemem minWidth i minHeight w przypadku wszystkich wersji Androida (oznaczające minimalną ilość wykorzystywanego miejsca) domyślnie. Jednak gdy użytkownicy dodają widżet do ekranu głównego, zajmuje więcej miejsca niż określona przez Ciebie minimalna szerokość i wysokość.

Ekrany główne Androida oferują użytkownikom siatkę dostępnych miejsc, w których mogą umieszczać widżety i ikony. Siatka może się różnić w zależności od urządzenia. Na przykład wiele telefonów ma siatkę 5 x 4, a tablety mogą mieć większą siatkę. Gdy dodasz widżet, zostanie on rozciągnięty, aby zajmował minimalną liczbę komórek w poziomie poziomym i pionowym, wymaganą do spełnienia ograniczeń targetCellWidth i targetCellHeight na urządzeniach z Androidem 12 lub nowszym albo minWidth i minHeight na urządzeniach z Androidem 11 (poziom API 30) lub starszym.

Zarówno szerokość, jak i wysokość komórki oraz rozmiar automatycznych marginesów stosowanych w widżetach mogą się różnić w zależności od urządzenia. W tabeli poniżej możesz zobaczyć przybliżone minimalne wymiary widżetu w typowym układzie siatki 5 x 4, biorąc pod uwagę liczbę zajętych komórek siatki:

Użyj rozmiarów komórek w trybie poziomym, aby podać wartości atrybutów minWidth, minResizeWidth i maxResizeWidth. Podobnie użyj rozmiarów komórek w trybie poziomym, aby określić podane wartości dla atrybutów minHeight, minResizeHeight i maxResizeHeight.

Dzieje się tak, ponieważ w trybie pionowym szerokość komórki jest zwykle mniejsza. niż w trybie poziomym. Podobnie jest w przypadku komórki o wysokości w trybie poziomym jest mniejszy niż w trybie pionowym.

Jeśli na przykład chcesz, aby widget można było zmniejszyć do rozmiaru jednej komórki na telefonie Google Pixel 4, musisz ustawić wartość minResizeWidth na co najwyżej 56 dp, aby mieć pewność, że wartość atrybutu minResizeWidth jest mniejsza niż 57 dp, ponieważ komórka ma co najmniej 57 dp szerokości w orientacji poziomej. Jeśli chcesz, by wysokość widżetu można było zmieniać w jednej komórce na tym samym urządzeniu, ustaw minResizeHeight na maksymalnie 50 dp, wartość atrybutu minResizeHeight jest mniejsza niż 51 dp – ponieważ jedna komórka ma wysokość co najmniej 51 dp w trybie poziomym.

Rozmiar każdego widżetu można zmieniać w zakresie rozmiarów między atrybutami minResizeWidth/minResizeHeight i maxResizeWidth/maxResizeHeight, co oznacza, że musi on dostosowywać się do wszystkich rozmiarów między nimi.

Aby na przykład ustawić domyślny rozmiar widżetu w miejscu docelowym, możesz ustaw te atrybuty:

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

Oznacza to, że domyślny rozmiar widżetu to 3 x 2 komórki, zgodnie z Atrybuty targetCellWidth i targetCellHeight (lub 180 × 110 dp), określone przez minWidth i minHeight dla urządzeń z Android 11 lub starszy. W tym drugim przypadku rozmiar w komórkach różnią się w zależności od urządzenia.

Aby ustawić obsługiwane zakresy rozmiarów widżetu, możesz też ustawić te atrybuty:

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

Zgodnie z poprzednimi atrybutami szerokość widżetu wynosi można zmieniać od 180 do 530 dp, a wysokość można zmieniać w zakresie od 110 do 450 dp. Widżet można wtedy zmieniać z 3 na 2 komórki i odwrotnie, o ile spełnione są te warunki:

• Urządzenie ma siatkę 5 x 4.
• Mapowanie liczby komórek na dostępny rozmiar w dps jest zgodna z tabelą przedstawiającą szacowaną wartość minimalną na tej stronie.
• Widżet dostosowuje się do tego zakresu rozmiarów.

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);

Załóżmy, że widżet korzysta z elastycznego układu zdefiniowanego w poprzednich fragmentach kodu. Oznacza to, że układ określony jako Wartość R.layout.widget_weather_forecast_small została użyta w zakresie 180 dp (minResizeWidth) x 110 dp (minResizeHeight) do 269 x 279 dp (następne punkty odcięcia – 1). Podobnie, R.layout.widget_weather_forecast_medium jest używany w zakresie 270 x 110 dp do 270 x 279 dp, a R.layout.widget_weather_forecast_large – w zakresie 270 x 280 dp do 530 dp (maxResizeWidth) x 450 dp (maxResizeHeight).

Gdy użytkownik zmienia rozmiar widżetu, jego wygląd dostosowuje się do rozmiaru komórki zgodnie z poniższymi przykładami.