如何实现Scroll View,并在顶部对齐视图?

时间:2015-11-25 04:28:46

标签: android android-layout

我遇到了这个用户界面,我正在尝试使用它。 enter image description here

  1. 在图像中我猜的是,根布局是滚动视图。
  2. ScrollView内部的顶视图是相对布局,下面是ListView,它根据所选日期加载。 (不确定)
  3. 当向上滚动视图时,顶部视图上的按钮会将其自身对齐到父布局的顶部。
  4. 然后剩下的就像列表视图一样滚动。
  5. 再次向下滚动时,顶部视图可见。
  6. 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>
    

2 个答案:

答案 0 :(得分: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中读取

最后输出:

在第二个元素点击之前     

点击后     

滚动后     

答案 1 :(得分:0)

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

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