Implementering av egne komponenter i pre innebygde komponenter med å forlenge underklasse med egen definert klasse
Android tilbyr en stor liste over forhåndsbygde widgets som Button, TextView, EditText, Listview, avmerkingsbokser, radiobutton , Galleri, Spinner, AutoCompleteTextView etc. som du kan bruke direkte i Android programutvikling, men det kan være en situasjon når du ikke er fornøyd med eksisterende funksjonalitet i noen av de tilgjengelige widgets. Android gir deg virkemiddel for å skape dine egne komponenter som du kan tilpasses til dine behov.
Hvis du bare trenger å gjøre små justeringer til en eksisterende widget eller layout, kan du bare underklasse widgeten eller layout og styre sine metoder som vil gi deg presis kontroll over utseende og funksjon av en skjerm element.
Denne opplæringen forklarer deg hvordan du kan opprette egendefinerte visninger og bruke dem i din søknad ved hjelp av enkle og enkle trinn.
Eksempel av Custom Components i Custom Vis hierarki
Opprette en enkel Custom Component
StepDescription1You vil bruke Android studio IDE å lage en Android-applikasjon og navn det som compoundview
under en pakke com .vogella.android.customview.compoundview
som forklart i Hello World Eksempel
chapter.2Create en XML res /verdier /attrs.xml
fil for å definere nye attributter sammen med sine data type.3Create src /ColorOptionsView.java
fil og legge til koden for å definere den tilpassede komponent. Det vil forlenge LinearLayout og vil ha ytterligere funksjonalitet for å vise farge sammensatte. Du vil gi attributter parsing logikk i de konstruktører har AttributeSet som parameter.4Modify res /layout /activity_main.xml
fil og legge til koden for å lage farge sammensatt visning eksempel sammen med noen standardattributter og nye attributter. 5Run programmet til å lansere Android emulator og kontrollere resultatet av de endringer som er gjort i søknaden
Opprett følgende attributter fil kalt attrs.xml i dine res /verdier mappe
<..? xml version = "1.0" encoding = "UTF-8" >? < resources > < erklære-styleable name = "Options" > < attr name = "titleText" format = "streng" lokalisering = "foreslo" /> < attr name = "valueColor" format = "color" /> < /erklære-styleable > < /ressurser >
Endre oppsettet filen brukes av aktiviteten til følgende
< LinearLayout xmlns:. android = "http://schemas.android.com/apk/res /Android "xmlns: verktøy =" http://schemas.android.com/tools~~number=plural "xmlns: custom =" http://schemas.android.com/apk/res/com.vogella.android.view.compoundview " android: layout_width = "match_parent" android: layout_height = "match_parent" Android: Orientering = "vertikale" Android: showDividers = "middle" android: skillelinje =: tools "android attr /listDivider?": kontekst = ". MainActivity" > < com.vogella.android.view.compoundview.ColorOptionsView android: "android: attr /listPreferredItemHeight"? id = "+ id /view1" android:: layout_width = "match_parent" android layout_height = android: bakgrunn = "android : selectableItemBackground "android: onclick =" onClicked "custom: titleText =" bakgrunnsfarge "custom: valueColor =" @ android: farge /holo_green_light "/> < com.vogella.android.view.compoundview.ColorOptionsView android: "android: attr /listPreferredItemHeight"? id = "+ id /view2" android:: layout_width = "match_parent" android layout_height = android: bakgrunn = "android : selectableItemBackground "android: onclick =" onClicked "custom: titleText =" forgrunnsfarge "custom: valueColor =" @ android: farge /holo_orange_dark "/> < /LinearLayout >
Opprett følgende java fil kalt ColorOptionsView for din sammensatte syn
pakken com.vogella.android.customview.compoundview;. import com.vogella.android.view.compoundview.R, import android.content.Context, importere android.content.res.TypedArray, importere android.util .AttributeSet, import android.view.Gravity, import android.view.LayoutInflater, import android.view.View, import android.widget.ImageView, import android.widget.LinearLayout, import android.widget.TextView; public class ColorOptionsView strekker LinearLayout {private Vis Lvalue; private Imageview mImage; offentlig ColorOptionsView (Context kontekst, AttributeSet attrs) {super (kontekst, attrs); TypedArray a = context.obtainStyledAttributes (attrs, R.styleable.ColorOptionsView, 0, 0); String titleText = a.getString (R.styleable.ColorOptionsView_titleText); int valueColor = a.getColor (R.styleable.ColorOptionsView_valueColor, android.R.color.holo_blue_light); a.recycle (); setOrientation (LinearLayout.HORIZONTAL); setGravity (Gravity.CENTER_VERTICAL); LayoutInflater inflater = (LayoutInflater) context.getSystemService (Context.LAYOUT_INFLATER_SERVICE); inflater.inflate (R.layout.view_color_options, dette, true); TextView title = (TextView) getChildAt (0); title.setText (titleText); Lvalue = getChildAt (1); mValue.setBackgroundColor (valueColor); mImage = (Imageview) getChildAt (2); } Public ColorOptionsView (Context kontekst) {dette (kontekst, null); } Public void setValueColor (int farge) {mValue.setBackgroundColor (farge); } Public void setImageVisible (boolsk synlig) {mImage.setVisibility (synlig View.VISIBLE:? View.GONE); }}
Endre Hovedaktivitet java-filen til følgende kode og kjøre programmet
pakken com.vogella.android.customview.compoundview;. Import com.vogella.android.view.compoundview.R, import android. app.Activity, import android.os.Bundle, import android.view.Menu, import android.view.View, import android.widget.Toast; public class MainActivity strekker Aktivitet {Override beskyttet void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R.layout.activity_main); }Override Public boolean onCreateOptionsMenu (Meny menyen) {//Blås menyen; dette legger til elementer i handlingsfeltet hvis det er til stede. . getMenuInflater () blåse (R.menu.activity_main, menyen); return true; } Public void onClicked (Vis visning) {String tekst = view.getId () == R.id.view1? "Bakgrunn": "Forgrunn"; Toast.makeText (dette, tekst, Toast.LENGTH_SHORT) .vis (); }}
Den kjører programmet skal se ut som følgende skjermbilde.
instantiate bruker kode i aktivitetsklasse
Det er svært lik måte Instantiating definert komponent slik du instantiate innebygd widget i aktivitetsklassen. For eksempel kan du bruke følgende kode på å bruke ovenfor definert definert komponent −
Overrideprotected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); DateView dateView = new DateView (denne); setContentView (dateView);}
Sjekk Above eksempel for å forstå hvordan man skal bruke et Basic Android Custom Component bruker kode i en aktivitet
instantiate hjelp Layout XML fil
Tradisjonelt du bruke Layout XML. filen på å bruke dine innebygde widgets, vil samme konseptet gjelder på dine tilpassede widgets i tillegg så du vil være i stand til på å bruke den tilpassede komponent med Layout XML-fil som forklart nedenfor. Her com.example.compoundview
er den pakken der du har lagt all kode relatert til DateView
klasse og DateView
er Java klassenavnet hvor du har lagt fullstendig logikk av den tilpassede komponent
< RelativeLayout xmlns:. android = "http://schemas.android.com/apk/res/android" xmlns: verktøy = "http://schemas.android.com/tools" android : layout_width = "match_parent" android: layout_height = "match_parent" android: paddingBottom = "@ dimen /activity_vertical_margin" android: paddingLeft = "@ dimen /activity_horizontal_margin" android: paddingRight = "@ dimen /activity_horizontal_margin" android: paddingTop = "@ dimen /activity_vertical_margin "verktøy: kontekst =" MainActivity ">. < com.example.compoundview.DateView android: layout_width = "match_parent" android: layout_height = "wrap_content" android: textcolor = "# fff" android: Tekststørrelse = "40sp" android: bakgrunn = "# 000" /> < /RelativeLayout >
Det er viktig å merke seg her at vi bruker all TextView attributter sammen med tilpassede komponent uten noen endring. Lignende måte vil du kunne bruke alle hendelsene, og metoder sammen med DateView komponent.
Sjekk dette eksemplet for å forstå hvordan man skal bruke et Basic Android Custom Component hjelp Layout XML-fil.
Custom komponent med tilpassede attributter
Vi har sett hvordan vi kan utvide funksjonaliteten innebygde widgets men i begge de ovenfor så vi at utvidet komponent kan gjøre bruk av alle standard attributtene til sin overordnede klassen eksempler. Men vurdere en situasjon når du ønsker å lage din egen attributt fra bunnen av. Nedenfor er en enkel prosedyre for å opprette og bruke nye attributter for Android Tilpassede komponenter. Anser vi ønsker å innføre tre attributter, og vil bruke dem som vist nedenfor −
< com.example.compoundview.DateView android: layout_width = "match_parent" android: layout_height = "wrap_content" android: textcolor = "# fff" android: Tekststørrelse = "40sp" custom: delimiter = "-" custom: fancyText = "true" />
Trinn 1
Det første skrittet for å gjøre oss i stand til å bruke vår tilpassede attributter er å definere dem i en ny xml fil under res /verdier /Hotell og kaller det attrs.xml
. La oss ta en titt på et eksempel attrs.xml fil −
<? Xml version = "1.0" encoding = "utf-8" >? ≪ resources > < erklære-styleable name = "DateView" > < attr name = "delimiter" format = "streng" /> < attr name = "fancyText" format = "boolean" /> < /erklære-styleable > < /ressurser >
Her name = verdi
er hva vi ønsker å bruke i vår Layout XML-fil som attributt, og format = type
er den type attributt.
Trinn 2
Din andre trinnet vil være å lese disse attributtene fra Layout XML-fil og sette dem for komponenten. Denne logikken vil gå i konstruktører som får gått en AttributeSet
, siden det er hva inneholder XML-attributter. For å lese verdiene i XML, må du først opprette en TypedArray
fra AttributeSet
, deretter bruke denne til å lese og sette inn de verdiene som vist i nedenstående eksempel koden −
TypedArray a = context.obtainStyledAttributes (attrs, R.styleable.DateView); final int N = a.getIndexCount (); for (int i = 0; i < N; ++ i) {int attr = en. getIndex (i); bryteren (attr) {case R.styleable.DateView_delimiter: String delimiter = a.getString (attr); //...do noe med delimiter ... break; case R.styleable.DateView_fancyText: boolean fancyText = a.getBoolean (attr, false); //...do noe med fancyText ... break; }} a.recycle ();
Trinn 3
Endelig kan du bruke dine definerte attributter i Layout XML-fil som følger −
< RelativeLayout xmlns: android = "http: //schemas.android.com/apk/res/android~~number=plural "xmlns: verktøy =" http://schemas.android.com/tools~~number=plural "xmlns: custom =" http://schemas.android.com/apk/res/com. example.compoundview "android: layout_width =" match_parent "android: layout_height =" match_parent "android: paddingBottom =" @ dimen /activity_vertical_margin "android: paddingLeft =" @ dimen /activity_horizontal_margin "android: paddingRight =" @ dimen /activity_horizontal_margin "android: paddingTop = "@ dimen /activity_vertical_margin" verktøy: kontekst = "MainActivity." > < com.example.compoundview.DateView android: layout_width = "match_parent" android: layout_height = "wrap_content" android: textcolor = "# fff" android: Tekststørrelse = "40sp" custom: delimiter = "-" custom: fancyText = " true "/> < /RelativeLayout >
Den viktigste delen er xmlns: custom =" http://schemas.android.com/apk/res/com.example.compoundview "
. Merk at http://schemas.android.com/apk/res/
vil stå som det er, men siste del vil bli satt til pakken navn og også at du kan bruke noe etter xmlns :, i dette eksempelet jeg brukte custom
, men du kan bruke det navnet du liker.
Sjekk dette eksemplet for å forstå hvordan å lage tilpassede attributter for Android Custom Component med enkle trinn.