NestedScrollView的使用

本文介绍如何使用NestedScrollView实现类似RecyclerView的滑动效果,包括配合AppBarLayout和ToolBar使用的方法,并通过示例代码展示了如何根据TabLayout的切换动态更新NestedScrollView的内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在上一篇文章中,我们了解了CoordinatorLayout的使用,它可以让ToolBar随RecycleView的滑动滑入和划出屏幕,但是在一些其它场景下,我们不一定会用到RecycleView,假设我们只是想显示几个item而已,那该如何解决呢 ?

我们可以使用NestedScrollView来解决,它是support-v4包提供的控件,继承至FrameLayout, 
并实现了NestedScrollingParent,NestedScrollingChild, ScrollingView接口. 
它的作用类似于android.widget.ScrollView,不同点在于NestedScrollView支持嵌套滑动.

今天要实现的效果图: 
这里写图片描述

基本和上一篇文章效果一样,布局文件和代码稍作了下修改. 
布局文件中使用NestedScrollView替换RecycleView,同时在AppBarLayout中添加了ImageView.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="blog.youkuaiyun.com.mchenys.appbarlayoutdemo.MainActivity">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!--标题栏-->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="自定义标题"/>
        </android.support.v7.widget.Toolbar>
        <!--大图-->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@drawable/title_bg"/>
        <!--选项卡-->
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#80ffffff"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabTextColor="@android:color/black"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:overScrollMode="never"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:id="@+id/ll_sc_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

  •  

代码上修改如下:

package blog.youkuaiyun.com.mchenys.appbarlayoutdemo;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class Main3Activity extends AppCompatActivity {
    List<String> mData;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);
        initData(1);
        initView();
    }

    private void initData(int pager) {
        mData = new ArrayList<>();
        for (int i = 1; i < 50; i++) {
            mData.add("pager" + pager + " 第" + i + "个item");
        }
    }

    private void initView() {
        //设置ToolBar
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("");
        toolbar.setNavigationIcon(R.drawable.arrow_back);
        setSupportActionBar(toolbar);//替换系统的actionBar

        //设置TabLayout
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        for (int i = 1; i < 20; i++) {
            tabLayout.addTab(tabLayout.newTab().setText("TAB" + i));
        }
        //TabLayout的切换监听
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                initData(tab.getPosition() + 1);
                setScrollViewContent();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        setScrollViewContent();
    }

    /**
     * 刷新ScrollView的内容
     */
    private void setScrollViewContent() {
        //NestedScrollView下的LinearLayout
        LinearLayout layout = (LinearLayout) findViewById(R.id.ll_sc_content);
        layout.removeAllViews();
        for (int i = 0; i < mData.size(); i++) {
            View view = View.inflate(Main3Activity.this, R.layout.item_layout, null);
            ((TextView) view.findViewById(R.id.tv_info)).setText(mData.get(i));
            //动态添加 子View
            layout.addView(view, i);
        }
    }

}
### 使用 Android NestedScrollView 的示例教程 #### 创建布局文件 为了使用 `NestedScrollView`,首先需要在 XML 布局文件中定义它。下面是一个简单的例子: ```xml <androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/nested_scroll_view" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- 子视图 --> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <!-- 添加其他控件 --> </LinearLayout> </androidx.core.widget.NestedScrollView> ``` 此代码片段展示了如何创建一个基本的 `NestedScrollView` 并设置其宽度和高度属性[^1]。 #### 设置滚动变化监听器 如果希望响应用户的滚动动作,则可以通过设置 `OnScrollChangeListener` 来实现这一点。这允许应用程序检测到何时以及如何发生了滚动操作,并据此作出反应。 ```kotlin nestedScrollView.setOnScrollChangeListener { v, scrollX, scrollY, oldScrollX, oldScrollY -> // 处理滚动事件逻辑 } ``` 上述 Kotlin 代码段显示了如何为 `NestedScrollView` 添加滚动改变监听器并处理相应的回调方法[^3]。 #### 解决滚动冲突问题 当存在多个可滚动组件时可能会遇到滚动冲突的情况。为了避免这种情况的发生,在设计界面结构时应考虑合理安排各层之间的关系;另外也可以尝试调整父级容器的行为来解决潜在的问题。 例如,如果你有一个包含 `RecyclerView` 或者另一个 `ScrollView` 的页面,那么最好让外层采用 `CoordinatorLayout` 结合 `AppBarLayout` 和 `NestedScrollView` 组件一起工作,这样能够更好地管理内部子项间的交互行为[^4]。 #### 实现下拉刷新功能 对于想要集成下拉刷新特性的应用来说,通常会结合第三方库(如 SwipeRefreshLayout)与 `NestedScrollView` 配合起来完成这一需求。具体做法是在根节点包裹一层 `SwipeRefreshLayout` 即可轻松达成目的[^2]。 ```xml <androidx.swiperefreshlayout.widget.SwipeRefreshLayout android:id="@+id/swipe_refresh_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <androidx.core.widget.NestedScrollView ... > ... </androidx.core.widget.NestedScrollView> </androidx.swiperefreshlayout.widget.SwipeRefreshLayout> ``` 通过这种方式不仅可以获得流畅自然的手势体验,同时也简化了开发过程中的复杂度。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值