添加标题文本时,Nativescript TabView使用了很多空间

时间:2019-06-05 14:25:53

标签: nativescript nativescript-vue

是否可以删除tabview项内的某些填充?

Tab View

TabView有很多空的未使用空间。如果我可以删除它,那么我的标签将不会被截断。这将大大改善我的应用程序,因为现在您必须向右滑动一点才能看到最后一个菜单项的完整标题。

tabview是在NS-Vue中创建的,但我认为这并不重要,因为这是一个本地问题。

1 个答案:

答案 0 :(得分:0)

我正在使用负边距从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();
    }
  }
}