非常简单的TabLayout+viewpager+fragment(真的是简单的不得了)

最新推荐文章于 2020-05-04 10:56:01 发布

原创最新推荐文章于 2020-05-04 10:56:01 发布 · 702 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#android #java #tablayout #viewpager #fragment

知识总结专栏收录该内容

80 篇文章

订阅专栏

本文详细介绍如何在Android应用中使用TabLayout与ViewPager组件实现页面切换效果。通过具体代码示例，展示如何设置TabLayout的样式，配置ViewPager适配器，并关联两者以实现流畅的页面滑动体验。

Tablayout是5.0新出的新特性，想要使用，必须得依赖design包，地址：

implementation 'com.android.support:design:28.0.0'

不多说了，直接看代码吧。

activity中：

package com.example.lenovo.myapplication.activity;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.example.lenovo.myapplication.R;
import com.example.lenovo.myapplication.adapter.MyViewPageAdapter;
import com.example.lenovo.myapplication.fragment.RedianFragment;
import com.example.lenovo.myapplication.fragment.TuijianFragment;
import com.example.lenovo.myapplication.fragment.TupianWenFragment;
import com.example.lenovo.myapplication.fragment.XinWenFragment;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
    private List<String> mTitleList;//页卡标题集合
    private List<Fragment> fragments;
    private TabLayout tab_layout;
    private ViewPager view_pager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
        initData();
    }
    private void init() {
        tab_layout = findViewById(R.id.tab_layout);
        view_pager = findViewById(R.id.view_pager);
    }
    private void initData() {
        mTitleList = new ArrayList<>();
        fragments = new ArrayList<>();
        mTitleList.clear();
        fragments.clear();
        mTitleList.add("新闻");
        mTitleList.add("热点");
        mTitleList.add("推荐");
        mTitleList.add("图片");
        fragments.add(new XinWenFragment());
        fragments.add(new RedianFragment());
        fragments.add(new TuijianFragment());
        fragments.add(new TupianWenFragment());
        MyViewPageAdapter pageAdapter = new MyViewPageAdapter(getSupportFragmentManager(),mTitleList,fragments);
        view_pager.setAdapter(pageAdapter);
        tab_layout.setupWithViewPager(view_pager);
        tab_layout.setTabsFromPagerAdapter(pageAdapter);
    }
}

adapter中：

package com.example.lenovo.myapplication.adapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
public class MyViewPageAdapter extends FragmentPagerAdapter {
    private final List<String> titleLists;
    private final List<Fragment> fragments;
    public MyViewPageAdapter(FragmentManager fm, List<String> mTitleList, List<Fragment> fragments) {
        super(fm);
        this.titleLists = mTitleList;
        this.fragments = fragments;
    }
    @Override
    public Fragment getItem(int i) {
        return fragments.get(i);
    }
    @Override
    public int getCount() {
        return fragments.size();
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return titleLists.get(position);
    }
}

布局文件：

<?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="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context=".activity.MainActivity">

    <android.support.design.widget.TabLayout
        android:background="@color/colorTabBack"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabSelectedTextColor="@color/colorPrimary"
        app:tabTextColor="@color/colorBlack"
        app:tabTextAppearance="@style/TabLayoutTextAppearance"
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>

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

style中:(主要是为了设置tab中的文字大小)

    <style name="TabLayoutTextAppearance">
        <item name="android:textSize">@dimen/sp_20</item>
    </style>
    <dimen name="sp_20">20sp</dimen>