Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Composants FMX Delphi Discussion :

FMX TListView Items angles arrondis et fond transparent ?


Sujet :

Composants FMX Delphi

  1. #1
    Nouveau membre du Club
    FMX TListView Items angles arrondis et fond transparent ?
    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

  2. #2
    Rédacteur/Modérateur

    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.
    La seule chose absolue dans un monde comme le nôtre, c'est l'humour. » Albert Einstein

    Delphi installés : D3,D7,D2010,XE4,XE7,D10 (Tokyo, Rio, Sidney) et peut être quelques autres
    SGBD : Firebird 2.5, 3, SQLite
    générateurs Etats : FastReport, Rave, QuickReport
    OS : Window Vista, Windows 10, Ubuntu, Androïd

  3. #3
    Nouveau membre du Club
    C'est ce que j'ai tenté mais je ne sais pas comment mettre en arriere plan mon image

  4. #4
    Rédacteur/Modérateur

    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
    La seule chose absolue dans un monde comme le nôtre, c'est l'humour. » Albert Einstein

    Delphi installés : D3,D7,D2010,XE4,XE7,D10 (Tokyo, Rio, Sidney) et peut être quelques autres
    SGBD : Firebird 2.5, 3, SQLite
    générateurs Etats : FastReport, Rave, QuickReport
    OS : Window Vista, Windows 10, Ubuntu, Androïd

  5. #5
    Nouveau membre du Club
    Superbe !
    Merci pour ton temps et ta patience

###raw>template_hook.ano_emploi###