Question

我遇到了这个用户界面，我正在尝试使用它。

在图像中我猜的是，根布局是滚动视图。
ScrollView内部的顶视图是相对布局，下面是ListView，它根据所选日期加载。（不确定）
当向上滚动视图时，顶部视图上的按钮会将其自身对齐到父布局的顶部。
然后剩下的就像列表视图一样滚动。
再次向下滚动时，顶部视图可见。

NB ：我试图应用我觉得用于此类效果的内容。但我无法将顶视图的按钮与父布局对齐。如果需要，我可以发布代码。

请帮助我找出这种效果背后的逻辑究竟是什么。感谢。

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context="com.mypackage.Appointments_Main_ActivityFragment">
<RelativeLayout

    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
        android:layout_width="match_parent"
        android:orientation="vertical"
        android:id="@+id/linear"
        android:layout_height="wrap_content">
        <TextView
            android:text="From Date"
            android:id="@+id/frm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14dip"
            android:textStyle="bold"
            android:layout_marginRight="5dip" />
        <TextView
            android:text="To Date"
            android:id="@+id/to"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14dip"
            android:textStyle="bold"
            android:layout_marginRight="5dip" />
    </LinearLayout>
    <Button
        android:id="@+id/alertbtn"
        android:layout_below="@id/linear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@color/DarkGray"
        android:padding="16dp"
        android:text="Alerts"
        android:textColor="@color/accentforGray" />

    <ListView
        android:layout_below="@id/alertbtn"
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:background="#B29090" >
    </ListView>
</RelativeLayout>

Answer 1

我自己解决了这个问题。

获得与图像中提到的相同的外观和感觉。

我做了以下事情：

1）定义了ListView中使用的3种布局。

list_top_one - ＆gt;对于具有从日期和日期文本视图的顶视图

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView
            android:id="@+id/frmdate"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="from date"/>
        <TextView
            android:id="@+id/todate"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:text="to date"/>

    </LinearLayout>

b）list_item_in_middle - ＆gt;有按钮般的感觉

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp"
        android:id="@+id/llHeader">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/btn_background"
        android:text="OK"
        android:padding="16dp"/>
    </LinearLayout>

c）list_items - ＆gt;用于保存动态加载的值。

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFBB00"
        android:orientation="vertical" >

        <TextView
            android:textColor="#000"
            android:layout_margin="30dp"
            android:id="@+id/button1"
            android:layout_gravity="center"
            android:text="OK"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>

2）主要活动布局。

a）包含列表视图

b）并包含一个显示为按钮的布局。

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

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

        </ListView>

        <!-- This LinearLayout's visibility is toggled -->
        <include layout="@layout/list_item_in_middle" />

    </RelativeLayout>

参考： Making a middle element to get stuck in the header (ScrollView/ListView)

3）ListAdapter类

    public class ListAdapter extends BaseAdapter {
        public Context mContext;
        TextView btCurrent;
        ArrayList<Integer> newarrays = new ArrayList<>();

        ListAdapter(Context context,Integer[] arrval) {
            mContext = context;
            newarrays.addAll(Arrays.asList(arrval));
        }

        public void InitializeValues(Integer[] arrval){
            newarrays.addAll(Arrays.asList(arrval));
        }

        @Override
        public int getCount() {
            return newarrays.size();
        }

        @Override
        public Object getItem(int arg0) {
            return newarrays.get(arg0);
        }

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

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            if(position == 0){
                convertView = inflater.inflate(R.layout.list_item_in_middle, null);//Adding btn layout
            }else {
                convertView = inflater.inflate(R.layout.list_items, null);// Adding other elements
                btCurrent = (TextView) convertView.findViewById(R.id.button1);

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

4）MainActivity

a）OnScrollListener，用于在顶部附加btn like list项。

    llHeader = (LinearLayout) findViewById(R.id.llHeader);//from the list_item_in_middle layout
    listView.setOnScrollListener(new AbsListView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(AbsListView view, int scrollState) {

        }

        @Override
        public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
            if (firstVisibleItem > 0) {        // 1st row will stick
                llHeader.setVisibility(View.VISIBLE);
            } else {
                llHeader.setVisibility(View.GONE);
            }
        }
    });

b）listview的OnItemClickListener

    listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            int a = 0;
            if(position == 0){//for clicking from date and to date.
                TextView frm = (TextView) view.findViewById(R.id.frmdate);
                frm.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this,"From date clicked",Toast.LENGTH_SHORT).show();
                    }
                });
                TextView to = (TextView) view.findViewById(R.id.todate);
                to.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(MainActivity.this,"to date clicked",Toast.LENGTH_SHORT).show();
                    }
                });
            }else {
                if(position == 1) {//for clicking the btn like list element.

                    swap();
                    Toast.makeText(MainActivity.this,"Header clicked",Toast.LENGTH_SHORT).show();
                }else {
                    Toast.makeText(MainActivity.this, parent.getItemAtPosition(position).toString(), Toast.LENGTH_SHORT).show();
                }
            }
        }
    });

c）线性布局点击功能，用于粘贴到顶部的元素

    llHeader.setOnClickListener(new View.OnClickListener() { //for clicking the elements that gets stuck to the top
        @Override
        public void onClick(View v) {
            swap();
            Toast.makeText(MainActivity.this,"Header clicked",Toast.LENGTH_SHORT).show();
        }
    });

d）从linearlayout调用的交换函数和位置1的列表元素

    public void swap(){
        ltAdapter.notifyDataSetChanged();
        new1 = new Integer[]{20, 21, 22, 23, 24, 25, 26, 27, 28};
        ltAdapter.InitializeValues(new1);
    }

注意：如果列表视图中有任何可聚焦视图，则OnItemclickListener不起作用，请在stackoverflow中读取

最后输出：

在第二个元素点击之前

点击后

滚动后

Answer 2

我认为它是以这种方式发生的：当您滚动页面时，线性布局会成功隐藏，但是当您通过滚动来访问按钮时，焦点会转到列表视图，因此它会使列表视图滚动而不是整个页面。

快速滚动或滚动页面，方法是滑动按钮，而不是列表视图，并检查按钮是否不可见。

如何实现Scroll View，并在顶部对齐视图？

2 个答案: