Discussion :

[pierrejean75]

Bonjour à tous
Je voudrais créer une ListView qui ressemble à l'image ci-dessous
( Rad Studio 10.4-> Delphi->Android ListView dynamic )
Donc que chaque Item soient séparés de quelques pixels (transparent si possible de facon à avoir la couleur de mon fond (ici en noir) et sinon pouvoir en definir la couleur pour le mettre en noir) et que les angles soient arrondis comme ci dessous
Mais je n'y arrive pas du tout
Pour faire simple disons que cette ListView comporte juste une Image et un Text

[SergioMaster]

Bonjour,

à essayer, aujouter une Image (cette image contenant un rectangle coin arrondi comme souhaité) bien penser à la mettre en arrière plan (apparence dynamique oblige) aligné client avec marges.
-astuce : éditer la fiche en mode texte pour le passage en arrière plan = premier objet à créer.

[pierrejean75]

C'est ce que j'ai tenté mais je ne sais pas comment mettre en arriere plan mon image

[SergioMaster]

Bonjour,

pour la démonstration disons que tu partes d'un existant

auquel tu ajoutes un nouveau objet image

le nouvel objet (ton futur rectangle arrondi) se trouve donc en premier plan
tu bascules grâce au menu contextuel (voir comme texte) pour obtenir le source du .fmx (bien sûr notepad peut aussi être une option)
cela donne ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
object Form1: TForm1
  Left = 0
  Top = 0
  Caption = 'Form1'
  ClientHeight = 528
  ClientWidth = 459
  FormFactor.Width = 320
  FormFactor.Height = 480
  FormFactor.Devices = [Desktop]
  DesignerMasterStyle = 0
  object ListView1: TListView
    ItemAppearanceClassName = 'TDynamicAppearance'
    ItemEditAppearanceClassName = 'TDynamicAppearance'
    HeaderAppearanceClassName = 'TListHeaderObjects'
    FooterAppearanceClassName = 'TListHeaderObjects'
    Position.X = 32.000000000000000000
    Position.Y = 40.000000000000000000
    Size.Width = 369.000000000000000000
    Size.Height = 425.000000000000000000
    Size.PlatformDefault = False
    TabOrder = 1
    ItemAppearance.ItemHeight = 200
    ItemAppearance.ItemEditHeight = 200
    ItemAppearanceObjects.ItemObjects.ObjectsCollection = <
      item
        AppearanceObjectName = 'TextData'
        AppearanceClassName = 'TTextObjectAppearance'
        Appearance.TextVertAlign = Leading
        Appearance.Width = 340.000000000000000000
        Appearance.Height = 52.000000000000000000
        Appearance.Align = Trailing
        Appearance.VertAlign = Trailing
      end
      item
        AppearanceObjectName = 'ImageData'
        AppearanceClassName = 'TImageObjectAppearance'
        Appearance.Width = 236.000000000000000000
        Appearance.Height = 137.000000000000000000
        Appearance.Align = Center
      end
      item
        AppearanceObjectName = 'ImageFond'
        AppearanceClassName = 'TImageObjectAppearance'
      end>
    ItemAppearanceObjects.ItemEditObjects.ObjectsCollection = <
      item
        AppearanceObjectName = 'Text1'
        AppearanceClassName = 'TTextObjectAppearance'
      end>
  end
end

la manip consiste uniquement en un couper/coller, ce qui est en bleu dans le code du haut (pas moyen de surligner)
doit se retrouver au début de ItemAppearanceObjects.ItemObjects.ObjectsCollection (code du bas, en vert après manip)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
object Form1: TForm1
  Left = 0
  Top = 0
  Caption = 'Form1'
  ClientHeight = 528
  ClientWidth = 459
  FormFactor.Width = 320
  FormFactor.Height = 480
  FormFactor.Devices = [Desktop]
  DesignerMasterStyle = 0
  object ListView1: TListView
    ItemAppearanceClassName = 'TDynamicAppearance'
    ItemEditAppearanceClassName = 'TDynamicAppearance'
    HeaderAppearanceClassName = 'TListHeaderObjects'
    FooterAppearanceClassName = 'TListHeaderObjects'
    Position.X = 32.000000000000000000
    Position.Y = 40.000000000000000000
    Size.Width = 369.000000000000000000
    Size.Height = 425.000000000000000000
    Size.PlatformDefault = False
    TabOrder = 1
    ItemAppearance.ItemHeight = 200
    ItemAppearance.ItemEditHeight = 200
    ItemAppearanceObjects.ItemObjects.ObjectsCollection = <
      item
        AppearanceObjectName = 'ImageFond'
        AppearanceClassName = 'TImageObjectAppearance'
      end
      item
        AppearanceObjectName = 'TextData'
        AppearanceClassName = 'TTextObjectAppearance'
        Appearance.TextVertAlign = Leading
        Appearance.Width = 340.000000000000000000
        Appearance.Height = 52.000000000000000000
        Appearance.Align = Trailing
        Appearance.VertAlign = Trailing
      end
      item
        AppearanceObjectName = 'ImageData'
        AppearanceClassName = 'TImageObjectAppearance'
        Appearance.Width = 236.000000000000000000
        Appearance.Height = 137.000000000000000000
        Appearance.Align = Center
      end>
    ItemAppearanceObjects.ItemEditObjects.ObjectsCollection = <
      item
        AppearanceObjectName = 'Text1'
        AppearanceClassName = 'TTextObjectAppearance'
      end>
  end
end

un retour à la fiche (voir comme fiche), une nouvelle bascule en mode conception (apparement non gardé, mais je me suis peut être trompé dans ma manip)
et voilà



Imagefond est bien en background.

Bien sûr il faut ensuite jouer sur les tailles, les divers align, placeoffset et cie pour obtenir les "séparations de quelques pixels" rien d'insurmontable, je pense même que cela doit pouvoir se faire en partie directement au cours de la manip sur le source toutefois attention à bien respecter le nombre de chiffres après le point décimal.

Le plus drôle, c'est que pour moi ce serait presque faire l'image de fond qui me poserait soucis ! Jusqu'à ce que je pense au programme qui m'a servi à créer des "images sympas" à partir de Graphics.TPath (SVG) et, méditation de dernière minute, la possiblité de créer cette image au runtime. Je me mets un pour cette idée en tout cas pour du multi-plateforme cela réglerai peut-être un problème de dpi

[pierrejean75]

Superbe !
Merci pour ton temps et ta patience