Android Behavior之ViewPager+Fragm

作者: 吕氏春秋i | 来源:发表于2022-07-20 15:27 被阅读0次

前言

做了一个月的前端开发逐渐学习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

Android Behavior之ViewPager+Fragm

前言

Android

三军未动，粮草先行

Test效果图

实现思路

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

XML代码布局

第一个属性 layout_scrollFlags

第二个属性 layout_behavior

数据层代码

Activity

Fragment

Adapter

效果图

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

UI效果