Question

对Android而言还是很新的，我的任务是制作一个看起来与设计师草图完全相同的布局。尝试使用线性布局和重量，以确保元素与背景相关的位置，无论分辨率如何。

最终结果应如下所示：

在实际设备上，它看起来像这样的http：

日期和温度的错位似乎与字体大小有关（字体越大，错位越多）。为什么会这样？

我的代码：

<?xml version="1.0"?>
<LinearLayout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/all"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/monday"
android:includeFontPadding="false"
android:orientation="vertical"
tools:context=".MainActivity" >

<LinearLayout
    android:id="@+id/hwrap1"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1.70"
    android:orientation="horizontal" >
<!-- wrapper for the first line (Time/day and namedays) -->

    <LinearLayout
        android:id="@+id/bloat1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.20"
        android:orientation="horizontal" >
    </LinearLayout>
 <!-- empty space before day and time -->


    <!-- wrapper around time and day -->

    <TextView
        android:id="@+id/dayOfWeek"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.90"
        android:gravity="top|left"
        android:text="PIRMDIENA"
        android:textAllCaps="true"
        android:textColor="#FFFFFF"
        android:textSize="45dp" />

    <LinearLayout
        android:id="@+id/bloat2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.1"
        android:orientation="horizontal" >
    </LinearLayout>
<!-- empty space before namedays -->

    <TextView
        android:id="@+id/nameDays"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1.9"
        android:gravity="left|center"
        android:text="Arnijs, Jorijs, Blobijs"
        android:textColor="#041869"
        android:textSize="60dp" />
</LinearLayout>

<LinearLayout
    android:id="@+id/hwrap2"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1.20"
    android:orientation="horizontal" >
<!-- wrapper around second line (date and temp) -->

    <LinearLayout
        android:id="@+id/bloat3"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.33"
        android:orientation="horizontal" >
 <!-- space before date -->
    </LinearLayout>

    <TextView
        android:id="@+id/date"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3.65"
        android:gravity="left|center"
        android:text="DATE"
        android:textAllCaps="true"
        android:textColor="#FFFFFF"
        android:textSize="80dp" />

    <TextView
        android:id="@+id/temperature"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1.1"
        android:gravity="center"
        android:text="14c"
        android:textColor="#FFFFFF"
        android:textSize="80dp" />
  </LinearLayout>

  <LinearLayout
    android:id="@+id/hwrap3"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="3.9"
    android:orientation="horizontal" >
   <!-- wrapper around message (3rd line) -->

    <LinearLayout
        android:id="@+id/bloat4"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:orientation="horizontal" >
   <!-- space before message -->
    </LinearLayout>

    <TextView
        android:id="@+id/msg"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="6"
        android:gravity="center|left"
        android:text="Deep text about life... much sense such fullfillment wow"
        android:textColor="#FFFFFF"
        android:textSize="45dp" />

    <LinearLayout
        android:id="@+id/bloat5"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:orientation="horizontal" >
 <!-- space after message -->
    </LinearLayout>
</LinearLayout>

</LinearLayout>

Answer 1

尝试这样的事情，并使用scrollview来适应所有屏幕

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

    <!-- wrapper for the first line (Time/day and namedays) -->

    <LinearLayout
        android:id="@+id/bloat1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.20"
        android:orientation="horizontal" >
    </LinearLayout>
    <!-- empty space before day and time -->


    <!-- wrapper around time and day -->

    <TextView
        android:id="@+id/dayOfWeek"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.90"
        android:gravity="top|left"
        android:text="PIRMDIENA"
        android:textAllCaps="true"
        android:textColor="#FFFFFF"
        android:textSize="45dp" />

    <LinearLayout
        android:id="@+id/bloat2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.1"
        android:orientation="horizontal" >
    </LinearLayout>
    <!-- empty space before namedays -->

    <TextView
        android:id="@+id/nameDays"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1.9"
        android:gravity="left|center"
        android:text="Arnijs, Jorijs, Blobijs"
        android:textColor="#041869"
        android:textSize="60dp" />
</LinearLayout>

<LinearLayout
    android:id="@+id/hwrap2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/hwrap1"
    android:orientation="horizontal" >

    <!-- wrapper around second line (date and temp) -->

    <LinearLayout
        android:id="@+id/bloat3"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.33"
        android:orientation="horizontal" >

        <!-- space before date -->
    </LinearLayout>

    <TextView
        android:id="@+id/date"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3.65"
        android:text="DATE"
        android:textAllCaps="true"
        android:textColor="#FFFFFF"
        android:textSize="80sp" />

    <TextView
        android:id="@+id/temperature"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1.1"
        android:text="14c"
        android:textColor="#FFFFFF"
        android:textSize="80sp" />
</LinearLayout>

<LinearLayout
    android:id="@+id/hwrap3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/hwrap2"
    android:orientation="horizontal" >

    <!-- wrapper around message (3rd line) -->

    <LinearLayout
        android:id="@+id/bloat4"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:orientation="horizontal" >

        <!-- space before message -->
    </LinearLayout>

    <TextView
        android:id="@+id/msg"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="6"
        android:text="Deep text about life... much sense such fullfillment wow"
        android:textColor="#FFFFFF"
        android:textSize="45dp" />

    <LinearLayout
        android:id="@+id/bloat5"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:orientation="horizontal" >

        <!-- space after message -->
    </LinearLayout>
</LinearLayout>

基于线性权重的布局中错误放置的文本视图

1 个答案: