Narzędzie Draw 9-patch to edytor WYSIWYG dostępny w Android Studio. Narzędzie pozwala tworzyć obrazy bitmapowe, które automatycznie zmieniają swój rozmiar w celu dopasowania do zawartości widoku i rozmiaru ekranu. Wybrane części obrazu możesz skalować w poziomie lub w pionie, zgodnie ze wskaźnikami narysowanymi na obrazie.
Wprowadzenie do grafiki NinePatch i sposobu ich działania znajdziesz w artykule o elementach rysunkowych NinePatch.
Rysunek 1. Narzędzie Rysuj 9-patch w Android Studio, które wyświetla obraz NinePatch.
Wykonaj te czynności, aby utworzyć grafikę NinePatch za pomocą narzędzia Draw 9-patch w Android Studio. Potrzebujesz obrazu PNG, z którego chcesz utworzyć obraz NinePatch.
- W Android Studio kliknij prawym przyciskiem myszy obraz PNG, z którego chcesz utworzyć obraz NinePatch, a następnie kliknij Utwórz plik 9-poprawek.
- Wpisz nazwę pliku obrazu NinePatch i kliknij OK. Obraz zostanie utworzony z rozszerzeniem pliku
.9.png. - Kliknij dwukrotnie nowy plik NinePatch, aby otworzyć go w Android Studio.
W otwartym obszarze roboczym lewy panel to obszar rysowania, w którym możesz edytować linie rozciągniętych obszarów i obszaru treści. Panel po prawej to obszar podglądu, w którym możesz wyświetlić podgląd grafiki po rozciągnięciu.
- Kliknij w obszarze 1 piksela, aby narysować linie definiujące plamy rozciągnięte oraz (opcjonalnie) obszar treści.
Kliknij prawym przyciskiem myszy, aby usunąć wcześniej narysowane linie (na Macu przytrzymaj Shift i kliknij).
- Gdy skończysz, kliknij Plik > Zapisz, aby zapisać zmiany.
Aby otworzyć istniejący plik NinePatch w Android Studio, kliknij go dwukrotnie.
Aby grafika NinePatch była poprawnie skalowana w dół, sprawdź, czy wszystkie rozciągnięte obszary mają rozmiar co najmniej 2 x 2 piksele. W przeciwnym razie te regiony mogą zniknąć po zmniejszeniu. Aby uniknąć interpolacji podczas skalowania, która może spowodować zmianę kolorów na granicach, zapewnij 1 piksel dodatkowej bezpiecznej przestrzeni w grafice przed i za obszarami rozciąganymi.
Uwaga: zwykły plik PNG (*.png) jest wczytywany z pustym obramowaniem o szerokości 1 piksela. Możesz narysować elastyczne plamy i obszar treści w ramce.
Zapisany wcześniej plik NinePatch (*.9.png) zostanie wczytany w niezmienionej postaci bez obszaru rysowania, ponieważ już istnieje.
Rysunek 2. Obraz NinePatch w Android Studio przedstawiający treści oraz poprawki i nieprawidłowe poprawki.
Opcjonalne opcje obejmują:
- Powiększenie: dostosuj poziom powiększenia grafiki w obszarze rysowania.
- Skala poprawek: dostosuj skalę obrazów w obszarze podglądu.
- Pokaż blokadę: pozwala zobaczyć nierysowany obszar grafiki po najechaniu na nie kursorem myszy.
- Pokaż plamy: sprawdź podgląd rozciągniętych różowych plam w obszarze rysowania. Kolor różowy oznacza miejsce, które można rozciągać, tak jak pokazano na ilustracji 2.
- Pokaż treść: zaznacz obszar treści na obrazach podglądu. Fioletowy wskazuje obszar, w którym treści są dozwolone (tak jak na ilustracji 2).
- Pokaż nieprawidłowe poprawki: dodaje czerwone obramowanie wokół obszarów wymagających obszarów, które po rozciągnięciu mogą powodować powstawanie na obrazie artefaktów, jak widać na ilustracji 2. Jeśli usuniesz wszystkie nieprawidłowe poprawki, zachowasz wizualną spójność rozciągniętego obrazu.