适用于手机的Android Studio布局

时间:2015-10-26 21:21:35

标签: android android-layout

为手机创建布局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>

最后是背景

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>

更新03.11.2015

我将附加Android Studio的屏幕截图。在不同设备上使用相同的XML布局时,EditText和Button放错了位置。我为每个人添加了不同的背景颜色。这是Android Studio中显示的结果,它在设备上看起来相同:

enter image description here

1 个答案:

答案 0 :(得分: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>

更新2015/11/05

因此,您希望将背景图像上的组件放置在完全相同的位置,以适应不同的屏幕尺寸。

您已计算出百分比。例如,如果您的图片尺寸为480宽度/ 640高度,那么如果您的EditText 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);
        }
});