1. 首頁
  2. 問答
  3. 如何使UI在橫向模式下看起來相同？

如何使UI在橫向模式下看起來相同？

2013-08-16 50 views
4

我的LinearLayout隨屏幕方向發生變化。在縱向模式下，它看起來完美：如何使UI在橫向模式下看起來相同？

portrait mode

但在橫向模式下，它看起來像這樣：

landscape mode

如何解決我的UI看起來相同的兩種模式？

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:background="@drawable/border" 
    android:orientation="vertical"> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal"> 

     <ImageView 
      android:id="@+id/imgfourth1" 
      android:layout_width="70dp" 
      android:layout_height="50dp" 
      android:layout_marginRight="25dp" 
      android:layout_marginLeft="25dp" 
      android:paddingTop="2dp"  
      android:src="@drawable/amlet1" /> 

     <ImageView 
      android:id="@+id/imgfourth2" 
      android:layout_width="70dp" 
      android:paddingTop="2dp" 
      android:layout_height="50dp" 
      android:layout_marginRight="25dp"  
      android:contentDescription="@null" 
      android:src="@drawable/lnch1" /> 

     <ImageView 
      android:id="@+id/imgfourth3" 
      android:layout_marginRight="25dp" 
      android:paddingLeft="20dp" 
      android:layout_width="70dp" 
      android:layout_height="50dp" 
      android:paddingTop="2dp" 
      android:contentDescription="@null" 
      android:src="@drawable/supper" /> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="20dp" 
     android:background="@drawable/border4" 
     android:orientation="horizontal" > 

     <TextView 
      android:id="@+id/txtfth1" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_marginTop="2dp" 
      android:layout_marginLeft="25dp" 
      android:paddingLeft="10dp" 
      android:paddingRight="10dp" 
      android:gravity="center" 
      android:contentDescription="@null" 
      android:text="Breakfast" /> 

     <TextView 
      android:id="@+id/txtfth2" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_marginLeft="25dp" 
      android:paddingLeft="10dp" 
      android:gravity="center" 
      android:paddingRight="35dp"  
      android:layout_marginTop="2dp" 
      android:contentDescription="@null" 
      android:text="Lunch" /> 

     <TextView 
      android:id="@+id/txtfth3" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_marginLeft="20dp" 
      android:layout_marginTop="2dp" 
      android:gravity="center" 
      android:paddingRight="30dp" 
      android:contentDescription="@null" 
      android:text="Supper" /> 
    </LinearLayout> 
</LinearLayout>

來源

2013-08-16 user2686011

+0

請縮進代碼。它不可讀。 – taxeeta

+0

我粘貼我的上面的potrail和風景的圖像請參閱url – user2686011

+0

請注意，您的問題有語法問題和拼寫錯誤。 – taxeeta

回答

1

您可以創建兩種不同的佈局，一種用於縱向模式，另一種用於橫向模式。這將解決你的問題。

Keep your 
1. portrait mode layout in res/layout folder and 
2. landscape mode layout in res/layout-land folder.

Android會根據您的方向採取適當的佈局。

*編輯：單佈局* **

如果你想使用單佈局縱向和橫向然後下面應該幫助你

我已經使用android:weightsum和android:layout_weight使它看起來不錯。

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


<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    android:weightSum="100"> 

    <ImageView 
     android:id="@+id/imgfourth1" 
     android:layout_width="0dip" 
     android:layout_height="wrap_content" 
     android:layout_weight="33"    
     android:src="@drawable/ic_launcher" /> 

    <ImageView 
     android:id="@+id/imgfourth2" 
     android:layout_width="0dip" 
     android:layout_height="wrap_content" 
     android:layout_weight="33" 
     android:src="@drawable/ic_launcher" /> 

    <ImageView 
     android:id="@+id/imgfourth3" 
     android:layout_width="0dip" 
     android:layout_height="wrap_content" 
     android:layout_weight="33" 
     android:src="@drawable/ic_launcher" /> 
</LinearLayout> 

<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="20dp"   
    android:orientation="horizontal" 
    android:weightSum="100" > 

    <TextView 
     android:id="@+id/txtfth1" 
     android:layout_width="0dip" 
     android:layout_height="wrap_content" 
     android:layout_weight="33" 
     android:gravity="center_horizontal" 
     android:text="Breakfast" /> 

    <TextView 
     android:id="@+id/txtfth2" 
     android:layout_width="0dip" 
     android:layout_height="wrap_content" 
     android:layout_weight="33" 
     android:gravity="center_horizontal" 
     android:text="Lunch" /> 

    <TextView 
     android:id="@+id/txtfth3" 
     android:layout_width="0dip" 
     android:layout_height="wrap_content" 
     android:layout_weight="33" 
     android:gravity="center_horizontal" 
     android:text="Supper" /> 
</LinearLayout>

來源

2013-08-16 13:14:07

+0

怎麼樣？創建兩個不同的佈局？ – user2686011

+0

2解決簡單問題的佈局是不好的建議。很快我們的傢伙就需要創建* 2佈局文件。然後爲所有決議。真的很糟糕的建議。 – taxeeta

+0

在res文件夾中創建layout-land目錄，並將佈局XML文件的橫向版本放在該目錄中。 –

2

你有3個LinearLayouts，1外和內2。在內部佈局上加上這個android:layout_gravity="center_horizontal"。這應該以兩者爲中心。

此外，您認爲您的肖像作品的事實是不正確。注意右側的空白處。

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:background="@drawable/border" 
    android:orientation="vertical" > 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center_horizontal" 
     android:orientation="horizontal" > 

     <ImageView 
      android:id="@+id/imgfourth1" 
      android:layout_width="70dp" 
      android:layout_height="50dp" 
      android:layout_marginLeft="25dp" 
      android:layout_marginRight="25dp" 
      android:paddingTop="2dp" 
      android:src="@drawable/amlet1" /> 

     <ImageView 
      android:id="@+id/imgfourth2" 
      android:layout_width="70dp" 
      android:layout_height="50dp" 
      android:layout_marginRight="25dp" 
      android:contentDescription="@null" 
      android:paddingTop="2dp" 
      android:src="@drawable/lnch1" /> 

     <ImageView 
      android:id="@+id/imgfourth3" 
      android:layout_width="70dp" 
      android:layout_height="50dp" 
      android:layout_marginRight="25dp" 
      android:contentDescription="@null" 
      android:paddingLeft="20dp" 
      android:paddingTop="2dp" 
      android:src="@drawable/supper" /> 
    </LinearLayout> 

    <LinearLayout 
     android:layout_width="wrap_content" 
     android:layout_height="20dp" 
     android:layout_gravity="center_horizontal" 
     android:background="@drawable/border4" 
     android:orientation="horizontal" > 

     <TextView 
      android:id="@+id/txtfth1" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_marginLeft="25dp" 
      android:layout_marginTop="2dp" 
      android:contentDescription="@null" 
      android:gravity="center" 
      android:paddingLeft="10dp" 
      android:paddingRight="10dp" 
      android:text="Breakfast" /> 

     <TextView 
      android:id="@+id/txtfth2" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_marginLeft="25dp" 
      android:layout_marginTop="2dp" 
      android:contentDescription="@null" 
      android:gravity="center" 
      android:paddingLeft="10dp" 
      android:paddingRight="35dp" 
      android:text="Lunch" /> 

     <TextView 
      android:id="@+id/txtfth3" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_marginLeft="20dp" 
      android:layout_marginTop="2dp" 
      android:contentDescription="@null" 
      android:gravity="center" 
      android:paddingRight="30dp" 
      android:text="Supper" /> 
    </LinearLayout> 

</LinearLayout>

來源

2013-08-16 13:30:39 taxeeta

+0

是你們右我如何解決這個問題，以顯示相同的方向 – user2686011

+0

修復它，你需要添加'android：layout_gravity =「center_horizo​​ntal 「就像你在答案中所說的那樣，你內在的佈局。我還添加了你自己的代碼。我希望你沒有更多的困惑。 – taxeeta

+0

烏爾代碼不工作在風景上看起來像這樣http://imgur.com/iq3hckx – user2686011

2

補充taxeeta的答案，只需爲您的內部LinearLayout標籤添加android:layout_gravity="center_horizontal"即可。

來源

2013-08-16 13:56:22

+0

雖然這正是我一直在說的，因爲你是新的，並有一個正確的答案。所以upvote。 – taxeeta

+0

@taxeeta，我知道這就是你一直在說的，我只是補充，因爲它在你的答案中缺少。你剛剛在第二個LinearLayout上添加了layout_gravity屬性。我不是說你的回答是錯誤的。對不起，如果它看起來像。 –

+0

這很好，沒有傷害:)。 – taxeeta

0

嘗試用這些行：

<LinearLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:weightSum="3" 
    android:orientation="horizontal"> 

    <ImageView 
     android:id="@+id/imgfourth1" 
     android:layout_width="0dip" 
     android:layout_height="50dp" 
     android:layout_weight="1" 
     android:src="@drawable/amlet1" /> 

    <ImageView 
     android:id="@+id/imgfourth2" 
     android:layout_width="0dip" 
     android:layout_height="50dp" 
     android:layout_weight="1" 
     android:src="@drawable/lnch1" /> 

    <ImageView 
     android:id="@+id/imgfourth3" 
     android:layout_width="0dip" 
     android:layout_height="50dp" 
     android:layout_weight="1" 
     android:src="@drawable/supper" /> 
</LinearLayout>

晴，你應該覺得你充滿整個屏幕，然後把它根據自己的需要，所以它會適合在風景或人像上，甚至是不同的密度。 而且我還建議你將圖像的高度放入不同的密度維度文件夾中，因此它也可以變化。

來源

2013-08-16 14:02:44 yahya

0

簡而言之安卓佈局體重=「33」 這會給33％的空間給所有三個要素，並適合任何決議在任何方向

來源

2014-09-15 17:02:43

相關問題

 相關問題