Listview and Drawtext to Bitmap

[Deleted member 103]

Hi,

I want to write the variable "betrag" in a bitmap (see example), but I know not how.

Thanks,
Filippo

 

[Erel]

It is possible to do it but it will require a different bitmap for each item. This will only work with short lists.

 

[Deleted member 103]

how can I achieve something similar?

 

[Erel]

It will be easier to do it with a ScrollView.
There are two related examples:
http://www.b4x.com/forum/basic4andr...946-creating-table-view-based-scrollview.html
http://www.b4x.com/forum/basic4android-getting-started-tutorials/6612-scrollview-example.html

 

[Deleted member 103]

so, now works!

@Erel
This approach is ok?

 

[Erel]

Your approach is correct. This is what I was thinking about too.

 

[klaus]

Hi Filippo,

I had a look at your code.
In the emulator the alignments are not good.
You are using view dimensions with dip measurements and pixels.
Replaced.

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.ImageView.Top=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]42[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

by

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.ImageView.Top=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]30dip[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

I was wondering what these two lines were for.

 ListView1.Width=100%x + 85
 ListView1.Left=-85

I saw then that the text is right shifted because of the bitmap's default position. Your code widens the ListView width and shifts it to the left to align the texts. Here you are also using pure pixels (85 -> 55dip).

I replaced these lines by:

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.Label.Left=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.SecondLabel.Left=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

Attached a modified version.


Hallo Filippo,

Ich hab mir Deinen Code angeschaut.
Im Emulator sieht die Ausrichtung nicht gut aus.
Du verwendest für die View Abmessungen dip Masse und auch pure Pixel.
Habe diese Zeile

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.ImageView.Top=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]42[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

durch diese ersetzt.

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.ImageView.Top=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]30dip[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

Ich hatte mich gewundert was der Zweck dieser zwei Zeilen ist.

 ListView1.Width=100%x + 85
 ListView1.Left=-85

Ich hab dann gesehen dass die Texte nach rechts verschoben waren wegen dem originalen Platz des Bistmaps. Dein Code erweitert die Breite des ListViews und verschiebt ihn nach links damit die Texte richtig ausgerichtet sind. Hier benützt Du auch pure Pixes (85 -> 55dip).

Ich habe die Zeilen durch diese ersetzt:

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.Label.Left=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.SecondLabel.Left=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

Attached a modified version.

Best regards.

 

[Deleted member 103]

Hallo Klaus,

Ich habe die Zeilen durch diese ersetzt:

ListView1.TwoLinesAndBitmap.Label.Left=0
ListView1.TwoLinesAndBitmap.SecondLabel.Left=0

das ist natürlich die bessere lösung!

Im Emulator sieht die Ausrichtung nicht gut aus.

Die Auflösung von mein Emulator entspricht genau die vom HTC-Desire, deshalb sah die Ausrichtung bei mir gut aus.


Ciao,
Filippo

 

[Cor]

use an extra -10dip for the scrollbar at the right

on my HTC Magic 2.2.1 320x480

ListView1.TwoLinesAndBitmap.ImageView.Left=ListView1.Width - 100dip-10dip

 

[Deleted member 103]

@Cor

use an extra -10dip for the scrollbar at the right

Thank you for the type.

What bothers me even the appearance of text and the bitmap (see picture).
What can we do about it?

 

[klaus]

Hi Filippo,

I don't know what the problem of the line between the items is, I can't reproduce it with the Emulator.
It looks like beeing the lower part of the title bar.
Have you tried to shorten the length of the title text ?

The second problem is the images, the corners of your images are black and with a background color different than black you'll see them.
Attached you find two images with the corner color set to transparent, and it looks like you expect it, png images aloow transparent color and Android supports it.

Best regards.

Hallo Filippo,

Ich weiss nicht woher das Problem mit der Linie zwichen den Eintägen her kommt, ich kann es im Emulator nicht nachvollziehen. Es sieht so aus als wäre es der untere teil der Titelzeile. Has Du mal versucht den Titeltext zu kürzen?

Das zweite Problem kommt von Deinen Bildern, die haben schwarze Ecken und wenn die Hintergrundfarbe nicht schwarz ist sieht man sie. Beiliegend findest Du zwei Bilder mit transparenten Ecken, PNG Bilder erlauben das und Android unterstützt es.

Beste Grüsse.

 

[Deleted member 103]

Hallo Klaus,

Has Du mal versucht den Titeltext zu kürzen?

Das ist ja mein Problem. Ich müsste vorher wissen wie breit mein Text ist und dann auf Listview-breite kürzen.

Beiliegend findest Du zwei Bilder mit transparenten Ecken, PNG Bilder erlauben das und Android unterstützt es.

Danke, ich habe es nicht gewusst.


Ciao,
Filippo

 

[klaus]

Hi Filippo,

Would this be a solution ?
Wäre das eine Lösung ?

Best regards.

 

[Deleted member 103]

Hallo Klaus,

Wäre das eine Lösung ?

nicht wirklich, den so wären alle Listview-Item höher als ich es brauchen kann.

Ich möchte nur den sichtbare(Listview-breite) Text anzeigen.


Ciao,
Filippo

 

[klaus]

If you comment out the 2 lines below
Wenn Du die beiden Zeilen auskommentierst

[FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' ListView1.TwoLinesAndBitmap.ItemHeight=80dip[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.SecondLabel.Left=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' ListView1.TwoLinesAndBitmap.Label.Height=45dip[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

you get what you expect.
bekommst Du was Du möchtest.

I added the line below to your previous code to enlarge the text width.
Ich hatte diese Zeile in Dein vorheriges Programm eingefügt um die Textbreite zu vergrössern.

[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]ListView1.TwoLinesAndBitmap.Label.Width=ListView1.Width-[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]5dip[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

Otherwise the label width is automaticaly shortened due to the bitmap.
Sonst ist die Labelbreite automatisch duch das Bitmapl verkürtzt.

Beste Grüsse.

 

[Deleted member 103]

It works, unfortunately, still do not.

Es funktioniert leider immer noch nicht.

 

[klaus]

You must limit the length of the text.
In my previous posts I 'just' enlargened the label width.
Attached a version with text legnth limitation.

Best regards.

Du musst die Textlänge begrenzen.
In meinen letzten Posts habe Ich nur die Labellänge vergrössert.
Beiliegend eine Version mit begrenzter Textlänge.

Beste Grüsse.

 

[Deleted member 103]

Man sollte, damit es richtig funktioniert, die Textbreite in Pixel kennen um es dann auf die gewünchte breite trimmen zu können.
Du kannst nicht einfach nach der Textlänge trimmen.

In mein neu Beispiel habe ich den Text so geändert:

txt="Text Text Text Text Text Text abcdef ghilmn opqrst-"

txt="Text Text Text iiii iiii 1111 iiiiii lllll jjjjj-"

 

[klaus]

I fully agree with you!
I shortened the text in the example code for a 'long' text.
I didn't find a function to determine the width of a text in pixels.
http://www.b4x.com/forum/bugs-wishlist/7096-stringwidth-stringheight.html

Best regards.

Ich bin mit Dir einverstanden.
Ich habe den im Beispielprogramm mit einem 'langen' Text gekürzt.
Ich hatte keine Funktion gefunden um die Textlänge in Pixel zu rechnen.

Beste Grüsse.