2017-04-20 39 views
0

我仍然不知道如何使用布局,当我试图编写多个屏幕尺寸。我需要插入一个图片说“脸谱”的距离顶部和文本框一点点。Android - 如何构造一个简单的布局

但是,如果我使用边距,它会在大屏幕尺寸上搞乱我的布局。

能向我解释的人这幅画的布局:

Facebook Login Page

回答

0

我也遇到这样的once.I解决了这个创造布局不同的屏幕sizes.for的问题,创建单独的为不同屏幕布局文件夹并在其中放置相应的布局。

布局sw720dp为720dp设备 布局sw600dp为600dp的设备

变化根据您的需要DP值。 你也可以针对不同尺寸的图像,并把它midmap文件夹

,或者你可以从我的项目之一

<LinearLayout 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:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="@color/amna2" 
android:gravity="center_horizontal" 
android:orientation="vertical" 
android:paddingBottom="@dimen/activity_vertical_margin" 
android:paddingLeft="@dimen/activity_horizontal_margin" 
android:paddingRight="@dimen/activity_horizontal_margin" 
android:paddingTop="@dimen/activity_vertical_margin" 
tools:context="com.codeslayers.amnalocations.LoginActivity"> 




<ImageView 
    android:id="@+id/imageView" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    app:srcCompat="@drawable/amna" /> 

<LinearLayout 
    android:id="@+id/email_login_form" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="vertical"> 

    <android.support.design.widget.TextInputLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="150dp"> 

     <EditText 
      android:id="@+id/id" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:hint="Van Name" 
      android:inputType="textEmailAddress" 
      android:maxLines="1" 
      android:singleLine="true" 
      android:textColor="@color/amna3" 
      android:textColorHint="@color/amna3" 
      android:textColorLink="@color/amna3" /> 

    </android.support.design.widget.TextInputLayout> 

    <android.support.design.widget.TextInputLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <EditText 
      android:id="@+id/name" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:hint="Name" 
      android:maxLines="1" 
      android:singleLine="true" 

      android:textColor="@color/amna3" 
      android:textColorHint="@color/amna3" 
      android:textColorLink="@color/amna3" /> 

    </android.support.design.widget.TextInputLayout> 

    <android.support.design.widget.TextInputLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <EditText 
      android:id="@+id/district" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:hint="Destination" 
      android:maxLines="1" 
      android:singleLine="true" 
      android:textColor="@color/amna3" 
      android:textColorHint="@color/amna3" 
      android:textColorLink="@color/amna3" /> 

    </android.support.design.widget.TextInputLayout> 

    <android.support.design.widget.TextInputLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <EditText 
      android:id="@+id/dbname" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:hint="Database Name" 
      android:maxLines="1" 
      android:singleLine="true" 
      android:textColor="@color/amna3" 
      android:textColorHint="@color/amna3" 
      android:textColorLink="@color/amna3" /> 

    </android.support.design.widget.TextInputLayout> 


    <Button 
     android:id="@+id/email_sign_in_button" 

     style="?android:attr/buttonBarButtonStyle" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="20dp" 
     android:text="@string/action_sign_in" 
     android:textColor="@color/amna4" />/ 
    android:textStyle="bold" /> 

</LinearLayout> 

+0

这似乎很多工作。我有20种不同的布局。所以我需要创造像他们100个? – adiajdiadj

+0

请看我编辑的答案 –

0

你也可以做一些这样的事有不同的尝试此布局dimen.xml(values-sw600dp,values-sw720dp)。所以你不必重复布局文件。

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

    <TextView 
     android:textSize="32dp" 
     android:layout_above="@+id/inputFields" 
     android:id="@+id/facebook_logo" 
     android:gravity="center" 
     android:text="Facebook" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"/> 

    <LinearLayout 
     android:layout_marginTop="45dp" 
     android:layout_centerInParent="true" 
     android:id="@+id/inputFields" 
     android:gravity="center" 
     android:paddingLeft="10dp" 
     android:paddingRight="10dp" 
     android:orientation="vertical" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <EditText 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"/> 

     <EditText 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"/> 


     <Button 
      android:text="Login" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"/> 

     <TextView 
      android:gravity="center" 
      android:text="Forgot password ?" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content"/> 


    </LinearLayout> 


    <TextView 
     android:id="@+id/signupTxt" 
     android:layout_marginBottom="10dp" 
     android:layout_alignParentBottom="true" 
     android:text="Signup for Facebook" 
     android:layout_centerHorizontal="true" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content"/> 

    <ImageView 
     android:layout_alignParentBottom="true" 
     android:layout_marginBottom="10dp" 
     android:layout_alignParentRight="true" 
     android:src="@drawable/rotate_refresh" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content"/> 


</RelativeLayout>