顯示水平效果的垂直滾動視圖。爲什麼？

Question

在我的XML我有一個相對佈局有垂直方向，它有一些子views.I爲這個相對佈局添加了一個垂直滾動視圖，但它顯示了水平effect.I無法理解任何人都可以幫助的問題，在這裏是我的XML。

<VerticalScrollView android:id="@+id/vertical_scroll" 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:scrollbars="none" 
xmlns:android="http://schemas.android.com/apk/res/android"> 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
android:id="@+id/popup_element" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="#f6f5f3" 
android:orientation="vertical"> 
    <TextView 
    android:id="@+id/previewText" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/your_text_preview" 
    android:textSize="40sp" 
    android:layout_centerHorizontal="true" /> 
<android.support.design.widget.TextInputLayout 
    android:id="@+id/textContainer" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:paddingTop="80dp" 
    app:counterEnabled="true" 
    app:counterMaxLength="50" 
    > 
    <android.support.design.widget.TextInputEditText 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:id="@+id/textInputEditText" 
     android:layout_below="@id/previewText" 
     android:layout_margin="20dp" 
     android:maxLength="50" 
     android:ems="10" 
     android:hint="@string/enter_text_here"/> 
</android.support.design.widget.TextInputLayout> 
<HorizontalScrollView 
    android:id="@+id/fontArea" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_below="@id/textContainer" 
    android:scrollbars="none" > 

    <LinearLayout 
     android:id="@+id/fonts" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" > 
    </LinearLayout> 
</HorizontalScrollView> 
<HorizontalScrollView 
    android:id="@+id/colorArea" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_below="@id/fontArea" 
    android:scrollbars="none" > 
<LinearLayout 
     android:id="@+id/colors" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" > 
    </LinearLayout> 
</HorizontalScrollView> 
<CheckedTextView 
    android:id="@+id/shadowCheck" 
    android:layout_below="@id/colorArea" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:gravity="center_vertical" 
    android:padding="12dp" 
    android:checkMark="?android:attr/listChoiceIndicatorMultiple" 
    android:text="@string/shadow" 
    android:checked="true" /> 

<Button 
    android:id="@+id/done" 
android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="@string/apply" 
    android:layout_below="@+id/shadowCheck" 
    android:layout_alignRight="@+id/previewText" 
    android:layout_alignEnd="@+id/previewText" 
    android:layout_marginTop="94dp" /> 
</RelativeLayout> 
</VerticalScrollView> 

Answer 1

嘗試這種變化：

<ScrollView 
     android:id="@+id/vertical_scroll" 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:scrollbars="none"> 

     <LinearLayout 
      android:id="@+id/popup_element" 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      xmlns:app="http://schemas.android.com/apk/res-auto" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="#f6f5f3" 
      android:orientation="vertical"> 
      <TextView 
       android:id="@+id/previewText" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_centerHorizontal="true" 
       android:text="@string/your_text_preview" 
       android:textSize="40sp"/> 
      <android.support.design.widget.TextInputLayout 
       android:id="@+id/textContainer" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:paddingTop="80dp" 
       app:counterEnabled="true" 
       app:counterMaxLength="50"> 
       <android.support.design.widget.TextInputEditText 
        android:id="@+id/textInputEditText" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_below="@id/previewText" 
        android:layout_margin="20dp" 
        android:ems="10" 
        android:hint="@string/enter_text_here" 
        android:maxLength="50"/> 
      </android.support.design.widget.TextInputLayout> 
      <HorizontalScrollView 
       android:id="@+id/fontArea" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_below="@id/textContainer" 
       android:scrollbars="none"> 

       <LinearLayout 
        android:id="@+id/fonts" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:orientation="horizontal"> 
       </LinearLayout> 
      </HorizontalScrollView> 
      <HorizontalScrollView 
       android:id="@+id/colorArea" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_below="@id/fontArea" 
       android:scrollbars="none"> 
       <LinearLayout 
        android:id="@+id/colors" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:orientation="horizontal"> 
       </LinearLayout> 
      </HorizontalScrollView> 
      <CheckedTextView 
       android:id="@+id/shadowCheck" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_below="@id/colorArea" 
       android:checkMark="?android:attr/listChoiceIndicatorMultiple" 
       android:checked="true" 
       android:gravity="center_vertical" 
       android:padding="12dp" 
       android:text="@string/shadow"/> 

      <Button 
       android:id="@+id/done" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignEnd="@+id/previewText" 
       android:layout_alignRight="@+id/previewText" 
       android:layout_below="@+id/shadowCheck" 
       android:layout_marginTop="94dp" 
       android:text="@string/apply"/> 
     </LinearLayout> 
    </ScrollView>