Tworzenie ikon aplikacji (widoki)

Implementacja Jetpack Compose

Na tej stronie znajdziesz informacje o tworzeniu i używaniu ikon aplikacji, które są unikalne dla układów opartych na widokach. Więcej informacji o tworzeniu ikon aplikacji znajdziesz w artykule Tworzenie ikon aplikacji, w którym opisujemy zalecaną przez nas platformę interfejsu.

Tworzenie ikony paska działań lub karty

Użyj Image Asset Studio, aby tworzyć ikony paska działań i kart w przypadku układów opartych na widokach.

Ikony paska działań to elementy graficzne umieszczone na pasku działań, które reprezentują poszczególne elementy działań. Więcej informacji znajdziesz w sekcjach Dodawanie działań i zarządzanie nimi, Pasek aplikacji – Material Design i Projektowanie paska działań.

Ikony kart to elementy graficzne używane do reprezentowania poszczególnych kart w interfejsie z wieloma kartami. Każda ikona karty ma 2 stany: nieaktywny i aktywny. Więcej informacji znajdziesz w artykułach Tworzenie widoków przesuwania z kartami i Karty – Material Design.

Image Asset Studio umieszcza ikony w odpowiednich lokalizacjach w res/drawable-<density>/katalogach.

Zalecamy używanie stylu Material Design w przypadku ikon paska działań i kart, nawet jeśli obsługujesz starsze wersje Androida. Używaj appcompat i innych bibliotek pomocy, aby dostarczać interfejs użytkownika Material Design na starsze wersje platformy.

Zamiast narzędzia Image Asset Studio możesz użyć Vector Asset Studio do tworzenia ikon paska działań i kart. Obiekty rysowalne wektorowe są odpowiednie w przypadku prostych ikon i mogą zmniejszyć rozmiar aplikacji.

Po otwarciu Studia komponentów graficznych możesz dodać ikonę paska działań lub karty, wykonując te czynności:

  1. W polu Typ ikony wybierz Ikony paska działań i kart.

  2. Wybierz Typ komponentu, a następnie w polu poniżej określ komponent:

    • W polu Clip Art (Obraz clipart) kliknij przycisk.

      W oknie Wybierz ikonę wybierz ikonę materiału, a następnie kliknij OK.

    • W polu Ścieżka podaj ścieżkę i nazwę pliku obrazu. Kliknij …, aby użyć okna.

    • W polu Tekst wpisz ciąg tekstowy i wybierz czcionkę.

    Ikona pojawia się w obszarze Źródłowy komponent po prawej stronie oraz w obszarze podglądu u dołu kreatora.

  3. Opcjonalnie zmień nazwę i opcje wyświetlania:

    • Nazwa – jeśli nie chcesz używać nazwy domyślnej, wpisz nową. Jeśli nazwa zasobu już istnieje w projekcie (o czym świadczy błąd u dołu kreatora), zostanie zastąpiona. Nazwa może zawierać tylko małe litery, podkreślenia i cyfry.

    • Przytnij – aby dostosować margines między grafiką ikony a obramowaniem w komponencie źródłowym, wybierz Tak. Ta operacja usuwa przezroczyste miejsce przy zachowaniu współczynnika proporcji. Aby pozostawić zasób źródłowy bez zmian, wybierz Nie.

    • Wypełnienie – jeśli chcesz dostosować wypełnienie komponentu źródłowego ze wszystkich 4 stron, przesuń suwak. Wybierz wartość z zakresu od -10% do 50%. Jeśli wybierzesz też Przytnij, przycinanie nastąpi w pierwszej kolejności.

    • Motyw – wybierz HOLO_LIGHT lub HOLO_DARK. Możesz też określić kolor w oknie Wybierz kolor, klikając NIESTANDARDOWY, a następnie pole Kolor niestandardowy.

    Image Asset Studio tworzy ikonę w przezroczystym kwadracie, dzięki czemu na krawędziach jest trochę dopełnienia. Dopełnienie zapewnia wystarczającą ilość miejsca na standardowy efekt ikony z cieniem.

  4. Kliknij Dalej.

  5. Opcjonalnie zmień katalog zasobów:

    • Katalog zasobów – wybierz zbiór źródeł zasobów, do którego chcesz dodać komponent z obrazem: src/main/res, src/debug/res, src/release/res lub zbiór źródeł zdefiniowany przez użytkownika. Główny zbiór źródeł ma zastosowanie do wszystkich wariantów kompilacji, w tym do wersji debugowania i wersji do publikacji. Zbiory źródeł debugowania i wersji zastępują główny zbiór źródeł i są stosowane do jednej wersji kompilacji. Zbiór źródeł debugowania służy tylko do debugowania. Aby zdefiniować nowy zbiór źródeł, wybierz Plik > Struktura projektu > aplikacja > Typy kompilacji. Możesz na przykład zdefiniować zestaw źródeł w wersji beta i utworzyć wersję ikony z tekstem „BETA” w prawym dolnym rogu. Więcej informacji znajdziesz w artykule Konfigurowanie wariantów kompilacji.

    W obszarze Katalogi wyjściowe wyświetlają się obrazy i foldery, w których będą one widoczne w widoku Pliki projektu w oknie Projekt.

  6. Kliknij Zakończ.

    Image Asset Studio dodaje obrazy do folderów drawable dla różnych gęstości.

Odwoływanie się do zasobu obrazu w kodzie

Zwykle możesz odwoływać się do zasobu obrazu w kodzie w sposób ogólny, a gdy aplikacja jest uruchomiona, odpowiedni obraz wyświetla się automatycznie w zależności od urządzenia:

  • W większości przypadków możesz odwoływać się do zasobów obrazów jako @drawable w kodzie XML lub Drawable w kodzie Java.

    Na przykład poniższy kod XML układu wyświetla element rysowalny w obiekcie ImageView:

    <ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/myimage" />

    Poniższy kod w Javie pobiera obraz jako Drawable:

    Kotlin

    val drawable = resources.getDrawable(R.drawable.myimage, theme)

    Java

    Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

    Metoda getResources() znajduje się w klasie Context, która ma zastosowanie do obiektów interfejsu, takich jak aktywności, fragmenty, układy, widoki itp.

  • Jeśli Twoja aplikacja korzysta z biblioteki pomocy, możesz odwołać się do zasobu obrazu w kodzie XML za pomocą instrukcji app:srcCompat. Przykład:

    <ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:srcCompat="@drawable/myimage" />

Do zasobów obrazów możesz uzyskać dostęp tylko z głównego wątku.

Gdy zasób obrazu znajdzie się w katalogu res/ projektu, możesz odwoływać się do niego w kodzie Java lub układzie XML za pomocą identyfikatora zasobu. Poniższy kod w Javie ustawia ImageView, aby używać zasobu drawable/myimage.png:

Kotlin

findViewById<ImageView>(R.id.myimageview).apply {
    setImageResource(R.drawable.myimage)
}

Java

ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

Więcej informacji znajdziesz w sekcji Uzyskiwanie dostępu do zasobów aplikacji.