使中间元素卡在标题中(ScrollView/ListView) [英] Making a middle element to get stuck in the header (ScrollView/ListView)
问题描述
我想首先制作一个显示在ScrollView(或ListView)中间的元素，然后在滚动时卡在屏幕的标题中.
I want to make an element that is shown in the middle of ScrollView (or ListView) at the first and then gets stuck in the header of screen when it’s scrolled.
这是一个CSS+JS的原型实现:http://jsfiddle.net/minhee/aPcv4/embedded/result/.
It’s a prototype implementation in CSS+JS: http://jsfiddle.net/minhee/aPcv4/embedded/result/.
乍一看我会让 ScrollView 包含 ListView，但官方文档说:
At first glance I would make ScrollView to include ListView, but the official docs says:
您永远不应该将 ScrollView 与 ListView 一起使用，因为 ListView 会处理它自己的垂直滚动.最重要的是，这样做会破坏 ListView 中处理大型列表的所有重要优化，因为它有效地强制 ListView 显示其整个项目列表以填满 ScrollView 提供的无限容器.
You should never use a ScrollView with a ListView, because ListView takes care of its own vertical scrolling. Most importantly, doing this defeats all of the important optimizations in ListView for dealing with large lists, since it effectively forces the ListView to display its entire list of items to fill up the infinite container supplied by ScrollView.
那么，我可以尝试哪些方法来实现此 UI?
So, what approaches can I try to achieve this UI?
更新:我尝试了 StickyListHeaders，但是:它目前不是可能在标题、按钮、开关等中有交互元素.只有当标题没有卡住时才会起作用."另外，我发现它不太适合这种情况.我不需要多个标题，但只需要一个中间元素就可以卡在标题中.
Update: I tried StickyListHeaders, but: "it is currently not possible to have interactive elements in the header, Buttons, switches, etc. will only work when the header is not stuck." Plus, I find it’s not very suitable for this situation. I don’t need multiple headers, but just one middle element to get stuck in the header.
推荐答案
我过去使用过(或者更确切地说，尝试使用)StickyListHeaders 库.在遇到一些问题后，我想出了以下内容.这与其他海报所建议的没有太大区别.
I have used(or rather, tried to use) the StickyListHeaders library in the past. After having some issues with it, I came up with the following. It is not much different from what other posters have suggested.
主布局文件activity_layout.xml 由一个ListView 和一个默认不可见的LinearLayout 组成.使用 OnScrollListener 的 onScroll() 方法，可以切换 LinearLayout's 的可见性.您不需要膨胀另一个布局或将视图动态添加到您的布局的父级.这是 onScroll 方法的样子:
The main layout file activity_layout.xml consists of a ListView and a LinearLayout which is invisible by default. Using the OnScrollListener's onScroll() method, the LinearLayout's visibility is toggled. You don't need to inflate another layout or add views dynamically to your layout's parent. This is what the onScroll method looks like:
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);
}
}
只需切换可见性即可获得所需的效果.你可以看看下面的代码.它是您可以期待的工作示例.Activity 包含一个 ListView，带有 BaseAdapter 的严格准系统扩展.ListView 填充有编号按钮(每行一个，从 0 开始，一直到 19).
Simply, toggle the visibility to get the desired effect. You can take a look at the following code. Its a working example of what you can expect. The activity contains a ListView with a strictly barebone extension of BaseAdapter. The ListView is populated with numbered Buttons(one on each row, starting at 0, and going up to 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>
这篇关于使中间元素卡在标题中(ScrollView/ListView)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
