android通过fragment+viewpager实现多页面侧滑效果

最新推荐文章于 2023-07-23 09:42:03 发布
最新推荐文章于 2023-07-23 09:42:03 发布
阅读量286 收藏
点赞数
分类专栏： android功能实现小积累
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/blank__box/article/details/79595221
版权

github源代码：点击打开链接

CSDN下载：点击打开链接

文件格局

效果：


先新建3分fragment页：

页面1
public class Fragment1 extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view =inflater.inflate(R.layout.fragment1,null);
        return view;
    }
}
页面2
public class Fragment2 extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view =inflater.inflate(R.layout.fragment2,null);
        return view;
    }
}
页面3
public class Fragment3 extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view =inflater.inflate(R.layout.fragment3,null);
        return view;
    }
}

activity_main布局：

<?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"
    android:orientation="vertical"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp"
        android:background="@color/colorPrimaryDark"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button_save"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginBottom="5dp"
            android:background="@null"
            android:textColor="@android:color/background_light" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Fragment+viewpager应用"
            android:textColor="@android:color/background_light"
            android:textSize="20sp" />

        <Button
            android:id="@+id/button_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerInParent="true"
            android:layout_marginBottom="5dp"
            android:background="@null"
            android:textColor="@android:color/background_light" />
    </RelativeLayout>

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

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

            <TextView
                android:id="@+id/tv_f1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="TextView"
                android:textSize="20sp" />

            <TextView
                android:id="@+id/tab_1"
                android:layout_width="match_parent"
                android:layout_height="3dp"
                android:background="@android:color/holo_blue_dark"
                android:text="TextView" />
        </LinearLayout>

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

            <TextView
                android:id="@+id/tv_f2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="20sp"
                android:text="TextView" />

            <TextView
                android:id="@+id/tab_2"
                android:layout_width="match_parent"
                android:layout_height="3dp"
                android:background="@color/background_tab_pressed"
                android:text="TextView" />
        </LinearLayout>

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

            <TextView
                android:id="@+id/tv_f3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="20sp"
                android:text="TextView" />

            <TextView
                android:id="@+id/tab_3"
                android:layout_width="match_parent"
                android:layout_height="3dp"
                android:background="@color/background_tab_pressed"
                android:text="TextView" />
        </LinearLayout>

    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

以上布局代码效果：


MainActivity：

public class MainActivity extends AppCompatActivity {

    private Fragment[] views;
    private ViewPager viewPager;
    private TextView tv_f1,tv_f2,tv_f3,tv_tab1,tv_tab2,tv_tab3;

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getSupportActionBar().hide();
        init();
        viewPager.setAdapter(new Adapter(getSupportFragmentManager()));
        setStatusBarColor(this, ContextCompat.getColor(this, R.color.colorPrimaryDark));
    }

    private void init() {
        final TextView tv_fragment[]={(TextView) findViewById(R.id.tv_f1),(TextView) findViewById(R.id.tv_f2),(TextView) findViewById(R.id.tv_f3)};
        final TextView tv_tab[]={(TextView) findViewById(R.id.tab_1),(TextView) findViewById(R.id.tab_2),(TextView) findViewById(R.id.tab_3)};
        initTab();

        viewPager= (ViewPager) findViewById(R.id.viewPager);
        //监听viewpager的状态：滑动、被选中页、滑动状态改变
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                ClearTab();
                tv_fragment[position].setTextColor(getResources().getColor(R.color.tab_color_select));
                tv_tab[position].setBackgroundColor(getResources().getColor(R.color.tab_color_select));
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        views=new Fragment[3];
        views[0]= new Fragment1();
        views[1]= new Fragment2();
        views[2]= new Fragment3();
    }

    class Adapter extends FragmentPagerAdapter{
        public Adapter(FragmentManager fm) {
            super(fm);
        }
        @Override
        public Fragment getItem(int position) {
            //返回对应的fragment对象
            return views[position];
        }
        @Override
        public int getCount() {
            return views.length;
        }
    }
    //对tab标签初始化
    public void initTab(){
        String tab_name[]={"页面一","页面二","页面三"};

        tv_f1= (TextView) findViewById(R.id.tv_f1);
        tv_f2= (TextView) findViewById(R.id.tv_f2);
        tv_f3= (TextView) findViewById(R.id.tv_f3);

        tv_f1.setText(tab_name[0]);
        tv_f2.setText(tab_name[1]);
        tv_f3.setText(tab_name[2]);

        tv_tab1= (TextView) findViewById(R.id.tab_1);
        tv_tab2= (TextView) findViewById(R.id.tab_2);
        tv_tab3= (TextView) findViewById(R.id.tab_3);
    }
    //在页面滑动后会改变顶部的标签颜色，那就需要先将标签颜色都改为未选中的样式，再对被选中的页面标签设置选中样式
    public void ClearTab(){
        tv_tab1.setBackgroundColor(getResources().getColor(R.color.tab_color_normal));
        tv_tab2.setBackgroundColor(getResources().getColor(R.color.tab_color_normal));
        tv_tab3.setBackgroundColor(getResources().getColor(R.color.tab_color_normal));
        tv_f1.setTextColor(getResources().getColor(R.color.f_color_normal));
        tv_f2.setTextColor(getResources().getColor(R.color.f_color_normal));
        tv_f3.setTextColor(getResources().getColor(R.color.f_color_normal));
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    static void setStatusBarColor(Activity activity, int statusColor) {
        Window window = activity.getWindow();
        //取消状态栏透明
        window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        //添加Flag把状态栏设为可绘制模式
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        //设置状态栏颜色
        window.setStatusBarColor(statusColor);
        //设置系统状态栏处于可见状态
        window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);
        //让view不根据系统窗口来调整自己的布局
        ViewGroup mContentView = (ViewGroup) window.findViewById(Window.ID_ANDROID_CONTENT);
        View mChildView = mContentView.getChildAt(0);
        if (mChildView != null) {
            ViewCompat.setFitsSystemWindows(mChildView, false);
            ViewCompat.requestApplyInsets(mChildView);
        }
    }
}

colors.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="tab_color_select">#FF0099CC</color>
    <color name="tab_color_normal">#FFFFFF</color>
    <color name="f_color_normal">#8A000000</color>


</resources>


blank__box
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ViewPager + Fragment 实现页面滑动
根是地下的枝
10-10 1087
微信的界面可以左右滑动，同时也可以单击下面的选项卡切换页面，这种效果很流畅ye
【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
weixin_30544657的博客
10-18 101
本文主要介绍如何利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果。即google play首页、新浪微博消息(at、评论、私信、广播）页面的效果。ViewPager+Fragment组合为google推荐方式，比TabActivity+Activity的效率高的多。 这个效果相当好！ 1、新建ViewPager的layout，内容如下 ...
ViewPager+Fragment,实现侧滑效果
跳出舒适圈
09-05 284
ViewPager+Fragment，显示左右滑动效果
ViewPager+Fragment实现多个子界面滑动
热门推荐
木辛梓
09-18 2万+
ViewPager+Fragment实现多个子界面滑动一、设计目标二、实现方法第一步第二步第三步第四步三、实现效果四、源码链接 一、设计目标 最近做了一个智能机器人的控制APP，因为涉及的功能比较多，因此采用了三个可以滑动的子界面，效果图如下：下面讲解一下怎么用ViewPager+Fragment实现此界面效果。 二、实现方法 第一步 新建一个Layout布局，用来容纳三个子界面。这里面要引入v...
Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效
weixin_34072857的博客
03-07 80
2019独角兽企业重金招聘Python工程师标准>>> ...
fragment+viewpager侧滑效果
03-17
以上就是关于"fragment+viewpager侧滑效果"的相关知识点，这个主题涉及到Android应用开发中的组件交互、页面滑动以及用户界面设计等多个方面。通过熟练掌握这些知识点，开发者可以创建出更丰富、更流畅的用户体验。...
ViewPager+Fragment+DrawableLayout 实现页面水平滑动与侧滑抽屉布局
10-13
首先，`ViewPager`是Android支持库中的一个视图组件，它允许用户通过水平滑动来浏览多个页面。`ViewPager`通常与`PagerAdapter`一起使用，`PagerAdapter`是一个抽象适配器，负责提供页面内容。开发者需要继承`...
通过SlidingMenu+Viewpager实现当前最流行的侧滑
07-15
通过SlidingMenu+Viewpager实现当前最流行的侧滑 通过SlidingMenu库与Fragment来实现当前最为流行的侧滑模式。其实涉及到的知识点有： 1.SlidingMenu 2.Fragment 通过layout构建一个Fragment 通过preference 来...
Fragment+ViewPager+SlidingMenu组件实现的demo
10-24
`ViewPager`是一个强大的组件，通常用于展示多个`Fragment`或视图，并允许用户通过手势左右滑动来切换页面。`ViewPager`不仅提供了一个流畅的页面滑动体验，而且还可以自动管理页面的创建和销毁，以优化内存使用。在...
slidingMenu+viewpager+fragment+listView
03-17
在Android应用开发中，"slidingMenu+viewPager+Fragment+listView"是一个常见的组合，用于构建具有侧滑菜单、页面切换、动态内容加载和列表展示功能的复杂用户界面。以下是对这个组合中的各个组件及其相互作用的详细...
ViewPager+Fragment侧滑及点击切换页面
11-17
ViewPager+Fragment侧滑及点击切换页面，不冲突。Android经典例子，解决侧滑切换和点击切换冲突问题。
使用ViewPager实现屏幕侧滑
shaaiwei521的专栏
11-25 569
编写:XizhiXu - 原文:http://developer.android.com/training/animation/screen-slide.html z 滑屏是在两个完整界面间的转换，它在一些 UI 中很常见，比如设置导向和幻灯放映。这节课将告诉你怎样通过支持库（support library提供的ViewPager实现滑屏。ViewPager能自动实现滑屏动画。下面
Android_侧滑页面传值Fragment
Android___vv的博客
09-08 359
android:layout_gravity="left" android:choiceMode="singleChoice"
通过SlidingMenu Fragment实现当前最流行的侧滑
qqiabc521的专栏
07-10 6724
内容简介： 通过SlidingMenu库与Fragment来实现当前最为流行的侧滑模式。其实涉及到的知识点有： 1.SlidingMenu 2.Fragment 通过layout构建一个Fragment 通过preference 来构建Fragment 准备工作： 1. SlidingMenu 下载地址： https://github.com/jfeinstein10/Slidi
详谈侧滑页面ViewPager的使用
j06100610的博客
09-03 451
欢迎大家猛戳进来，超级实用的东西，不看会后悔，详谈侧滑页面ViewPager的使用。
侧滑和viewpager结合
weixin_43884470的博客
12-09 426
侧滑布局和viewpager页面切换 &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schema...
Viewpager以及侧滑切换
qq_43578439的博客
12-09 186
public class MainActivity extends AppCompatActivity { private ViewPager pager; private RadioGroup radiogroup; private ListView listview4; private DrawerLayout draww; @Override ...
Android 基础：Fragment的介绍与应用，QQ底栏，flutter瀑布流自适应高度
m0_64604893的博客
12-28 686
2.、创建若干个简单的布局（用于fragment的加载），如下： activiy_main为主布局文件，fragment1,fragment2为fragment的布局文件 3、创建 Fragment 的类 创建Fragment1：创建过程与创建Activity类似，不过继承的是android.support.v4.app.Fragment 复写onCreateView函数加载fragment的布局，R.layout.fragment1就是刚刚创建的布局文件。 ..
侧滑菜单和Fragment的使用
最新发布
2201_75569506的博客
07-23 211
制作如下图所示的侧滑菜单，有“我的小狗狗，我的小老鼠，我的下兔子，我的羊羊”四个菜单项，并实现对侧滑菜单的控制（打开和关闭）添加4个Fragment，并显示显示4个小宠物，点击侧滑菜单，加载对应的Fragment，并实现Fragment的回退操作。BagFragment.kt （其余类似）2.Fragment 的动态加载。1.侧滑菜单的设计和制作。
fragment+viewpager
03-16
Fragment和ViewPager是Android开发中常用的两个组件。 Fragment是一种可以嵌入到Activity中的模块化组件，可以独立管理自己的生命周期和UI界面。ViewPager是一种可以滑动切换多个Fragment的组件，常用于实现滑动页面效果。 在使用ViewPager时，通常会将多个Fragment作为ViewPager的子页面，通过滑动ViewPager来切换不同的Fragment。这种方式可以方便地实现多个页面之间的切换和交互。 同时，ViewPager也可以与TabLayout等组件结合使用，实现更加丰富的页面效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值