javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(bottom-nav): align text with different icons

Browse Source
This commit is contained in:
Vasil Trifonov
2020-03-05 15:35:07 +02:00
parent 864b51232b
commit 9830be7230
4 changed files with 58 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
nativescript-core/ui/bottom-navigation/bottom-navigation.android.ts
View File

@@ -36,6 +36,11 @@ let BottomNavigationBar: any;
let AttachStateChangeListener: any;
let appResources: android.content.res.Resources;
class IconInfo {
drawable: android.graphics.drawable.BitmapDrawable;
height: number;
}
function makeFragmentName(viewId: number, id: number): string {
return "android:bottomnavigation:" + viewId + ":" + id;
}
@@ -596,12 +601,13 @@ export class BottomNavigation extends TabNavigationBase {
// ICON
const iconSource = tabStripItem.image && tabStripItem.image.src;
if (iconSource) {
const icon = this.getIcon(tabStripItem);
const iconInfo = this.getIconInfo(tabStripItem);
if (icon) {
if (iconInfo) {
// TODO: Make this native call that accepts string so that we don't load Bitmap in JS.
// tslint:disable-next-line:deprecation
tabItemSpec.iconDrawable = icon;
tabItemSpec.iconDrawable = iconInfo.drawable;
tabItemSpec.imageHeight = iconInfo.height;
} else {
// TODO:
// traceMissingIcon(iconSource);
@@ -612,7 +618,7 @@ export class BottomNavigation extends TabNavigationBase {
return tabItemSpec;
}
private getIcon(tabStripItem: TabStripItem): android.graphics.drawable.BitmapDrawable {
private getOriginalIcon(tabStripItem: TabStripItem): android.graphics.Bitmap {
const iconSource = tabStripItem.image && tabStripItem.image.src;
if (!iconSource) {
return null;
@@ -629,21 +635,33 @@ export class BottomNavigation extends TabNavigationBase {
is = ImageSource.fromFileOrResourceSync(iconSource);
}
let imageDrawable: android.graphics.drawable.BitmapDrawable;
if (is && is.android) {
let image = is.android;
return is && is.android;
}
private getDrawableInfo(image: android.graphics.Bitmap): IconInfo {
if (image) {
if (this.tabStrip && this.tabStrip.isIconSizeFixed) {
image = this.getFixedSizeIcon(image);
}
imageDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), image);
let imageDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), image);
return {
drawable: imageDrawable,
height: image.getHeight()
};
} else {
// TODO
// traceMissingIcon(iconSource);
}
return imageDrawable;
return null;
}
private getIconInfo(tabStripItem: TabStripItem): IconInfo {
let originalIcon = this.getOriginalIcon(tabStripItem);
return this.getDrawableInfo(originalIcon);
}
private getFixedSizeIcon(image: android.graphics.Bitmap): android.graphics.Bitmap {
@@ -702,9 +720,9 @@ export class BottomNavigation extends TabNavigationBase {
const index = tabStripItem._index;
const tabBarItem = this._bottomNavigationBar.getViewForItemAt(index);
const imgView = <android.widget.ImageView>tabBarItem.getChildAt(0);
const drawable = this.getIcon(tabStripItem);
const drawableInfo = this.getIconInfo(tabStripItem);
imgView.setImageDrawable(drawable);
imgView.setImageDrawable(drawableInfo.drawable);
}
public setTabBarItemFontInternal(tabStripItem: TabStripItem, value: Font): void {

41
tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/BottomNavigationBar.java
View File

@@ -19,6 +19,7 @@ package org.nativescript.widgets;
import android.content.Context;
import android.graphics.Typeface;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.util.SparseArray;
@@ -54,6 +55,7 @@ public class BottomNavigationBar extends LinearLayout {
private SparseArray<String> mContentDescriptions = new SparseArray<String>();
private final TabStrip mTabStrip;
private int mMaxImageHeight;
public BottomNavigationBar(Context context) {
this(context, null);
@@ -108,6 +110,7 @@ public class BottomNavigationBar extends LinearLayout {
public void setItems(TabItemSpec[] items) {
mTabStrip.removeAllViews();
mTabItems = items;
setImageHeights();
populateTabStrip();
}
@@ -120,25 +123,25 @@ public class BottomNavigationBar extends LinearLayout {
TextView textView = (TextView)ll.getChildAt(1);
this.setupItem(ll, textView, imgView, tabItem);
}
/**
* Gets the TextView for tab item at index
*/
public TextView getTextViewForItemAt(int index){
LinearLayout ll = this.getViewForItemAt(index);
return (ll != null) ? (TextView)ll.getChildAt(1) : null;
return (ll != null) ? (TextView)ll.getChildAt(1) : null;
}
/**
* Gets the LinearLayout container for tab item at index
*/
public LinearLayout getViewForItemAt(int index){
LinearLayout result = null;
if(this.mTabStrip.getChildCount() > index){
result = (LinearLayout)this.mTabStrip.getChildAt(index);
}
return result;
}
@@ -165,7 +168,7 @@ public class BottomNavigationBar extends LinearLayout {
ImageView imgView = new ImageView(context);
imgView.setScaleType(ScaleType.FIT_CENTER);
LinearLayout.LayoutParams imgLP = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
LinearLayout.LayoutParams imgLP = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, this.mMaxImageHeight > 0 ? this.mMaxImageHeight : ViewGroup.LayoutParams.WRAP_CONTENT);
imgLP.gravity = Gravity.CENTER;
imgView.setLayoutParams(imgLP);
@@ -184,10 +187,9 @@ public class BottomNavigationBar extends LinearLayout {
ll.addView(textView);
return ll;
}
private void setupItem(LinearLayout ll, TextView textView,ImageView imgView, TabItemSpec tabItem){
float density = getResources().getDisplayMetrics().density;
if (tabItem.iconId != 0) {
imgView.setImageResource(tabItem.iconId);
imgView.setVisibility(VISIBLE);
@@ -205,14 +207,14 @@ public class BottomNavigationBar extends LinearLayout {
if (tabItem.typeFace != null) {
textView.setTypeface(tabItem.typeFace);
}
if (tabItem.fontSize != 0) {
textView.setTextSize(tabItem.fontSize);
}
if (tabItem.color != 0) {
textView.setTextColor(tabItem.color);
mTabStrip.setShouldUpdateTabsTextColor(false);
mTabStrip.setShouldUpdateTabsTextColor(false);
}
} else {
textView.setVisibility(GONE);
@@ -238,17 +240,28 @@ public class BottomNavigationBar extends LinearLayout {
// to be overridden in JS
}
private void setImageHeights(){
for (int i = 0; i < this.mTabItems.length; i++) {
TabItemSpec tabItem = this.mTabItems[i];
if(tabItem.imageHeight == 0 && tabItem.iconId != 0) {
Drawable drawable = getResources().getDrawable(tabItem.iconId);
tabItem.imageHeight = drawable.getIntrinsicHeight();
}
if(tabItem.imageHeight > this.mMaxImageHeight) {
this.mMaxImageHeight = tabItem.imageHeight;
}
}
}
private void populateTabStrip() {
final OnClickListener tabClickListener = new TabClickListener();
if (this.mTabItems != null) {
int count = this.mTabItems.length < 5 ? this.mTabItems.length : 5;
for (int i = 0; i < count; i++) {
View tabView = null;
TabItemSpec tabItem;
tabItem = this.mTabItems[i];
tabView = createDefaultTabView(getContext(), tabItem);
View tabView = createDefaultTabView(getContext(), tabItem);
tabView.setOnClickListener(tabClickListener);
String desc = mContentDescriptions.get(i, null);

1
tns-core-modules-widgets/android/widgets/src/main/java/org/nativescript/widgets/TabItemSpec.java
View File

@@ -9,6 +9,7 @@ public class TabItemSpec {
public Typeface typeFace;
public int iconId;
public Drawable iconDrawable;
public int imageHeight;
public int backgroundColor;
public int color;
}

1
tns-platform-declarations/android/org.nativescript.widgets.d.ts vendored
View File

@@ -468,6 +468,7 @@
typeFace: android.graphics.Typeface;
iconId: number;
iconDrawable: android.graphics.drawable.Drawable;
imageHeight: number;
backgroundColor: number;
color: number;
}