NestedScrollView的使用

在上一篇文章中,我们了解了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);
        }
    }

}
### Flutter NestedScrollView 使用教程 #### 创建带有 `SliverAppBar` 的 `NestedScrollView` 为了构建一个具有固定顶部应用栏 (`SliverAppBar`) 并允许其下方的内容区域可以独立滚动的界面,可以通过组合使用 `NestedScrollView` 和其他 sliver 组件来达成这一目标[^1]。 ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @Override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MyHomePage(), ), ); } } class MyHomePage extends StatefulWidget { @Override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>(); @Override Widget build(BuildContext context) { return DefaultTabController( length: 3, child: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){ return <Widget>[ SliverOverlapAbsorber( handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), sliver: SliverAppBar( title: const Text('Flutter Demo'), pinned: true, floating: false, snap: false, expandedHeight: 160.0, flexibleSpace: FlexibleSpaceBar( background: Image.network( "https://source.unsplash.com/weekly?coding", fit: BoxFit.cover, ), ), ), ) ]; }, body: TabBarView( children: [ Center(child: Text("Page One")), Center(child: Text("Page Two")), Center(child: Text("Page Three")) ], ), ), ); } } ``` 此代码片段展示了如何设置一个带有一个大图片作为背景的应用程序栏,在用户向下滚动页面时该应用程序栏会保持可见状态。当内容超出屏幕高度时,仅列表部分能够被单独滚动而不影响到上方固定的头部区域[^2]。 #### 实现滚动吸顶效果 对于希望某些特定的小部件(比如标签页指示器)在达到一定位置之后停止移动并停留在视图顶端的情况,则可以在 `headerSliverBuilder` 方法内加入相应的逻辑处理[^3]: ```dart // ...省略前面相同的导入语句和类定义... @override Widget build(BuildContext context) { return DefaultTabController( length: 3, child: NestedScrollView( headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { return <Widget>[ SliverOverlapAbsorber( handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context), sliver: SliverAppBar( title: const Text('Scrolling Tabs Example'), pinned: true, floating: false, forceElevated: innerBoxIsScrolled, bottom: PreferredSize( preferredSize: Size.fromHeight(48), // 设置tab的高度 child: Container( color: Colors.white.withOpacity(innerBoxIsScrolled ? 1 : 0), padding: EdgeInsets.symmetric(horizontal: 16), alignment: Alignment.centerLeft, child: TabBar( labelColor: Theme.of(context).primaryColor, unselectedLabelColor: Colors.grey.shade500, tabs: [ Tab(text: "ONE"), Tab(text: "TWO"), Tab(text: "THREE") ] ), ), ), expandedHeight: 160.0, flexibleSpace: FlexibleSpaceBar( background: Image.network( "https://source.unsplash.com/weekly?coding", fit: BoxFit.cover, ), ), ), ), ]; }, body: TabBarView( physics: NeverScrollableScrollPhysics(), // 禁用body内的水平滑动 children: List.generate(3, (_) { return Padding( padding: EdgeInsets.all(16), child: ListView.builder( itemCount: 30, itemBuilder: (_, int index) { return ListTile(title: Text('Item $index')); }, ), ); }), ), ), ); } ``` 上述例子中通过调整 `forceElevated`, `bottom` 属性以及给 `TabBar` 添加条件透明度变化实现了更复杂的交互体验——即随着用户的垂直方向上的滚动动作改变 tab bar 的外观样式,并且让这些更改只发生在指定条件下发生。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值