Question

布局不同的屏幕

正如我们以前所知，通过为特定的屏幕尺寸设计一个布局，总是有屏幕尺寸，具有相同布局并没有所有元素（ TextViews，ImageViews等。）在正确的空间。

以下是示例：

和

Same layout in the Samsung Galaxy S6 and S5

XML代码：

    <?xml version="1.0" encoding="utf-8"?>
<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: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=".Results">




    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:id="@+id/warning"
        android:layout_marginTop="6dp"
        android:src="@drawable/warning"
        android:layout_below="@+id/textView3"
        android:layout_alignRight="@+id/healthcircle"
        android:layout_alignEnd="@+id/healthcircle" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Waist circumference"
        android:id="@+id/textView19"
        android:textSize="15dp"
        android:layout_marginTop="47dp"
        android:layout_below="@+id/BMI"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="BMI Score"
        android:onClick="bmi"
        android:textSize="15dp"
        android:id="@+id/textView3"
        android:layout_marginTop="88dp"
        android:layout_below="@+id/healthcircle"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="N/A"
        android:textSize="25dp"
        android:onClick="bmi"
        android:id="@+id/BMI"
        android:textColor="#000000"
        android:layout_below="@+id/textView3"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="N/A"
        android:textSize="25dp"
        android:id="@+id/textView20"
        android:textColor="#000000"
        android:layout_alignTop="@+id/warning1"
        android:layout_centerHorizontal="true" />

    <ImageView
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:id="@+id/warning1"
        android:layout_marginTop="6dp"
        android:src="@drawable/warning"
        android:layout_below="@+id/textView19"
        android:layout_alignRight="@+id/healthcircle"
        android:layout_alignEnd="@+id/healthcircle" />

    <ImageView
        android:layout_width="220dp"
        android:layout_height="220dp"
        android:id="@+id/healthcircle"
        android:src="@drawable/healthcircle1"
        android:layout_marginTop="58dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />






    <ImageView
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:id="@+id/imageView2"
        android:onClick="profile"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:src="@drawable/profile"

         />




</RelativeLayout>

...在查看这些图片时，我正在设计三星Galaxy J5和Nexus，但是在Galaxy S5和S6中运行应用程序时，＆＃34; BMI得分＆＃34;是在错误的地方...我根据＆＃34; A＆＃34; -picture的地方做了很多改变，这样BMI得分就适合Galaxy S5和S6 ...＆＃34;

Answer 1

要设计一个布局，在上半部分显示圆形图像，然后在下半部分显示其他内容，您可以参考以下布局[psudocode]：

<LinearLayout>

    <FrameLayout ...
        android:layout_weight="1">

        // Circle Image with center alignment and textView above it 
    </FrameLayout>

    <RelativeLayout...
        android:layout_weight="1">

        // All other views here

    </RelativeLayout>      

</LinearLayout>

<强>更新以下是您请求中的整个格式化布局代码：

<?xml version="1.0" encoding="utf-8"?>


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              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">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <ImageView
            android:id="@+id/healthcircle"
            android:layout_width="180dp"
            android:layout_height="180dp"
            android:layout_gravity="center"
            android:src="@drawable/healthcircle1"/>


    </FrameLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <ImageView
            android:id="@+id/warning"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_below="@+id/textView3"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="6dp"
            android:layout_toRightOf="@id/BMI"
            android:src="@drawable/warning"/>

        <TextView
            android:id="@+id/textView19"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/BMI"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="45dp"
            android:text="Waist circumference"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textSize="15dp"/>

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="40dp"
            android:onClick="bmi"
            android:text="BMI Score"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textSize="15dp"/>

        <TextView
            android:id="@+id/BMI"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textView3"
            android:layout_centerHorizontal="true"
            android:onClick="bmi"
            android:text="N/A"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#000000"
            android:textSize="25dp"/>

        <TextView
            android:id="@+id/textView20"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/textView19"
            android:layout_centerHorizontal="true"
            android:text="N/A"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#000000"
            android:textSize="25dp"/>

        <ImageView
            android:id="@+id/warning1"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_below="@+id/textView19"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="6dp"
            android:layout_toRightOf="@id/textView20"
            android:src="@drawable/warning"/>


        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:onClick="profile"
            android:src="@drawable/profile"/>


    </RelativeLayout>


</LinearLayout>

不同屏幕上的布局边距

1 个答案: