【Android】用Fragment、Viewpage实现tab栏切换

最新推荐文章于 2024-07-12 20:42:27 发布
最新推荐文章于 2024-07-12 20:42:27 发布
阅读量2.8k 收藏 5
点赞数
分类专栏： # 安卓 文章标签： android java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alovelypeach/article/details/123263270
版权

文章目录

一、完成情况

1. 图片

请添加图片描述

2. 文字介绍

  1. 点击tab栏底部可以切换不同的页面：
    在切换时，被选中的颜色会变化
  2. 左右滑动屏幕也会切换不同的页面。

3. 代码目录结构

在这里插入图片描述

二、代码

1. xml

  1. tab2.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  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=".main">


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

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/myViewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_marginLeft="0dp">
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:id="@+id/content">
            </FrameLayout>
        </androidx.viewpager.widget.ViewPager>

<!--        tab栏-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_alignParentBottom="true"
            >

            <RelativeLayout
                android:id="@+id/rl_tab_home"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1">
                <!--            android:gravity="center"-->

                <TextView
                    android:id="@+id/home_img"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/home_pur"
                    android:layout_centerHorizontal="true"/>

                <TextView
                    android:id="@+id/home_text"
                    android:layout_below="@id/home_img"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="首页"
                    android:layout_centerHorizontal="true"/>

            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/rl_tab_display"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                >

                <TextView
                    android:id="@+id/display_img"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/db1_grey"
                    android:layout_centerHorizontal="true"
                    />

                <TextView
                    android:id="@+id/display_text"
                    android:layout_below="@id/display_img"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:text="数据"/>

            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/rl_tab_db"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center"
                >

                <TextView
                    android:id="@+id/db_img"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/db_grey"
                    android:layout_centerHorizontal="true"/>

                <TextView
                    android:id="@+id/db_text"
                    android:layout_below="@id/db_img"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="折线图"
                    android:layout_centerHorizontal="true"/>

            </RelativeLayout>

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>
  1. fragment1.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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是1"
        android:id="@+id/textView3"
        android:textSize="18dp" />
</LinearLayout>
  1. fragment2.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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是2"
        android:id="@+id/textView3"
        android:textSize="18dp" />
</LinearLayout>
  1. fragment3.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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我是3"
        android:id="@+id/textView3"
        android:textSize="18dp" />
</LinearLayout>

2. java

  1. fragment1.java
package com.example.tab;
//import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;

public class fragment1 extends Fragment{

    public View onCreateView(LayoutInflater inflater , ViewGroup container, Bundle savedInstanceState){
        View view=inflater .inflate(R.layout.fragment1 ,container,false) ;

        return view;
    }
}
  1. fragment2.java
package com.example.tab;
//import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;

public class fragment1 extends Fragment{

    public View onCreateView(LayoutInflater inflater , ViewGroup container, Bundle savedInstanceState){
        View view=inflater .inflate(R.layout.fragment2 ,container,false) ;

        return view;
    }
}
  1. fragment3.java
package com.example.tab;
//import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;

public class fragment1 extends Fragment{

    public View onCreateView(LayoutInflater inflater , ViewGroup container, Bundle savedInstanceState){
        View view=inflater .inflate(R.layout.fragment3 ,container,false) ;

        return view;
    }
}
  1. TabFragmentPagerAdapter.java
package com.example.tab;

import android.view.ViewGroup;

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

public class TabFragmentPagerAdapter extends FragmentPagerAdapter {
    private FragmentManager mfragmentManager;
    private List<Fragment> mlist;


    public TabFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {
        super(fm);
        this.mlist = list;
    }

    @Override
    public void setPrimaryItem(ViewGroup container, int position, Object object) {
        super.setPrimaryItem(container, position, object);
    }

    @Override
    public Fragment getItem(int arg0) {
        return mlist.get(arg0);//显示第几个页面
    }

    @Override
    public int getCount() {
        return mlist.size();//有几个页面
    }
}
  1. main.java
package com.example.tab;


import android.os.Bundle;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;

import java.util.ArrayList;
import java.util.List;

public class main extends AppCompatActivity implements View.OnClickListener{
    private List<Fragment> list;
    private ViewPager myViewPager;
    private com.example.tab.TabFragmentPagerAdapter adapter;

    //定义一些成员变量
    TextView mHome;
    TextView mDisplay;
    TextView mDb;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab2);
        initView();
    }
    private void initView()
    {
        mHome = findViewById(R.id.home_img);
        mDisplay = findViewById(R.id.display_img);
        mDb = findViewById(R.id.db_img);

        RelativeLayout rlHome = findViewById(R.id.rl_tab_home);
        RelativeLayout rlDisplay = findViewById(R.id.rl_tab_display);
        RelativeLayout rlDb = findViewById(R.id.rl_tab_db);

        rlHome.setOnClickListener( this);
        rlDisplay.setOnClickListener( this);
        rlDb.setOnClickListener( this);


        myViewPager = (ViewPager) findViewById(R.id.myViewPager);
        //绑定点击事件
        myViewPager.setOnPageChangeListener(new MyPagerChangeListener()) ;
        //把Fragment添加到List集合里面
        list = new ArrayList<>();
        list.add(new com.example.tab.fragment1() );
        list.add(new com.example.tab.fragment2() );
        list.add(new fragment3() );
        adapter = new com.example.tab.TabFragmentPagerAdapter(getSupportFragmentManager(), list);
        myViewPager.setAdapter(adapter);
        myViewPager.setCurrentItem(0);  //初始化显示第一个页面

    }

    @Override
    public void onClick(View view) {
        int id = view.getId();
        switch (id){
            //当点击home
            case R.id.rl_tab_home:
                System.out.println("home被点击了！");
                mHome.setBackgroundResource(R.drawable.home_pur);
                mDisplay.setBackgroundResource(R.drawable.db1_grey);
                mDb.setBackgroundResource(R.drawable.db_grey);
                myViewPager.setCurrentItem(0);
                break;
            case R.id.rl_tab_display:
                System.out.println("数据被点击了！");
                mHome.setBackgroundResource(R.drawable.home_grey);
                mDisplay.setBackgroundResource(R.drawable.db1_pur);
                mDb.setBackgroundResource(R.drawable.db_grey);
                myViewPager.setCurrentItem(1);
                break;
            case R.id.rl_tab_db:
                System.out.println("折线图被点击了！");
                mHome.setBackgroundResource(R.drawable.home_grey);
                mDisplay.setBackgroundResource(R.drawable.db1_grey);
                mDb.setBackgroundResource(R.drawable.db_pur);
                myViewPager.setCurrentItem(2);
                break;

        }
    }

    /**
     * 设置一个ViewPager的侦听事件，当左右滑动ViewPager时菜单栏被选中状态跟着改变
     *
     */
    public class MyPagerChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageSelected(int arg0) {
            switch (arg0) {//状态改变时底部对应的字体颜色改变
                case 0:
                    mHome.setBackgroundResource(R.drawable.home_pur);
                    mDisplay.setBackgroundResource(R.drawable.db1_grey);
                    mDb.setBackgroundResource(R.drawable.db_grey);
                    break;
                case 1:
                    mHome.setBackgroundResource(R.drawable.home_grey);
                    mDisplay.setBackgroundResource(R.drawable.db1_pur);
                    mDb.setBackgroundResource(R.drawable.db_grey);
                    break;
                case 2:
                    mHome.setBackgroundResource(R.drawable.home_grey);
                    mDisplay.setBackgroundResource(R.drawable.db1_grey);
                    mDb.setBackgroundResource(R.drawable.db_pur);
                    break;
            }

        }

    }
}

3. manifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.tab">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Tab">

        <activity android:name=".MainActivity"
            android:exported="true">

        </activity>

        <activity android:name=".main"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

</manifest>

三、结尾彩蛋~

源码是0积分下载喔~~~
链接点这里

我很好请走开谢谢
关注
专栏目录
Android Tab 选项卡 切换
04-28
Android Tab 选项卡 切换; 可以滑动切换，点击切换，带指示器；
android tab切换
05-09
我之前做分页都是用GridView和ActivityGroup实现的 因为觉得TabHost不好用 还有就是自己水平差的原因吧 如果帮的话 重写view任何问题都可以解决 呵呵 下面请看实现过程 其实很简单
【Android Studio】实现底部导航栏Tab切换（提供Gitee源码）
最新发布
黄团团的个人博客
07-12 922
​ 前言：本期教学如何使用制作底部导航栏以及用Fragment实现页面切换的完整功能，本篇提供所有源代码，均测试无误，大家可以放心使用。
Android Tab切换
weixin_33832340的博客
09-30 199
ViewPager+FragmentStatePagerAdapter 页面切换案例详解 http://blog.csdn.net/u010203181/article/details/44629639   android ViewPager控件实现手势滑动切换页签 http://blog.csdn.net/lkx94/article/details/52936146...
Android：Tab切换方法整理
shizhesx的博客
09-12 1621
一、TabHost实现Tab切换  TabHost是整个Tab的容器，包含TabWidget和FrameLayout两个部分，TabWidget是每个Tab的表情，FrameLayout是Tab内容。 实现方式有两种： 1、继承TabActivity 2、继承Activity类 >>两个方法实例下载 方法一：继承TabActivity 从TabActivity中用getTabHo
安卓实现首页tab切换（两种方式）
09-29
实现了点击tab切换内容的功能，代码简洁明了，适合初学者。其中一个利用radioGroup实现，另外一个通过普通的button实现。
Tab+Viewpage+Fragment实现导航
10-20
在Android应用开发中，"Tab+ViewPager+Fragment"是一种常见的实现导航的方式，它允许用户在多个页面间平滑切换，同时提供清晰的导航结构。这个技术组合的优势在于它能够高效地管理和展示大量的内容，同时也提供了...
Android使用ViewPager快速切换Fragment时卡顿的优化方案
08-26
Android 使用 ViewPager 快速切换 Fragment 时卡顿的优化方案 Android 使用 ViewPager 快速切换 Fragment 时卡顿是非常常见的问题，特别是在 Fragment 中加载了大量数据或图片时，ViewPager 的快速切换会导致卡顿...
安卓Android源码——Tab+Viewpage+Fragment实现导航.zip
10-14
本压缩包“安卓Android源码——Tab+Viewpage+Fragment实现导航.zip”提供了一个这样的实现示例。下面将详细解释这些组件以及它们如何协同工作。 1. **Tab布局（Tab Layout）**： Tab布局是Android设计支持库中的一...
Android的Viewpage2+fragment实现微信滑动界面的效果
10-16
综上所述，通过使用Android的Viewpager2和Fragment，我们可以轻松实现微信式的滑动界面。Viewpager2提供了高效、灵活的页面管理，而Fragment则让内容呈现变得简单。在实际开发中，我们还可以结合其他组件和设计模式...
android Tab界面切换
07-21
三种方法实现android tab 界面切换。1、ViewPager+PagerAdapter 2、FragmentManager+Fragment利用FragmentTransaction对fragment进行hide和show操作实现 3、ViewPager+FragmentPagerAdapter ,主activity继承于FragmentActivity，因为创建FragmentPagerAdapter时需要用到getSupportFragmentManager。android studio module有部分冗余代码，删除即可。
安卓开发Tab切换
05-18
实现了安卓开发在Activity点击不同tab来实现Fragment页面的切换
Android Studio 入门：（二） 主页面的Tab切换
01-03
一、实现效果 点击不同的tab，出现不同的页面      二、编码思路 三、代码展示 //MainActivity package com.e.spirit; //import androidx.appcompat.app.AppCompatActivity; //import androidx.fragment.app.Fragment; //import androidx.fragment.app.FragmentManager; //import androidx.fragment.app.FragmentTransaction; import android.app.Activit
Android组件TabHost实现页面中多个选项卡切换效果
09-02
主要为大家详细介绍了Android组件TabHost实现页面中多个选项卡切换效果的相关资料，感兴趣的小伙伴们可以参考一下
Android 项目Tab标签页面大汇总（frgament viewpage tablayout）
12-19
android项目Tab标签页大汇总，包括Fragmeng、Fragment+ViewPage、Tablayout主流的三种方式，代码直接使用。博客介绍：http://blog.csdn.net/u011916937
android实现tab切换效果
Reoger的博客
03-30 2760
一：利用ViewPager实现Tab切换效果 1.首先新建几个要切换的xml布局文件，然后在主布局中间添加 布局，用于显示我们写好的xml布局。 2.在主方法中，定添加代码如下：LayoutInflater mInflater = LayoutInflater.from(this);View tab01  = mInflater.inflate(R.layout.tab01, null);m
android 微信tab切换,android实现微信tab切换之-ViewPager
weixin_42489088的博客
05-28 638
ViewPager是我们在android开发中常用的一个组件，今天在本文中我们将用ViewPager实现类似微信的Tab切换这样一个功能，本文只适用于android开发初学者，大牛请绕道，先上图。 首先要实现以上功能，需要准备一些素材图片,素材图片我们的源码中有。要实现如上图所示的效果，我们需要对整个界面布局，那么在上图中，页面可以分成三个部分top，content，bott...
android tab之间滑动切换界面功能
weixin_34391445的博客
07-25 235
1. onTouchListener();                       //捕捉touch事件，比如说onDown    需要将可滑动的控件加上两个方法：（1）view.setOnTouchListener();  //实现可以touch 　　　　　　　　　　　　　　　　　 (2)  view.setLongClickAble();  //如果不加这个方法，这个view只会接受...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值