2012-10-31 79 views
2

關於ScrollViews通常的問題對兒童體重的屬性似乎是如何使用fillViewport讓滾動型延伸到整個屏幕。我的問題是相似的,但走另一條路:)的LinearLayout裏面滾動型

我得到了一個包含多個元素的LinearLayout。除了一個元素以外,所有元素都有固定的高度,特殊的元素是應該伸展以填充剩餘空間的ImageView。這工作得很好:)

現在我想把的LinearLayout成滾動型,因爲我的一些元素將會在運行時擴大(如點擊「更多」 -icon一個可擴展一個TextView)。在未擴展版本中,我希望所有元素都適合屏幕,就好像ScrollView不存在一樣。

不幸的是,纏繞在的LinearLayout了滾動時,該ImageView的縮放到最大範圍UND畫面不適合屏幕。你有什麼想法如何實現我的目標?

我在一個示例應用問題再次出現,與大家分享:

<ScrollView 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:fillViewport="true" > 

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" > 

     <ImageView 
      android:layout_width="fill_parent" 
      android:layout_height="0px" 
      android:layout_weight="1" 
      android:background="#ffff0000" 
      android:scaleType="fitCenter" 
      android:src="@drawable/background" /> 

    <TextView 
     android:layout_width="fill_parent" 
     android:layout_height="80dp" 
     android:background="#ff00ff00" 
     android:text="element 2" 
     tools:context=".MainActivity" /> 

     <TextView 
      android:layout_width="fill_parent" 
      android:layout_height="80dp" 
      android:background="#ff00ff00" 
      android:text="element 1" 
      tools:context=".MainActivity" /> 
    </LinearLayout> 

</ScrollView> 

下面是兩個版本的截圖:

Screenshot inside ScrollView (notice the scrollbar and cropping on element 1)Screenshot without ScrollView

上面的一個是佈局與滾動視圖(注意滾動條和裁剪元素1),下面沒有。

更新:圖像視圖中圖像的原始高度大於屏幕。所以它應該被縮小(這就是爲什麼它具有權重1和scaleType設置)。

解決方案:下面的代碼解決了這個問題對我來說(基於Luksprog答案)

主要活動(節選,佈局的變化是由點擊ImageView的誘導):

@Override 
public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 

    scrollView = (ScrollView) findViewById(R.id.scroller); 
    frame = (FrameLayout) findViewById(R.id.frame); 
    layout = (LinearLayout) findViewById(R.id.layout); 

    final ImageView image = (ImageView) findViewById(R.id.image); 
    image.setOnClickListener(new OnClickListener() { 

     @Override 
     public void onClick(View v) { 
      ImageView image = (ImageView) findViewById(R.id.image); 
      frame.removeView(layout); 
      scrollView.addView(layout); 
      image.getLayoutParams().height = image.getHeight(); 
     } 
    }); 

} 

佈局XML文件

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/frame" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    > 

    <ScrollView 
     android:id="@+id/scroller" 
     android:layout_height="fill_parent" 
     android:layout_width="fill_parent" 
     android:fillViewport="true" 
     > 

    </ScrollView> 

    <LinearLayout 
     android:id="@+id/layout" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" > 

     <ImageView 
      android:id="@+id/image" 
      android:layout_width="fill_parent" 
      android:layout_height="0px" 
      android:layout_weight="1" 
      android:background="#ffff0000" 
      android:scaleType="fitCenter" 
      android:src="@drawable/background" /> 

     <TextView 
      android:id="@+id/text1" 
      android:layout_width="fill_parent" 
      android:layout_height="80dp" 
      android:background="#ff00ff00" 
      android:text="element 2" 
      tools:context=".MainActivity" /> 

     <TextView 
      android:layout_width="fill_parent" 
      android:layout_height="80dp" 
      android:background="#ff00ff00" 
      android:text="element 1" 
      tools:context=".MainActivity" /> 
     <TextView 
      android:layout_width="fill_parent" 
      android:layout_weight="0.1" 
      android:layout_height="0px" 
      android:background="#ff00ff00" 
      android:text="element 3" 
      tools:context=".MainActivity" /> 
    </LinearLayout> 

</FrameLayout> 
+1

我不知道你是否只能從xml中做到這一點(但現在想不出來)。您可以隨時手動執行此操作:將一個「FrameLayout」設置爲佈局的根目錄,在其中添加「ScrollView」,並在其上添加「LinearLayout」(您將繼續引用它)。這將是'封閉'的立場。如果用戶想要更多,則從最初的「FrameLayout」中分離出'LinearLayout'並將其添加到'ScrollView'。當用戶摺疊更多選項時,您將反轉該過程。這可能會導致視覺問題。 – Luksprog

+0

在xml中做它不是必須的:)你將如何處理附加/解除佈局?在rootLayout上調用'removeView(linLayout)'並在ScrollView上調用'addView(linLayout)'? –

+1

是的,從主佈局中移除LinearLayout並將其重新附加到'ScrollView'。你可以嘗試一下,看看它是如何發展的。我認爲主要的問題在於'ImageView'可能會被放置在'ScrollView'中,並且我不知道它的外觀有多好(尺寸更大)。但測試它,看看它是如何運作的,如果它不起作用,也許我可以提出其他建議。 – Luksprog

回答

2

正如我在我的評論說,我不知道,如果你試圖做的XML水平是可能的。一種選擇是修改你當前的佈局並添加一個根FrameLayout,你可以在最初添加ScrollView並在它上面添加LinearLayout。在這個位置,ImageView將按照您的需要行爲,因爲用戶沒有修改佈局。當你需要表現出更多的在你的佈局,你會從視圖層次結構(與removeView)拆下LinearLayout並將其連接到ScrollView(與addView)。當用戶返回到初始佈局時,您將反轉此操作。

這使得ImageView在製作視圖切換時具有不同的高度,因此您希望獲得ImageView的高度並在執行切換時重新設置它。爲了獲得高度,您可以在聽衆中使用或使用onCreate中的post方法(因爲此時視圖尚未佈置)。另外,請記住用戶可以打開手機,我不知道這是否會影響您的佈局,但請考慮。

+0

再次感謝您的幫助! –

0

首先,我試圖運行代碼,並沒有造成任何問題對我來說。 scrollView沒有顯示出來,雖然圖像縮放到了我預計的ScreenHeight-160dp高度,因爲您已經爲此圖像視圖使用了權重1。

我建議你刪除重量,並給高度作爲wrapcontent。在這種情況下,Imageview將只包含圖像。當尺寸變大時,如果所有屏幕內容的總高度高於屏幕高度,則會自動使用scrollview。

+0

我更新了有關ImageView中圖像信息的問題。以你的例子爲例:如果圖像大於screenheight-160dp,你會得到我在屏幕截圖中繪製的佈局問題。 –