Статьи

Настройте панель навигации и строку состояния iOS с помощью NativeScript

Поскольку я все больше и больше узнавал о  NativeScript , одной из первых задач, которую я действительно увлекся, было изучение того, как настроить панель навигации для приложения iOS. NativeScript имеет компонент Navbar в дорожной карте, но пока он требует определенных знаний о базовой реализации iOS UINavigationControllersUIViewControllers  и тому подобного. Но не бойся! Я выдержал коварные воды StackOverflow и документов Objective-C и вышел победителем и невредимым.

1

В этой статье я рассмотрю несколько наиболее распространенных настроек, которые вам, возможно, придется внести в панель навигации или строку состояния. Хотя NativeScript является кроссплатформенным фреймворком, эти настройки применимы именно к iOS. Однако большинство пунктов, которые я расскажу здесь, также могут быть реализованы для Android.

В процессе обучения настройке панели навигации я черпал вдохновение из  этого поста Саймона Н.Г. в AppCoda . Это фантастическая статья, в которой рассказывается о том, что можно сделать для панели навигации iOS и строки состояния с точки зрения Objective-C. Мне очень понравилось то, как был выложен пост, поэтому я собираюсь использовать примерно тот же формат, чтобы рассказать о панели навигации / строке состояния iOS в NativeScript:

  • Отображение и скрытие панели навигации
  • Установка заголовка панели навигации
  • Скрытие кнопки Назад
  • Изменение цвета фона панели навигации
  • Изменение цвета текста заголовка
  • Изменение стиля текста заголовка
  • Установка стиля строки состояния
  • Настройка цвета кнопки «Назад»
  • Скрытие кнопки Назад
  • Добавление новых элементов панели кнопок

NativeScript Навигация по умолчанию

NativeScript рассматривает начальную страницу, которая загружается как корневой контроллер представления. Любое представление, к которому осуществляется переход, помещается в очередь навигации с помощью UINavigationController. Это означает, что на первом экране вы вообще не увидите панель навигации. При каждом последующем просмотре вы увидите его, включая кнопку «<Назад».

Для большинства настроек требуется ссылка на UINavigationController или текущий UIViewController. Вы можете получить ссылку на этот контроллер из  frames модуля tns.

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="loaded" >
  <!-- ... -->
</Page>
exports.loaded = function(args) {
  var page = args.object;
  if (page.ios) {
    var controller = frameModule.topmost().ios.controller;
  }
};

Отображение и скрытие навигации

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

// hide the navbar
frameModule.topmost().ios.navBarVisibility = "never";

// show the navbar
frameModule.topmost().ios.navBarVisibility = "always";

2

Установка заголовка панели навигации

Изменить заголовок действительно легко. Просто используйте  page.iosобъект приложения, который предоставляет  title свойство.

// set the title
page.ios.title = 'Instaclone';

10

Скрытие кнопки «Назад»

Иногда может быть желательно скрыть кнопку возврата. В приведенном здесь примере пользователь входит в Instagram с помощью OAuth, а затем перенаправляется на страницу канала. По умолчанию на этой странице канала отображается кнопка «Назад».

3

Это не идеально, так как пользователь может затем вернуться в процесс OAuth, и приложение сломается. Чтобы скрыть кнопку «Назад», требуется получить экземпляр элемента навигации UIViewController и вызвать  setHidesBackButtonAnimated метод.

var controller = frameModule.topmost().ios.controller;

// get the view controller navigation item
var navigationItem = controller.visibleViewController.navigationItem;

// hide back button
navigationItem.setHidesBackButtonAnimated(true, false);

8

Изменение цвета фона панели навигации

Цвета iOS по умолчанию нормальные, но ни одно приложение не может быть полным без красивого, настраиваемого цвета панели навигации. Используйте  setBarTintметод, чтобы изменить цвет панели. Вы можете использовать системные константы, например blueColor(), или вы можете определить пользовательские с помощью RGBA. Я использую удобную программу  Sip , которая отбирает цвета и автоматически предоставляет их в этом формате RGBA.

// set bar color to system blue constant
navigationBar.barTintColor = UIColor.blueColor();

// set bar color to a nice dark blue with RGBA
navigationBar.barTintColor = UIColor.colorWithRedGreenBlueAlpha(0, 0.24, 0.45, 1);

4

Изменение цвета текста заголовка

Панель навигации теперь очень синего цвета, но текст на ней все еще черный, что не очень красиво или модно. Было бы лучше, если бы он был белым. Мы можем изменить это, изменив панель titleTextAttributes навигации.

// change title color
navigationBar.titleTextAttributes = new NSDictionary([UIColor.whiteColor()], [NSForegroundColorAttributeName]);

11

Изменение стиля текста заголовка

Не то чтобы вы должны это  делать , но вы также можете изменить стиль текста на панели навигации. Вы можете, например, дать ему хорошую тень, чтобы вернуть ощущение конца 90-х.

// change title color and drop the shadow like it's hot
var shadow = new NSShadow();
shadow.shadowColor = UIColor.blackColor();
shadow.shadowOffset = CGSizeMake(1,2);
navigationBar.titleTextAttributes = new NSDictionary([UIColor.whiteColor(), shadow], [NSForegroundColorAttributeName, NSShadowAttributeName]);

12

Установка стиля строки состояния

Строка состояния (время, индикатор батареи) имеет стиль по умолчанию «темный». Это можно изменить, используя одно из допустимых сопоставленных перечислений для  UIStatusBarStyle. Если вы когда-нибудь задумывались, как NativeScript отображает типы и функции iOS для классов, вы можете найти все это в репозитории кроссплатформенных модулей  внутри  ios.d.ts файла . Нет необходимости делать какие-либо догадки.

/*  change status bar style
    UIStatusBarStyleDefault,
    UIStatusBarStyleLightContent,
    UIStatusBarStyleBlackTranslucent,
    UIStatusBarStyleBlackOpaque */
navigationBar.barStyle = 1;

5

Изменение цвета кнопки «Назад»

Если бы у нас была кнопка «Назад» на этой странице, это был бы неправильный цвет:

6

Просто установите цвет оттенка,  navigationBar чтобы исправить это.

navigationBar.tintColor = UIColor.whiteColor();

7

Добавление кнопок в NavBar

Дополнительные кнопки могут быть добавлены в панель навигации с помощью разметки.

<Page>
  <Page.optionsMenu>
    <MenuItem text="share" tap="shareAction" />
  </Page.optionsMenu>
</Page>

Кнопки также можно добавлять программно, создавая UIBarButtonItems и затем добавляя их в rightBarButtonItems массив на  navigationItem.

/*  Create bar button item

    first argument is what icon to show:

    UIBarButtonSystemItemDone,
    UIBarButtonSystemItemCancel,
    UIBarButtonSystemItemEdit,
    UIBarButtonSystemItemSave,
    UIBarButtonSystemItemAdd,
    UIBarButtonSystemItemFlexibleSpace,
    UIBarButtonSystemItemFixedSpace,
    UIBarButtonSystemItemCompose,
    UIBarButtonSystemItemReply,
    UIBarButtonSystemItemAction,
    UIBarButtonSystemItemOrganize,
    UIBarButtonSystemItemBookmarks,
    UIBarButtonSystemItemSearch,
    UIBarButtonSystemItemRefresh,
    UIBarButtonSystemItemStop,
    UIBarButtonSystemItemCamera,
    UIBarButtonSystemItemTrash,
    UIBarButtonSystemItemPlay,
    UIBarButtonSystemItemPause,
    UIBarButtonSystemItemRewind,
    UIBarButtonSystemItemFastForward,
    UIBarButtonSystemItemUndo,
    UIBarButtonSystemItemRedo,
    UIBarButtonSystemItemPageCurl */

// creates item with UIBarButtonSystemItemAction icon
var shareItem = new UIBarButtonItem(UIBarButtonSystemItem.UIBarButtonSystemItemAction, null, null);

// add item to navigation bar
var actionButtonItems = [shareItem];
navigationItem.rightBarButtonItems = actionButtonItems;

12

Наслаждайтесь родным

Одна из моих любимых частей работы с NativeScript — это возможность просто раскрыться и начать работать с базовыми нативными API напрямую, но без того глупого синтаксиса передачи сообщений, который использует Objective-C. Когда вы освоите работу API-интерфейсов и то, как  NativeScript отображает их , нет ограничений на количество настроек, которые вы можете выполнять в своих приложениях с помощью NativeScript.