Android's SeekBar på din måde

Hvis du læser mange af mine blogindlæg fra TechRepublic App Builder, ved du, at jeg skriver en masse tutorials om tilpasning af forskellige UI-elementer. Min ræsonnement er todelt.

For det første, når det kommer til at rynke UI-widgets, er Google-dokumentationen sparsom. Dette giver mening; rammeteamet hos Google har en stor interesse i at tilskynde udviklere til at bruge deres komponenter på en "som den er" -basis. Dette sikrer et ensartet look and feel på tværs af platformen. Jeg er helt enig med denne beslutning fra Google fra den side, men der er tidspunkter, hvor jeg vil sætte min egen spin på en widget. Dette spiller ind i min anden motivation til at skrive adskillige tutorials om tilpasning af Android UI-elementer.

Efter min mening er en af ​​de vigtigste differentierere af Android i forhold til andre mobiltelefonoperativsystemer, at med lidt banking er der næsten ingen dør, som en udvikler ikke kan åbne på platformen. Jeg har udført omfattende arbejde med tidligere inkarnationer af Microsofts mobile tilbud, og for et par år siden lavede jeg også noget på RIMs OS. I begge mine førstehåndserfaringer og fra brugte oplevelser, jeg har hørt fortalt af iOS-ingeniører, kommer ingen mobil platform på markedet i dag tæt på at tillade mængden af ​​tilpasning, Android tilbyder.

Denne TechRepublic-tutorial til tilpasning af en UI-widget fokuserer på SeekBar. Hvis du er ny med Android eller ikke har snublet over SeekBar før, kaldes det på en anden platform en skyder. Hvorfor Googlites valgte ikke at kalde det en skyder ved jeg ikke, men hvis du har brugt en computer siden Windows 3.1, vil du være fortrolig med funktionaliteten.

Den trinvise tutorial, der følger, får dig i gang på kort tid. Du kan følge med eller downloade kilden her og importere den direkte til Eclipse.

1. Start et nyt Android-projekt i Eclipse. Mål mod Android 1.6 eller nyere. Sørg for at omdøbe startaktiviteten til Main.java.

2. Inden vi kan smide vores layout op, skal vi oprette en ny mappe i / res-biblioteket kaldet XML. Her definerer vi to enkle tegnestre, der skal bruges med vores SeekBar.

 progress_drawable.xml 

"1.0" kodning = "UTF-8" ?>

http://schemas.android.com/apk/res/android

android: shape = "line" >

"2dp" android: color = "# ff585858" />

 thumb_drawable.xml 

"1.0" kodning = "UTF-8" ?>

http://schemas.android.com/apk/res/android

android: form = "rektangel" >

"#ffffffff" android: endColor = "# ff585858" android: vinkel = "270" />

"20dp" android: width = "20dp" />

3. Lad os definere vores main.xml-layout i mappen / res / layout. Jeg bruger et lineært layout med nogle almindelige gamle vanilje tekstvisninger. SeekBar er også temmelig standard med undtagelse af de to sidste attributter, der er de eneste ingredienser i vores "hemmelige sauce." Ved at pege fremgangen, der kan trækkes såvel som tommelfingeren på vores XML-filer, tilsidesætter vi effektivt standard gengivelsen af ​​widget.

 main.xml 

"1.0" encoding = "utf-8" ?>

"Http://schemas.android.com/apk/res/android"

android: layout_width = "fill_parent"

android: layout_height = "fill_parent"

android: orientering = "lodret"

android: polstring = "40dip" >

android: layout_width = "fill_parent"

android: layout_height = "wrap_content"

android: text = "Customized Seek Bar Demo" android: textColor = "# 0000ff" android: textStyle = "bold" android: textSize = "16sp" android: gravity = "center" />

android: paddingTop = "20dip"

android: layout_width = "fill_parent"

android: layout_height = "wrap_content"

android: tyngdekraft = "center"

android: layout_gravity = "center"

android: max = "19"

android: progress = "0"

android: SecondProgress = "0"

android: id = "@ + id / skyderen"

android: progressDrawable = "@ xml / progress_drawable"

android: thumb = "@ xml / thumb_drawable" />

android: paddingTop = "10dip"

android: layout_width = "fill_parent"

android: layout_height = "wrap_content"

android: tyngdekraft = "center"

android: textColor = "#ffffff"

android: tekst = "50%"

android: textSize = "16sp"

android: id = "@ + id / procent" />

4. Vi implementerer vores Main.java-fil. I mappen / src skal du ændre den wizard-genererede Main.java-fil til at implementere OnSeekBarChangedListener og tilsidesætte de mandaterede tilbagekald.

 pakke com.authorwjf.myseekbar; 
 import android.app.Aktivitet; import android.os.Bundle; import android.widget.SeekBar; import android.widget.SeekBar.OnSeekBarChangeListener; import android.widget.TextView; 
 public class Main udvider aktivitetsredskaber OnSeekBarChangeListener { 

/ ** Ringes op, når aktiviteten først oprettes. * /

@Override

public void onCreate (Bundle gemtInstanceState) { super .onCreate (gemtInstanceState);

setContentView (R.layout. main );

SeekBar sb = (SeekBar) findViewById (R.id. Skyderen );

sb.setMax (100);

sb.setProgress (50);

sb.setOnSeekBarChangeListener ( dette ); }
 @Override offentligt ugyldigt onProgressChanged (SeekBar v, int progress, boolsk isUser) { 

TextView tv = (TextView) findViewById (R.id. Procent );

tv.setText (Integer. toString (fremgang) + "%");

}
 @Override offentligt tomrum påStartTrackingTouch (SeekBar seekBar) {// TODO Auto-genereret metodestub 
 } 
 @Override offentligt tomrum påStopTrackingTouch (SeekBar seekBar) {// TODO Auto-genereret metodestub 
 }} 
Det skulle gøre det. Kørsel af appen viser vores brugerdefinerede SeekBar, og svarer venligt til at skubbe widgetten fra venstre mod højre eller omvendt. Hvis du er interesseret i at se den subtile kontrast mellem vores brugerdefinerede SeekBar ( figur A ) og standardkontrollen ( figur B ), har jeg inkluderet billeder af begge. Endnu bedre skal du fjerne egenskaber, der kan trækkes, og tommelfingeren fra main.xml-layoutet, indlæses appen på din enhed og se selv. Figur A

Custom SeekBar kører på Gingerbread.
Figur B

Standard SeekBar også på Gingerbread.

© Copyright 2021 | pepebotifarra.com