Egna tabbar, likt bottenmenyn i Spotify-appen

Hejsan!

Jag har sökt runt en hel del på Google, men jag är inte säker på om det jag söker verkligen är tabbar.

I vilket fall, ni som testat Spotify som app vet nog vad jag menar.

Bild:
http://files.lennefalk.com/spotify-more.png

Jag hade tänkt efterlikna menyn/tabbarna där nere.

Är detta tabbar i huvud taget, eller är det snarare knappar?

OM det är tabbar, är det en customization som gäller då? Sökte nämligen på Google nyss, men hittade inte riktigt vad jag sökte :/

Någon som vet eller har tips?

Allt uppskattas!

Tack på förhand!

MVH

Johan

 

Jag vet inte exakt vad det finns för olika komponenter men skulle man inte kunna styla om radio buttons (eller toggle buttons om sådant finns?) och sedan sätta vy med dem?

 

OM du kör mot 1.6 eller senare så borde du med metoden setIndicator i TabHost.TabSpec sätta vad som ska användas som tab, iaf om jag tolkar dokumentationen rätt, har inte testat det själv.

länk till api:t

 

de tillåter bara att appen i portrait mode så de kan ha gjort det hur som helst. är väldigt nyfiken på hur det hade sett ut om man satt den i landscape mode.

sedan har de en viewflipper (det verkar så i alla fall) för de sidorna som visas ovan menyn i botten och det vette fasen om jag hade haft om jag hade använt mig av tabbar.

 

Hm, okej... Jag designar för 1.6 och framåt. Och appen jag utvecklar kommer bara att köra i portrait mode när menyn i botten syns (som i Spotify) så designmässigt är det lugnt. Men ni menar att jag helt enkelt designar upp ett par "knappar" som sen anropar en viewflipper vid klick? Det verkar ju hyffsat straight-forward ändå. (Innehållet i "mitten" ovanför menyn är alltså olika views) Frågan är kugghjulet där i mitten som kan slidas upp, nån som har en aning om hur man gör en liknande funktion?

 

Kanske kan prova med:
SlidingDrawer

 

Wow! Era svar har verkligen hjälpt mig enormt! Rent funktionellt fungerar min meny helt perfekt nu!

Det enda "problemet" just nu är att knapparna inte ser ut som jag vill. Jag har använt mig av Buttons för att byta vy. Men dessa har antingen en text eller en drawable som bakgrund. Om jag t.ex. vill ha ikoner som på min bild, med en gradient som bakgrund, ett hus ovanpå detta och sedan en text under, hur gör jag då? Ska man bygga upp detta med någon typ av linear layout eller liknande och sedan göra denna klickbar (hur det nu är möjligt?), eller hur bör man gå till väga smidigast? Jag kan ju inte vara ensam om att göra sådana här menyknappar? Jag menar, både gradient och ikon ska ju varieras beroende på om knappen är otryckt, intryckt eller vald.

Som sagt, tack för hjälpen hittills, mina kunskaper har gått fram med stormsteg!

// Johan

 

Det finns många sätt att gå tillväga. Precis som du är inne på skulle det funka utmärkt att extenda en Layout som innehåller alla de grafiska element du vill ha. För att göra layouten klickbar sätter du bara:
setClickable(true); i koden för din nya super-duper-layout-knapp.

Vill du däremot bara använda dig av en ikon och en gradient kan du alltid placera alla knappar i en layout som har gradienten som bakgrund, där själva knapparna bara innehåller en ikon. Detta funkar däremot inte så bra om du vill att gradienten ska ingå i grafik som indikerar knappens läge. Men det skulle gå att lösa genom att ge ikonen en highlight vid selected/pressed etc. Där handlar det bara om vilken design du eftersträvar.

 

Kolla koden till denna: Iphone tabs

 

Ojojoj, allt detta var helt klart riktigt intressant! Detta ska jag sätta mig in i direkt! Riktigt stort tack!

Det här forumet var månadens upptäckt, helt klart!

Tack!

// Johan

 

Hmm... Nu har jag suttit i nästan en dag med detta, och iPhone-tabbarna i länken är verkligen grymma. MEN texten och bilderna under blir helt blurriga/pixliga :/ Jag lyckas verkligen inte få bort det? Känns väldigt konstigt

Jag testade nu att ändra till ett par olika standard-ikoner, t.ex. android.R.drawable.sym_action_call

men även dessa blir blurriga

 

Ja, herregud. Den här killen som gjort dom där iPhone-tabbarna har inte riktigt löst det "the Android way". Han skapar helt enkelt bitmaps av allting.

Genom att lägga till

Code:

			mActiveTextPaint.setFlags(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
			mInactiveTextPaint.setFlags(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
			

i iTabs konstruktor så ser texten finare ut. Jobbar vidare på ikonerna

 

Vad kul att även du försöker jobba på det! Jag gav för tillfället upp och la helt enkelt ny text och nya ikoner rakt över menyn men med XML-layout, den ligger exakt över samma pixlar vad gäller text/bild, men de fina färgerna och det försvinner ju Men kommer garanterat sitta hela denna dag och försöka optimera det så gott det går. Jag SKA ha en snygg meny där nere!

Grymt kul och tack för hjälpen!

// Johan

 

Om du kommer på något snyggt så får du gärna dela med dig..