web-dev-qa-db-fra.com

Changer la taille du pouce seekbar

J'utilise un pouce drawable pour seekbar avec 

Android:thumb="@drawable/thumb"

Comment définir la taille de ce pouce dans dip unit? Parce que j'utilise un style pour seekbar comme 

<style name="CustomSeekBar">
    <item name="Android:indeterminateOnly">false</item>
    <item name="Android:minHeight">8dip</item>
    <item name="Android:maxHeight">8dip</item>
    <item name="Android:thumbOffset">8dip</item>
</style>

et je veux avoir le pouce avec 12dip hauteur et largeur.

androidandroid-layoutandroid-widget
27
penguru

Le moyen le plus flexible de définir la taille du pouce pour moi est de créer des calques dessinés en couches avec la forme comme espace réservé thumb_image.xml:

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >

    <item>
        <shape>
            <size
                Android:height="40dp"
                Android:width="40dp" />

            <solid Android:color="@Android:color/transparent" />
        </shape>
    </item>
    <item Android:drawable="@drawable/scrubber_control_normal_holo"/>

</layer-list>

Donc, si vous modifiez la taille de la forme, la forme est transparente, elle ne sera donc pas visible. De plus, la taille minimale d'un tel pouce est la taille d'un bitmap.

Voici un exemple de mise en page:

<SeekBar
    Android:id="@+id/seekBar1"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:thumb="@drawable/thumb_image" />

<SeekBar
    Android:id="@+id/seekBar2"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content" />

Seek bar with different thumb size

38
andrew

Je cherchais également un moyen de faire quelque chose de similaire et, après avoir examiné d'autres questions et rassemblé toutes les réponses, je suis parvenu à redimensionner le pouce de Seekbar dans onCreate ().

Voici mon code de onCreate(), légèrement adapté à vos besoins.

ViewTreeObserver vto = mySeekBar.getViewTreeObserver();
vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
    public boolean onPreDraw() {
        Resources res = getResources();
        Drawable thumb = res.getDrawable(R.drawable.thumb);
        int h = mySeekBar.getMeasuredHeight() * 1.5; // 8 * 1.5 = 12
        int w = h;
        Bitmap bmpOrg = ((BitmapDrawable)thumb).getBitmap();
        Bitmap bmpScaled = Bitmap.createScaledBitmap(bmpOrg, w, h, true);
        Drawable newThumb = new BitmapDrawable(res, bmpScaled);
        newThumb.setBounds(0, 0, newThumb.getIntrinsicWidth(), newThumb.getIntrinsicHeight());
        mySeekBar.setThumb(newThumb);

        mySeekBar.getViewTreeObserver().removeOnPreDrawListener(this);

        return true;
        }
    });

Notez que cela fonctionne pour redimensionner votre pouce, mais il peut être coupé, car il est plus gros que la barre de recherche contenant (pas sûr de cela) . Si elle est coupée, vous devrez peut-être créer une barre de recherche plus grande et créer votre propre barre de recherche. arrière-plan correspondant à la taille souhaitée pour l'affichage.

J'espère que cela t'aides!

12
Pooks

Sur le sdk, vous pouvez voir que c'est le style de base de SeekBar:

<style name="Widget.SeekBar">
    <item name="Android:indeterminateOnly">false</item>
    <item name="Android:progressDrawable">@Android:drawable/progress_horizontal</item>
    <item name="Android:indeterminateDrawable">@Android:drawable/progress_horizontal</item>
    <item name="Android:minHeight">20dip</item>
    <item name="Android:maxHeight">20dip</item>
    <item name="Android:thumb">@Android:drawable/seek_thumb</item>
    <item name="Android:thumbOffset">8dip</item>
    <item name="Android:focusable">true</item>
</style>

Avec ceci comme sélecteur de pouce:

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">

    <item Android:state_pressed="true"
          Android:state_window_focused="true"
          Android:drawable="@drawable/seek_thumb_pressed" />

    <item Android:state_focused="true"
          Android:state_window_focused="true"
          Android:drawable="@drawable/seek_thumb_selected" />

    <item Android:state_selected="true"
          Android:state_window_focused="true"
          Android:drawable="@drawable/seek_thumb_selected" />

    <item Android:drawable="@drawable/seek_thumb_normal" />

</selector>

Vous devriez pouvoir les utiliser comme base pour remplacer les dessinables actuellement utilisés (cela ressemble au stade que vous avez). 

Ces dessins peuvent être de tailles différentes sur différents écrans en fonction du compartiment pouvant être dessiné (drawable-hdpi, drawable-large-hdpi, etc.) ou vous pouvez faire en sorte que SeekBar regarde différents styles/tailles dessinés comme suit:

<style name="SeekBar.Thumb.Smiley" parent="@Android:style/Widget.SeekBar">
    <item name="Android:thumb">@drawable/smiley</item>
<style>

<style name="SeekBar.Thumb.Smiley.Large" parent="@Android:style/Widget.SeekBar">
    <item name="Android:thumb">@drawable/smiley_large</item>
<style>

<SeekBar
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content" 
    style="@style/SeekBar.Thumb.Smiley.Large"/>
7
Graeme

Une autre solution simple qui a fonctionné pour moi a été d'utiliser scaleX et scaleY. La barre de recherche entière sera plus grande de cette façon et pas seulement le pouce.

<SeekBar
    Android:id="@+id/seekBar1"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:scaleX="2"
    Android:scaleY="2" />
2
kichik

Je travaille comme ça:

    public class FlexibleThumbSeekbar extends SeekBar{

        public FlexibleThumbSeekbar (Context context) {
            super(context);
        }

        public FlexibleThumbSeekbar (Context context, AttributeSet attrs) {
            super(context, attrs);

            Bitmap bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.thumb);
            Bitmap thumb=Bitmap.createBitmap(50,50, Bitmap.Config.ARGB_8888);
            Canvas canvas=new Canvas(thumb);
            canvas.drawBitmap(bitmap,new Rect(0,0,bitmap.getWidth(),bitmap.getHeight()),
                    new Rect(0,0,thumb.getWidth(),thumb.getHeight()),null);
            Drawable drawable = new BitmapDrawable(getResources(),thumb);
            setThumb(drawable);
        }
}

juste un échantillon, dans votre utilisation réelle, vous devez définir la largeur, la hauteur et l’image de votre pouce dans un fichier xml.

2
孙纬晓

J'ai résolu mon problème de cette façon

D'abord, j'ai converti mon image/custom thumb/bitmap/other en fichier SVG par source converter

Deuxièmement, j'ai converti mon fichier SVG en vecteur pouvant être dessiné par source SVG en vecteur

Ensuite, j'ai utilisé le code vectoriel dans le fichier .xml, qui contient attrs Android:width="28dp" et Android:height="28dp" dans la balise vectorielle. Ici, nous pouvons changer la taille du pouce.

Enfin, j'ai utilisé mon thumb.xml dans Android:thumb="@drawable/thumb.xml" de la balise SeekBar

C'est mon thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:viewportWidth="56"
    Android:viewportHeight="56"
    Android:width="28dp"
    Android:height="28dp">
    <group
        Android:scaleX="2.0"
        Android:scaleY="-2.0"
        Android:translateY="56">
        <path
            Android:pathData="M28 14A14 14 0 0 1 14 28 14 14 0 0 1 0 14 14 14 0 0 1 14 0 14 14 0 0 1 28 14Z"
            Android:fillColor="#6b6b6b"
            Android:fillAlpha="0.205" />
    </group>
    <group
        Android:scaleX="0.1"
        Android:scaleY="-0.1"
        Android:translateY="56">
        <path
            Android:pathData="M135 376C83 353 40 311 40 281c0 -22 13 -34 85 -80 85 -54 115 -59 115 -22 0 22 -59 77 -98 92 -26 10 -26 11 36 50 72 46 81 69 25 69 -21 -1 -51 -7 -68 -14z"
            Android:fillColor="#000000" />
        <path
            Android:pathData="M320 366c0 -26 55 -81 98 -97l26 -10 -44 -26c-88 -51 -106 -83 -46 -83 72 0 179 81 163 124 -8 20 -156 116 -179 116 -12 0 -18 -8 -18 -24z"
            Android:fillColor="#000000" />
    </group>
</vector>
0
AlekseevIS

Créez une forme de rectangle avec la hauteur et la largeur souhaitées. Utilisez cette forme comme dessin pour votre pouce.

0
Yugandhar Babu