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

Merge pull request #8412 from NativeScript/trifonov/icon-fix-bottom

Browse Source 
fix(bottom-nav): align text with different icons
This commit is contained in:
Dimitar Topuzov
2020-03-07 15:54:17 +02:00
committed by GitHub
parent 864b51232b 9d4e482b38
commit 286fcd3f75
4 changed files with 84 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
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,30 @@ 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);
} else {
// TODO
// traceMissingIcon(iconSource);
let imageDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), image);
return {
drawable: imageDrawable,
height: image.getHeight()
};
}
return imageDrawable;
return new IconInfo();
}
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 +717,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 {

90
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;
}
@@ -155,39 +158,40 @@ public class BottomNavigationBar extends LinearLayout {
protected View createDefaultTabView(Context context, TabItemSpec tabItem) {
float density = getResources().getDisplayMetrics().density;
LinearLayout ll = new LinearLayout(context);
ll.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT));
ll.setGravity(Gravity.CENTER);
ll.setOrientation(LinearLayout.VERTICAL);
TypedValue outValue = new TypedValue();
getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, outValue, true);
ll.setBackgroundResource(outValue.resourceId);
LinearLayout tabItemLayout = new LinearLayout(context);
tabItemLayout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT));
tabItemLayout.setGravity(Gravity.CENTER);
tabItemLayout.setOrientation(LinearLayout.VERTICAL);
TypedValue backgroundOutValue = new TypedValue();
getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground, backgroundOutValue, true);
tabItemLayout.setBackgroundResource(backgroundOutValue.resourceId);
ImageView imgView = new ImageView(context);
imgView.setScaleType(ScaleType.FIT_CENTER);
LinearLayout.LayoutParams imgLP = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
imgLP.gravity = Gravity.CENTER;
imgView.setLayoutParams(imgLP);
ImageView iconImageView = new ImageView(context);
iconImageView.setScaleType(ScaleType.FIT_CENTER);
int iconImageHeight = this.mMaxImageHeight > 0 ? this.mMaxImageHeight : ViewGroup.LayoutParams.WRAP_CONTENT;
int iconImageWidth = ViewGroup.LayoutParams.WRAP_CONTENT;
LinearLayout.LayoutParams iconImageLayoutParams = new LinearLayout.LayoutParams(iconImageWidth, iconImageHeight);
iconImageLayoutParams.gravity = Gravity.CENTER;
iconImageView.setLayoutParams(iconImageLayoutParams);
TextView textView = new TextView(context);
textView.setGravity(Gravity.CENTER);
textView.setMaxWidth((int) (ITEM_TEXT_MAX_WIDTH * density));
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, ITEM_TEXT_SIZE_SP);
textView.setTypeface(Typeface.DEFAULT_BOLD);
textView.setEllipsize(TextUtils.TruncateAt.END);
textView.setMaxLines(1);
textView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
TextView titleTextView = new TextView(context);
titleTextView.setGravity(Gravity.CENTER);
titleTextView.setMaxWidth((int) (ITEM_TEXT_MAX_WIDTH * density));
titleTextView.setTextSize(TypedValue.COMPLEX_UNIT_SP, ITEM_TEXT_SIZE_SP);
titleTextView.setTypeface(Typeface.DEFAULT_BOLD);
titleTextView.setEllipsize(TextUtils.TruncateAt.END);
titleTextView.setMaxLines(1);
titleTextView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
this.setupItem(ll, textView, imgView, tabItem);
this.setupItem(tabItemLayout, titleTextView, iconImageView, tabItem);
ll.addView(imgView);
ll.addView(textView);
return ll;
tabItemLayout.addView(iconImageView);
tabItemLayout.addView(titleTextView);
return tabItemLayout;
}
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 +209,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 +242,29 @@ public class BottomNavigationBar extends LinearLayout {
// to be overridden in JS
}
private void setImageHeights(){
if (this.mTabItems != null) {
for (TabItemSpec tabItem : this.mTabItems) {
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;
}