前言

做了一个月的前端开发 逐渐学习vue3+ts开发 已经可以正常写功能 只是有些原理还没有搞懂！
说起来 只要自己想学习，其实也没有那么难。毕竟TypeScript跟java太像了！
语法很像，都是面向对象思想！

Android

由于项目紧急任务 需要在2个星期内做一个平板端的操作app
领导又安排我回到了android岗位，话说开发是公司的一块砖 哪里需要哪里搬 深有体会
两个星期开发一个app，时间上还是很赶的，由于和另外一个同事一起开发，压力也没那么大

三军未动，粮草先行

虽然接口还没有出来，但UI已出，可以先工作了，不需要太大脑力劳动的画页面操作，是每个android以及每个前端开发工程师的基础必备技能！
在和UI探讨后，得到一个吸顶效果的需求，大概就是导航栏可以随着滑动改变位置。
这样的需求也做过很多，2018年前后比较流行----------behavior
以前看过很多技术类的博客 但是自己没有记录过，虽然已经是很旧的知识点了，这里再复习一下

Test效果图

吸顶效果test.gif

实现思路

其实不需要代码辅助就可以完成上述的效果 这里指的是逻辑层的代码
我们只需要再XML文件，完成合理的布局已经属性声明 即可完成上述的效果

我这里运用了 CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+TabLayout+ViewPager
这一套组合

Coordinator在英文中是协调的意思，所以我把CoordinatorLayout叫做协调者布局

AppBarLayout的直接子控件可以设置的属性:layout_scrollFlags:

1.scroll|exitUntilCollapsed如果AppBarLayout的直接子控件设置该属性,该子控件可以滚动,向上滚动NestedScrollView出父布局(一般为CoordinatorLayout)时,会折叠到顶端,向下滚动时NestedScrollView必须滚动到最上面的时候才能拉出该布局
2.scroll|enterAlways:只要向下滚动该布局就会显示出来,只要向上滑动该布局就会向上收缩
3.scroll|enterAlwaysCollapsed:向下滚动NestedScrollView到最底端时该布局才会显示出来
4.如果不设置改属性,则改布局不能滑动

CollapsingToolbarLayout:折叠的toolbar,它确实是起到折叠作用的,可以把自己的自布局折叠.
它的直接子布局可以使用的属性:app:layout_collapseMode(折叠模式):可取的值如下：
1.pin:在滑动过程中,此自布局会固定在它所在的位置不动,直到CollapsingToolbarLayout全部折叠或者全部展开
2.parallax:视察效果,在滑动过程中,不管上滑还是下滑都会有视察效果,不知道什么事视察效果自己看gif图(layout_collapseParallaxMultiplier视差因子 0~1之间取值,当设置了parallax时可以配合这个属性使用,调节自己想要的视差效果)
3.不设置:跟随NestedScrollView的滑动一起滑动,NestedScrollView滑动多少距离他就会跟着走多少距离

TabLayout 是一个选项卡布局 一般和ViewPager配合使用 一遍达到联动的效果 跟着滑动
ViewPager 视图滑动切换组件 和TabLayout组合可以达到两者联动效果 当然自己也可以独立使用
上面这2个都是android应用开发经常用到的组件

XML代码布局

仔细观察下面xml布局，用到了2个关键属性

第一个属性 layout_scrollFlags

CollapsingToolbarLayout的
app:layout_scrollFlags="exitUntilCollapsed|scroll"
当ScrollView将要向下滚动的时候，优先滚动的是自己，当自己滚动到顶部头的时候，再开始触发滚动
1：AppBarLayoout中的childView；
这和单纯使用scroll的效果是一致的；
2：当Scrollview将要向上滚动的时候，优先将AppBarLayout中的childView滚动至最小高度，然后scrollview才开始滚动。

第二个属性 layout_behavior

app:layout_behavior="@string/appbar_scrolling_view_behavior"
android 系统层的滚动属性，没有设置的话, AppbarLayout将不会响应滚动布局的滚动事件.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/coll"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#2196F3"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="exitUntilCollapsed|scroll">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@drawable/ic_launcher_background" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="20dp"
                    android:text="我是内容1"
                    android:textColor="#fff"
                    android:textSize="20sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="20dp"
                    android:text="我是内容2"
                    android:textColor="#fff"
                    android:textSize="20sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="20dp"
                    android:text="我是内容3"
                    android:textColor="#fff"
                    android:textSize="20sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="20dp"
                    android:text="我是内容4"
                    android:textColor="#fff"
                    android:textSize="20sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="20dp"
                    android:text="我是内容5"
                    android:textColor="#fff"
                    android:textSize="20sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="20dp"
                    android:text="我是内容6"
                    android:textColor="#fff"
                    android:textSize="20sp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:padding="20dp"
                    android:text="我是内容7"
                    android:textColor="#fff"
                    android:textSize="20sp" />
            </LinearLayout>

        </com.google.android.material.appbar.CollapsingToolbarLayout>

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:background="#FFF"
            app:tabIndicatorColor="@android:color/holo_blue_dark"
            app:tabSelectedTextColor="@color/purple_200"
            app:tabTextColor="#000" />


    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

数据层代码

Activity

public class MainActivity extends AppCompatActivity {


    private final List<Fragment> list = new ArrayList<>();
    private final List<String> title = new ArrayList<>();
    CollapsingToolbarLayout collapsingToolbarLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TabLayout tabLayout = findViewById(R.id.tablayout);
        ViewPager viewPager = findViewById(R.id.viewpager);
        collapsingToolbarLayout = findViewById(R.id.coll);


        title.add("Tab1");
        title.add("Tab2");

        OneFragment oneFragment = new OneFragment();
        TwoFragment twoFragment = new TwoFragment();
        list.add(oneFragment);
        list.add(twoFragment);

        collapsingToolbarLayout.setTitle("我是返回");

        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @NonNull
            @Override
            public Fragment getItem(int position) {
                return list.get(position);
            }

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

            @Nullable
            @Override
            public CharSequence getPageTitle(int position) {
                return title.get(position);
            }
        });

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset,
             int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
    }
}

Fragment

public class OneFragment extends Fragment {
    private final List<String> stringList = new ArrayList<>();

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, 
    @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_one, container, false);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        //数据
        initString();

        RecyclerView recyclerView = view.findViewById(R.id.recyclerview);
        recyclerView.setLayoutManager(new LinearLayoutManager(getContext()));

        TextAdapter adapter = new TextAdapter(stringList);
        recyclerView.setAdapter(adapter);
    }

    private void initString() {
        for (int i = 0; i < 20; i++) {
            stringList.add("0");
            stringList.add("1");
            stringList.add("2");
            stringList.add("3");
            stringList.add("4");
        }

    }
}

Adapter

public class TextAdapter extends RecyclerView.Adapter<TextAdapter.ViewHolder> {
    private final List<String> stringList;

    public TextAdapter(List<String> list) {
        stringList = list;
    }

    static class ViewHolder extends RecyclerView.ViewHolder {
        Button mButton;
        public static int anInt = 0;

        public ViewHolder(View view) {
            super(view);
            mButton = view.findViewById(R.id.item_btn);
            anInt++;
        }
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_text_type, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        //绑定子view事件
        holder.mButton.setText(String.format("我是Item %s",position));
    }


    @Override
    public int getItemCount() {
        return stringList.size();
    }

    @Override
    public int getItemViewType(int position) {
        return -1;
    }

}

布局就不贴了 一个是recyclerView 一个是Item

效果图

另外附一张项目中的效果图 实现原理差不多

吸顶效果project.gif