2010-04-20 6 views
30

Est-il possible de styler le Tabhost Android pour ressembler à celui de l'iPhone? Sinon, existe-t-il du code source ouvert qui peut montrer comment créer des onglets Bottom pour Android?Android - tabhost style iphone

alt text http://images.appshopper.com/screenshots/305/690205_2.jpgalt text

+22

Y at-il quelque chose de mal avec les onglets du système, autre que celui qu'ils ne ressemblent pas à onglets iPhone? Pourquoi forcer vos utilisateurs à apprendre les normes d'interface utilisateur d'une plate-forme différente, juste pour le plaisir? Les utilisateurs Android savent déjà comment interagir avec les onglets Android. Ne pas briser leurs attentes sans raison; cela rendra votre application moins utilisable. –

+14

@Yoni. Oui, je veux des onglets du bas parce que j'ai l'intention d'avoir un bouton "Retour" en haut. D'ailleurs que voulez-vous dire par "Pourquoi forcer vos utilisateurs à apprendre les normes d'interface utilisateur d'une plate-forme différente"? Si quelqu'un utilise une interface utilisateur différente, c'est Google lui-même. Jetez un oeil à l '"Android Market", "Google Finance", etc. Quelle est cette interface? Je veux dire quel tabHost ou ListView est utilisé dans le "Android Market"? –

+1

Android Market IMO utilise RadioGroup comme "Onglets" –

Répondre

15

Vous aurez besoin de construire ce contrôle vous-même. Peu d'options:

  • utilisation RadioGroup et mettre boutons radio personnalisé là-bas et customize l'enfer de celui-ci.

  • construire ce contrôle à partir de zéro, il héritera d'un des mises en page (cadre, par rapport, linéaire) et construire le comportement dont vous avez besoin.

  • Vous pouvez également prendre TabHost src, et l'utiliser comme base pour votre contrôle

+0

vous pouvez trouver un exemple d'utilisation de RadioGroup pour remplacer l'onglet ici http://mokriya.com/blog/2011/02/13/custom-tabs-in-android/ – anticafe

+0

@anticafe lien est brisé pouvez-vous avoir un autre lien de démonstration pour le même? – NIKHIL

+0

Pouvez-vous regarder https://github.com/makeramen/android-segmentedradiobutton en remplacement? – anticafe

1

Votre capture d'écran a le Android 1.6. style. Si vous utilisez un tabhost sur une version plus récente et que vous le placez simplement en bas de l'écran, cela ressemblera beaucoup à la version de l'iphone.

Je ne changerais pas beaucoup à l'interface utilisateur d'Android tout simplement lui donner une ressemblance avec l'apparence de l'iphone (mêmes icônes) et rester avec le reste dans le style android. Cela rendra l'application familière aux utilisateurs.

Pour obtenir le même look pour les icônes, il suffit d'utiliser une définition xml de vous dessinable avec un état sélectionné et un non sélectionné du bouton comme il ressemble à l'iPhone. Pour définir une icône, utilisez la méthode setIndicator de la tabspec.

Vous pouvez légèrement styler le tabhost en définissant un arrière-plan ou un style pour le tabwidget. Mais la partie intérieure réelle du widget sera dessinée au-dessus de votre style et de fond

69

Je vous suggère de ne pas modifier l'apparence et la convivialité des onglets par défaut, parce que les utilisateurs sur les appareils Android ont leur propre expérience utilisateur, et vous annulera cette expérience passée, ne les forcez pas à apprendre de nouveaux onglets (parce que les utilisateurs sur mobile sont si paresseux pour apprendre de nouvelles choses, généralement ils comptent sur leur expérience passée.)

Voir Pure Android pour plus.

Cependant, si vous voulez aller de l'avant, j'ai personnalisé les onglets par défaut Android pour qu'ils ressemblent à des onglets iPhone. Ce qui est simple et caractéristiques par défaut Android 'composants d'interface utilisateur (̶T̶a̶b̶H̶o̶s̶t̶, ̶T̶a̶b̶W̶i̶d̶g̶e̶t̶).

lien de téléchargement: GitHub, Iphone-Tab-in-Android

Cet échantillon a été mis à jour pour utiliser TabLayout et ViewPager

relavent entrée blog se trouve ici:

iPhone like Tabs in Android.

La capture d'écran:

tabs at bottom screenshot

J'ai également mis en évidence le tabhost pour ressembler à l'onglet central surélevé.

Raised Center Screenshot

pour télécharger RaiseCenterTab, s'il vous plaît allez ici GitHub: RaisedCenterTab.

+3

Bon pour avoir une solution, mais il n'y a pas d'explication et le projet GitHub a un fichier zip? Atleast décompressez le code sur GitHub afin qu'il puisse être lu en ligne. – HRJ

+0

aussi déteste quand les gens mettent des fichiers zip sur github, vainc tout le but de github et être en mesure de jeter un oeil sur le code juste là. – Gubatron

+6

Les gars! dézippé et ajouté le code source :) –

5

Vous pouvez regarder: https://github.com/mta452/iTab

Le point positif est que le fait automatiquement des images de mise en forme avec gradient comme iOS fait.

Screenshot:

Screenshot of iTab