笔记TabLayout + ViewPager + FragmentPagerAdapter 组合用法

Posted 2020-09-28 豆子

• TabLayout的xml文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- TODO: Update blank fragment layout -->
    <!-- Toolbar -->
    <LinearLayout
        android:id="@+id/daily_pic"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:paddingTop="16dp"
        android:paddingLeft="18dp"
        android:background="@color/blue_btn_color_normal">

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

            <ImageButton
                android:id="@+id/btn_wei_left1"
                android:layout_width="wrap_content"
                android:layout_height="20dp"
                android:layout_marginTop="4dp"
                android:background="@drawable/ic_me_left"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="优惠券"
                android:paddingRight="50dp"
                android:layout_marginLeft="115dp"
                android:gravity="left"
                android:textSize="21dp"
                android:textColor="#f7efef"
                android:background="@color/blue_btn_color_normal"/>
        </LinearLayout>
    </LinearLayout>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="fixed"
        >
    </android.support.design.widget.TabLayout>

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

</LinearLayout>

• 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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="暂无"
        android:layout_gravity="center"
        android:layout_marginLeft="150dp"
        android:textSize="50dp"
        />

</LinearLayout>

• 具体实现代码，创建Fragment

package com.example.accessHand2.Home;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.example.accessHand2.R;

/**
 * Created by Douzi on 2017/7/15.
 */

public class PageFragment extends Fragment {

    public static final String ARGS_PAGE = "args_page";
    private int mPage;

    public static PageFragment newInstance(int page) {
        Bundle args = new Bundle();

        args.putInt(ARGS_PAGE, page);
        PageFragment fragment = new PageFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage = getArguments().getInt(ARGS_PAGE);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.youhui_fragment,container,false);

        TextView textView = (TextView) view.findViewById(R.id.textView);
        textView.setText("第" + mPage + "页");        //设置ViewPager内容
        textView.setTextSize(20);

        return view;
    }
}

• 创建适配器

package com.example.accessHand2.Home;

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

/**
 * Created by Douzi on 2017/7/15.
 */

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    public final int COUNT = 2;
    private String[] titles = new String[]{"可用(0)", "暂无可用(0)"};      //设置tab的标题
    private Context context;

    public MyFragmentPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position + 1);
    }

    @Override
    public int getCount() {
        return COUNT;
    }

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

 

• Fragment+ViewPager+FragmentPagerAdapter的组合

　　　　 mTabLayout = (TabLayout) findViewById(R.id.tab_layout2);
        //添加 ViewPager内容
　　　　 ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),
                this);
        viewPager.setAdapter(adapter);

        //将 viewPager 和 tab 关联到一起, 很重要 ！
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));

　　　　　　 mTabLayout.setupWithViewPager(viewPager);

• TabLayout的使用 （方法一，手动添加）

　　 TabLayout tabLayout = ...;
    tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

•  TabLayout的使用 （方法二，自动添加， 就是上面那个组合的代码）

　　　　 mTabLayout = (Tabayout) findViewById(R.id.tab_layout2);
        //添加 ViewPager内容
　　　　 ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(),
                this);
        viewPager.setAdapter(adapter);

        //将 viewPager 和 tab 关联到一起, 很重要 ！
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
　　　　 mTabLayout.setupWithViewPager(viewPager);

　　　　 mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);     //使Tab填满 屏幕宽度
　　　　 mTabLayout.setTabMode(TabLayout.MODE_FIXED);