6

我知道每个人都建议我们永远不要一起使用ListView和ScrollView，我完​​全同意。但是，我目前坚持使用非常简单的模式，例如 8tracks 的个人资料页面（如下图所示），其中包括用户个人资料区域和他们制作的混音列表。所以基本上，希望用户可以向下滚动该页面，这意味着配置文件部分将位于屏幕顶部并逐渐消失，同时下面的列表也会滚动：

在此处输入图像描述

但是，目前，我所能做的就是在 a 中包含ListViewa LinearLayout，就像我在这里的草图一样。

在此处输入图像描述

使用这种设计，我只能向下滚动列表，而个人资料区域则停留在同一位置，这很糟糕。所以我正在寻找使整个页面可滚动的任何想法，而不仅仅是列表。请帮助和感谢。

编辑：我很抱歉这个误导性的问题。我的问题更加复杂，因为选项卡的内容不仅仅是ListView- 一些选项卡包含LinearLayout或GridView代替。同样，我想要实现的是使整个页面可滚动，但ScrollView无济于事，因为如果选项卡的内容是ListViewor GridView，这些视图将被折叠，更重要的是 - 这违反了设计规则。

4

4 回答 4

1

我知道这已经很晚了，但我是 8tracks 的当前开发人员。您上面显示的（旧）2.x 应用程序正在被重写，但我可以向您展示旧开发人员为个人资料页面所做的事情。

在开始之前，我必须说这不是最好的方法，但 8tracks 应用程序 (2.x) 已经过时了。

所以回到代码...ProfileActivity包含一个ProfileFragment.

您使用“关注”按钮（和个人资料图片）看到的主要布局是这样的：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <!-- Image, name, location -->

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dip" >

        <com.gdub.widget.ImageViewClickable
            android:id="@+id/dj_avatar"
            android:layout_width="110dip"
            android:layout_height="110dip"
            android:layout_marginRight="10dip"
            android:background="@drawable/default_avatar_max200"
            android:scaleType="centerCrop" />

        <com.gdub.widget.CollapsingTextView
            android:id="@+id/dj_location"
            style="@style/mix.counts"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dip"
            android:layout_toRightOf="@id/dj_avatar" />

        <ViewSwitcher
            android:id="@+id/profile_action_btn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/dj_location"
            android:layout_toRightOf="@id/dj_avatar" >

            <Button
                android:id="@+id/follow_btn"
                style="@style/white_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/follow" />

            <Button
                android:id="@+id/edit_profile_btn"
                style="@style/white_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/edit_profile" />
        </ViewSwitcher>
    </RelativeLayout>

    <TextView
        android:id="@+id/dj_bio"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="-25dip"
        android:gravity="left|center_vertical"
        android:lineSpacingExtra="2dip"
        android:paddingLeft="10dip"
        android:paddingRight="10dip"
        android:textColor="@color/default_text"
        android:textSize="15sp" />

    <include
        android:id="@+id/profile_tabs"
        layout="@layout/profile_tabs" />

</LinearLayout>

还有 profile_tabs…</p> 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:visibility="gone"
  android:orientation="horizontal">

    <include
        android:id="@+id/profile_mixes_button"
        layout="@layout/profile_tab" />

    <include
        android:id="@+id/profile_followers_button"
        layout="@layout/profile_tab"  />

    <include
        android:id="@+id/profile_following_button"
        layout="@layout/profile_tab"  /> 

</LinearLayout>

如您所见，这是一个带有“模拟”选项卡的三个按钮的常规布局。

选项卡的内容也由 ViewSwitcher 决定：

<?xml version="1.0" encoding="utf-8"?>
<ViewSwitcher xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/profile_view_switcher"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:inAnimation="@anim/fade_in_300"
              android:outAnimation="@anim/fade_out_300"
              android:background="@color/white">

<include
    android:id="@+id/profile_loading"
    layout="@layout/loading_view_full" />

<ListView
    android:id="@+id/profile_content_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:cacheColorHint="#00000000"
    android:divider="@null"
    android:dividerHeight="0dip"
    android:fadingEdge="none" />

</ViewSwitcher>

这显示了一个加载轮，然后切换到列表视图。没有其他可滚动的 ViewGroup。

基本上就是这样。

现在，如果您想让整个事物滚动，那么您需要使用自定义适配器并将上述布局设置为 Header（或者至少以巧妙的方式在适配器中使用 getItemType ）。这样整个屏幕就是一个列表（具有列表的所有优化）。

我们（ab）在 dev 下的新 8tracks 应用程序中使用它。;)

于 2013-11-15T23:38:41.020 回答
0

尝试在您的列表视图中使用以下内容。

listview.addHeaderView(v);

另外请记住，您必须在调用 listview 上的 setAdapter() 之前调用此方法。

包括您拥有用户详细信息和选项卡的线性布局，并将其作为标题添加到列表中。

于 2013-05-02T04:30:30.290 回答
0

您可以尝试使配置文件和选项卡成为列表视图的标题，然后在按下选项卡时更新列表视图的内容。不过，我不知道您是否希望标签在滚动时从视图中消失。

于 2013-05-02T04:30:43.087 回答
0

根据 UI 指南和最佳实践，建议不要在 Scrollview 中使用 Scrollable 内容，这样做会阻止 Scrollable 内容的滚动。

当您放置两个滚动视图时，android 会混淆哪个滚动视图被触摸。所以有时它无法传递触摸事件。

但是，如果您仍然想实现滚动功能，您可以通过使用特定视图的 onTouch 事件来管理它。你需要相应地设计你的布局。

但即使要求迫使您进行此类布局。试试这个……</p>

说情况有点像这样......

  <ScrollView android:id=”@+id/parent_scroll” 
        android:layout_width=”fill_parent”
        android:layout_height=”wrap_content”
        android:layout_weight=”1″
        android:background=”@drawable/dotted_bg”
        android:focusableInTouchMode=”false”&gt;
                    <LinearLayout   />
                    <LinearLayout   />
                    <LinearLayout  >
                    <ScrollView android:id=”@+id/child_scroll”  
                    android:layout_width=”fill_parent”
                    android:layout_height=”fill_parent”
                    android:background=”@drawable/text_box_bg”&gt;
                <TextView android:id=”@+id/text_description”
                    android:layout_width=”fill_parent”
                    android:layout_height=”fill_parent”
                    android:textColor=”@color/gray”
                    android:textSize=”12dip”
                    android:padding=”5dip”
                    android:scrollbars=”vertical”/>
                <!–ScrollView>
              </LinearLayout>

第 1 步：为两个滚动视图提供唯一 ID。

第 2 步：在您的活动中获取这两个滚动视图的参考。

  parentScroll=(ScrollView)findViewById(R.id.parent_scroll);
    childScroll=(ScrollView)findViewById(R.id.child_scroll);

第 3 步：现在为两者设置触摸侦听器。

  parentScroll.setOnTouchListener(new View.OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) {
                Log.v(TAG,”PARENT TOUCH”);
  findViewById(R.id.child_scroll).getParent().requestDisallowInterceptTouchEvent(false);
                return false;
            }
        });
        childScroll.setOnTouchListener(new View.OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) 
            {
                Log.v(TAG,”CHILD TOUCH”);
                                    // Disallow the touch request for parent scroll on touch of child view
                v.getParent().requestDisallowInterceptTouchEvent(true);
                return false;
            }
        });

我希望它会帮助你。

于 2013-05-02T05:30:51.840 回答