使中间元素卡在标题中(ScrollView/ListView)

Question

我想制作一个在第一个ScrollView(或ListView)中间显示的元素,然后在滚动时卡在屏幕的标题中.

它是CSS + JS中的原型实现:http://jsfiddle.net/minhee/aPcv4/embedded/result/.

乍一看我会ScrollView考虑包括ListView,但官方文档说:

您永远不应该使用带有ListView的ScrollView,因为ListView负责自己的垂直滚动.最重要的是,这样做会使ListView中的所有重要优化都无法处理大型列表,因为它有效地强制ListView显示其整个项目列表以填充ScrollView提供的无限容器.

那么,我可以尝试用什么方法来实现这个UI？

更新:我尝试过StickyListHeaders,但是:"它目前不可能在标题中有交互元素,按钮,开关等只有在标题没有卡住时才会起作用."另外,我发现它不适合这种情况.我不需要多个标题,但只需要一个中间元素卡在标题中.

Answer 1

我过去曾使用(或者更确切地说,试图使用)该StickyListHeaders库.在遇到一些问题之后,我想出了以下内容.它与其他海报的建议没什么不同.

主布局文件activity_layout.xml由a ListView和a 组成,LinearLayout默认情况下不可见.使用OnScrollListener的onScroll()方法,LinearLayout's可以切换可见性.您无需为另一个布局充气或动态添加视图到布局的父级.这是onScroll方法的样子:

public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
    if (firstVisibleItem > 3) {        // 5th row will stick
        llHeader.setVisibility(View.VISIBLE);
    } else {
        llHeader.setVisibility(View.GONE);
    }
}

简单地说,切换可见性以获得所需的效果.您可以查看以下代码.它是您可以期待的工作示例.该活动包含ListView严格的准系统扩展名BaseAdapter.将ListView填充有编号的按钮(一个在每一行中,从0开始,并持续到19).

public class StickyHeader extends Activity {    

    LinearLayout llHeader;  
    ListView lv;
    SHAdapter shAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_layout);

        lv = (ListView) findViewById(R.id.listView1);        
        llHeader = (LinearLayout) findViewById(R.id.llHeader);        
        shAdapter = new SHAdapter();        
        lv.setAdapter(shAdapter);

        lv.setOnScrollListener(new OnScrollListener() {

            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {}

            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
                if (firstVisibleItem > 3) {
                    llHeader.setVisibility(View.VISIBLE);
                } else {
                    llHeader.setVisibility(View.GONE);
                }
            }
        });
    }   

    public class SHAdapter extends BaseAdapter {

        Button btCurrent;
        int[] arr = new int[] {0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19};

        @Override
        public int getCount() {
            return 20;
        }

        @Override
        public Object getItem(int arg0) {
            return arr[arg0];
        }

        @Override
        public long getItemId(int position) {
            return 0;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            convertView = getLayoutInflater().inflate(R.layout.list_item_layout, null);         
            btCurrent = (Button) convertView.findViewById(R.id.button1);            

            if ((Integer)getItem(position) == 4) {
                btCurrent.setText("Number " + getItem(position) + " is sticky");
            } else {
                btCurrent.setText("" + getItem(position));
            }

            return convertView;
        }
    }
}

activity_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>

    <!-- This LinearLayout's visibility is toggled -->

    <!-- Improvement suggested by user 'ar34z' 
         (see comment section below) --> 
    <include layout="@layout/list_item_layout" />

</RelativeLayout>

list_item_layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/llHeader"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/white"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>