2015-10-26 2 views
0

Похоже на создание макета XML для телефонов. Возможно, я был слишком длинным с Xcode или просто не понимаю, как это сделать на Android.Плагин для студии Android для телефонов

Я играл с созданием макетов для размера (маленький, обычный, большой, большой) и плотности, но ничего не работает.

У меня есть фон для моего экрана, прикрепленный, и мне нравится позиционировать два поля ввода и кнопку над макетом. Это работает отлично, используя относительную компоновку. Но при работе на устройствах, реальных или симуляторах, поля никогда не будут правы над фоном. Что я делаю не так?

XML, для нормального расположения:

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

    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:id="@+id/imageView3" 
     android:src="@drawable/login2" 
     android:scaleType="fitXY" /> 

    <EditText 
     android:layout_width="match_parent" 
     android:layout_height="50dp" 
     android:id="@+id/tfPass" 
     android:hint="CONTRASEÑA" 
     android:inputType="textPassword" 
     android:textColor="#000000" 
     android:background="#00000000" 
     android:singleLine="true" 
     android:layout_weight="1" 
     android:layout_x="3dp" 
     android:layout_y="342dp" 
     android:layout_alignTop="@+id/tfMail" 
     android:layout_marginTop="76dp" 
     android:layout_alignLeft="@+id/tfMail" 
     android:layout_alignStart="@+id/tfMail" 
     android:layout_alignRight="@+id/tfMail" 
     android:layout_alignEnd="@+id/tfMail" /> 

    <EditText 
     android:layout_width="match_parent" 
     android:layout_height="50dp" 
     android:id="@+id/tfMail" 
     android:hint="EMAIL large" 
     android:textColor="#000000" 
     android:background="#00000000" 
     android:singleLine="true" 
     android:inputType="textEmailAddress" 
     android:layout_weight="1" 
     android:layout_x="3dp" 
     android:layout_y="287dp" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" 
     android:layout_marginBottom="353dp" 
     android:layout_marginLeft="60dp" 
     android:layout_marginRight="60dp" /> 

    <ImageButton 
     android:layout_width="250dp" 
     android:layout_height="50dp" 
     android:id="@+id/btnLogin" 
     android:background="#00000000" 
     android:onClick="sel_Login2_login" 
     android:layout_weight="1" 
     android:layout_x="2dp" 
     android:layout_y="413dp" 
     android:layout_below="@+id/tfPass" 
     android:layout_centerHorizontal="true" 
     android:layout_marginTop="48dp" /> 

</RelativeLayout> 

предварительный просмотр witout панели действий и в полноэкранном режиме. Кроме того, это я имею в манифесте деятельности:

<activity 
     android:name=".Login2View" 
     android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" 
     android:configChanges="orientation" 
     android:screenOrientation="portrait" > 
     <intent-filter> 
      <action android:name="android.intent.action.MAIN" /> 
      <category android:name="android.intent.category.LAUNCHER" /> 
     </intent-filter> 
    </activity> 

и, наконец, фон

Background image for login

ОБНОВЛЕНИЕ - полный макет XML

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@drawable/login2"> 

    <EditText 
     android:layout_width="match_parent" 
     android:layout_height="50dp" 
     android:id="@+id/tfPass" 
     android:hint="CONTRASEÑA" 
     android:inputType="textPassword" 
     android:textColor="#000000" 
     android:background="#00000000" 
     android:singleLine="true" 
     android:layout_weight="1" 
     android:layout_x="3dp" 
     android:layout_y="342dp" 
     android:layout_alignTop="@+id/tfMail" 
     android:layout_marginTop="55dp" 
     android:layout_alignLeft="@+id/tfMail" 
     android:layout_alignStart="@+id/tfMail" 
     android:layout_alignRight="@+id/tfMail" 
     android:layout_alignEnd="@+id/tfMail" /> 

    <EditText 
     android:layout_width="match_parent" 
     android:layout_height="50dp" 
     android:id="@+id/tfMail" 
     android:hint="EMAIL normal" 
     android:textColor="#000000" 
     android:background="#00000000" 
     android:singleLine="true" 
     android:inputType="textEmailAddress" 
     android:layout_weight="1" 
     android:layout_x="3dp" 
     android:layout_y="287dp" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true" 
     android:layout_marginBottom="255dp" 
     android:layout_marginLeft="50dp" 
     android:layout_marginRight="50dp" /> 

    <ImageButton 
     android:layout_width="215dp" 
     android:layout_height="50dp" 
     android:id="@+id/btnLogin" 
     android:background="#00000000" 
     android:onClick="sel_Login2_login" 
     android:layout_weight="1" 
     android:layout_x="2dp" 
     android:layout_y="413dp" 
     android:layout_below="@+id/tfPass" 
     android:layout_centerHorizontal="true" 
     android:layout_marginTop="20dp" /> 

</RelativeLayout> 

UPDATE 03.11.2015

Я приложу скриншот от Android Studio. При использовании одного и того же формата XML на разных устройствах EditText и Button теряются. Я поместил другой цвет фона для каждого. Это результат, как показано в Android Studio и она выглядит так же на устройствах:

enter image description here

+0

Какова ваша предыстория? "imageView3" с @ drawable/login2? – LaurentY

+0

Да, это правильно –

+1

Почему вы не применяете фон к корневому расположению – Prakhar

ответ

0

Вы должны поставить фон на ваш вид сверху родительским.

, например, если родительский вид является RelativeLayout вы должны сделать это:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@drawable/login2"> 

<EditText 
    android:layout_width="match_parent" 
    android:layout_height="50dp" 
    android:id="@+id/tfPass" 
    android:hint="CONTRASEÑA" 
    android:inputType="textPassword" 
    android:textColor="#000000" 
    android:background="#00000000" 
    android:singleLine="true" 
    android:layout_weight="1" 
    android:layout_x="3dp" 
    android:layout_y="342dp" 
    android:layout_alignTop="@+id/tfMail" 
    android:layout_marginTop="76dp" 
    android:layout_alignLeft="@+id/tfMail" 
    android:layout_alignStart="@+id/tfMail" 
    android:layout_alignRight="@+id/tfMail" 
    android:layout_alignEnd="@+id/tfMail" /> 

<EditText 
    android:layout_width="match_parent" 
    android:layout_height="50dp" 
    android:id="@+id/tfMail" 
    android:hint="EMAIL large" 
    android:textColor="#000000" 
    android:background="#00000000" 
    android:singleLine="true" 
    android:inputType="textEmailAddress" 
    android:layout_weight="1" 
    android:layout_x="3dp" 
    android:layout_y="287dp" 
    android:layout_alignParentBottom="true" 
    android:layout_alignParentLeft="true" 
    android:layout_alignParentStart="true" 
    android:layout_marginBottom="353dp" 
    android:layout_marginLeft="60dp" 
    android:layout_marginRight="60dp" /> 

<ImageButton 
    android:layout_width="250dp" 
    android:layout_height="50dp" 
    android:id="@+id/btnLogin" 
    android:background="#00000000" 
    android:onClick="sel_Login2_login" 
    android:layout_weight="1" 
    android:layout_x="2dp" 
    android:layout_y="413dp" 
    android:layout_below="@+id/tfPass" 
    android:layout_centerHorizontal="true" 
    android:layout_marginTop="48dp" /> 

</RelativeLayout> 

UPDATE 2015/11/05

Так что вы хотите разместить компоненты на фоновое изображение в точно такой же место для разных размеров экрана.

Вы рассчитываете проценты. Например, если ваше изображение имеет размер 480 ширины/640 высоты, если ваш левый верхний угол tfPass должен располагаться на 60 левом/240 верхнем.

Процентное содержание: Левые 60/480 = 12,5% Top составляет 210/640 = 32,8%

Следующая в вашем onCreate методом найти макет с фоном и создавать и место EditText с процентами, как это:

RelativeLayout headerLayout = (RelativeLayout)findviewbyid(R.id.headerLayout); 
EditText tfPass = new EditText(this); 
ViewTreeObserver observer = headerLayout.getViewTreeObserver(); 
observer.addOnGlobalLayoutListener(new OnGlobalLayoutListener() { 
     @Override 
     public void onGlobalLayout() { 
      int width = headerLayout.getMeasuredWidth(); 
      int height = headerLayout.getMeasuredHeight(); 
      headerLayout .getViewTreeObserver().removeGlobalOnLayoutListener(
       this); 

      //add + places components 
      RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(WITH_CALCULATED_WITH_PERCENTAGES, HEIGHT_WITH_CALCULATED_WITH_PERCENTAGES); 
      params.leftMargin = (int)(width*12.5); 
      params.topMargin = (int)(height*32.8); 
      headerLayout.addView(tfPass, params); 
     } 
}); 
+0

Спасибо. Сделал это, но все тот же эффект. На Nexus 5 он выглядит как сконструированный, но на Galaxy S4, используя тот же макет (как и на Nexus 5), EditText перемещается на 15 пикселей вниз. Использование Fullscreen и NoActionBar, возможно, это повлияло на макет? –

+0

@DietmarSchwarzWebers, пожалуйста, поделитесь своим полным макетом – LaurentY

+0

LaurentY, у меня есть полный формат XML, добавленный в качестве обновления моего сообщения –