스케일링없이 레이어 목록에서 벡터 드로어 블을 중앙에 배치하는 방법


102

내가 사용하려고 시도하고 VectorDrawableA의를 LayerList벡터를 맞추지 않고. 예를 들면 :

<layer-list>
    <item android:drawable="@color/grid_item_activated"/>
    <item android:gravity="center" android:drawable="@drawable/ic_check_white_48dp"/>
</layer-list>

드로어 블 ic_check_white_48dpID는 다음과 같이 정의됩니다.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="48dp"
        android:height="48dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFFFF"
        android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/>
</vector>

원하는 효과는 배율 조정없이 확인 아이콘이 레이어 드로어 블의 중앙에 배치되는 것입니다. 문제는 위의 레이어 목록으로 인해 확인 아이콘이 레이어 크기에 맞게 조정된다는 것입니다.

I는 I는 각각의 밀도와 PNG는 벡터 그리기를 교체하고 같은 계층리스트를 수정하면 원하는 효과를 얻을 :

<layer-list>
    <item android:drawable="@color/grid_item_activated"/>
    <item>
        <bitmap android:gravity="center" android:src="@drawable/ic_check_white_48dp"/>
    </item>
</layer-list>

을 사용하여이 작업을 수행 할 수있는 방법이 VectorDrawable있습니까?


11
이것은 단순히 API 21/22의 버그 일 수 있습니다. 방금 API 23 장치에서 테스트했으며 벡터 드로어 블이 올바르게 중앙에 배치되었습니다.
ashughes

1
자신의 질문에 답하고 수락해야합니다. 이렇게하면 더 잘 보이고 질문이 답변되지 않은 것으로 표시되지 않습니다.
Marcin Koziński

1
API 21/22에서 수행 할 작업에 대한 답변이 아직 없기 때문에 내 질문에 답변하지 않았습니다. 내 임시 해결책은 벡터 대신 PNG를 사용하는 것이 었습니다. 그래도 벡터를 작동시키는 방법을 찾고 있습니다.
ashughes

1
나는 여기에 문제를 열었습니다 : code.google.com/p/android/issues/detail?id=219600
toobsco42

이것은 이미 API 23에서 수정되었으므로 버그 보고서가 수정 됨으로 표시 될 것입니다.
ashughes

답변:


29

벡터 드로어 블을 계층화 된 목록에 중앙에 배치하려고 시도하는 것과 동일한 문제가 발생했습니다.

해결 방법이 있지만 정확히 동일하지는 않지만 작동합니다. 전체 드로어 블의 크기를 설정하고 벡터 항목에 패딩을 추가해야합니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <size android:height="120dp" android:width="120dp"/>
            <solid android:color="@color/grid_item_activated"/>
        </shape>
    </item>
    <item android:top="24dp"
          android:bottom="24dp"
          android:left="24dp"
          android:right="24dp"
          android:drawable="@drawable/ic_check_white_48dp"/>
</layer-list>

위 모양의 크기는 전체 드로어 블의 크기 (이 예에서는 120dp)를 설정합니다.이 예에서는 두 번째 항목의 패딩 (이 예에서는 24dp)이 벡터 이미지를 중앙에 배치합니다.

gravity="center"API 21 및 22에서 벡터 를 사용하는 것과 동일 하지는 않지만 작동 방식입니다.


2
이것은 드로어 블이 중앙에있는 체크 드로어 블을 사용하여 설정된 전체 공간을 채우는 대신 드로어 블의 정확한 크기를 알아야하는 것처럼 들립니다 (모양 크기를 설정하기 위해).
ashughes jul.

1
크기를 알 수는 없지만이 방법으로 패딩을 변경할 수 없습니다. 이미지 뷰에서 드로어 블을 서로 겹쳐 놓을 수 있습니다. A에 대한 완벽한 해결책이없는 이상 내가 언급 한 바와 같이 gravity="center"API (21, 22)에서이
니콜라스 타일러

와 함께 사용할 때는 작동하지 않습니다 windowBackground. 이 경우 명시 적 크기는 아무 작업도 수행하지 않습니다. 그리고 다른 레이어 목록에 레이어 목록을 넣으면 작동하지 않습니다.
Vsevolod Ganin

19

같은 문제로 어려움을 겪었습니다. 이 문제를 해결하고 드로어 블이 확장되지 않도록하는 유일한 방법은 드로어 블 크기를 설정하고 중력을 사용하여 정렬하는 것입니다.

<layer-list>
    <item android:drawable="@color/grid_item_activated"/>
     <item
        android:gravity="center"
        android:width="48dp"
        android:height="48dp"
        android:drawable="@drawable/ic_check_white_48dp"/>
</layer-list>

도움이 되었기를 바랍니다.


34
API 21-22에서는 width해당 API 레벨에서 속성을 사용할 수 없기 때문에 이는 도움이되지 않습니다 . API 23에서는 버그가 수정되고 드로어 블이 더 이상 늘어나지 않기 때문에 필요하지 않습니다.
WonderCsabo

3
이 API 27 제대로 작동하지 않습니다, 이미지가 전체 화면에 늘어
콘스탄틴 Konopko

8

API21 ~ API23을 포함한 모든 API에서 SplashScreen을 멋지게 보이게하는 편집 된 솔루션

우선 기사를 읽고 스플래시 화면을 만드는 좋은 방법을 따르십시오.

로고가 왜곡되거나 맞지 않고 APIs24 + 만 대상으로하는 경우 다음과 같이 xml 파일에서 직접 벡터 드로어 블을 축소 할 수 있습니다.

<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
android:viewportWidth="640"
android:viewportHeight="640"
android:width="240dp"
android:height="240dp">
<path
    android:pathData="M320.96 55.9L477.14 345L161.67 345L320.96 55.9Z"
    android:strokeColor="#292929"
    android:strokeWidth="24" />
</vector>

위의 코드에서 640x640 캔버스에 그린 드로어 블의 크기를 240x240으로 조정하고 있습니다. 그런 다음 스플래시 화면 드로어 블에 넣었을 때 잘 작동합니다.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"
android:paddingBottom="20dp" android:paddingRight="20dp" android:paddingLeft="20dp" android:paddingTop="20dp">

<!-- The background color, preferably the same as your normal theme -->
<item>
    <shape>
        <size android:height="120dp" android:width="120dp"/>
        <solid android:color="@android:color/white"/>
    </shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item
    android:drawable="@drawable/logo_vect"
    android:gravity="center">

</item>
</layer-list>

내 코드는 실제로 하단의 그림에서 삼각형을 그리는 것이지만 여기에서 이걸로 무엇을 얻을 수 있는지 볼 수 있습니다. 해상도는 비트 맵을 사용할 때 얻은 픽셀 화 된 가장자리와 달리 마침내 훌륭합니다. 따라서 벡터 드로어 블을 반드시 사용하십시오 (특수 소프트웨어를 다운로드하는 번거 로움없이 내 것을 만들 때 사용한 vectr라는 사이트가 있습니다).

API21-22-23에서도 작동하도록 수정

위의 솔루션은 API24 +를 실행하는 장치에서 작동하지만 API22를 실행하는 장치에 앱을 설치 한 후 정말 실망했습니다. 스플래시 화면이 다시 전체 뷰를 채우려 고하고 똥처럼 보이는 것을 발견했습니다. 반나절 동안 눈썹을 찢은 후 마침내 순전히 의지력으로 해결책을 강요했습니다.

스플래시 스크린 xml (splash_screen.xml이라고도 함)과 정확히 같은 이름의 두 번째 파일을 만들고 res / 폴더에 만들 drawable-v22 및 drawable-v21이라는 두 폴더에 배치해야합니다. Android에서 Project로 프로젝트보기를 변경해야합니다). 이는 관련 장치가 드로어 블 폴더의 -vXX 접미사에 해당하는 API를 실행할 때마다 해당 폴더에있는 파일로 리디렉션하도록 전화기에 지시하는 역할을 합니다 . 이 링크를 참조하십시오 . 이러한 폴더에 생성하는 splash_screen.xml 파일의 레이어 목록에 다음 코드를 배치합니다.

<item>
<shape>
    <size android:height="120dp" android:width="120dp"/>
    <solid android:color="@android:color/white"/>
</shape>
</item>

<!-- Your product logo - 144dp color version of your app icon -->
<item android:gravity="center">
    <bitmap android:gravity="center"
        android:src="logo_vect"/>

</item>

이것이 폴더 모양입니다.

이러한 API에 대한 어떤 이유로 인해 드로어 블을 비트 맵으로 래핑해야 작동하고 최종 결과가 동일하게 표시됩니다. 문제는 추가 드로어 블 폴더와 함께 aproach를 사용해야한다는 것입니다. splash_screen.xml 파일의 두 번째 버전으로 인해 API가 23보다 높은 장치에서 스플래시 화면이 전혀 표시되지 않을 수 있습니다. 또한 배치해야 할 수도 있습니다. android는 기본적으로 리소스를 찾을 수있는 가장 가까운 drawable-vXX 폴더로 설정되므로 splash_screen.xml의 첫 번째 버전을 drawable-v24에 넣습니다.

내 시작 화면


4

저는 현재 벡터 드로어 블이 수평 및 수직 중앙에있는 스플래시 화면에서 작업하고 있습니다. 다음은 API 레벨 25에서 얻은 것입니다.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">

<!-- background color, same as theme -->
<item android:drawable="@android:color/white"/>

<!-- app logo -->

<item
    android:drawable="@drawable/my_app_logo"
    android:gravity="center_horizontal|center_vertical"
    android:width="200dp"
    android:height="200dp"
    />
</layer-list>

벡터 드로어 블의 치수를 조정하려면 위의 android:widthandroid:height속성을 수정 하고 반드시 원본 드로어 블을 수정하는 것은 아닙니다.

또한 내 경험으로는 벡터 드로어 블을 비트 맵 태그에 넣지 마십시오. 비트 맵은 벡터 드로어 블이 아닌 .png, .jpg 및 .gif 형식 파일 용입니다.

참고

https://developer.android.com/guide/topics/resources/drawable-resource#LayerList

https://developer.android.com/guide/topics/resources/more-resources.html#Dimension


1
<bitmap> 태그 대신 <item> 태그 안에 있어야하는 벡터 드로어 블에 대해 잘 알고 있습니다.
FrostRocket
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.