手机的Android Studio布局

Question

为手机创建布局XML变得近乎疯狂。 也许我对Xcode的使用时间太长，或者根本不了解如何在Android上以正确的方式进行操作。

我一直在尝试创建大小（小，标准，大，xlarge）和密度的布局，但是没有任何效果。

我的屏幕背景已经固定，并且希望将两个输入字段和按钮放置在布局上。 使用相对布局，效果很好。 但是，当在设备，真实或模拟器上运行时，这些字段永远不会位于背景之上。 我究竟做错了什么？

常规布局的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>

我以全屏模式预览操作栏。 我在活动清单中也有此内容：

   <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>

最后是背景

更新-完整的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>

更新03.11.2015

我将附上Android Studio的屏幕截图。 在不同的设备上使用相同的XML布局时，EditText和Button放错了位置。 我为每种颜色设置了不同的背景色。 这是如Android Studio中所示的结果，并且在设备上看起来相同：

Answer 1

您必须在您的顶级父视图上放置背景。

例如，如果父视图是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>

更新2015/11/05

因此，您想将组件放置在背景图像上的同一位置，以适应不同的屏幕尺寸。

您已经计算出百分比。 例如，如果您的图像大小为480宽/ 640高度，则您的EditText tfPass左上角必须位于左60 /上240。

百分比是：左侧是60/480 = 12.5％顶部是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);
        }
});