2017-03-29 25 views
0

我創建了一個表,其中我想顯示9個動物和一個下一個箭頭按鈕。每行有3只動物,所以動物有3行,下一個箭頭按鈕最後一行。我的問題是,在不同的屏幕尺寸下,行不會相同縮小,但只有最後一行會有結果,下一個箭頭按鈕會消失。TableLayout行不縮小,但只有最後一行縮小到不同的屏幕尺寸

這是它的外觀在Nexus 4

This is how it looks like on a Nexus 4

這就是它的外觀,有一個3.2" 大小

This is how it looks on a 3.2" screen

這裏是一個更小的屏幕我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:id="@+id/activity_animals" 
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" 
android:background="@color/background" 
tools:context="kidsbook.jok.kidsbook.Animals"> 

<TableLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_above="@+id/ads_text" 
    android:weightSum=".9" 
    android:id="@+id/animalsPage1" 
    android:visibility="visible"> 

    <TableRow 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:weightSum=".9"> 

     <Button 
      android:background="@drawable/cat" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/catSounds" 
      android:layout_weight=".3"/> 

     <Button 
      android:background="@drawable/dog" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/dogSounds" 
      android:layout_weight=".3"/> 

     <Button 
      android:background="@drawable/chicken" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/chickenSounds" 
      android:layout_weight=".3"/> 
    </TableRow> 

    <TableRow 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:weightSum=".9"> 

     <Button 
      android:background="@drawable/horse" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/horseSounds" 
      android:layout_weight=".3"/> 

     <Button 
      android:background="@drawable/frog" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/frogSounds" 
      android:layout_weight=".3"/> 

     <Button 
      android:background="@drawable/pig" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/pigSounds" 
      android:layout_weight=".3"/> 
    </TableRow> 

    <TableRow 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:weightSum=".9"> 

     <Button 
      android:background="@drawable/cock" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/cockSounds" 
      android:layout_weight=".3"/> 

     <Button 
      android:background="@drawable/donkey" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/donkeySounds" 
      android:layout_weight=".3"/> 

     <Button 
      android:background="@drawable/sheep" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:id="@+id/sheepSounds" 
      android:layout_weight=".3"/> 
    </TableRow> 

    <TableRow 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:gravity="end" 
     android:weightSum="1"> 

     <Button 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight=".22" 
      android:id="@+id/nextButtonAnimalsTo2" 
      android:background="@drawable/next_arrow" 
      android:onClick="toPage2from1"/> 
    </TableRow> 

</TableLayout> 

<TextView 
    android:text="@string/ads" 
    android:layout_gravity="center" 
    android:layout_width="match_parent" 
    android:minHeight="50dp" 
    android:layout_height="wrap_content" 
    android:gravity="center" 
    android:textSize="20sp" 
    android:id="@+id/ads_text" 
    android:layout_alignParentBottom="true"/> 

</RelativeLayout> 

任何建議和幫助將不勝感激,並提前謝謝大家。

回答

1

@Smolikas,我認爲你的觀點在小屏幕上重疊,因爲你使用的是RelativeLayout。您可以在滾動視圖內使用垂直方向的LinearLayout。它會爲你工作。

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/scrollView" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fillViewport="true"> 

    <LinearLayout 
     android:id="@+id/activity_animals" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     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"> 

您的TableLayout & Textview。

</LinearLayout> 
</ScrollView> 
1

試試這個佈局:使用Linearlayout,而不是Relativelayout和管理佈局的重量和weightsum正確劃分屏幕。

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/activity_animals" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@color/color_white" 
    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" 
    android:weightSum="5"> 

    <TableLayout 
     android:id="@+id/animalsPage1" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_above="@+id/ads_text" 
     android:layout_weight="4" 
     android:visibility="visible" 
     android:weightSum="4"> 

     <TableRow 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:weightSum="3"> 

      <Button 
       android:id="@+id/catSounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 

      <Button 
       android:id="@+id/dogSounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 

      <Button 
       android:id="@+id/chickenSounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 
     </TableRow> 

     <TableRow 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:weightSum="3"> 

      <Button 
       android:id="@+id/horseSounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 

      <Button 
       android:id="@+id/frogSounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 

      <Button 
       android:id="@+id/pigSounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 
     </TableRow> 

     <TableRow 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:weightSum="3"> 

      <Button 
       android:id="@+id/cockSounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 

      <Button 
       android:id="@+id/donkeySounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 

      <Button 
       android:id="@+id/sheepSounds" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" /> 
     </TableRow> 

     <TableRow 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:gravity="end" 
      android:weightSum="3"> 

      <Button 
       android:id="@+id/nextButtonAnimalsTo2" 
       android:layout_width="0dp" 
       android:layout_height="match_parent" 
       android:layout_weight="1" 
       android:background="@mipmap/ic_launcher" 
       android:onClick="toPage2from1" /> 
     </TableRow> 

    </TableLayout> 

    <TextView 
     android:id="@+id/ads_text" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_alignParentBottom="true" 
     android:layout_gravity="center" 
     android:layout_weight="1" 
     android:gravity="center" 
     android:text="Your TEXT" 
     android:textColor="#000000" 
     android:textSize="20sp" /> 

</LinearLayout> 

輸出:

enter image description here