适用于手机的Android Studio布局

在为手机创建布局XML时变得非常疯狂。也许我在Xcode上花了太长时间，或者根本不明白如何在Android上正确地使用它。适用于手机的Android Studio布局

我已经玩过创建大小（小，正常，大，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>

UPDATE 2015年3月11日

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

来源

2015-10-26 Dietmar Schwarz Webers

您的背景是什么？ “imageView3”与@ drawable/login2？ – LaurentY

是的，这是正确的 –

为什么你不应用背景到根布局 – Prakhar

你必须把背景上的顶父视图。

例如，如果父视图是一个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月5日

所以要放置在完全相同的一个背景图像上的组件放置不同的屏幕尺寸。

您已经计算出百分比。例如，如果您的图片的尺寸为480宽/ 640高，那么您的左上角必须位于60左/ 240顶部。

百分比是：左是四百八分之六十= 12.5％顶部六百四十零分之二百十= 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); 
     } 
});

来源

2015-10-27 13:21:10 LaurentY

谢谢。没有，但效果仍然相同。在Nexus 5上它看起来很像设计，但在Galaxy S4上，使用相同的布局（正常情况下与Nexus 5一样），EditText被移动大约15px。使用全屏和NoActionBar，这可能会影响布局？ –

@DietmarSchwarzWebers，请分享您的完整布局 – LaurentY

LaurentY，我已将完整的布局XML添加为我的文章 –

适用于手机的Android Studio布局

回答

相关问题