10

새로운 소재 디자인 (AppCompat 사용)에서 일부 작업 아이콘을 새 툴바의 서랍 아이콘과 정렬하려고합니다. 뭔가 같이 :툴바 아이콘으로 아이콘 맞추기 - Android Material Design

enter image description here

내가 제대로 모든 측정에서 찾고 생각 ...

enter image description here

Touch Target Size

문제는 내가 완벽하게 정렬 할 수 없다는 것입니다 16px의 패딩을 남긴 후에 아이콘이 시작되어야하지만 아이콘 자체에 다음과 같이 "패딩"(아이콘이있는 github 아이콘)이 있기 때문에 :

enter image description here

어쩌면 어리석은 짓일 지 모르지만 나는 무엇을 놓치고 있는지 모른다. 올바르게 정렬하기 위해 이미지 안의 여백을 어떻게 고려할 수 있습니까? 라디오 버튼이나 확인란을 해당 작업 표시 줄과 맞추는 것과 같은 문제가 있습니다.

나는이 코드 조각 시도 :

<RelativeLayout 
    android:id="@+id/image_button" 
    android:layout_width="72dp" 
    android:layout_height="wrap_content"> 

    <ImageView 
     android:layout_width="32dp" 
     android:layout_height="48dp" 
     android:layout_marginLeft="16dp" 
     android:layout_marginStart="16dp" 
     android:src="@drawable/ic_label_grey600_48dp" /> 
</RelativeLayout> 

을하지만 (내가 게시 된 첫 번째 스크린 샷처럼) 나 정렬 보이지 않는다.

enter image description here

을 그리고 좋아하는 그 72px 및 패딩의 16px보다 더 많은 계정 무언가에 걸리는 같습니다 여기에 또한 완벽하게 정렬 보인다.


좋아 UPDATE, 내가 너희들 더 많은 예제와 일부 코드를 보여 드리겠습니다. 내 목록 항목에 레이블 텍스트가있는 라디오 버튼이 있다는 것을 이미징합니다.

<RadioButton 
    style="?android:textAppearanceMedium" 
    android:layout_width="wrap_content" 
    android:layout_height="48dp" 
    android:layout_marginLeft="16dp" 
    android:paddingLeft="32dp" 
    android:singleLine="true"/> 

결과 : 실제로 (라디오 버튼으로 사용자 정의 버튼을 사용하지 않고 규칙이 올바른 값으로 marginLeft 및 paddingLeft을 설정하는 표시되지 않습니다

enter image description here

enter image description here

그 버튼의 크기를 아는 것) ... < - 내 악센트 컬러 (색상의 새로운 물건)에서 색상 버튼을 가져 오기 때문에 나쁜 옵션입니다.또한 일부 정렬 문제에 직면하고 새 Gmail 응용 프로그램과 같은

(내가 메일을 선택하면 볼은 1 메일 제목과 함께 더 이상 정렬되지 않은) :

enter image description here

enter image description here

+0

어쩌면 그래서 우리는 당신이 실제로 해낸 볼 수있는 스크린 샷 및 코드 등의 버전을 게시? –

+0

라디오 버튼으로 예제를 만들었습니다. 텍스트 만 액션 바에 맞추는 것은 괜찮습니다 (라디오 버튼 레이블이 아님). 또한 내가 말했듯이, 아이콘을 정렬하는 데 문제가 있습니다 (내부 패딩을 모르는 경우). –

+0

어댑터에서 newView/bindView로 왜 아이콘의 여백을 수동으로 조정하지 않습니까? – Codeversed

답변

2

16px의 패딩을 남겨 두었 기 때문에 아이콘을 완벽하게 정렬 할 수 없다는 점에서 아이콘이 시작되지만 아이콘 자체에 일부 "패딩"(아이콘 github의 아이콘)이 있습니다.

예, 아이콘에는 약간의 패딩이 있어야하며 아이콘이 표시 될 화면 해상도에 따라 다릅니다. 다른 화면 밀도 패딩 :
MDPI             4 픽셀 * 1.0 = 4 픽셀
hdpi에               4 픽셀 * 1.5 = 6 픽셀
xhdpi           4 픽셀 * 2.0 = 8px
xxhd 파이       4 픽셀 * 3.0 = 12 픽셀
xxxhdpi   4 픽셀 * 4.0 = 16px
이 패딩이 아이콘 당김에 포함 당신이 그것을 제거하지 말아야합니다. icon live area

enter image description here

http://www.google.com/design/spec/style/icons.html#icons-system-icons

+0

감사! 나는 그것을 찾고 있었다. 그래서 ... dpi에 따라 패딩이 다른 스타일 (res 폴더에 있음)을 만드는 것이 합리적일까요? 내 라디오 버튼 예제는 어떻습니까? 그 규칙을 따르고 있습니까? –

+0

테스트하지 않았기 때문에 지금 당장 답할 수 없습니다. 다음 번에는 라디오 버튼을 정렬해야하므로 알려 드리겠습니다. 중요한 디자인을 가진 Google의 앱에는 여전히 정렬과 AppCompat 위젯에 몇 가지 문제가있을 수 있습니다. – vovahost