Fragment+ViewPager+TabLayout

最新推荐文章于 2024-07-26 21:24:56 发布

SeeYouTomorrow_s

最新推荐文章于 2024-07-26 21:24:56 发布

阅读量297

点赞数

分类专栏： android高级1

本文链接：https://blog.csdn.net/SeeYouTomorrow_s/article/details/111307276

版权

android高级1 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

Fragment+ViewPager+TabLayout

TabLayout的介绍
案例

TabLayout的介绍

Tablayout继承自HorizontalScrollView，用作页面切换指示器，因使用简便功能强大而广泛使用在App中。

官方介绍，TabLayout 是一个横向标签显示的布局，效果就是现在很多新闻客户端的那种顶部标签展示效果，并支持指示器、 ViewPager 联动
TabLayout 的几个常用属性值:

app:tabBackground 标签布局的背景色
app:tabIndicatorColor 指示器的颜色
app:tabIndicatorHeight 指示器的高度（如果不需要指示器可以设置为0dp）
app:tabMode 显示模式：默认 fixed（固定），scrollable（可横向滚动）
app:tabPadding 标签内边距
app:tabSelectedTextColor 标签选中的文本颜色
app:tabTextAppearance 标签文本样式
app:tabTextColor 标签未选中的文本颜色

简单使用
效果图：
在这里插入图片描述
从效果图来看，这是采用 TabLayout + ViewPager 滑动切换和点击标签切换的一个效果。TabLayout 支持横向滚动多标签设置，还可以支持指示器，支持与 ViewPager 进行联动。下面看看具体实现

1 ,引入 com.android.support:design
TabLayout 是属于 com.android.support:design 包的控件，所以需要依赖该包

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

2,MainActivity的xml文件的创建

<?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:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_id"
        app:tabSelectedTextColor="#E5AF35"
        app:tabTextColor="#969696"
        app:tabIndicatorColor="#E5AF35"
        app:tabIndicatorHeight="5dp"
        app:tabMode="scrollable"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp">

    </android.support.design.widget.TabLayout>

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

    </android.support.v4.view.ViewPager>
</LinearLayout>

3,Java代码：MainActivity.java

package com.example.day007;

import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;

import com.example.day007.adapter.MyFragmentAdapter;
import com.example.day007.fragment.OneFragment;
import com.example.day007.fragment.TwoFragment;

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

public class MainActivity extends AppCompatActivity {
    private TabLayout tabId;
    private ViewPager vpId;

    private List<Fragment> list = new ArrayList<>();
    private List<String> titles = new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        tabId = findViewById(R.id.tab_id);
        vpId = findViewById(R.id.vp_id);
        
        list.add(new OneFragment());
        list.add(new TwoFragment());
        list.add(new OneFragment());
        list.add(new TwoFragment());
       
        titles.add("视频");
        titles.add("新闻");
        titles.add("图片");
        titles.add("留言");
        
        MyFragmentAdapter myFragmentAdapter = new MyFragmentAdapter(getSupportFragmentManager(), list, titles);
        vpId.setAdapter(myFragmentAdapter);

        //把viewPager和tabLayout绑定在一起,注释掉看看效果.
        tabId.setupWithViewPager(vpId);
    }
}

4,适配器代码：MyFragmentAdapter.java

package com.example.day007.adapter;

import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;

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

/**
 * ${FENG}
 * 2019-07-11
 */
public class MyFragmentAdapter extends FragmentStatePagerAdapter {
    private List<Fragment> list;
    private List<String> titles;

    public MyFragmentAdapter(FragmentManager fm, List<Fragment> list, List<String> titles) {
        super(fm);
        this.list = list;
        this.titles = titles;
    }

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

    @Override
    public Fragment getItem(int i) {
        return list.get(i);
    }

	//返回与viewpage关联以后的tablayot的内容
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);
    }
}

案例

在这里插入图片描述

1.XML代码

<?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"
    tools:context=".MainActivity">
    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabMode="scrollable"
        android:id="@+id/tab">
    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pv"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="8"></androidx.viewpager.widget.ViewPager>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal"
        android:id="@+id/ll"
        ></LinearLayout>

</LinearLayout>

//Fragment默认布局就可以

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".BlankFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/hello_blank_fragment" />

</FrameLayout>

2.MainActivity JAVA代码

package com.example.day007;

import android.os.Bundle;
import android.widget.ImageView;
import android.widget.LinearLayout;

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

import com.google.android.material.tabs.TabLayout;

import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;

public class MainActivity extends AppCompatActivity {

    private ViewPager pv;
    private LinearLayout ll;
    private TabLayout tab;

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

        List<String> sss = new ArrayList<>();
        sss.add("金雷克萨");
        sss.add("jkndas");
        sss.add("金雷克萨");
        sss.add("jkndas");
        sss.add("金雷克萨");
        sss.add("jkndas");
        sss.add("金雷克萨");
        sss.add("jkndas");
        sss.add("金雷克萨");
        sss.add("jkndas");
        sss.add("金雷克萨");
        sss.add("jkndas");


        final List<Fragment> list = new ArrayList<>();
        list.add(new BlankFragment());
        list.add(new BlankFragment());
        list.add(new BlankFragment());
        list.add(new BlankFragment());
        list.add(new BlankFragment());
        list.add(new BlankFragment());
        list.add(new BlankFragment());
        list.add(new BlankFragment());
        list.add(new BlankFragment());
        list.add(new BlankFragment());
        list.add(new BlankFragment());
        list.add(new BlankFragment());

        final List<ImageView> list1 = new ArrayList<>();
        for (int i = 0; i < list.size(); i++) {
            ImageView imageView = new ImageView(this);
            if (i == 0) {
                imageView.setImageResource(R.drawable.dian);
            } else {
                imageView.setImageResource(R.drawable.dian_f);
            }
            list1.add(imageView);
            ll.addView(imageView);
        }

        Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            int index = 0;

            @Override
            public void run() {

                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        pv.setCurrentItem(index++);
                    }
                });
                if (index > list.size()) {
                    index = 0;
                }
            }
        }, 0, 1000);

        pv.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                for (int i = 0; i < list1.size(); i++) {
                    ImageView imageView = list1.get(i);
                    if (i == position) {
                        imageView.setImageResource(R.drawable.dian);
                    } else {
                        imageView.setImageResource(R.drawable.dian_f);
                    }
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        FgAdapter fgAdapter = new FgAdapter(getSupportFragmentManager(), list, sss);
        pv.setAdapter(fgAdapter);
        tab.setupWithViewPager(pv);

    }

    private void initView() {
        pv = (ViewPager) findViewById(R.id.pv);
        ll = (LinearLayout) findViewById(R.id.ll);
        tab = (TabLayout) findViewById(R.id.tab);
    }
}

适配器代码

package com.example.day007;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

public class FgAdapter extends FragmentPagerAdapter {
    private  List<Fragment> list;
    private List<String> sss;
    public FgAdapter(@NonNull FragmentManager fm,List<Fragment> list,List<String> sss) {
        super(fm);
        this.list = list;
        this.sss = sss;
    }

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

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

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return sss.get(position);
    }
}

Fragment java类代码默认就可以

package com.example.day007;


import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


/**
 * A simple {@link Fragment} subclass.
 */
public class BlankFragment extends Fragment {


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


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment

        return inflater.inflate(R.layout.fragment_blank, container, false);

    }

}