nativescript-segment-view
Version:
Make same style of segmentbar in android and ios, and have more attributes
334 lines • 15 kB
JavaScript
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
var font_1 = require("tns-core-modules/ui/styling/font");
var n_s_segment_view_common_1 = require("./n-s-segment-view.common");
var utils = require("tns-core-modules/utils/utils");
__export(require("./n-s-segment-view.common"));
var R_ID_TABS = 0x01020013;
var R_ID_TABCONTENT = 0x01020011;
var R_ATTR_STATE_SELECTED = 0x010100a1;
var TITLE_TEXT_VIEW_ID = 16908310;
var apiLevel;
var selectedIndicatorThickness;
var TabHost;
var TabChangeListener;
var TabContentFactory;
function initializeNativeClasses() {
if (TabChangeListener) {
return;
}
apiLevel = android.os.Build.VERSION.SDK_INT;
selectedIndicatorThickness = n_s_segment_view_common_1.layout.toDevicePixels(apiLevel >= 21 ? 2 : 5);
var NSTabChangeListenerImpl = (function (_super) {
__extends(NSTabChangeListenerImpl, _super);
function NSTabChangeListenerImpl(owner) {
var _this = _super.call(this) || this;
_this.owner = owner;
return global.__native(_this);
}
NSTabChangeListenerImpl.prototype.onTabChanged = function (id) {
var owner = this.owner;
if (owner.shouldChangeSelectedIndex()) {
owner.selectedIndex = parseInt(id);
}
this.owner.updateTextColor();
};
return NSTabChangeListenerImpl;
}(java.lang.Object));
NSTabChangeListenerImpl = __decorate([
Interfaces([android.widget.TabHost.OnTabChangeListener]),
__metadata("design:paramtypes", [NSSegmentView])
], NSTabChangeListenerImpl);
var TabContentFactoryImpl = (function (_super) {
__extends(TabContentFactoryImpl, _super);
function TabContentFactoryImpl(owner) {
var _this = _super.call(this) || this;
_this.owner = owner;
return global.__native(_this);
}
TabContentFactoryImpl.prototype.createTabContent = function (tag) {
var tv = new android.widget.TextView(this.owner._context);
tv.setVisibility(android.view.View.GONE);
tv.setMaxLines(1);
tv.setEllipsize(android.text.TextUtils.TruncateAt.END);
return tv;
};
return TabContentFactoryImpl;
}(java.lang.Object));
TabContentFactoryImpl = __decorate([
Interfaces([android.widget.TabHost.TabContentFactory]),
__metadata("design:paramtypes", [NSSegmentView])
], TabContentFactoryImpl);
var NSTabHostImpl = (function (_super) {
__extends(NSTabHostImpl, _super);
function NSTabHostImpl(context, attrs) {
var _this = _super.call(this, context, attrs) || this;
return global.__native(_this);
}
NSTabHostImpl.prototype.onAttachedToWindow = function () {
};
return NSTabHostImpl;
}(android.widget.TabHost));
TabHost = NSTabHostImpl;
TabChangeListener = NSTabChangeListenerImpl;
TabContentFactory = TabContentFactoryImpl;
}
var NSSegmentViewColorDrawable = (function (_super) {
__extends(NSSegmentViewColorDrawable, _super);
function NSSegmentViewColorDrawable(color, selectedBackgroundColor, thickness) {
var _this = _super.call(this, color.android) || this;
_this.thickness = thickness;
_this.selectedBackgroundColor = selectedBackgroundColor;
return global.__native(_this);
}
NSSegmentViewColorDrawable.prototype.draw = function (canvas) {
var p = new android.graphics.Paint();
p.setColor(this.getColor());
p.setStyle(android.graphics.Paint.Style.FILL);
canvas.drawRect(0, this.getBounds().height() - this.thickness, this.getBounds().width(), this.getBounds().height(), p);
if (this.selectedBackgroundColor != null) {
var p2 = new android.graphics.Paint();
p2.setColor(this.selectedBackgroundColor.android);
p2.setStyle(android.graphics.Paint.Style.FILL);
canvas.drawRect(0, 0, this.getBounds().width(), this.getBounds().height() - this.thickness, p2);
}
};
return NSSegmentViewColorDrawable;
}(android.graphics.drawable.ColorDrawable));
var NSSegmentViewItem = (function (_super) {
__extends(NSSegmentViewItem, _super);
function NSSegmentViewItem() {
return _super !== null && _super.apply(this, arguments) || this;
}
NSSegmentViewItem.prototype.setupNativeView = function (tabIndex) {
var titleTextView = this.parent.nativeViewProtected.getTabWidget().getChildAt(tabIndex).findViewById(TITLE_TEXT_VIEW_ID);
this.setNativeView(titleTextView);
if (titleTextView) {
if (this.titleDirty) {
this._update();
}
}
};
NSSegmentViewItem.prototype._update = function () {
var tv = this.nativeViewProtected;
if (tv) {
var title = this.title;
title = (title === null || title === undefined) ? "" : title;
tv.setText(title);
this.titleDirty = false;
}
else {
this.titleDirty = true;
}
};
NSSegmentViewItem.prototype.updateBackground = function () {
if (this.lineColor == null) {
return;
}
var nativeView = this.nativeViewProtected;
var viewGroup = nativeView.getParent();
if (this.lineColor instanceof n_s_segment_view_common_1.Color) {
var color = this.lineColor.android;
var backgroundDrawable = viewGroup.getBackground();
var stateDrawable = new android.graphics.drawable.StateListDrawable();
var colorDrawable = new NSSegmentViewColorDrawable(this.lineColor, this.selectedBackgroundColor, selectedIndicatorThickness);
var arr = Array.create("int", 1);
arr[0] = R_ATTR_STATE_SELECTED;
stateDrawable.addState(arr, colorDrawable);
var arr2 = Array.create("int", 1);
arr2[0] = -R_ATTR_STATE_SELECTED;
stateDrawable.addState(arr2, backgroundDrawable);
stateDrawable.setBounds(0, 15, viewGroup.getRight(), viewGroup.getBottom());
org.nativescript.widgets.ViewHelper.setBackground(viewGroup, stateDrawable);
}
else if (this.lineColor != null) {
var backgroundDrawable = tryCloneDrawable(this.lineColor, nativeView.getResources());
org.nativescript.widgets.ViewHelper.setBackground(viewGroup, backgroundDrawable);
}
};
NSSegmentViewItem.prototype[n_s_segment_view_common_1.colorProperty.getDefault] = function () {
return this.nativeViewProtected.getCurrentTextColor();
};
NSSegmentViewItem.prototype[n_s_segment_view_common_1.colorProperty.setNative] = function (value) {
var color = value instanceof n_s_segment_view_common_1.Color ? value.android : value;
this.nativeViewProtected.setTextColor(color);
};
NSSegmentViewItem.prototype[n_s_segment_view_common_1.fontSizeProperty.getDefault] = function () {
return { nativeSize: this.nativeViewProtected.getTextSize() };
};
NSSegmentViewItem.prototype[n_s_segment_view_common_1.fontSizeProperty.setNative] = function (value) {
if (typeof value === "number") {
this.nativeViewProtected.setTextSize(value);
}
else {
this.nativeViewProtected.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, value.nativeSize);
}
};
NSSegmentViewItem.prototype[n_s_segment_view_common_1.fontInternalProperty.getDefault] = function () {
return this.nativeViewProtected.getTypeface();
};
NSSegmentViewItem.prototype[n_s_segment_view_common_1.fontInternalProperty.setNative] = function (value) {
this.nativeViewProtected.setTypeface(value instanceof font_1.Font ? value.getAndroidTypeface() : value);
};
NSSegmentViewItem.prototype[n_s_segment_view_common_1.selectedBackgroundColorProperty.getDefault] = function () {
return this.selectedBackgroundColor;
};
NSSegmentViewItem.prototype[n_s_segment_view_common_1.selectedBackgroundColorProperty.setNative] = function (value) {
this.selectedBackgroundColor = value;
this.updateBackground();
};
NSSegmentViewItem.prototype[n_s_segment_view_common_1.lineColorProperty.getDefault] = function () {
var viewGroup = this.nativeViewProtected.getParent();
return viewGroup.getBackground();
};
NSSegmentViewItem.prototype[n_s_segment_view_common_1.lineColorProperty.setNative] = function (value) {
this.lineColor = value;
this.updateBackground();
};
NSSegmentViewItem.prototype[n_s_segment_view_common_1.backgroundProperty.getDefault] = function () {
return this.nativeViewProtected.getBackground();
};
NSSegmentViewItem.prototype[n_s_segment_view_common_1.backgroundProperty.setNative] = function (value) {
this.backgroundColor = value;
var nativeView = this.nativeViewProtected;
var viewGroup = nativeView.getParent();
if (value instanceof n_s_segment_view_common_1.Color) {
var color = value.android;
viewGroup.setBackgroundColor(color);
}
else {
var backgroundDrawable = tryCloneDrawable(value, nativeView.getResources());
org.nativescript.widgets.ViewHelper.setBackground(viewGroup, backgroundDrawable);
}
};
return NSSegmentViewItem;
}(n_s_segment_view_common_1.NSSegmentViewItemBase));
exports.NSSegmentViewItem = NSSegmentViewItem;
function tryCloneDrawable(value, resources) {
if (value) {
var constantState = value.getConstantState();
if (constantState) {
return constantState.newDrawable(resources);
}
}
return value;
}
var NSSegmentView = (function (_super) {
__extends(NSSegmentView, _super);
function NSSegmentView() {
return _super !== null && _super.apply(this, arguments) || this;
}
NSSegmentView.prototype.shouldChangeSelectedIndex = function () {
return !this._addingTab;
};
NSSegmentView.prototype.createNativeView = function () {
initializeNativeClasses();
var context = this._context;
var nativeView = new TabHost(context, null);
var tabHostLayout = new android.widget.LinearLayout(context);
tabHostLayout.setOrientation(android.widget.LinearLayout.VERTICAL);
var tabWidget = new android.widget.TabWidget(context);
tabWidget.setId(R_ID_TABS);
tabHostLayout.addView(tabWidget);
var frame = new android.widget.FrameLayout(context);
frame.setId(R_ID_TABCONTENT);
frame.setVisibility(android.view.View.GONE);
tabHostLayout.addView(frame);
nativeView.addView(tabHostLayout);
var listener = new TabChangeListener(this);
nativeView.setOnTabChangedListener(listener);
nativeView.listener = listener;
nativeView.setup();
return nativeView;
};
NSSegmentView.prototype.initNativeView = function () {
_super.prototype.initNativeView.call(this);
var nativeView = this.nativeViewProtected;
nativeView.listener.owner = this;
this._tabContentFactory = this._tabContentFactory || new TabContentFactory(this);
};
NSSegmentView.prototype.disposeNativeView = function () {
var nativeView = this.nativeViewProtected;
nativeView.listener.owner = null;
_super.prototype.disposeNativeView.call(this);
};
NSSegmentView.prototype.insertTab = function (tabItem, index) {
var tabHost = this.nativeViewProtected;
var tab = tabHost.newTabSpec(index + "");
tab.setIndicator(tabItem.title + "");
tab.setContent(this._tabContentFactory);
this._addingTab = true;
tabHost.addTab(tab);
tabItem.setupNativeView(index);
this._addingTab = false;
var i = tabHost.getTabWidget().getTabCount() - 1;
if (this.height === "auto") {
this.height = 30;
}
tabHost.getTabWidget().getChildAt(i).getLayoutParams().height = utils.layout.toDevicePixels(Number(this.height));
this.updateTextColor();
};
NSSegmentView.prototype.updateTextColor = function () {
if (this.selectedTextColor == null) {
this.selectedTextColor = new n_s_segment_view_common_1.Color("#000");
}
if (this.textColor == null) {
this.textColor = new n_s_segment_view_common_1.Color("#CCC");
}
var tabHost = this.nativeViewProtected;
for (var i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {
var item = this.items[i];
var tv = tabHost.getTabWidget().getChildAt(i).findViewById(TITLE_TEXT_VIEW_ID);
if (i === tabHost.getCurrentTab()) {
tv.setTextColor(this.selectedTextColor.android);
}
else {
tv.setTextColor(this.textColor.android);
}
}
};
NSSegmentView.prototype[n_s_segment_view_common_1.selectedIndexProperty.getDefault] = function () {
return -1;
};
NSSegmentView.prototype[n_s_segment_view_common_1.selectedIndexProperty.setNative] = function (value) {
this.nativeViewProtected.setCurrentTab(value);
};
NSSegmentView.prototype[n_s_segment_view_common_1.itemsProperty.getDefault] = function () {
return null;
};
NSSegmentView.prototype[n_s_segment_view_common_1.itemsProperty.setNative] = function (value) {
var _this = this;
this.nativeViewProtected.clearAllTabs();
var newItems = value;
if (newItems) {
newItems.forEach(function (item, i, arr) { return _this.insertTab(item, i); });
}
n_s_segment_view_common_1.selectedIndexProperty.coerce(this);
};
NSSegmentView.prototype[n_s_segment_view_common_1.titleColorProperty.getDefault] = function () {
return this.textColor;
};
NSSegmentView.prototype[n_s_segment_view_common_1.titleColorProperty.setNative] = function (value) {
var _this = this;
this.textColor = value;
setTimeout(function () {
_this.updateTextColor();
}, 100);
};
NSSegmentView.prototype[n_s_segment_view_common_1.selectedColorProperty.getDefault] = function () {
return this.selectedTextColor;
};
NSSegmentView.prototype[n_s_segment_view_common_1.selectedColorProperty.setNative] = function (value) {
var _this = this;
this.selectedTextColor = value;
setTimeout(function () {
_this.updateTextColor();
}, 100);
};
return NSSegmentView;
}(n_s_segment_view_common_1.NSSegmentViewBase));
exports.NSSegmentView = NSSegmentView;
//# sourceMappingURL=n-s-segment-view.android.js.map