Nativescript TabView использует много места при добавлении текста заголовка

Можно ли удалить некоторые отступы внутри элемента tabview?

Просмотр вкладок

В TabView много пустого неиспользуемого места. Если бы я мог удалить это, мои вкладки не обрезались бы. Это значительно улучшило бы мое приложение, поскольку теперь вам нужно провести немного вправо, чтобы увидеть полный заголовок последнего пункта меню.

Tabview создается в NS-Vue, но я не думаю, что это будет иметь значение, поскольку это внутренняя проблема.


nativescript nativescript-vue
person Mennolp    schedule 05.06.2019    source источник
comment
Нет, вы не можете настроить стили представления вкладок по умолчанию.   -  person Manoj    schedule 05.06.2019
comment
Я предлагаю вам создать свой собственный GridLayout в поддержку этого   -  person Narendra    schedule 06.06.2019
comment
@Narendra Можно ли скрыть кнопки вкладок? Значит, я все еще могу использовать функции tabview?   -  person Mennolp    schedule 06.06.2019

Ответы (1)


arrow_upward
0
arrow_downward

Я использую отрицательные поля, чтобы удалить отступы из элементов TabView. Это было единственное решение, которое я нашел для этого. Такой подход нужен только для Android, для iOS он отлично работает.

import { Component, OnInit, HostListener } from '@angular/core';
import { Page } from 'tns-core-modules/ui/page/page';
import { RouterExtensions } from 'nativescript-angular/router';
import { ActivatedRoute } from '@angular/router';
import { TabView } from 'tns-core-modules/ui/tab-view';
import * as platform from 'tns-core-modules/platform';

@Component({
  selector: 'app-tabs',
  moduleId: module.id,
  templateUrl: './tabs.component.html'
})
export class TabsComponent implements OnInit {

  tabView: TabView;

  constructor(
    private page: Page,
    private router: RouterExtensions,
    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.tabView = this.page.getViewById('tab');

    this.router.navigate([
      {
        outlets: {
          homeTab: ['home'],
          organizadorTab: ['organizador'],
          favoritosTab: ['favoritos'],
          categoriasTab: ['categorias'],
          perfilTab: ['perfil']
        }
      }
    ], { relativeTo: this.route });
  }

  @HostListener('loaded')
  onLoaded() {
    if (platform.isAndroid) {
      this.tabView.android.tabLayout.setTabTextFontSize(10);

      const viewGroup = this.tabView.android.tabLayout.getChildAt(0);

      for (let i = 0; i < viewGroup.getChildCount(); i++) {
        const view = viewGroup.getChildAt(i);
        const layoutParams = view.getLayoutParams();
        layoutParams.width = 1;

        layoutParams.leftMargin = -20;
        layoutParams.rightMargin = -20;
        layoutParams.topMargin = -20;
        layoutParams.bottomMargin = -20;

        view.setLayoutParams(layoutParams);
      }

      this.tabView.requestLayout();
    }
  }
}
person Felipe Aguiar    schedule 12.08.2019