TwoPaneLayout

Важно!

В этой статье описаны функциональные возможности общедоступной ознакомительной версии, а также инструкции по ее использованию. Сведения могут быть существенно изменены, прежде чем версия станет общедоступной. Майкрософт не дает никаких гарантий, явных или подразумеваемых, в отношении предоставленной здесь информации.

TwoPaneLayout — это встроенный компонент Jetpack Compose, содержащий вспомогательные макеты для создания пользовательского интерфейса на устройствах с большим экраном, с двумя экранами или на складных устройствах. Компонент предоставляет двухпанельный макет, используемый на самом высоком уровне интерфейса, Компонент разместит две области рядом, если приложение работает на двухэкранных и складных устройствах, а также устройствах с большим экраном.

Примечание

TwoPaneLayout определяет устройство как имеющее большой экран, если длина меньшей стороны экрана составляет более 585 dp (density-independent pixels — число не зависящих от плотности пикселей). Устройство считается одноэкранным, если меньшая сторона имеет длину до 585 dp.

Меньшая сторона экрана — это либо высота, либо ширина экрана, величина которой имеет меньшее значение в книжной и альбомной ориентации.

Если приложение размещается вдоль вертикальной петли или сгиба либо если ширина экрана больше, чем высота (на устройстве с большим экраном), pane1 будет отображаться слева, а pane2 — справа. При повороте устройства приложение будет размещено вдоль горизонтальной петли или сгиба либо, если ширина экрана меньше, чем высота (на устройстве с большим экраном), pane1 будет отображаться вверху, а pane2 — внизу.

Функция верхнего уровня

@Composable
fun TwoPaneLayout(
    modifier: Modifier = Modifier,
    paneMode: TwoPaneMode = TwoPaneMode.TwoPane,
    pane1: @Composable TwoPaneScope.() -> Unit,
    pane2: @Composable TwoPaneScope.() -> Unit
)

TwoPaneLayout может назначать ширину или высоту своим дочерним элементам в соответствии с их весовыми коэффициентами, которые предоставляются с помощью модификатора TwoPaneScope.weight. Если весовые коэффициенты отсутствуют, два дочерних элемента будут расположены одинаково для заполнения всей области экрана.

Области могут размещаться горизонтально или вертикально в зависимости от поворота устройства, если только не задан параметр paneMode.

При запуске на обычном устройстве с одним экраном отображается только одна область. Другая область будет перекрыта с возможностью навигации для переключения между двумя областями.

Пример использования:

TwoPaneLayout(
    pane1 = {
        Text(
            text = stringResource(R.string.first_pane_text),
            modifier = Modifier.fillMaxSize().background(color = Color.Cyan)
        )
    },
    pane2 = {
        Text(
            text = stringResource(R.string.second_pane_text),
            modifier = Modifier.fillMaxSize().background(color = Color.Magenta)
        )
    }
)
  • Устройство с двумя экранами (Surface Duo)

    Снимок экрана устройства Surface Duo

  • Складное устройство

    Снимок экрана складного устройства

@Composable
fun navigateToPane1()

Переход к pane1 с pane2 в режиме одной области.

@Composable
fun navigateToPane2() 

Переход к pane2 с pane1 в режиме одной области.

Пример использования:

TwoPaneLayout(
    pane1 = {
        Text(
            text = stringResource(R.string.first_pane_text),
            modifier = Modifier.fillMaxSize().background(color = Color.Cyan)
                .clickable {
                    navigateToPane2()
                }
        )
    },
    pane2 = {
        Text(
            text = stringResource(R.string.second_pane_text),
            modifier = Modifier.fillMaxSize().background(color = Color.Magenta)
                .clickable {
                    navigateToPane1()
                }
        )
    }
)

Настройка двух областей

Макет можно настроить по двум параметрам.

  • weight (вес) — определяет пропорциональный размер двух областей и приоритет при отображении только одной из них. В одноэкранном режиме будет приоритетно отображаться область, имеющая больший вес.
  • paneMode (режим областей) — определяет горизонтальное или вертикальное расположение одной или двух областей в двухэкранном режиме.

Weight

Используйте модификатор TwoPaneScope.weight, чтобы назначить ширину дочерних элементов и их приоритет в режиме одной области:

Пример использования:

TwoPaneLayout(
    pane1 = {
        Text(
            text = stringResource(R.string.first_pane_text),
            modifier = Modifier.fillMaxSize().background(color = Color.Cyan).weight(.3f)
        )
    },
    pane2 = {
        Text(
            text = stringResource(R.string.second_pane_text),
            modifier = Modifier.fillMaxSize().background(color = Color.Magenta).weight(.7f)
        )
    }
)

Устройство с большим экраном, где две области отображаются с размерами в пропорции 3 к 7:

Снимок экрана планшета

paneMode

Параметр paneMode может иметь три значения, которые определяют, должны ли отображаться две области отдельно или только одна область.

  • TwoPane (две области) — отображение двух областей, когда приложение развернуто на двух экранах, на складном устройстве или планшете. Используется по умолчанию.

  • VerticalSingle (одна область вертикально) — отображение только одной области, когда приложение растянуто через вертикальную складку или шарнир либо работает на планшете или крупноэкранном устройстве.

    Снимок экрана VerticalSingle

  • HorizontalSingle (одна область горизонтально) — отображение только одной области, когда приложение растянуто через горизонтальную складку или шарнир либо работает на планшете или крупноэкранном устройстве.

    Снимок экрана HorizontalSingle

Пример использования:

TwoPaneLayout(
    paneMode = TwoPaneMode.HorizontalSingle,
    pane1 = {
        Text(
            text = stringResource(R.string.first_pane_text),
            modifier = Modifier.fillMaxSize().background(color = Color.Cyan)
        )
    },
    pane2 = {
        Text(
            text = stringResource(R.string.second_pane_text),
            modifier = Modifier.fillMaxSize().background(color = Color.Magenta)
        )
    }
)

Примечание

Horizontal (горизонтально) означает, что линия шарнира или складки длиннее, чем высота устройства (сверху вниз), а Vertical — что она длиннее, чем ширина (слева направо).

Добавление в проект

  1. Файл build.gradle верхнего уровня должен включать репозиторий mavenCentral():

    allprojects {
        repositories {
            google()
            mavenCentral()
         }
    }
    
  2. Добавьте в файл build.gradle на уровне модуля следующие зависимости (текущая версия может отличаться от показанной ниже):

    implementation "com.microsoft.device.dualscreen:twopanelayout:1.0.0-alpha06"
    
  3. Также в файле compileSdkVersion на уровне модуля необходимо задать для compileSdkVersion и targetSdkVersion как минимум API 30 или более новую версию:

    android { 
        compileSdkVersion 30
    
        defaultConfig { 
            targetSdkVersion 30 
        } 
        ... 
    }
    
  4. Выполните сборку макета с использованием TwoPaneLayout.

См. образец TwoPaneLayout для получения дополнительных сведений.