TabLayout、ViewPager实现页面切换

最新推荐文章于 2024-07-26 21:24:56 发布
最新推荐文章于 2024-07-26 21:24:56 发布
阅读量1.3k 收藏 4
点赞数
分类专栏： Android 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014465934/article/details/50835035
版权

实现效果图：
这里写图片描述
项目文件结构图：
这里写图片描述
注：build.gradle的dependencies里面应该加compile ‘com.android.support:design:23.2.0’，这个应该和你的SDK manager浪漫的Support Library一样。
这里写图片描述
1.MainActivity
主要是实现上面TabLayout、下面ViewPager布局：

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextColor="@android:color/black"
        app:tabSelectedTextColor="@android:color/holo_red_light"
        app:tabIndicatorColor="@android:color/holo_orange_light"
        app:tabIndicatorHeight="5dp"
        android:background="@android:color/holo_green_light"
        app:tabMode="scrollable"/>

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

2.第一个fragment布局

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

    <LinearLayout
        android:id="@+id/ll_personal_center_commission_repair"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_marginTop="10dp"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="60dp">

            <LinearLayout
                android:background="#FFFFFF"
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="match_parent">
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="2015-11-15 18:30"/>
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="王大发"/>
            </LinearLayout>

            <View
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>

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

                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:gravity="center_horizontal"
                    android:text="佣金：5元"/>
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="维修订单：256元"/>

            </LinearLayout>

        </LinearLayout>

        <View
            android:background="#efefef"
            android:layout_width="match_parent"
            android:layout_height="3dp"/>

        <LinearLayout
            android:layout_marginTop="10dp"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="60dp">

            <LinearLayout
                android:background="#FFFFFF"
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="match_parent">
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="2015-11-15 18:30"/>
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="王大发"/>
            </LinearLayout>

            <View
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>

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

                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:gravity="center_horizontal"
                    android:text="佣金：5元"/>
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="维修订单：256元"/>

            </LinearLayout>

        </LinearLayout>

        <View
            android:background="#efefef"
            android:layout_width="match_parent"
            android:layout_height="3dp"/>

        <LinearLayout
            android:layout_marginTop="10dp"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="60dp">

            <LinearLayout
                android:background="#FFFFFF"
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="match_parent">
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="2015-11-15 18:30"/>
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="王大发"/>
            </LinearLayout>

            <View
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>

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

                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:gravity="center_horizontal"
                    android:text="佣金：5元"/>
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="维修订单：256元"/>

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

3.第二个fragment布局

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

    <LinearLayout
        android:id="@+id/ll_personal_center_commission_shop"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_marginTop="10dp"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="60dp">

            <LinearLayout
                android:background="#FFFFFF"
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="match_parent">
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="2015-11-15 18:30"/>
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="王大发"/>
            </LinearLayout>

            <View
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>

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

                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:gravity="center_horizontal"
                    android:text="佣金：5元"/>
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="商城订单：256元"/>

            </LinearLayout>

        </LinearLayout>

        <View
            android:background="#efefef"
            android:layout_width="match_parent"
            android:layout_height="3dp"/>

        <LinearLayout
            android:layout_marginTop="10dp"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="60dp">

            <LinearLayout
                android:background="#FFFFFF"
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="match_parent">
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="2015-11-15 18:30"/>
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="王大发"/>
            </LinearLayout>

            <View
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>

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

                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:gravity="center_horizontal"
                    android:text="佣金：5元"/>
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="商城订单：256元"/>

            </LinearLayout>

        </LinearLayout>

        <View
            android:background="#efefef"
            android:layout_width="match_parent"
            android:layout_height="3dp"/>

        <LinearLayout
            android:layout_marginTop="10dp"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="60dp">

            <LinearLayout
                android:background="#FFFFFF"
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="match_parent">
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="2015-11-15 18:30"/>
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="王大发"/>
            </LinearLayout>

            <View
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="match_parent"/>

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

                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:gravity="center_horizontal"
                    android:text="佣金：5元"/>
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:textSize="18dp"
                    android:text="商城订单：256元"/>

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

4.MainActivity

package com.example.lenovo.tablayout;

import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import java.util.ArrayList;
import java.util.List;


public class MainActivity extends AppCompatActivity {

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

        TabLayout tabs = (TabLayout) findViewById(R.id.tabs);

        String[] titles ={"邀请的技术员","邀请的客户"};

        List<Fragment> fragments = new ArrayList<>();
        Test1Fragment fragment = new Test1Fragment();
        fragments.add(fragment);
        Test2Fragment fragment2 = new Test2Fragment();
        fragments.add(fragment2);

        //fragment.setSomething("asasasd");


        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        FragmentAdapter mAdapter = new FragmentAdapter(getSupportFragmentManager(),titles,fragments);
        viewPager.setAdapter(mAdapter);
        tabs.setupWithViewPager(viewPager);
        //这个属性是设置控件宽度自适应，很重要
        tabs.setTabMode(TabLayout.MODE_FIXED);
        tabs.setTabsFromPagerAdapter(mAdapter);
    }
}

5.Test1Fragment
获取第一个fragment布局

package com.example.lenovo.tablayout;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by lenovo on 2016/3/9.
 */
public class Test1Fragment extends Fragment {
    View view;
    String id;
    public Test1Fragment(){

    }
    public Test1Fragment(String id){
        this.id=id;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        //调用:inflater.inflate()方法加载Fragment的布局文件,接着返回加载的view对象
        view = inflater.inflate(R.layout.fragment,container,false);

        return view;
    }

    //public void setSomething(String data){ }
}

6.Test2Fragment
获取第二个fragment布局

package com.example.lenovo.tablayout;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by lenovo on 2016/3/9.
 */
public class Test2Fragment extends Fragment {
    View view;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        //调用:inflater.inflate()方法加载Fragment的布局文件,接着返回加载的view对象
        view = inflater.inflate(R.layout.fragment1,container,false);
        return view;
    }
}

7.FragmentAdapter
适配器

package com.example.lenovo.tablayout;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

import java.util.List;

/**
 * Created by lenovo on 2016/3/8.
 */

//适配器
public class FragmentAdapter extends FragmentStatePagerAdapter{

    String[] mTitles;
    List<Fragment> mFragments;

    public FragmentAdapter(FragmentManager fm, String[] titles, List<Fragment> fragments){
        super(fm);
        mTitles = titles;
        mFragments = fragments;
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }
}

tabs.setTabMode(TabLayout.MODE_FIXED);添加这个属性之后的布局效果是：
这里写图片描述

Cacra
关注
专栏目录
关于ViewPager的特别切换效果
y_xjjb的博客
12-05 2004
1、首先是ViewPager无特效效果 无特效 这个是ViewPager定义时最初的切换样式 部分布局 <com.google.android.material.tabs.TabLayout android:id="@+id/record_tabs" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_c
ViewPager 切换页面
blue的博客
07-16 3824
package com.gaoo.apptab; /** * ViewPager 实现tab * * 代码中存在一个小问题: 点击底部导航栏时,点击下面的文字没有问题可以正常切换,而点击标签文字上方的图片就不能实现正常切换了,这是为什么? * 因为我们在底部导航栏 4个 LinearLayout 布局中 图片的展示的控件是 ImageButton ,而它本身具备消费点击事件的能力,自己把点
viewpager实现页面切换demo
12-27
viewpager实现切换图片界面的demo
TabLayout+ViewPager 实现页面切换
橘子丶
12-11 529
MainActivity.this package com.example.kanghuwei.tablayout; import android.support.annotation.Nullable; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import a...
【Android】使用ViewPager2与TabLayout实现顶部导航栏＋页面切换
最新发布
2301_79344902的博客
07-26 1980
介绍了ViewPager2和TabLayout协同使用完成标题导航栏的方法
ViewPager实现页面切换
forlong401的专栏--有问题上：http://www.androidren.com
08-20 2118
http://blog.csdn.net/nainai007/article/details/7555746 最近一段时间安装新应用时，很多应用第一次启动，都是通过几个页面的切换来展示一些内容，但是第二次启动应用的时候却不出现了，样子如下图所以 我个人感觉这个效果蛮好的，于是找了一下资料，发现实现这个功能也不是挺难，主要是用到ViewPager这个东西，要使用ViewPager
Android ViewPager实现圆点导航左右滑动和Fragment页面切换
09-22
并实例利用ViewPager，PagerAdapter和OnPageChangeListener实现圆点导航左右滑动效果，并实现了被滑动界面处理控件事件，同时通过Fragment实现两个页面切换效果
Viewpager页面切换
心如止水ad
02-22 139
View view=inflater.inflate(R.layout.fragmentyi,container,false);
Android中TabLayout结合ViewPager实现页面切换效果
09-01
在本篇文章中，我们将详细介绍如何在Android中结合`TabLayout` 和 `ViewPager` 实现页面切换。 首先，`TabLayout` 是Android Design Support Library中的一个组件，它提供了类似Google Material Design风格的标签页...
Android中TabLayout结合ViewPager实现页面切换
08-31
在Android开发中，实现页面切换效果常常采用TabLayout与ViewPager的组合。TabLayout提供了一种优雅的方式展示多个可切换的标签页，而ViewPager则负责管理这些页面的实际内容。以下是实现这个功能的详细步骤和相关...
viewpager 点击小圆点切换页面
03-22
这是一个Viewpager的一个Demo，实现了点击校园点切换页面的效果
ViewPager的使用方法(实现左右滑动切换页面)
02-09
ViewPager的使用方法(实现左右滑动切换页面) 类似于微信TAB
用TabLayout，ViewPager实现左右滑动切换页面的效果
06-25
学习android两周多了，这几天在根据产品的要求改页面，刚好是左右滑动切换界面。于是把这部分单独拿出来搞了个Demo。希望对跟我一样初学android的朋友有所帮助。Demo主要用到的知识点包括：TabLayout， ViewPager，左右滑动切换tab界面，点击选项卡也可切换界面，一个activity包含多个fragment。tab页界面布局一致，但加载数据不同。
TabLayout+ViewPager，切换页面，可点击，可滑动
07-02
将 `TabLayout` 与 `ViewPager` 结合使用，可以实现更直观、友好的页面切换体验。以下是一个基本的集成步骤： 1. 在布局文件中添加 `TabLayout` 和 `ViewPager`，并为它们设置相应的 ID。 ```xml ...
关于Tablayout与ViewPager的结合切换效果
y_xjjb的博客
12-06 653
关于Tablayout与ViewPager的结合使用
ViewPager切换页面
成都都成
08-06 2648
1.首先完成底部导航栏 2.完成ViewPager切换界面 利用Fragmens切换，导航栏上有四个按钮，则写四个Fragemts对应四个页面。 public class HelpFragment extends Fragment { @Nullable @Override public View onCreateView(LayoutInflater inflat...
ViewPager+Fragment实现页面切换
天王盖地虎
04-06 859
先扔个布局 <LinearLayout android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http:/...
ViewPager实现左右切换
baidu_37641868的博客
03-03 595
布局文件，指示器与屏幕显示内容 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="
Android TabLayout+ViewPager 实现页面切换示例
TabLayout+ViewPager的组合提供了灵活且直观的页面切换体验。通过适当的配置，开发者可以定制化菜单栏的位置，创建出满足不同需求的多页面应用界面。在实际开发中，应根据项目需求选择合适的依赖版本，并确保与项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值