Jeg ønsket å utforme en søkefelt som ser ut som på bildet nedenfor.
.
Ved å bruke standard søkefelt får jeg noe som dette:
.
Så det jeg trenger er å bare endre fargen. Jeg trenger ingen ekstra stiler. Finnes det noen enkel måte å gjøre dette på, eller bør jeg lage en egen drawable?
Jeg prøvde å bygge en tilpasset, men jeg kunne ikke få den nøyaktige som vist ovenfor. Etter å ha brukt tilpasset drawable, er det jeg får som vist nedenfor:
Hvis jeg trenger å bygge den tilpassede, kan du foreslå hvordan jeg kan redusere bredden på fremdriftslinjen og også formen.
min tilpassede implementering:
background_fill.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:centerColor="#FF555555"
android:endColor="#FF555555"
android:startColor="#FF555555" />
<corners android:radius="1dp" />
<stroke
android:width="1dp"
android:color="#50999999" />
<stroke
android:width="1dp"
android:color="#70555555" />
</shape>
progress_fill.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:centerColor="#FFB80000"
android:endColor="#FFFF4400"
android:startColor="#FF470000" />
<corners android:radius="1dp" />
<stroke
android:width="1dp"
android:color="#50999999" />
<stroke
android:width="1dp"
android:color="#70555555" />
</shape>
progress.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@android:id/background"
android:drawable="@drawable/background_fill"/>
<item android:id="@android:id/progress">
<clip android:drawable="@drawable/progress_fill" />
</item>
</layer-list>
thumb.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient
android:angle="270"
android:endColor="#E5492A"
android:startColor="#E5492A" />
<size
android:height="20dp"
android:width="20dp" />
</shape>
seekbar:
<SeekBar
android:id="@+id/seekBarDistance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="88dp"
android:progressDrawable="@drawable/progress"
android:thumb="@drawable/thumb" >
</SeekBar>
Jeg hentet ut drawables og xml fra Android-kildekoden og endret fargen til rød. Her er et eksempel på hvordan jeg gjorde dette for mdpi drawables:
Tilpasset red_scrubber_control.xml
(legg til res/drawable):
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/red_scrubber_control_disabled_holo" android:state_enabled="false"/>
<item android:drawable="@drawable/red_scrubber_control_pressed_holo" android:state_pressed="true"/>
<item android:drawable="@drawable/red_scrubber_control_focused_holo" android:state_selected="true"/>
<item android:drawable="@drawable/red_scrubber_control_normal_holo"/>
</selector>
Egendefinert: red_scrubber_progress.xml
.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@android:id/background"
android:drawable="@drawable/red_scrubber_track_holo_light"/>
<item android:id="@android:id/secondaryProgress">
<scale
android:drawable="@drawable/red_scrubber_secondary_holo"
android:scaleWidth="100%" />
</item>
<item android:id="@android:id/progress">
<scale
android:drawable="@drawable/red_scrubber_primary_holo"
android:scaleWidth="100%" />
</item>
</layer-list>
Kopier deretter nødvendige drawables fra Android-kildekoden, jeg tok fra denne lenken.
Det er bra å kopiere disse drawables for hver hdpi, mdpi, xhdpi. Jeg bruker for eksempel bare mdpi:
Bruk deretter Photoshop til å endre farge fra blå til rød:
red_scrubber_control_disabled_holo.png:
red_scrubber_control_focused_holo.png:
red_scrubber_control_normal_holo.png:
red_scrubber_control_pressed_holo.png:
red_scrubber_primary_holo.9.png:
red_scrubber_secondary_holo.9.png:
red_scrubber_track_holo_light.9.png:
Legg til SeekBar i layouten:
<SeekBar
android:id="@+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressDrawable="@drawable/red_scrubber_progress"
android:thumb="@drawable/red_scrubber_control" />
Resultat:
Hvis du vil ha nøyaktig samme stolpe, men i rødt, kan du legge til et PorterDuff-fargefilter programmatisk. Du kan hente hver drawable som du vil fargelegge gjennom metodene i basisklassen ProgressBar. Deretter angir du et fargefilter for den.
mySeekBar.getProgressDrawable().setColorFilter(new PorterDuffColorFilter(srcColor, PorterDuff.Mode.MULTIPLY));
Hvis den ønskede fargejusteringen ikke kan gjøres via et Porter Duff-filter, kan du angi ditt eget fargefilter.
Hvis du ser på Android-ressursene, bruker søkefeltet faktisk bilder.
Du må lage en drawable som er gjennomsiktig på toppen og bunnen i f.eks. 10 px, og den midterste linjen på 5 px er synlig.
Se vedlagte bilde. Du må konvertere den til en NinePatch.
.