Påklædning af Android-knapper

En TechRepublic-læser anmodede om, at jeg skrev en tutorial om Android's knapklasse. Først var jeg skeptisk; af alle komponenter i UI-rammen er knapwidgeten en af ​​de mest grundigt dækkede i SDK-dokumentationen. Men efter at have etableret en dialog med denne læser, troede jeg måske, at han var på noget. Lad mig forklare.

Hvis du google "Android knap tutorials", får du mere end 18 millioner hits, inklusive det, Google sendes som en del af sin SDK-dokumentation. (Til min overraskelse er Googles officielle eksempel ikke det, der kommer først i søgemaskinen.) Men når du begynder at sile igennem resultaterne, vil du se en gentagelse af de samme temaer igen og igen. Enten er eksemplerne så enkle, at de næppe er praktiske, eller på bagsiden er eksemplerne så fokuserede på at tilpasse alle aspekter af knappen, at de er skræmmende for nye udviklere.

Efter at have bekræftet lidt med læseren, kom vi med følgende mål for denne tutorial:

  • Demonstrer en nem teknik til at erklære flere knapper dynamisk.
  • Vis læserne en genvej til at arrangere knapperne i en attraktiv konfiguration, der ikke kræver timers poking rundt i XML-layoutfilerne.
  • Implementere en centraliseret håndterer til klikbegivenheder i stedet for at bruge indlejrede klasser, som ofte er ukendte for dem, der er nye til Java.
  • Find ud af, hvordan kontekstmenuer og lange klik kan håndteres med knapwidgeten.
  • Bevis at en udvikler ikke har brug for en grad i grafik og timer med Photoshop-oplevelse for at fremstille noget andet end de grimme standardknapper, som UI-rammen giver.

Dette kan lyde som meget at tackle i en tutorial på begynderniveau, men efter lidt beskæring af koden var jeg tilfreds med både den resulterende brugergrænsefladeoplevelse såvel som den minimalistiske kode, der blev brugt til at producere den ønskede effekt. Er du interesseret i at se dig selv? Lad os gøre det derefter! (Hvis du foretrækker at downloade hele projektet og importere det til Eclipse, er det tilgængeligt her.)

Instruktioner til, hvordan du klædder Android-knapper på

Trin et: Åbn Eclipse og opret et nyt Android-projekt. Målret mod en enhed, der kører Android 1.6 eller nyere for at fange den størst mulige brugerbase. Trin to: Vi begynder med at skabe de tegnbare ressourcer til vores knapper. Størstedelen af ​​tutorials om oprettelse af specialtilpassede knapper fokuserer på at give 9-patch stretchbare billeder. Dette fungerer, men efter min mening kan det blive lidt overvældende for udviklere som mig, der er "kunstnerisk udfordret." En pæn og ofte overset alternativ tilgang er at bruge rammets indbyggede XML-tegningskommandoer. For at prøve denne teknik, skal du oprette en ny mappe i dit / res-bibliotek kaldet / tegnbar. Trin tre: Vi vil oprette vores knap i dens standardform (ikke-presset). Tilføj en ny fil til / tegnbar kaldet: rounded_rect_w_gradient.xml. Xml definerer et nyt rektangel med afrundede hjørner skygge ved hjælp af en grøn gradient.
 rounded_rect_w_gradient.xml 
 "1.0" encoding = "utf-8" ?> 
 "Http://schemas.android.com/apk/res/android" 
 android: form = "rektangel" > 
 "#BDffffff" 
 android: endColor = "# BD33ff00" 
 android: vinkel = "270" /> 
 "3dp" /> 
 Bemærk: Hvis du ser på de værdier, der er tildelt start- og slutfarverne i vores gradient, vil du bemærke, at der er 4 i stedet for de 3 byte, der normalt bruges til at udtrykke en RGB-farve. Den første byte, i vores tilfælde hex BD, definerer alfakanalen (eller opaciteten) for vores knap. Værdien oversættes til decimalt 189, eller cirka 74% af den maksimale værdi på 256. Så vores knapper får ca. 26% gennemgang. Dette giver os mulighed for at placere en baggrund på vores skærm (hvis vi vælger) og stadig se den gennem knapperne - en professionel udseende og iøjnefaldende effekt ( figur A ). Figur A 

En knap produceret ved hjælp af rounded_rect_w_gradient layout.
Trin fire: Dernæst har vi brug for en baggrund til vores knap, når den er trykket ned af brugeren. En dejlig og nem effekt er simpelthen at gentage ovenstående layout og fjerne gradueringen.
 rounded_rect_no_gradient.xml 
 "1.0" encoding = "utf-8" ?> 
 "Http://schemas.android.com/apk/res/android" 
 android: form = "rektangel" > 
 "# BD33ff00" /> 
 "3dp" /> 
 "5px" color = "# 000000" /> 
 Trin fem: Nu skal vi definere en vælger. Vælgere er en sej måde at fortælle Android UI-rammen, hvilken trækbar ressource, der skal bruges, baseret på knappen på knappen. Android SDK beskriver alle de mulige tilstande, som en knap-widget kan have, men vi er kun interesseret i to: når knappen er trykket ned, og når den ikke er det. 
 fancy_button_selector.xml 
 "http://schemas.android.com/apk/res/android"> 
 android: state_pressed = "sandt" 
 android: drawable = "@ drawable / rounded_rect_no_gradient" /> 
 "@ drawable / rounded_rect_w_gradient" /> 
 Se trin seks til 10 i denne Android-tutorial.	
						
							
						

© Copyright 2021 | pepebotifarra.com