笔记（二）TabLayout + ViewPager + FragmentPagerAdapter 组合用法

时间：2022-08-11 07:27:06
  • 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);

相关文章