FragmentPagerAdapter+ViewPager实现Tab

最新推荐文章于 2019-10-11 16:41:12 发布
最新推荐文章于 2019-10-11 16:41:12 发布
阅读量739 收藏 2
点赞数
分类专栏： Android常用控件 文章标签： Android常用控件 FragmentPagerAdapter+ViewPager
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amoscxy/article/details/80158316
版权

转载请注明出处amoscxy的博客：https://mp.csdn.net/mdeditor/80158316

转载请注明出处amoscxy的博客：https://mp.csdn.net/mdeditor/80158316

FragmentPagerAdapter+ViewPager实现Tab

1.1 效果

这里写图片描述

1.2 目录

这里写图片描述

1.3 素材

  • bottom_bar9.png
    这里写图片描述
    • tab_address_normal.png
      这里写图片描述
    • tab_address_pressed.png
      这里写图片描述
    • tab_bg2.png
      这里写图片描述
  • tab_find_frd_normal.png
    这里写图片描述
  • tab_find_frd_pressed.png
    这里写图片描述
  • tab_settings_normal.png
    这里写图片描述
  • tab_settings_pressed.png
    这里写图片描述
  • tab_weixin_normal.png
    这里写图片描述
  • tab_weixin_pressed.png
    这里写图片描述
  • title_bar9.png
    这里写图片描述

1.4 顶部提示栏top.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="45dp"
    android:background="@drawable/title_bar9"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold" />

</LinearLayout>
  • 视图：
    这里写图片描述

1.5 底部标签bottom.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="55dp"
    android:background="@drawable/bottom_bar9"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/id_tab_weixin"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_weixin_pressed" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_frd"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_frd_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_find_frd_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="朋友"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_address"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_address_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_address_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通讯录"
            android:textColor="#ffffff" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/id_tab_settings"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageButton
            android:id="@+id/id_tab_settings_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@drawable/tab_settings_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="设置"
            android:textColor="#ffffff" />
    </LinearLayout>

</LinearLayout>
  • 视图：
    这里写图片描述

1.6 activity_main.xml

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

    <include layout="@layout/top" />

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <include layout="@layout/bottom" />

</LinearLayout>
  • 视图：
    这里写图片描述

1.7 四个切换界面

1.7.1 tab01.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"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Weixin Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>
  • 图示：
    这里写图片描述

1.7.2 tab02.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"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Frd Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>
  • 图示：
    这里写图片描述

1.7.3 tab03.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"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Address Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>
  • 图示：
    这里写图片描述

1.7.4 tab04.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"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="This is Settings Tab"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>
  • 图示：
    这里写图片描述

1.8 四个自定义Fragment

1.8.1 WeixinFragment

public class WeixinFragment extends Fragment {


    public WeixinFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab01,container,false);
    }

}

1.8.2 FrdFragment

public class FrdFragment extends Fragment {


    public FrdFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab02,container,false);
    }

}

1.8.3 AddressFragment

public class AddressFragment extends Fragment {


    public AddressFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab03,container,false);
    }

}

1.8.4 SettingFragment

public class SettingFragment extends Fragment {


    public SettingFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab04,container,false);
    }

}

1.9 MainActivity

package com.example.cxy.testtap;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

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

public class MainActivity extends FragmentActivity implements OnClickListener
{
    private ViewPager mViewPager;
    private FragmentPagerAdapter mAdapter;
    private List<Fragment> mFragments;

    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabAddress;
    private LinearLayout mTabSetting;

    private ImageButton mWeixinImg;
    private ImageButton mFrdImg;
    private ImageButton mAddressImg;
    private ImageButton mSettingImg;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
        initEvents();
        setSelect(0);
    }

    private void setSelect(int i) {
        setTab(i);
        mViewPager.setCurrentItem(i);
    }

    private void setTab(int i) {
        resetImg();
        switch(i){
            case 0:
                mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                mAddressImg.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
    }

    private void initEvents()
    {
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabAddress.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
    }

    private void initView()
    {
        mViewPager = findViewById(R.id.id_viewpager);
        // tabs
        mTabWeixin = findViewById(R.id.id_tab_weixin);
        mTabFrd = findViewById(R.id.id_tab_frd);
        mTabAddress = findViewById(R.id.id_tab_address);
        mTabSetting = findViewById(R.id.id_tab_settings);
        // ImageButton
        mWeixinImg = findViewById(R.id.id_tab_weixin_img);
        mFrdImg = findViewById(R.id.id_tab_frd_img);
        mAddressImg = findViewById(R.id.id_tab_address_img);
        mSettingImg = findViewById(R.id.id_tab_settings_img);

        mFragments = new ArrayList<Fragment>();
        Fragment mTab1 = new WeixinFragment();
        Fragment mTab2 = new FrdFragment();
        Fragment mTab3 = new AddressFragment();
        Fragment mTab4 = new SettingFragment();
        mFragments.add(mTab1);
        mFragments.add(mTab2);
        mFragments.add(mTab3);
        mFragments.add(mTab4);
        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }

            @Override
            public int getCount() {
                return mFragments.size();
            }
        };
        mViewPager.setAdapter(mAdapter);

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                int currentItem = mViewPager.getCurrentItem();
                setTab(currentItem);
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    /**
     * 底部四个ImageButton都置为normal
     */
    private void resetImg()
    {
        mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
        mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
        mAddressImg.setImageResource(R.drawable.tab_address_normal);
        mSettingImg.setImageResource(R.drawable.tab_settings_normal);
    }

    @Override
    public void onClick(View v) {
        resetImg();
        switch (v.getId()){
            case R.id.id_tab_weixin:
                setSelect(0);
                break;
            case R.id.id_tab_frd:
                setSelect(1);
                break;
            case R.id.id_tab_address:
                setSelect(2);
                break;
            case R.id.id_tab_settings:
                setSelect(3);
                break;
            default:
                break;
        }
    }
}
  • 源码分析
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

为了保持兼容性全部时候v4下的Fragment

private ViewPager mViewPager;
private FragmentPagerAdapter mAdapter;
private List<Fragment> mFragments;

private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAddress;
private LinearLayout mTabSetting;

private ImageButton mWeixinImg;
private ImageButton mFrdImg;
private ImageButton mAddressImg;
private ImageButton mSettingImg;

private ViewPager mViewPager;
mViewPager是ViewPager

private FragmentPagerAdapter mAdapter;
使用FragmentPagerAdapter

private List mFragments;
用于存放4个自定义Fragment

private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAddress;
private LinearLayout mTabSetting;
底部四个tabs是LinearLayout控件

private ImageButton mWeixinImg;
private ImageButton mFrdImg;
private ImageButton mAddressImg;
private ImageButton mSettingImg;
底部四个tabs中的四个ImageButton

mViewPager = findViewById(R.id.id_viewpager);
// tabs
mTabWeixin = findViewById(R.id.id_tab_weixin);
mTabFrd = findViewById(R.id.id_tab_frd);
mTabAddress = findViewById(R.id.id_tab_address);
mTabSetting = findViewById(R.id.id_tab_settings);
// ImageButton
mWeixinImg = findViewById(R.id.id_tab_weixin_img);
mFrdImg = findViewById(R.id.id_tab_frd_img);
mAddressImg = findViewById(R.id.id_tab_address_img);
mSettingImg = findViewById(R.id.id_tab_settings_img);

mFragments = new ArrayList<Fragment>();
Fragment mTab1 = new WeixinFragment();
Fragment mTab2 = new FrdFragment();
Fragment mTab3 = new AddressFragment();
Fragment mTab4 = new SettingFragment();
mFragments.add(mTab1);
mFragments.add(mTab2);
mFragments.add(mTab3);
mFragments.add(mTab4);
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    @Override
    public int getCount() {
        return mFragments.size();
    }
};
mViewPager.setAdapter(mAdapter);

是ViewPager的一般步骤，可以参考
https://blog.csdn.net/amoscxy/article/details/80153088

mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        int currentItem = mViewPager.getCurrentItem();
        setTab(currentItem);
    }

    @Override
    public void onPageSelected(int position) {

    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
});

作用是随着ViewPager的滑动，底部tabs也跟随变动

private void setTab(int i) {
    resetImg();
    switch(i){
        case 0:
            mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
            break;
        case 1:
            mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
            break;
        case 2:
            mAddressImg.setImageResource(R.drawable.tab_address_pressed);
            break;
        case 3:
            mSettingImg.setImageResource(R.drawable.tab_settings_pressed);
            break;
        default:
            break;
    }
}

根据位置i，设置对应的ImageButton设置为pressed

private void resetImg()
{
    mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
    mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
    mAddressImg.setImageResource(R.drawable.tab_address_normal);
    mSettingImg.setImageResource(R.drawable.tab_settings_normal);
}

底部四个ImageButton都置为normal

private void setSelect(int i) {
    setTab(i);
    mViewPager.setCurrentItem(i);
}

根据点击的底部四个tabs，设置点击的ImageButton为pressed，设置展示的对应ViewPager

1.10 FragmentPagerAdapter+ViewPager组合的好处

  • 使用Fragment的好处是，可以通过各自的Fragment来控制自己的布局和逻辑，不会是代码都冗余在activity里面，activity只作为一个调度器，来显示和隐藏对应的Fragment，这样便于后期的维护和复用
  • 如果想让显示界面可以左右滑动最好使用FragmentPagerAdapter+ViewPager组合

转载请注明出处amoscxy的博客：https://mp.csdn.net/mdeditor/80158316

amoshcxy
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TabLayout+Fragment+ViewPager+FragmentStatePagerAdapter实现Tab标签
wuyinlei的博客
01-23 6076
tablayout+fragment+viewpager+fragmentstatepageradapter实现tab滑动
某宅的Android学习笔记(三)——用ViewPager与FragmentPagerAdapter实现可以滑动的Tab
mouzhai的博客
08-24 1099
自学三个月的Android，磕磕碰碰写了一个小项目“看知乎”，数据源来自大神的看知乎API。这里记录一下自己在coding中收获的一些知识点。
FragmentPagerAdapter和FragmentStatePagerAdapter
ScottePerk的博客
10-11 417
在Fragment和ViewPager结合使用的时候。会用到PagerAdapter作为ViewPager的适配器。通常在实现ViewPager的时候，我们需要自己定义ViewPager,而在Fragment和ViewPager结合使用的时候。官方为我们提供了两个实现类FragmentPagerAdapter和FragmentStatePagerAdapter来帮助我们更快的实现效果。 1.官方...
Tab总结及完美解决FragmentPagerAdapter保存数据更新问题
Franco的博客
01-14 1437
把常见的实现方式给大家来个总结。 学习鸿洋大神，受益匪浅 1、传统的ViewPager实现 评价： 所有的代码都集中在一个Activity中，显得代码比较乱。 2、FragmentManager+Fragment实现 评价： 每个Fragment中的控件的处理，都是独立到各自的类中，相对来说主Activity简化了不少，可惜没有左右滑动的效果了。 3、ViewPager+Fragm
ViewPager+FragmentPagerAdapter实现Tab/模仿微信界面（推荐使用）
Mr_Leixiansheng的博客
03-30 1675
步骤： 1、新建4个继承Fragment的类和4个布局，分别将布局添加到新建的类中 2、初始化时将4个Fragment存入到List集合（作为适配器资源） 3、设置适配器FragmentPagerAdapter 4、添加适配器 5、设置按键监听、滑动监听 代码如下： 1、设置好4个Fragment碎片（4个相似，只贴出一个碎片步骤）
Android-FragmentPagerAdapter刷新无效的解决方案
川峰的博客
04-04 8693
最近在重构项目的时候有个地方想要做一个更换FragmentPagerAdapter中的Fragment的功能，按照通常使用ListView的习惯做法，如果你只是更新保存Fragment的List数据，然后调用adapter的notifyDataSetChanged()是不会起作用的（下面会分析原因）。 搜索了下发现此问题普遍存在，多数是说先移除Fragment再notifyDataSetChan...
ViewPager+FragmentPagerAdapter实现Tab
04-29
代码为博客的实例代码：http://blog.csdn.net/lmj623565791/article/details/24740977 有问题博客中留言
FragmentPagerAdapter+ViewPager实现Tab源码
12-11
本文将深入探讨如何使用`FragmentPagerAdapter`和`ViewPager`实现Tab功能，并解析源码中的关键概念。 首先，`ViewPager`是Android中的一个视图容器，它允许用户左右滑动查看多个页面，每个页面通常由一个`Fragment`...
ViewPagerIndicator+ViewPager实现Tab源码
12-11
实现`ViewPager` 和 `ViewPagerIndicator` 结合的Tab功能，首先需要在项目中添加相应的依赖。在Gradle构建文件中引入`ViewPagerIndicator` 库，并确保`ViewPager` 和其他必要的Support库也已引入。 接下来，我们...
Fragment+ViewPager实现tab
02-27
本文将深入探讨如何使用`Fragment`和`ViewPager`实现Tab功能。 首先，我们需要理解`Fragment`。`Fragment`是Android 3.0（API级别11）引入的一个新概念，它是Activity的一部分，可以独立存在或嵌入到Activity中。它...
ViewPager与Fragment结合的简单使用
09-23
ViewPager与Fragment结合的简单使用
Android实现Tab布局的4种方式（Fragment+TabPageIndicator+ViewPager）
01-04
Android现在实现Tab类型的界面方式越来越多，今天就把常见的实现方式给大家来个总结。目前写了： 1、传统的ViewPager实现 2、FragmentManager+Fragment实现 3、ViewPager+FragmentPagerAdapter实现 4、...
Android开发ViewPager+TabLayout详解（使用FragmentPagerAdapter和PagerAdapter两个Demo叙述）
yaoyaoyao_123的博客
01-08 1161
在讲解之前首先看一下所要展示的效果： 在使用TabLayout这个控件之前，首先要在build.gradle添加下面这行依赖： compile 'com.android.support:design:27.1.0' 1，在activity_main.xml布局文件中添加TabLayout和ViewPager两个控件： <LinearLayout xmlns:android="...
Android-- FragmentStatePagerAdapter分页
maozhuxigood
08-13 292
ViewPager ViewPager如其名所述，是负责翻页的一个 View。准确说是一个ViewGroup，包含多个 View 页，在手指横向滑动屏幕时，其负责对 View 进行切换。为了生成这些 View 页，需要提供一个PagerAdapter来进行和数据绑定以及生成最终的 View 页。 setAdapter() ViewPager 通过 setAdapter...
FragmentPagerAdapter 页面类型、数量、内容更新问题
weixin_34060299的博客
01-21 439
2019独角兽企业重金招聘Python工程师标准>>> ...
ViewPager+FragmentPagerAdapter的使用
热门推荐
宝华的小岛
12-18 1万+
这个组合是用ViewPager管理fragment，没有TabLayout，可以使用其他诸如按钮和文本控件来控制。 一、FragmentsActivity  /** * ViewPager+FragmentPagerAdapter */ public class FragmentsActivity extends AppCompatActivity { private ViewPa
ViewPager刷新问题原理分析及解决方案（FragmentPagerAdapter+FragementStatePagerAdapter）...
weixin_34258838的博客
01-03 444
Android开发中经常用到ViewPager+Fragment+Adapter的场景，一般每个Fragment控制自己的刷新，但是如果想要刷新整个ViewPager怎么做呢？或者想要将缓存的Fragent给重建怎么做呢？之前做业务的时候遇到一个问题，ViewPage在第二次setAdapter的如果用的是FragmentPager并不会导致页面刷新，但是采用FragementStatePager...
ViewPager使用FragmentPagerAdapter适配器
qq_36473318的博客
02-27 797
ViewPager使用FragmentPagerAdapter适配器。 FragmentPagerAdapter派生自PagerAdapter，它是用来呈现Fragment页面的。   /** * Home页面的适配器adapter */ public class HomeFragmentAdapter extends FragmentPagerAdapter{ private...
超市管理系统，基于javaweb.zip
最新发布
08-15
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无积分，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于收集和整理资料耗费时间的酬劳
Android tableLayout+viewpager+Fragment
04-05
Android TableLayout is a ViewGroup which displays the data in a tabular form. It is used to create a user interface with rows and columns similar to a spreadsheet. ViewPager is a View which allows the user to swipe left and right to navigate between pages. Fragments are reusable components which can be used to create dynamic user interfaces. To create a TableLayout with ViewPager and Fragment, follow the below steps: 1. Create a new Android Studio project. 2. Add the required dependencies in the build.gradle file. 3. Create a new Fragment class for each tab. 4. Create a layout file for each Fragment. 5. Create a new FragmentPagerAdapter class to manage the Fragments. 6. Create a layout file for the Activity which will contain the TableLayout and ViewPager. 7. Add the TableLayout and ViewPager to the layout file. 8. Initialize the ViewPager in the Activity and set the FragmentPagerAdapter. 9. Create a new TabLayout and add it to the layout file. 10. Add the TabLayout to the ViewPager. Example code: 1. Add the dependencies in the build.gradle file: ``` dependencies { implementation 'com.google.android.material:material:1.4.0' implementation 'androidx.viewpager2:viewpager2:1.0.0' } ``` 2. Create a new Fragment class for each tab: ``` public class TabFragment extends Fragment { private int tabPosition; public TabFragment(int tabPosition) { this.tabPosition = tabPosition; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_tab, container, false); TextView textView = view.findViewById(R.id.tab_text); textView.setText(getString(R.string.tab_text, tabPosition + 1)); return view; } } ``` 3. Create a layout file for each Fragment: ``` <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/tab_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:textAppearanceLarge" /> </LinearLayout> ``` 4. Create a new FragmentPagerAdapter class to manage the Fragments: ``` public class TabAdapter extends FragmentStateAdapter { public TabAdapter(FragmentActivity activity) { super(activity); } @Override public Fragment createFragment(int position) { return new TabFragment(position); } @Override public int getItemCount() { return 3; } } ``` 5. Create a layout file for the Activity which will contain the TableLayout and ViewPager: ``` <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content"/> <androidx.viewpager2.widget.ViewPager2 android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout> ``` 6. Initialize the ViewPager in the Activity and set the FragmentPagerAdapter: ``` public class MainActivity extends AppCompatActivity { private ViewPager2 viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); TabLayout tabLayout = findViewById(R.id.tab_layout); viewPager = findViewById(R.id.view_pager); viewPager.setAdapter(new TabAdapter(this)); new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> tab.setText("Tab " + (position + 1)) ).attach(); } } ``` 7. Create a new TabLayout and add it to the layout file: ``` <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content"/> ``` 8. Add the TabLayout to the ViewPager: ``` TabLayout tabLayout = findViewById(R.id.tab_layout); viewPager.setAdapter(new TabAdapter(this)); new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> tab.setText("Tab " + (position + 1)) ).attach(); ``` This will create a TableLayout with ViewPager and Fragment. The user can swipe left and right to navigate between tabs. Each tab will display a Fragment with a TextView showing the tab number.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值