Ich versuche, ein Design wie dieses zusammenzubringen.
Beachten Sie, dass der "ausgewählte Farbton der Registerkarte" blau ist, das Symbol der mittleren Registerkarte jedoch immer der grüne Kreis mit der weißen Uhr in der Mitte sein sollte.
Ich habe eine Reihe von Dingen ausprobiert. Versuchen Sie zunächst, dies programmgesteuert mithilfe einer XML-Ressource mit Ebenenliste zu tun, die über den grünen Kreis und die Uhr-PNG-Ressource verfügt, was überhaupt nicht funktioniert hat. Dann habe ich gerade den Designer gebeten, mir das vollständige Symbol (Uhr und grüner Kreis) zu geben, aber jetzt stoße ich auf dieses Problem.
(Nicht ausgewählt)
(Ausgewählt)
Ich finde nicht die richtigen Begriffe, nach denen ich bei Google suchen kann, um dies zu beheben.
Am Ende muss die ausgewählte Registerkartenfarbe blau sein, aber das mittlere Registerkartensymbol muss immer das tatsächliche Symbol ohne zusätzliche Farbe sein (im Wesentlichen muss es genau wie die PNG-Datei aussehen).
PS: Ich verwende Xamarin.Forms, FreshMvvm und den FreshTabbedFONavigationContainer. Über den Renderer habe ich jedoch direkten Zugriff auf BottomNavigationView und alle anderen nativen Android-Komponenten. Die Lösung muss also keine Xamarin-Lösung sein. Eine Java / Kotlin-Lösung würde auch funktionieren und ich kann sie einfach in Xamarin konvertieren.
======================
EDITIERT:
======================
Ich bin mit dem unten stehenden Andres Castro- Code viel weiter gekommen , habe aber immer noch das gleiche Problem wie zuvor. Mit dem folgenden Code von Andres habe ich wieder FontAwesome für die Symbole verwendet (was hervorragend funktioniert). Dabei musste ich jedoch ein verwenden LayerDrawable
, um das Symbol für die mittlere Registerkarte des Kreises / Symbols zu erstellen.
Das ist es also, was ich bisher habe.
Nicht ausgewähltes zentrales Symbol
Ausgewähltes zentrales Symbol
Wie Sie sehen können, ist das mittlere Symbol bei Nichtauswahl immer noch grau und bei Auswahl blau (die richtigen ausgewählten / nicht ausgewählten Farben der anderen 4 Symbole).
Hier ist der Code, den ich bisher für das mittlere Symbol habe.
UpdateTabbedIcons
private void UpdateTabbedIcons()
{
for (var i = 0; i < Element.Children.Count; i++) {
var tab = _bottomNavigationView.Menu.GetItem(i);
var element = Element.Children[i];
if (element is NavigationPage navigationPage) {
//if the child page is a navigation page get its root page
element = navigationPage.RootPage;
}
UpdateTabIcon(tab, element);
}
}
UpdateTabIcon
public void UpdateTabIcon(IMenuItem menuItem, Page page)
{
var icon = page?.Icon;
if (icon == null) return;
var drawable = new IconDrawable(Context, icon, "fa-regular-pro-400.ttf");
var element = Element.CurrentPage;
if (element is NavigationPage navigationPage) {
//if the child page is a navigation page get its root page
element = navigationPage.RootPage;
}
if (page is DoNowTabPage) { //Page for center icon
drawable.Color(Helpers.Resources.White.ToAndroid());
var finalDrawable = GetCombinedDrawable(drawable);
menuItem.SetIcon(finalDrawable);
return;
} else if (element == page) {
drawable.Color(BarSelectedItemColor.ToAndroid());
} else {
drawable.Color(BarItemColor.ToAndroid());
}
menuItem.SetIcon(drawable);
}
GetCombinedDrawable
private Drawable GetCombinedDrawable(IconDrawable iconDrawable)
{
var displayMetrics = Resources.DisplayMetrics;
GradientDrawable circleDrawable = new GradientDrawable();
circleDrawable.SetColor(Helpers.Resources.Green.ToAndroid());
circleDrawable.SetShape(ShapeType.Oval);
circleDrawable.SetSize((int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 500, displayMetrics), (int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 500, displayMetrics));
circleDrawable.Alpha = 1;
var inset = (int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 140, displayMetrics);
var bottomInset = (int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 40, displayMetrics);
LayerDrawable finalDrawable = new LayerDrawable(new Drawable[] { circleDrawable, iconDrawable });
finalDrawable.SetLayerHeight(1, iconDrawable.IntrinsicHeight);
finalDrawable.SetLayerWidth(1, iconDrawable.IntrinsicWidth);
finalDrawable.SetLayerInset(1, inset, inset, inset, inset + bottomInset);
finalDrawable.SetLayerInsetBottom(0, bottomInset);
finalDrawable.ClearColorFilter();
return finalDrawable;
}
Wie Sie in der Abbildung sehen können GradientDrawable
, die ich für den Kreis erstelle, setze ich die Farbe auf meine grüne Farbe (ich habe eine benutzerdefinierte Klasse namens Ressourcen ... das ist nicht die Android- Resources
Klasse).
Da stecke ich also fest. Ich stelle den Kreis auf eine grüne Farbe ein, aber sobald er in der BottomNavigationView angezeigt wird, stimmt seine Farbe immer mit den nicht ausgewählten / ausgewählten Farben der anderen Symbole überein.
In der Hoffnung, diese letzte Ausgabe zu überwinden. Vielen Dank für jede Hilfe.
_bottomNavigationView.ItemIconTintList = null;