Jump to content


Photo

Edycja layoutu A2


  • Please log in to reply
No replies to this topic

#1 OFFLINE   bartolinio3

bartolinio3

    Banned

  • Banned
  • 1,180 posts

Posted 31 March 2012 - 12:03

Poradnik pisany w oparciu o telefon na platformie DB3210. Na pozostałych platformach z rodziny A2 metoda jest prawie identyczna.

1. Wymagania

-plik layout_main.xml (w przypadku DB33350 to layoutStandby_Main.xml) wyciągnięty z softu (TPA/system/layout) lub pobrany z załącznika
-notatnik lub coś podobnego
-Layout Coordinates Previewer, którego obsługa jest banalna, nie musze chyba nic tłumaczyć: Attached File  Layout Coordinates Previewer 1.1.zip   91.55K   3 downloads

2. Omówienie elementów w standby:

Po otworzeniu layoutu powinniście odszukać dział nazwany Status Indication, wyglądający następująco:
 

<!-- Text fields (x1, x2, y1, y2) -->

<attr value="17"/> <!-- Nbr text fields -->

<attr value="1"/> <attr value="239"/> <attr value="5"/> <attr value="32"/> <attr value="10"/> <!-- 0 --> - logo operatora np. t-mobile.pl

<attr value="1"/> <attr value="239"/> <attr value="34"/> <attr value="56"/> <attr value="10"/> <!-- 1 --> - informacje lokalne np. nazwa ulicy, miasto

<attr value="1"/> <attr value="239"/> <attr value="34"/> <attr value="80"/> <attr value="10"/> <!-- 2 --> - jw.

<attr value="1"/> <attr value="239"/> <attr value="55"/> <attr value="80"/> <attr value="10"/> <!-- 3 -->

<attr value="1"/> <attr value="239"/> <attr value="82"/> <attr value="104"/> <attr value="10"/> <!-- 4 -->

<attr value="4"/> <attr value="236"/> <attr value="34"/> <attr value="184"/> <attr value="4"/> <!-- Notes 5 -->

<attr value="4"/> <attr value="236"/> <attr value="58"/> <attr value="184"/> <attr value="4"/> <!-- Notes 6 -->

<attr value="4"/> <attr value="236"/> <attr value="82"/> <attr value="184"/> <attr value="4"/> <!-- Notes 7 -->

<attr value="4"/> <attr value="236"/> <attr value="106"/> <attr value="184"/> <attr value="4"/> <!-- Notes 8 -->

<attr value="0"/> <attr value="173"/> <attr value="205"/> <attr value="281"/> <attr value="0"/> <!-- L 12h time (without AM/PM) -->

<attr value="174"/> <attr value="240"/> <attr value="211"/> <attr value="251"/> <attr value="0"/> <!-- L 12h time AM/PM -->

<attr value="0"/> <attr value="240"/> <attr value="185"/> <attr value="262"/> <attr value="0"/> <!-- L 12h time (with AM/PM) --> - duży zegar 12h

<attr value="0"/> <attr value="240"/> <attr value="177"/> <attr value="277"/> <attr value="0"/> <!-- L 24h time --> -duży zegar 24h

<attr value="4"/> <attr value="236"/> <attr value="210"/> <attr value="234"/> <attr value="5"/> <!-- Time --> mały zegar

<attr value="4"/> <attr value="236"/> <attr value="238"/> <attr value="262"/> <attr value="5"/> <!-- Date --> - data

<attr value="4"/> <attr value="236"/> <attr value="210"/> <attr value="234"/> <attr value="5"/> <!-- Timer --> - stoper/minutnik

<attr value="4"/> <attr value="236"/> <attr value="238"/> <attr value="262"/> <attr value="5"/> <!-- Alarm --> - alarm

Pierwsze dwie liczby to położenie poziome (X) dwie następne to położenie pionowe (Y). Ostatnia liczba nie jest nam potrzebna, nie ruszamy jej.

I tak np. logo operatora ma współrzędne X=(1;239) i Y=(5;32) Jak można się domyśleć, wartości są liczone od góry, czyli im większa wartość Y tym elementy są niżej.


Attached File  1.jpg   50.34K   42 downloads

3. Edycja położenia, usuwanie elementów

Jako przykład ponownie posłużę się logiem operatora. Chcę, aby logo było w dolnym lewym rogu. Musimy najpierw policzyć wymiary pola tekstowego. Po dokładnych wyliczeniach (239-1=238 i 32-5=27) wychodzi nam, że logo operatora ma wysokość 27px i szerokość równą 238px.
Opuścimy logo o ok. 230px. Dodajemy więc do Y1 i Y2 po 230px. Otrzymujemy 235 i 252. Dla pewności możemy wpisać te wartości do LCP i sprawdzić czy wyszło dobrze. U mnie wygląda OK.

Attached File  2.jpg   50.92K   44 downloads


Na początku jednak mówiłem żeby logo było w lewym rogu, więc musimy je tam przesunąć. Bierzemy się teraz za wartości X, konkretnie za drugą liczbę. Domyślnie pole tekstowe kończy się przy prawym krańcu ekranu. Ja chcę, żeby kończyło się na środku ekranu, przez co otrzymam logo przesunięte w lewo. Zmieniamy teraz wartość X2 na coś ok. 120. Sprawdzamy jak to wygląda. Powinno być OK.

Attached File  3.jpg   50.65K   28 downloads


Teraz, tak zmodyfikowany layout możemy wgrać to telefonu żeby zobaczyć efekt naszej pracy. Analogicznie postępujemy jeśli chcemy przesunąc zegar, date, minutnik czy cokolwiek innego. Żeby usunąć dany element, pola X1, X2, Y1 i Y2 wpisujemy liczby większe od wymiarów ekranu (np 500) Pole tekstowe będzie się znajdować poza granicami ekranu, czyli nie będziemy go widzieć na pulpicie ;)

4. Zmiana wielkości czcionki

Prawdopodobnie, jeśli postępowałeś zgodnie z instrukcją i przesunąłeś logo operatora na jedną ze stron, zostało trochę przycięte. Jest jednak na to sposób
Odnajdujemy w naszym layoucie sekcję StatusIndication, jednak teraz zajmiemy się częścią:
 

<font name="Large_Font"> -duża czcionka, np. operator

<size value="24"/>

<style value="Regular"/>

<edgestyle value="Uniform" edgethickness="1" shadowlengthx="0" shadowlengthy="0"/>

</font>

<font name="Small_Font"> mała czcionka np. informacje lokalne

<size value="20"/>

<style value="Regular"/>

<edgestyle value="Uniform" edgethickness="1" shadowlengthx="0" shadowlengthy="0"/>

</font>

<font name="Large24H_Font"> - czcionka dużego zegara 24h

<size value="100"/>

<style value="Regular"/>

<edgestyle value="Uniform" edgethickness="1" shadowlengthx="0" shadowlengthy="0"/>

</font>

<font name="Large12H_Font"> czcionka dużego zegara 12h

<size value="75"/>

<style value="Regular"/>

<edgestyle value="Uniform" edgethickness="1" shadowlengthx="0" shadowlengthy="0"/>

</font>

<font name="Large12H_Ext_Font">

<size value="60"/>

<style value="Regular"/>

<edgestyle value="Uniform" edgethickness="1" shadowlengthx="0" shadowlengthy="0"/>

</font>

<font name="Large12H_AMFM_Font">

<size value="40"/>

<style value="Regular"/>

<edgestyle value="Uniform" edgethickness="1" shadowlengthx="0" shadowlengthy="0"/>

</font>

<font name="TimeDate_Font"> - czcionka zegara/daty

<size value="20"/>

<style value="Regular"/>

<edgestyle value="Uniform" edgethickness="1" shadowlengthx="0" shadowlengthy="0"/>

</font>

<font name="NotesMedium_Font"> - notatki

<size value="20"/>

<style value="Regular"/>

</font>

<font name="NotesSmall_Font"> - notatki

<size value="18"/>

<style value="Regular"/>

</font>

<attributes count="96">

<!-- Main display text attr -->

<attr value="FontE_24R"/> <!-- Large font -->

<attr value="FontE_20R"/> <!-- Small font -->

<attr value="FontE_100R"/> <!-- Large 24h font -->

<attr value="FontE_75R"/> <!-- Large 12h font -->

<attr value="FontE_40R"/> <!-- Large 12h AM/PM font -->

<attr value="FontE_20R"/> <!-- Time/Date font -->


Tutaj sprawa jest banalna. Zmieniamy liczbę przy elemencie, który chcemy zmniejszyć, w moim przypadku logo operatora. Domyślnie mamy tam 24px. Zmniejszamy np. na 18 czy 16 zarówno tu:
 

<font name="Large_Font">

<size value="24"/> - zmieniamy na np. 18

<style value="Regular"/>

<edgestyle value="Uniform" edgethickness="1" shadowlengthx="0" shadowlengthy="0"/>

Jak i tu:
 

<!-- Main display text attr -->

<attr value="FontE_24R"/> <!-- Large font --> zmieniamy na dokładnie to samo, co w sekcji powyżej

Zupełnie tak samo postępujemy z każdym elementem, dużym zegarem, datą etc.

No i to by było na tyle, mam nadzieję, że teraz usunięcie loga operatora czy przesunięcie zegarka nie będzie trudnością dla nikogo. ;)

Wszelkie pytania proszę zadawać w tym temacie :)

W załącznikach dodaję kilka fabrycznych layoutów.

Poradnik jest mojego autorstwa i zabraniam jego kopiowania na inne strony.

Attached Files


Edited by Jurij, 12 March 2014 - 01:01.

Posted Image


0 user(s) are reading this topic