【问题标题】:How to implement Scroll View with views getting aligned at the top?如何实现滚动视图,视图在顶部对齐?
【发布时间】:2015-11-27 16:26:53
【问题描述】:

我遇到了这个 UI 并尝试使用它。

  1. 在图片中我猜是,根布局是一个滚动视图。
  2. ScrollView 内的顶视图是相对布局,其下方是 ListView,根据所选日期加载。 (不确定)
  3. 当视图向上滚动时,顶部视图上的按钮将自身与父布局的顶部对齐。
  4. 然后其余部分像列表视图一样滚动。
  5. 再次向下滚动时,顶视图可见。

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>

【问题讨论】:

  • @Skynet。是的,您分享的链接正是我要找的。请给我一些代码帮助,我可以用来实现这个效果
  • 该链接包含所有内容。只需详细阅读即可。

标签: android android-layout


【解决方案1】:

我自己解决了这个问题。

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

我做了以下事情:

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

list_top_one -> 用于具有从日期和到日期文本视图的顶视图

    <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 -> 有按钮的感觉

    <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 -> 用于保存动态加载的值。

    <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) 主活动

a) OnScrollListener 用于将 btn like 列表项附加到顶部。

    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) 列表视图的 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) 从线性布局调用的交换函数和位置 1 的列表元素

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

注意:如果在 listview 中获取任何可聚焦的视图,则 OnItemclickListener 不起作用,请在 stackoverflow 中读取

终于输出了:

在第二个元素点击之前

点击后

滚动后

【讨论】:

    【解决方案2】:

    我认为它是这样发生的:当您滚动页面时,线性布局成功地变得不可见,但是当您通过滚动到达按钮时,焦点转到列表视图,因此它使列表视图滚动而不是整个页面。

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-03-30
      • 2020-02-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-02-18
      • 1970-01-01
      相关资源
      最近更新 更多