2012-10-31 78 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,你会得到我在屏幕截图中绘制的布局问题。 –