ViewPager+Fregment布局滑动

最新推荐文章于 2021-12-21 00:05:51 发布
最新推荐文章于 2021-12-21 00:05:51 发布
阅读量190 收藏 1
点赞数
文章标签： android android studio java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40727911/article/details/105238911
版权
ViewPager+Fragment对我一个android新手来说完全不知道是什么，ViewPager是什么，fragment是什么，根据自己查寻资料了解。ViewPager就是一个简单的页面切换组件，我们可以往里面填充多个View，然后我们可以左 右滑动，从而切换不同的View，Fragment是Android3.0后引入的一个新的API，他出现的初衷是为了适应大屏幕的平板电脑， 当然现在他仍然是平板APP UI设计的宠儿，而且我们普通手机开发也会加入这个Fragment， 我们可以把他看成一个小型的Activity，又称Activity片段。这两个解释是在菜鸟教程找中找到的，viewpager：https://www.runoob.com/w3cnote/android-tutorial-viewpager.html Fragment:https://www.runoob.com/w3cnote/android-tutorial-fragment-base.html

现在开始上代码逻辑

  1. 分四步骤来实现
    （1）准备Freagment类
    （2）准备Fragment的xml布局视图
    （3）准备适配器（FragmentPagerAdapter）
    （4）准备主界面xml布局和HomepagerActivity类

  2. 代码
    创建Fragment类 HomePagerFragment.java

public class HomePagerFragment extends Fragment implements View.OnClickListener {
    //用户修改按钮
    private Button home_btn;

    /**
     * 创建视图
     * @param inflater
     * @param container
     * @param savedInstanceState
     * @return
     */
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view;
        //获取xml布局
        view = inflater.inflate(R.layout.users_page_01,null);
        initview(view);
        return view;
    }
    /**
     * 布局初始化
     * @param view
     */
    private void initview(View view) {
        home_btn = view.findViewById(R.id.home_btn);
        home_btn.setOnClickListener(this);
    }
    /**
     * 点击事件设置
     * @param v v.getid();获取view视图的id
     */
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.home_btn:
                Intent intent = new Intent(getActivity(),CarertActivity.class);
                startActivity(intent);
                break;
            default:
                break;
        }

    }

Fragment的xml布局视图 users_page_01.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:gravity="center"

    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/home"
        android:textSize="50dp"
        android:textStyle="bold"
        android:layout_weight="1"/>

    <Button
        android:id="@+id/home_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/Crete"
        android:textStyle="bold"
        android:textSize="20dp"
        android:layout_weight="1"
        />
    </LinearLayout>
</RelativeLayout>

适配器（FragmentPagerAdapter） ContentAdapter.java

public class ContentAdapter extends FragmentPagerAdapter {

    //存放Fragment碎片集合（list）
    private List<Fragment> list;
    //fragmentManager，Fragment管理
    FragmentManager fragmentManager ;
    
    public ContentAdapter(FragmentManager fm,List<Fragment> views) {
        super(fm);
        this.list = views;
        this.fragmentManager = fm;
    }
    /**
     * //返回页面数量
     * @return
     */
    @Override
    public int getCount() {
        return this.list.size();
    }
    /**
     * 实例化一个页面
     * @param position
     * @return
     */
    @NonNull
    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }
}

主界面xml布局 users_pager_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    tools:context=".users.view.HomePagerActivity">
    <include layout="@layout/users_pager_top_title"/>
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/av_center"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#ffffff"
        android:orientation="vertical" >
    </androidx.viewpager.widget.ViewPager>
    <include layout="@layout/users_pager_bottom_title"/>
</LinearLayout>

主界面HomepagerActivity类 HomePagerActivity.java

public class HomePagerActivity extends AppCompatActivity implements View.OnClickListener, ViewPager.OnPageChangeListener {

    //底部菜单的4个LinerLayout
    private LinearLayout ll_home;
    private LinearLayout ll_dynamic;
    private LinearLayout ll_coach;
    private LinearLayout ll_userhome;

    //底部菜单的4个图片imaget
    private ImageView iv_home;
    private ImageView iv_dynamic;
    private ImageView iv_coach;
    private ImageView iv_userhome;

    //底部菜单的4个文本text
    private TextView tv_home;
    private TextView tv_dynamic;
    private TextView tv_coach;
    private TextView tv_userhome;

    //中间内容区域组件
    private ViewPager av_center;

    //ViewPager的适配器ContentAdapter
    private ContentAdapter adapter;

    //中间内容视图集合
    private List<Fragment> viewList;

    //Fragment布局
    private PagerFragmentUitl transaction;

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

        //初始化视图
        initView();

        //初始化底部按钮
        initEvent();
        this.av_center.setCurrentItem(0);

    }

    /**
     * //初始化视图
     */
    private void initView() {

        //获取底部4个菜单组件
        this.ll_home = findViewById(R.id.ll_home);
        this.ll_dynamic = findViewById(R.id.ll_dynamic);
        this.ll_coach = findViewById(R.id.ll_coach);
        this.ll_userhome = findViewById(R.id.ll_userHome);

        //底部菜单的4个图片image
        this.iv_home = findViewById(R.id.iv_home);
        this.iv_dynamic = findViewById(R.id.iv_dynamic);
        this.iv_coach = findViewById(R.id.iv_coach);
        this.iv_userhome = findViewById(R.id.iv_userHome);

        //获取底部菜单4个文本text
        this.tv_home = findViewById(R.id.tv_home);
        this.tv_dynamic = findViewById(R.id.tv_dynamic);
        this.tv_coach = findViewById(R.id.tv_coach);
        this.tv_userhome = findViewById(R.id.tv_userHome);

        //获取主页中间内容组件
        this.av_center = findViewById(R.id.av_center);

        //适配器
        viewList = new ArrayList<Fragment>();
        viewList.add(new HomePagerFragment());
        viewList.add(new DynamicPagerFragment());
        viewList.add(new CoachPagerFragment());
        viewList.add(new UsersPagerFragment());

        this.adapter = new ContentAdapter(getSupportFragmentManager(),viewList);
        //将适配器放进中间内容区
        this.av_center.setAdapter(adapter);
    }

    /**
     * 给组件设置按键监听
     */
    private void initEvent() {
        //底部菜单linearLyaout
        this.ll_home.setOnClickListener(this);
        this.ll_dynamic.setOnClickListener(this);
        this.ll_coach.setOnClickListener(this);
        this.ll_userhome.setOnClickListener(this);

        //设置ViewPager滑动监听
        this.av_center.setOnClickListener(this);
    }

    /**
     * 单击事件触发处理
     * @param v
     */
    @Override
    public void onClick(View v) {
        //每次单击底部背景和textView都变为原来的颜色
        restartBotton();

        //当底部菜单被选中改变背景颜色和textView，显示viewpager视图
        switch (v.getId()) {
            case R.id.ll_home:
                this.tv_home.setTextColor(Color.RED);
                this.iv_home.setImageResource(R.drawable.train_pressed);
                this.av_center.setCurrentItem(0);
                break;
            case R.id.ll_dynamic:
                this.tv_dynamic.setTextColor(Color.RED);
                this.iv_dynamic.setImageResource(R.drawable.found_pressed);
                this.av_center.setCurrentItem(1);
                break;
            case R.id.ll_coach:
                this.tv_coach.setTextColor(Color.RED);
                this.iv_coach.setImageResource(R.drawable.coach_pressed);
                this.av_center.setCurrentItem(2);
                break;
            case R.id.ll_userHome:
                this.tv_userhome.setTextColor(Color.RED);
                this.iv_userhome.setImageResource(R.drawable.me_pressed);
                this.av_center.setCurrentItem(3);
                break;
            default:
                break;

        }


    }
    public void restartBotton() {

        //设置文本为黑色
        this.tv_home.setTextColor(Color.BLACK);
        this.tv_dynamic.setTextColor(Color.BLACK);
        this.tv_coach.setTextColor(Color.BLACK);
        this.tv_userhome.setTextColor(Color.BLACK);

        this.iv_home.setImageResource(R.drawable.train_unpressed);
        this.iv_dynamic.setImageResource(R.drawable.found_unpressed);
        this.iv_coach.setImageResource(R.drawable.coach_unpressed);
        this.iv_userhome.setImageResource(R.drawable.me_unpressed);

    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        //每次单击底部背景和textView都变为原来的颜色
        restartBotton();

        //当前view被选择的时候,改变底部菜单背景，文字颜色
        switch (position) {
            case 0:
                this.tv_home.setTextColor(Color.BLACK);
                this.iv_home.setImageResource(R.drawable.train_pressed);
                break;
            case 1:
                this.tv_dynamic.setTextColor(Color.BLACK);
                this.iv_dynamic.setImageResource(R.drawable.found_pressed);
                break;
            case 2:
                this.tv_coach.setTextColor(Color.BLACK);
                this.iv_coach.setImageResource(R.drawable.coach_pressed);
                break;
            case 3:
                this.tv_userhome.setTextColor(Color.BLACK);
                this.iv_userhome.setImageResource(R.drawable.me_pressed);
                break;
            default:
                break;
        }
    }
    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

3.最后加个底部标签和顶部
顶部 users_pager_top_title.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        android:id="@+id/ll_top"
        android:background="@color/pink"
        >


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/home"
            android:textStyle="bold"
            android:textSize="30dp"
            android:textColor="@color/colorPrimary"
            />

    </LinearLayout>

</LinearLayout>

底部 users_pager_bottom_title.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#EDE8E8"
    android:padding="5dp">
    <!--android:orientation="vertical"线性布局需要配置-->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/ll_home"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="1">

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/train_pressed"
            android:id="@+id/iv_home"
            android:layout_marginRight="3dp"
            android:padding="6dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/home"
            android:id="@+id/tv_home"
            android:textSize="15dp"
            android:textColor="@color/red"
            android:paddingRight="10dp"
            />
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/ll_dynamic"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="1">

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/found_unpressed"
            android:id="@+id/iv_dynamic"
            android:layout_marginRight="3dp"
            android:padding="6dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/dynamic"
            android:id="@+id/tv_dynamic"
            android:textSize="15dp"
            android:textColor="@color/black"
            android:paddingRight="5dp"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/ll_coach"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="1">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/coach_unpressed"
            android:id="@+id/iv_coach"
            android:padding="6dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/coach"
            android:id="@+id/tv_coach"
            android:textSize="15dp"
            android:textColor="@color/black"
            android:paddingRight="5dp"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/ll_userHome"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_weight="1">
        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/me_unpressed"
            android:id="@+id/iv_userHome"
            android:padding="6dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/userHome"
            android:id="@+id/tv_userHome"
            android:textSize="15dp"
            android:textColor="@color/black"/>
    </LinearLayout>

</LinearLayout>
小庄哥
关注
Frament+viewpager实现滑动布局
远方的行者
11-18 736
直接上代码   viewPager=(ViewPager)findViewById(R.id.vw_pager);    fragment=new ArrayList();  Framentone  fragment01=new Framentone();  Framenttwo  fragment02=new Framenttwo();  Framentthree  fragment0
ViewPager+Fragment+DrawableLayout 实现页面水平滑动与侧滑抽屉布局
xiaolan7777777的博客
10-13 1403
1. 设计目标 因为最近做课设，需要实现水平滑动页面和侧滑打开侧边栏功能，于是把这两个功能合在一起写了个demo。 实现的功能主要有：水平滑动和点击底部按钮切换页面，侧滑菜单拉出与监听。 2. 思路简介 2.1 ViewPager + Fragment ViewPager 对象具有内置滑动手势来切换页面，并且默认显示屏幕滑动动画，因此无需再额外实现手势识别和创建自己的动画，直接使用即可。ViewPager 使用 PagerAdapter 对象提供要显示的新页面，因此需要创建的 Fragment 类。在Fra
滑动实现多个布局的切换——ViewPager的使用
hclhazsj的专栏
01-03 842
a) 导入android-support-v4.jar； i. 这个jar包是1.6+才有的，可以通过更新通过SDK Manager更新最新版android compatibility package, revision 3     然后在eclipse中工程上点击右键，选择android tools -> add compatibility library即可完成安装 ii.上面做法是官方
ViewPager布局
dianlunhui的专栏
08-24 317
viewpager.xml    android:id="@+id/myViewPager"    android:layout_width="match_parent"    android:layout_height="match_parent"    >
ViewPager的详细介绍和图片滑动功能实例
会飞的鱼儿的博客
11-12 709
1、使用场景 在APP设计中，如果涉及到左右滑动功能，如：下方导航条、上方导航条、图片滑动、翻页能功能时，则可以直接使用ViewPager进行开发，ViewPager自带滑动和翻页效果，可以用ViewPager自身的adapter进行开发，要方便很多。 2、属性详解 ViewPager ViewPager 是负责翻页的一个 View。准确说是一个 ViewGroup，包含多个 View 页...
ViewPager+Fragment左右滑动+上下滑动不冲突
06-12
在`ViewPager`中，我们可以用`Fragment`来创建每个可滑动的页面，这样既能保持代码的模块化，又能实现复杂的布局和交互。 要解决`ViewPager`和`Fragment`之间的滑动冲突，主要涉及到触摸事件的处理。通常，`...
ScrollView+TabLayout+ViewPager+RecyclerView 嵌套实现布局
03-28
手动实现仿京东发现页面效果，使用布局嵌套完成，包括ScrollView+TabLayout+ViewPager+RecyclerView，最后有遗留问题需要处理。详情见博客https://blog.csdn.net/hq942845204/article/details/88844272
Android 中 CoordinatorLayout + AppBarLayout 实现滑动头部悬停效果（页面附带TabLayout + ViewPager + RecyclerView结构）
01-03
序 昨晚经历了美股本月的第三次熔断 ，有史以来的第四次熔断 。 突 。 突突 。。突突突 。。。 很尴尬 ，找不到做 gif 的东西 。...AppbarLayout 是一种支持响应滚动手势的 app bar 布局 , Collapsi
viewpager+fragment循环滑动
08-24
在标题“viewpager+fragment循环滑动”中，我们要讨论的是如何将这个功能扩展为无限循环的效果。 首先，`ViewPager`本身并不支持自动循环滚动，它默认只能在已有的`Fragment`集合中前后滑动。为了实现循环效果，...
Android ViewPager + Fragment实现滑动页面效果
08-27
Android ViewPager + Fragment实现滑动页面效果 Android 中的 ViewPager 是一个非常常用的控件，用于实现滑动页面效果。通过结合 Fragment，这种效果可以变得更加强大。下面我们将通过实例代码详细介绍 Android ...
Fragment+ViewPaper实现不依赖库的菜单+页面滑动
11-14
左右滑动呼出菜单，并且内容页面也可以左右滑动切换，并且不需要依赖slidingmenu这个库。
SlideLayout:带有滚动 ViewPager 和 LinearLayout 的滑动布局包含一些标记页面位置的点。 你可以控制
06-05
幻灯片版式 带有滚动 ViewPager 和 LinearLayout 的滑动布局包含一些标记页面位置的点。 您可以通过自定义属性来控制它。 演示 设置 依赖项 { compile project(':slideLayout') } 如何使用 您可以设置是否自动播放、点颜色和滑动间隔。 您必须在 SlideLayout 中包含一个 ViewPager 和一个 LinearLayout 并注入它们的 id。 < com .luckymore.yjh.slide.view.SlideLayout xmlns : attrs = " http://schemas.android.com/apk/res-auto " android : id = " @+id/news_slide_bar " android : layout_width = "
Viewpager的用法
weixin_30471065的博客
04-12 56
内页面 不单写页面 viewpager+布局 import java.util.ArrayList;import java.util.List; import android.os.Bundle;import android.app.Activity;import android.graphics.Color;import android.support.v4.vi...
Viewpager+Fragment 导航栏联动
zh_binfgan的博客
09-19 561
第一步:    布局        <RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:id="@+id/rg" android:layou
ViewPager的介绍和使用
weixin_45533623的博客
02-26 3702
ViewPager一.ViewPager简介二.ViewPager使用三.翻页监听 一.ViewPager简介 ViewPger就是将多个View引用到Adapter中，在左右滑动时，切换不同的View视图 我们日常app中经常用到的滑动换页，大部分就是用它做的 ViewPager 直接继承了 ViewGroup，所以它是一个容器类，可以在其中添加其他的 view 类。 ViewPager ...
Android基础——ViewPager
松仔Log的博客
12-21 2003
ViewPager是什么？ ViewPager是用于实现轮播图功能的控件 activity_main <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match
ViewPager简单介绍(一)
hua93的博客
12-19 314
android
Android30_ViewPager
雷家二少
07-27 1269
ViewPager 一、ViewPager简介： （一）、作用： ViewPager的功能就是可以使视图滑动，就像Lanucher左右滑动那样。ViewPager用于实现多页面的切换效果。该类存在于Google的兼容包里面，android.support.v4.view.ViewPager。 （二）、ViewPager的常规使用步骤： 1、在布局文件中定义ViewPa
ViewPager详解
Urchin_dong的博客
02-22 3903
ViewPager详解
Android Studio实战：ViewPager+Fragment打造滑动菜单Tab
1. 布局文件设置：在`activity_main.xml`布局文件中，添加一个ViewPager和顶部的Tab栏。顶部Tab通常可以通过LinearLayout或者Toolbar来实现，包含多个TextView或自定义的View来表示每个Tab。 ```xml android:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值