Nativescript: Как расположить элемент в центре области просмотра, независимо от другого содержимого?

Question

Я хочу расположить элемент ActivityIndicator в центре телефона (как вертикально, так и горизонтально). У меня есть страница, которая выглядит примерно так:

<Page class="page">
    <ActionBar class="action-bar">
      <Label class="action-bar-title" text="Image backup"></Label>
    </ActionBar>
    <TabView :selectedIndex="selectedIndex" @selectedIndexChange="indexChange">
      <TabViewItem title="Add images">
        <StackLayout>
          <Button @tap="takePicture" text="Take picture"></Button>...
          <StackLayout v-if="newImages.length" orientation="horizontal">...</StackLayout>
          <RadListView layout="grid" ref="newImages" for="image in newImages">
            <v-template>
              ...
            </v-template>
          </RadListView>
        </StackLayout>
      </TabViewItem>
      <TabViewItem title="Backedup images">
        <StackLayout>
          <Button @tap="fetchAllBackedupImages" text="Get all backedup images"></Button>
          <StackLayout v-if="backedupImages.length" orientation="horizontal">
            ...
          </StackLayout>
          <RadListView layout="grid" ref="backedupImages" for="image in sortedBackedupImages">
            <v-template>...</v-template>
          </RadListView>
        </StackLayout>
      </TabViewItem>
    </TabView>
  </Page>

Все, что я хочу, это показать / скрыть ActivityIndicator, точно в середине страницы. Это должен быть Android-эквивалент этого CSS:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Как это можно сделать?

Answer 1

Просто оберните все содержимое с помощью GridLayout и добавьте ActivityIndicator в качестве второго дочернего элемента на том же макете. Что-то вроде

<Page class="page">
    <ActionBar class="action-bar">
        <Label class="action-bar-title" text="Image backup"></Label>
    </ActionBar>
    <GridLayout>
        <TabView :selectedIndex="selectedIndex" @selectedIndexChange="indexChange">
            <TabViewItem title="Add images">
                <StackLayout>
                    <Button @tap="takePicture" text="Take picture"></Button>...
                    <StackLayout v-if="newImages.length" orientation="horizontal">...</StackLayout>
                    <RadListView layout="grid" ref="newImages" for="image in newImages">
                        <v-template>
                            ...
                        </v-template>
                    </RadListView>
                </StackLayout>
            </TabViewItem>
            <TabViewItem title="Backedup images">
                <StackLayout>
                    <Button @tap="fetchAllBackedupImages" text="Get all backedup images"></Button>
                    <StackLayout v-if="backedupImages.length" orientation="horizontal">
                        ...
                    </StackLayout>
                    <RadListView layout="grid" ref="backedupImages" for="image in sortedBackedupImages">
                        <v-template>...</v-template>
                    </RadListView>
                </StackLayout>
            </TabViewItem>
        </TabView>
        <ActivityIndicator></ActivityIndicator>
    </GridLayout>
</Page>

Тогда вы можете просто переключать атрибут busy всякий раз, когда хотите показать / скрыть индикатор. Если добавление ActivityIndicator к каждому Page слишком много, то вы можете обернуть свой корневой фрейм с помощью GridLayout и аналогичным образом добавить туда ActivityIndicator, так что вам не придется добавлять его к каждому Page.

Хотя этот подход работает, я бы рекомендовал вместо этого использовать диалоговое окно прогресса, чтобы вы могли на самом деле заблокировать доступ пользователя к пользовательскому интерфейсу, если хотите, вот Пример игровой площадки для аналогичного подхода.