TabLayout + Fragment 实现页面滑动

2019-01-01  本文已影响0人  树蜂

目录
1、效果
2、代码


1、效果

可点击标题,也可滑动切换


TabFragment.gif

2、代码

1)代码结构


屏幕快照 2019-01-01 下午12.26.41.png

2)添加依赖

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

3)布局文件
fragment_first.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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="第一个"/>
</android.support.constraint.ConstraintLayout>

fragment_second.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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="第二个"/>
</android.support.constraint.ConstraintLayout>

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabSelectedTextColor="#ff0000"
        app:tabIndicatorColor="#00ff00"
        app:tabTextColor="#000"
        app:tabBackground="@android:color/transparent"
        app:tabTextAppearance="@android:style/TextAppearance.Holo.Medium"
        app:tabIndicatorHeight="3dp"
        />

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

</LinearLayout>

4)代码清单
HasTitleFragment.java:
该类主要是为了显示tab的标题

package com.shufeng.tabfragmenttest.mainfragment;

import android.support.v4.app.Fragment;

public abstract class HasTitleFragment extends Fragment
{
    private String title;
    public HasTitleFragment(String pTitle)
    {
        title = pTitle;
    }

    String getTitle()
    {
        return title;
    }
}

FragmentFirst.java:

package com.shufeng.tabfragmenttest.mainfragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.shufeng.tabfragmenttest.R;


public class FragmentFirst extends HasTitleFragment
{
    public FragmentFirst()
    {
        super("标题一");
    }

    public static FragmentFirst newInstance()
    {
        FragmentFirst instance = new FragmentFirst();
        return instance;
    }

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
    }

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


        return view;
    }
}

FragmentSecond.java

package com.shufeng.tabfragmenttest.mainfragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.shufeng.tabfragmenttest.R;


public class FragmentSecond extends HasTitleFragment
{
    public FragmentSecond()
    {
        super("标题二");
    }

    public static FragmentSecond newInstance()
    {
        FragmentSecond instance = new FragmentSecond();
        return instance;
    }

    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
    }

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


        return view;
    }
}

MainFragmentAdapter.java

package com.shufeng.tabfragmenttest.mainfragment;

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

import java.util.List;

public class MainFragmentAdapter extends FragmentPagerAdapter
{
    private List<HasTitleFragment> fragmentList;

    public MainFragmentAdapter(FragmentManager fm, List<HasTitleFragment> pFragmentList)
    {
        super(fm);
        fragmentList = pFragmentList;
    }

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

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

    @Override
    public CharSequence getPageTitle(int position)
    {
        return fragmentList.get(position).getTitle();
    }
}

MainActivity.class:

package com.shufeng.tabfragmenttest;

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.shufeng.tabfragmenttest.mainfragment.FragmentFirst;
import com.shufeng.tabfragmenttest.mainfragment.FragmentSecond;
import com.shufeng.tabfragmenttest.mainfragment.HasTitleFragment;
import com.shufeng.tabfragmenttest.mainfragment.MainFragmentAdapter;

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

public class MainActivity extends AppCompatActivity
{

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

        init();
    }

    private void init()
    {
        HasTitleFragment first = FragmentFirst.newInstance();
        HasTitleFragment second = FragmentSecond.newInstance();
        List<HasTitleFragment> _FragmentList = new ArrayList<>();
        _FragmentList.add(first);
        _FragmentList.add(second);
        MainFragmentAdapter _Adapter = new MainFragmentAdapter(getSupportFragmentManager(), _FragmentList);
        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(_Adapter);


        // 关联起来
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout_login);
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        tabLayout.setupWithViewPager(mPager);
    }
}

结束。

上一篇 下一篇

猜你喜欢

热点阅读