다른 화면 크기의 이미지 위에 체크 박스를 정렬하는 방법

Question

나는 당뇨병 환자와 정기적 인 주사를 맞이하는 사람들을위한 주사 추적 응용 프로그램을 구축하고 있습니다. 나는 8 개의 체크 박스를 이미지 상단에 정렬하려고합니다. body를 사용하여 사용자가 주입 위치를 지정할 수 있습니다. 문제는 바로 지금 정렬하는 것이 매우 특정한 화면 크기에서만 작동하고, 크기가 다를 때마다 체크 상자가 움직여서 올바른 본문 부분이 아닌 주변으로 이동하고 끝나는 것입니다. 이 일을 수행 할 수있는 방법이 있습니까? 마진을 하드 코딩하는 것이 잘 작동하지 않는 것 같습니다. 어떤 도움을 주시면 감사하겠습니다. 고맙습니다.

여기에 ideally처럼 보이게하고 싶습니다. 여기에 모든 것을 바꿔 놓은 specific screen size에 실제로 보이는 모양이 있습니다. 물론 화면 크기가 크거나 작을수록 더 극단적입니다.

여기 내 코드입니다 :

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:id="@+id/activity_main" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 
tools:context="com.example.android.injectiontracker.MainActivity"> 

<ImageView 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_below="@id/date_and_time_layout" 
    android:src="@drawable/blank_body" /> 

<CheckBox 
    android:id="@+id/abdomen_left" 
    style="@style/InjectionCheckbox" 
    android:layout_alignBaseline="@+id/abdomen_right" 
    android:layout_alignBottom="@+id/abdomen_right" 
    android:layout_toRightOf="@+id/abdomen_right" 
    android:layout_toEndOf="@+id/abdomen_right" /> 

<CheckBox 
    android:id="@+id/thigh_left" 
    style="@style/InjectionCheckbox" 
    android:layout_alignBaseline="@+id/thigh_right" 
    android:layout_alignBottom="@+id/thigh_right" 
    android:layout_toRightOf="@+id/thigh_right" 
    android:layout_toEndOf="@+id/thigh_right" /> 



<ImageView 
    android:id="@+id/save" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_alignParentBottom="true" 
    android:layout_alignParentRight="true" 
    android:src="@drawable/ic_save_black_48dp" /> 


<CheckBox 
    android:id="@+id/buttocks_left" 
    style="@style/InjectionCheckbox" 
    android:layout_below="@+id/abdomen_left" 
    android:layout_alignLeft="@+id/arm_left" 
    android:layout_alignStart="@+id/arm_left" 
    android:layout_marginLeft="24dp" 
    android:layout_marginStart="24dp" /> 

<CheckBox 
    android:id="@+id/arm_left" 
    style="@style/InjectionCheckbox" 
    android:layout_marginRight="74dp" 
    android:layout_marginEnd="74dp" 
    android:layout_above="@+id/abdomen_left" 
    android:layout_toLeftOf="@+id/save" 
    android:layout_toStartOf="@+id/save" 
    android:layout_marginBottom="16dp" /> 

<CheckBox 
    android:id="@+id/buttocks_right" 
    style="@style/InjectionCheckbox" 
    android:layout_width="wrap_content" 
    android:layout_alignBaseline="@+id/buttocks_left" 
    android:layout_alignBottom="@+id/buttocks_left" 
    android:layout_toRightOf="@+id/buttocks_left" 
    android:layout_toEndOf="@+id/buttocks_left" /> 

<CheckBox 
    android:id="@+id/arm_right" 
    style="@style/InjectionCheckbox" 
    android:layout_alignBaseline="@+id/arm_left" 
    android:layout_alignBottom="@+id/arm_left" 
    android:layout_toRightOf="@+id/buttocks_right" 
    android:layout_toEndOf="@+id/buttocks_right" /> 

<CheckBox 
    android:id="@+id/abdomen_right" 
    style="@style/InjectionCheckbox" 
    android:layout_marginLeft="55dp" 
    android:layout_marginStart="55dp" 
    android:layout_centerVertical="true" 
    android:layout_alignParentLeft="true" 
    android:layout_alignParentStart="true" /> 

<CheckBox 
    android:id="@+id/thigh_right" 
    style="@style/InjectionCheckbox" 
    android:layout_marginTop="11dp" 
    android:layout_below="@+id/buttocks_left" 
    android:layout_alignLeft="@+id/abdomen_right" 
    android:layout_alignStart="@+id/abdomen_right" /> 

Answer 1

내가 당신에게 가장 여기에 도움이 될 것 어떻게 생각 PercentFrameLayout입니다. 당신이 (버전에서 업데이트 된 내용에 따라 다름) 당신의 build.gradle 파일에

compile 'com.android.support:percent:24.2.1' 

를 추가해야하므로

이

는 지원 라이브러리입니다.

너의 현재 레이아웃은 너비와 높이가 인 경우 wrap_content을 사용합니다. 화면 너비가 이미지의 너비보다 작 으면 ImageView은 이미지 자체와 다른 종횡비를 가지므로 정확한 레이아웃을 얻는 것이 어려워집니다.

좋은 방법은 적어도 두 개의 레이아웃

화면 폭이 이미지

태블릿과 같은 큰 장치에 대한 다른 레이아웃을 화면보다 작을 수 있습니다 전화와 같은 작은 장치에 대한

• 하나의 레이아웃을하는 것입니다 너비가 이미지보다 큽니다

대체 레이아웃에 익숙하지 않은 경우 How to support multiple screens을 참조하십시오.

먼저 ImageView의 종횡비가 이미지와 일치하는지 확인해야합니다. 폭이 match_parent이고 높이가 wrap_content 인 android:adjustViewBounds="true"을 지정하여이 작업을 수행하십시오.

나서 또한 match_parent의 폭 wrap_content의 높이를 갖는 PercentFrameLayout에 ImageView 랩.

이제 백분율을 사용하여 예측할 수있는보기가 있습니다. 난 당신이 연결된 이미지를 다운로드하고이 마련하는 데 사용 :

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       xmlns:app="http://schemas.android.com/apk/res-auto" 
       xmlns:tools="http://schemas.android.com/tools" 
       android:id="@+id/activity_main" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:orientation="vertical"> 

    <android.support.percent.PercentFrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_alignParentTop="true"> 

     <ImageView 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:adjustViewBounds="true" 
      android:src="@drawable/blank_body" /> 

     <CheckBox 
      android:id="@+id/abdomen_left" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:layout_marginLeftPercent="15.5%" 
      app:layout_marginTopPercent="32%"/> 

     <CheckBox 
      android:id="@+id/abdomen_right" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:layout_marginLeftPercent="25%" 
      app:layout_marginTopPercent="32%"/> 

     <CheckBox 
      android:id="@+id/thigh_left" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:layout_marginLeftPercent="15.5%" 
      app:layout_marginTopPercent="47%"/> 

     <CheckBox 
      android:id="@+id/thigh_right" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:layout_marginLeftPercent="25%" 
      app:layout_marginTopPercent="47%"/> 

     <CheckBox 
      android:id="@+id/arm_left" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:layout_marginLeftPercent="57%" 
      app:layout_marginTopPercent="22%"/> 

     <CheckBox 
      android:id="@+id/arm_right" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:layout_marginLeftPercent="82.5%" 
      app:layout_marginTopPercent="22%"/> 

     <CheckBox 
      android:id="@+id/buttocks_left" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:layout_marginLeftPercent="64%" 
      app:layout_marginTopPercent="38.5%"/> 

     <CheckBox 
      android:id="@+id/buttocks_right" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:layout_marginLeftPercent="73.5%" 
      app:layout_marginTopPercent="38.5%"/> 

    </android.support.percent.PercentFrameLayout> 

</RelativeLayout> 

가 (미안 해요, 난 당신의 스타일을 제거하며 내가 그에게 접근하지 않았기 때문에.예를 들어 같은 더 큰 당신이 필요로 RelativeLayout (I 보여 센터/상단에서

<android.support.percent.PercentFrameLayout 
     android:layout_width="600dp" 
     android:layout_height="wrap_content" 
     android:layout_alignParentTop="true" 
     android:layout_centerHorizontal="true"> 

다음이 위치합니다 :) 더 큰 장치의 경우

, 대체 레이아웃은 PercentFrameLayout에 대한 고정 폭을 지정해야합니다).

이렇게하면 꽤 괜찮은 결과를 얻을 수 있습니다.

확인란의 왼쪽과 위로 측정하므로 화면 너비에 따라 약간의 왜곡이 나타납니다. 픽셀 완벽 레이아웃의 경우 관심 지점에서 확인란의 중심을 바로 배치 할 수있는 사용자 정의 레이아웃 구성 요소를 만들어야합니다.