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


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:width및 android: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.