Rendu des styles sur Android

Version imprimable

06/05/2019, 09h33
mistercactus

3 pièce(s) jointe(s)

Rendu des styles sur Android

Salut les devs !

Je développe actuellement une application Android, et j'ai quelques soucis de rendu. Une image vaut mille mots :
Pièce jointe 472415

Autant dire que mes yeux saignent 8O.

Voici la structure de mon style :
Pièce jointe 472420

Et les paramètres du TRectangle permettant de faire la bordure :
Pièce jointe 472416

Quelqu'un aurait une idée pour rendre ça propre ? :D
06/05/2019, 22h18
pprem

aïe, oui, effectivement c'est moche

Je n'ai rien pour essayer de mon côté ce soir, mais peux-tu nous dire si ça fait pareil sous Windows ?
07/05/2019, 12h07
SergioMaster

2 pièce(s) jointe(s)

Bonjour,

ma première réaction a été : mais pourquoi diable créer un style pour un bouton , pour les angles arrondis ? Il y a le TCornerButton
reste donc juste l'épaisseur du trait (ce qui me choque le plus) ou la couleur (encore que l'on puisse utiliser les styles fournis)

Donc, pour l'essentiel je ne vois pas le pourquoi d'un style particulier, pour le détail au lieu d'utiliser un fond uni (comme le style d'un bouton) utiliser un gradient pour atténuer ce noir devrait faire pas mal de bien (aussi bien pour le fond que pour le contour)
ici le design du style
Pièce jointe 472743
à l'exécution (il est toujours possible de modifier les angles, la couleur et taille de fonte
Pièce jointe 472744

à noter que pour le contour, j'ai modifié l'angle de mon gradient ce qui renforce l'impression de l'angle en bas à gauche
07/05/2019, 14h26
mistercactus

5 pièce(s) jointe(s)

Bien le bonjour Messieurs ! Merci d'accorder du temps à ma demande ;).

Pour ma part, je ne suis pas designer, je m'occupe seulement de la partie développement. Actuellement, ce design est provisoire, et pourra être changé par la suite (merci pour les exemples :))

Citation:

Je n'ai rien pour essayer de mon côté ce soir, mais peux-tu nous dire si ça fait pareil sous Windows ?

Non, les styles apparaissent correctement sous Windows.

J'ai peut-être été imprécis dans ma question, je vais donc arranger cela : mon objectif est que ce style (qui est un bouton) rende bien. En image :

Windows :
Pièce jointe 472791

Android :
Pièce jointe 472792

J'aimerais simplement avoir le rendu Windows sur Android !

Ceci dit, le petit trou suivant :
Pièce jointe 472799

Parfois il apparaît, parfois pas (je n'ai pas encore trouvé le pourquoi du comment).

Ce que je n'arrive pas à faire pour l'instant, c'est "lisser" le trait, pour qu'il n'apparaisse pas tout pixellisé.

En réalité ceci se produit pour les styles que j'ai créé contenant une bordure de TRectangle :

Un TEdit :
Pièce jointe 472838

Un TCheckBox :
Pièce jointe 472842

Encore une fois, ces problèmes n'apparaissent pas sous Windows.

Peut-être que je m'y prends de la mauvaise manière avec mes styles :aie:.
07/05/2019, 15h38
SergioMaster

1 pièce(s) jointe(s)

Avec un RoundRect pas de "gap" sur mon Android
Pièce jointe 472871
RoundRect parce que je me suis trompé :oops: en cours de design

Citation:

Envoyé par mistercactus

Pour ma part, je ne suis pas designer, je m'occupe seulement de la partie développement.
Peut-être que je m'y prends de la mauvaise manière avec mes styles :aie:.

De mon point de vue oui. Moi non plus je ne suis pas designer mais cette phrase

Citation:

Envoyé par mistercactus

Actuellement, ce design est provisoire, et pourra être changé par la suite

résume pour moi la situation.

Si vous créez vos propres styles un designer devra aller dans votre programme pour modifier chacun de ceux que vous avez créé.
Si vous utilisez un style "standard" au pire il aura à modifier une seule et unique image : cette fameuse image ressource que l'on trouve quand l'on fouille (propriété SourceLookup des TStyleObjects) il y a un papier de Sarina Dupont sur le sujet.

Cela dit rien n'empêche de fournir plusieurs fichiers styles (ou plusieurs stylebooks) impliquant alors les mêmes manipulations

Enfin, pour le problème du gap cela ne vient pas du style :aie:
J'ai écrit un petit programme avec en tout et pour tout un rectangle (avec un contour à 5 blanc) et deux boutons pour agrandir/diminuer les angles

Code:

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
 
unit Unit37;
 
interface
 
uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
  FMX.Controls.Presentation, FMX.StdCtrls, FMX.Objects, System.Math;
 
type
  TForm37 = class(TForm)
    Rectangle1: TRectangle;
    Button1: TButton;
    Button2: TButton;
    procedure Button1Click(Sender: TObject);
    procedure Button2Click(Sender: TObject);
  private
    { Déclarations privées }
  public
    { Déclarations publiques }
  end;
 
var
  Form37: TForm37;
 
implementation
 
{$R *.fmx}
{$R *.LgXhdpiPh.fmx ANDROID}
 
procedure TForm37.Button1Click(Sender: TObject);
var r : Single;
begin
r:=Rectangle1.XRadius+1;
r:=Min(R,Rectangle1.Height/2);
Rectangle1.XRadius:=R;
Rectangle1.YRadius:=R;
end;
 
procedure TForm37.Button2Click(Sender: TObject);
var r : Single;
begin
r:=Rectangle1.XRadius-1;
if r<0 then r:=0;
Rectangle1.XRadius:=R;
Rectangle1.YRadius:=R;
end;
 
end.

conclusion : le gap apparait/disparait en fonction de la valeur

à signaler à embarcadero ?

07/05/2019, 18h00
mistercactus

1 pièce(s) jointe(s)

Citation:

conclusion : le gap apparait/disparait en fonction de la valeur

Déjà une chose comprise :D

Citation:

à signaler à embarcadero ?

ça ne me paraît pas être un comportement normal, donc je dirais oui :weird:

Avec le RoundRect mon problème principal reste présent :
Pièce jointe 472930

On voit clairement que la bordure est crénelée. Concrètement, j'aimerais ajouter de l'anti-aliasing pour "lisser" le tout !

Citation:

Si vous créez vos propres styles un designer devra aller dans votre programme pour modifier chacun de ceux que vous avez créé.

En fait, mon collègue (meilleur que moi en design) me fait des maquettes, et je crée les styles correspondants dans Delphi. D'où le fait que ce soit moi qui fasse les styles, et qu'ils ne soient pour l'instant pas très jolis, car je n'ai pas encore reçu les maquettes (d'où le design provisoire) !
07/05/2019, 21h31
pprem

Citation:

Envoyé par SergioMaster

à signaler à embarcadero ?

Clairement oui, avec ton programme zippé en pièce jointe pour reproduire le problème.
07/05/2019, 21h33
pprem

Citation:

Envoyé par mistercactus

En fait, mon collègue (meilleur que moi en design) me fait des maquettes, et je crée les styles correspondants dans Delphi. D'où le fait que ce soit moi qui fasse les styles, et qu'ils ne soient pour l'instant pas très jolis, car je n'ai pas encore reçu les maquettes (d'où le design provisoire) !

Dans ce cas ne t'embêtes pas, file lui de programme du Bitmap Style Designer et/ou les images de base à personnaliser pour qu'il fasse le boulot à ta place.

Le travail de graphiste aux graphistes, tel est mon crédo (tant que ça ne concerne pas le fait de mettre un toucan sur une photo de ville 8-) )
08/05/2019, 11h03
mistercactus

Citation:

Dans ce cas ne t'embêtes pas, file lui de programme du Bitmap Style Designer et/ou les images de base à personnaliser pour qu'il fasse le boulot à ta place.

Je vais voir un peu comment ça fonctionne, et mettre ça en place ;).

Ceci dit, par curiosité, auriez-vous une idée pour ajouter de l'anticrénelage sur cette bordure ?
08/05/2019, 11h14
pprem

Citation:

Envoyé par mistercactus

Ceci dit, par curiosité, auriez-vous une idée pour ajouter de l'anticrénelage sur cette bordure ?

ça devrait être déjà actif, c'est pour ça que je soupçonne un bogue
09/05/2019, 14h45
mistercactus

Je vais prendre mon mal en patience alors :?

L'un de vous a déjà reporté les bugs, ou je m'en occupe ?
09/05/2019, 15h46
SergioMaster

Bonjour

Citation:

Envoyé par mistercactus

L'un de vous a déjà reporté les bugs, ou je m'en occupe ?

à toi " l'honneur " je n'ai pas le temps (ou le courage) de le faire. À vérifier si ce n'est pas un bogue connu, il n'y a rien de plus rageant que de se faire renvoyer aux calendes grecques avec un "duplicate case"
09/05/2019, 16h58
mistercactus

ça marche, je vais aller me jeter aux fauves :aie:

Plus sérieusement, ça me permettra de voir comment ça fonctionne, vu que je ne l'ai encore jamais fait.

En attendant, problème résolu (en quelque sorte) ! Merci encore :zoubi:
10/05/2019, 09h57
SergioMaster

Bonjour,

comme je lâche pas facilement mon os j'ai fait plusieurs autres essais

- Tout d'abord j'ai fait quelques recherches et trouvé ceci
- Suite à la lecture de ce lien j'ai changé la propriété Quality de la forme (je ne connaissais même pas son existence 8O) constatation cela change un peu (en mieux) la donne mais, encore une fois quelques gaps apparaissent, dans mes tests un seul lorsque la valeur XRadius=YRadius=2)
- Suite à cette constatation j'ai rajouté un trackbar pour modifier aussi l'épaisseur de bordure ce qui fourni quelques surprises (gap) supplémentaires

AMHA il y a une histoire d'arrondi quelque part dans le calcul dessin mais je n'irais pas fouiller dans les sources une fois la moelle sucée l'os est moins attirant ;)

reste que pour moi la démarche serait que le graphiste modifie le style ainsi que l'a indiqué Patrick et que au niveau du dev tu te contentes d'un fichier style déterminé, de plus cela permettra des choses assez difficiles à mettre en place dans un style personnalisé (les effets par exemple)
01/06/2019, 09h29
SergioMaster

3 pièce(s) jointe(s)

Bonjour,

je reviens sur le sujet avec d'autres idées. Ayant découvert récemment TPath et consort (TPathLabel) mais aussi les composants RadiantShapes voici un autre style qui pourrait bien s'avérer intéressant

Pièce jointe 479787

Ici j'ai mis un composant RadientCapsule mais un TPath, si j'avais pu en trouver un identique aurait peut-être fait la même chose.
Mon idée était que, du fait qu'il s'agit de pathdata, cela forcerait le calcul du dessin (au détriment du temps CPU mais rien n'est parfait.

et voilà un premier jus
Pièce jointe 479794
qui semble confirmer mon idée, un essai sur fond noir et bouton blanc me confirme mon impression (changements de taille ou échelle inclus)
Pièce jointe 479799
reste un dernier essai : le changement de taille du contour

pour les sources voir ici