Android的TopLayout+ViewPager+Fragment的吸顶效果(代码简洁)

Android的TopLayout+ViewPager+Fragment的吸顶效果

在很多项目中都会看到一些吸顶悬停的效果,今天也做了一个,分享给大家。
先看看效果
在这里插入图片描述
这个是用TopLayout+ViewPager+Fragment做的
第一个Fragment是RecyclerView第二个是普通的LinearLayout
下面是工程
在这里插入图片描述
代码非常简洁,很容易看懂
首先是MainActivity

public class MainActivity extends AppCompatActivity {

    TabLayout tabLayout;
    ViewPager viewPager;
    ArrayList<Fragment> fragments = new  ArrayList<>();
    ArrayList<String>  listTitle = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = findViewById(R.id.tab_main);
        viewPager = findViewById(R.id.viewpager);
        fragments.add(new Fragment1());
        fragments.add(new Fragment2());
        listTitle.add("标题1"); //标题
        listTitle.add("标题二");//标题
        tabLayout.setupWithViewPager(viewPager);
        viewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(),fragments,listTitle));
    }
}

下面重点说一下activity_main.xml的布局
AppBarLayout是隐藏的它里面有个RelativeLayout是用来滑动的里面有个app:layout_scrollFlages=“scroll”
添加了这个里面就会划出屏幕
但下面的TabLayout没有添加所以不会划出

在这里插入图片描述
然后再下面就是Viewpager了外面要有一个RelatveLayout嵌套着
在这里插入图片描述
下面是整个布局文件代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".MainActivity"
    android:orientation="vertical">
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll"
            android:background="#fff">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:background="@drawable/bg">

                </LinearLayout>
            </LinearLayout>
        </RelativeLayout>
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabBackground="@android:color/transparent"
            app:tabRippleColor="@android:color/transparent"
            android:background="#fff">
        </com.google.android.material.tabs.TabLayout>
    </com.google.android.material.appbar.AppBarLayout>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
            <androidx.viewpager.widget.ViewPager
                android:layout_width="match_parent"
                android:layout_height="900dp"
                android:id="@+id/viewpager">
            </androidx.viewpager.widget.ViewPager>
        </RelativeLayout>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</LinearLayout>

还有一个注意的是
Fragment里面不能用ListView 而是要用RecyclerView
如果不用列表需要普通的布局的话那么需要在外面嵌套一个 NestedScrollView
<androidx.core.widget.NestedScrollView></androidx.core.widget.NestedScrollView>
不能用ScrollView否则会有BUG!
需要该资料可以关注公众号:智慧小巷
回复:Android顶部吸顶悬浮
即可!
在这里插入图片描述
感谢阅读!

原创文章 19 获赞 4 访问量 5129

猜你喜欢

转载自blog.csdn.net/dwh1314/article/details/105342501