基於線性權重的錯位文字瀏覽

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

嘗試這樣的事情，還可以使用滾動型，以適合所有屏幕

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