如何将Scrollview布局分成两半以显示父背景颜色和两个窗格?

时间:2015-12-30 08:44:46

标签: android android-linearlayout android-scrollview

我有一个带有白色背景的简单UI屏幕。然后我有Scrollview,周围有10 dp的边距和黑色背景,所以基本上是一个矩形内的矩形。如何将Scrollview分成两半,以便在黑色矩形内部显示一条白色水平线,从而创建两个黑色窗格?下面上传的图片显示了我目前所拥有的内容(请忽略捕获的微小外部彩色边框以显示主UI白色背景。

layout.xml:

<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
style="@style/scrollbar_shape_style"
android:focusableInTouchMode="true"
tools:context=".MainActivity" >

<ScrollView
    android:id="@+id/ScrollView2"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="#000000"
    android:layout_marginLeft="10dp"
    android:layout_marginStart="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginEnd="10dp"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"  >

<LinearLayout
    android:id="@+id/MainLayout1"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:orientation="vertical"
    android:background="#FFFFFF"
    >

</LinearLayout>

</ScrollView>

<TextView
    android:id="@+id/xyztext"
    android:text="xyz"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:textStyle="bold"
    android:textColor="#FFFFFF"
    android:background="@color/colorPrimary"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
    android:clickable="true"  />

</LinearLayout>

enter image description here

1 个答案:

答案 0 :(得分:2)

我的方法是将黑色背景设置为两个矩形,而不是将其设置为ScrollView,您无法拆分。 此外,ScrollView只能托管一个直接子项,然后添加符合矩形的两个布局:

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:focusableInTouchMode="true"
    tools:context=".MainActivity" >

    <ScrollView
        android:id="@+id/ScrollView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:background="@android:color/transparent">

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

            <LinearLayout
                android:id="@+id/MainLayout1"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:orientation="vertical"
                android:background="@android:color/black">
            </LinearLayout>

            <android.support.v4.widget.Space
                android:layout_width="match_parent"
                android:layout_height="5dp" />

            <LinearLayout
                android:id="@+id/MainLayout2"
                android:layout_width="match_parent"
                android:layout_height="700dp"
                android:orientation="vertical"
                android:background="@android:color/black">

            </LinearLayout>

        </LinearLayout>

    </ScrollView>

</LinearLayout>

这将为您提供以下用户界面:

UI result

请注意,我已经放置了一个Space元素来分隔两个线性布局。如果您愿意,可以用保证金替换它。