安卓开发Tab的实现TabLayout+ViewPager+Fragment

分析

TabLayout的基本组成&＃xff1a;

• Activity
• Activity的layout.xml
• Fragment或View

ViewPager基本组成&＃xff1a;

• Activity
• Activity的layout.xml
• 继承FragmentPagerAdapter的类
• Fragment或View

Fragment基本组成

• 继承Fragment的类
• Fragment的layout.xml

组合后&＃xff1a;

• Activity
• Activity的layout.xml
• 继承FragmentPagerAdapter的类
• 继承Fragment的类
• Fragment的layout.xml

动手

步骤&＃xff1a;

1. TabLayout与Fragment
2. ViewPager与Fragment
3. TabLayout和ViewPager变化时同步

Fragment

布局文件


<RelativeLayout xmlns:android&＃61;"http://schemas.android.com/apk/res/android"android:layout_width&＃61;"match_parent"android:layout_height&＃61;"match_parent"><TextViewandroid:id&＃61;"&＃64;&＃43;id/i17_fragment_text"android:layout_width&＃61;"match_parent"android:layout_height&＃61;"match_parent"android:gravity&＃61;"center"android:text&＃61;"文本"android:textSize&＃61;"32sp" />
RelativeLayout>


MyFragment

public class MyFragment extends Fragment {private static final String ARG_PARAM1 &＃61; "param1";private String mParam1;&＃64;Nullable&＃64;Overridepublic View onCreateView(&＃64;NonNull LayoutInflater inflater, &＃64;Nullable ViewGroup container, &＃64;Nullable Bundle savedInstanceState) {View view &＃61; inflater.inflate(R.layout.fragment_a17_text, container, false);TextView text &＃61; view.findViewById(R.id.i17_fragment_text);// 使用bundle传递参数Bundle bundle &＃61; getArguments(); if (bundle !&＃61; null) text.setText(bundle.getString("title"));// 使用newInstance传递参数if (mParam1 !&＃61; null)text.setText(mParam1);return view;}// 可以设置多个参数public static MyFragment newInstance(String param1) {MyFragment fragment &＃61; new MyFragment();Bundle args &＃61; new Bundle();args.putString(ARG_PARAM1, param1);fragment.setArguments(args);return fragment;}&＃64;Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);if (getArguments() !&＃61; null) {mParam1 &＃61; getArguments().getString(ARG_PARAM1);}}
}


Activity

布局文件


<RelativeLayout xmlns:android&＃61;"http://schemas.android.com/apk/res/android"xmlns:tools&＃61;"http://schemas.android.com/tools"android:layout_width&＃61;"match_parent"android:layout_height&＃61;"match_parent"tools:context&＃61;".activity.A20UnitTVF"><com.google.android.material.tabs.TabLayoutandroid:id&＃61;"&＃64;&＃43;id/i20_tab"android:layout_width&＃61;"match_parent"android:layout_height&＃61;"50dp" /><androidx.viewpager.widget.ViewPagerandroid:id&＃61;"&＃64;&＃43;id/i20_content"android:layout_width&＃61;"match_parent"android:layout_height&＃61;"match_parent"android:layout_below&＃61;"&＃64;&＃43;id/i20_tab" />
RelativeLayout>


TabLayout&＃43;Fragment

public class A20UnitTVF extends AppCompatActivity {private List<MyFragment> mFragments;private ViewPager mViewPager;private TabLayout mTabLayout;&＃64;Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_a20_unit_t_v_f);init();}private void init(){ mFragments &＃61; new ArrayList<>();mFragments.add(MyFragment.newInstance("首页Fragment"));mFragments.add(MyFragment.newInstance("消息Fragment"));mFragments.add(MyFragment.newInstance("个人中心Fragment")); mTabLayout &＃61; findViewById(R.id.i20_tab);mTabLayout.addTab(mTabLayout.newTab().setText("首页"));mTabLayout.addTab(mTabLayout.newTab().setText("消息"));mTabLayout.addTab(mTabLayout.newTab().setText("个人中心")); }
}


ViewPager&＃43;Fragment

private void init(){// ....mViewPager &＃61; findViewById(R.id.i20_content);mViewPager.setAdapter(new A20TVFAdapter(getSupportFragmentManager(),0,mFragments));
}


TabLayout和ViewPager变化时同步

1. 点击tab&＃xff0c;ViewPager滑动到相应的位置

   主要方法mViewPager.setCurrentItem(position)

   mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){&＃64;Overridepublic void onTabSelected(TabLayout.Tab tab) {mViewPager.setCurrentItem(tab.getPosition());// 不要切换动画// mViewPager.setCurrentItem(tab.getPosition(),false);}&＃64;Overridepublic void onTabUnselected(TabLayout.Tab tab) {}&＃64;Overridepublic void onTabReselected(TabLayout.Tab tab) {}
});


2. 滑动ViewPager&＃xff0c;TabLayout的指示器定位到相应位置

   主要方法&＃xff1a;mTabLayout.getTabAt(position).select();

   mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {&＃64;Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}&＃64;Overridepublic void onPageSelected(int position) {mTabLayout.getTabAt(position).select();}&＃64;Overridepublic void onPageScrollStateChanged(int state) {}
});


综上&＃xff0c;我们可以得到一个整理后的Activity

public class A20UnitTVF extends AppCompatActivity {private List<MyFragment> mFragments;private ViewPager mViewPager;private TabLayout mTabLayout;&＃64;Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_a20_unit_t_v_f);init();}private void init(){mFragments &＃61; new ArrayList<>();mFragments.add(MyFragment.newInstance("首页"));mFragments.add(MyFragment.newInstance("消息"));mFragments.add(MyFragment.newInstance("个人中心"));mTabLayout &＃61; findViewById(R.id.i20_tab);mTabLayout.addTab(mTabLayout.newTab().setText("首页"));mTabLayout.addTab(mTabLayout.newTab().setText("消息"));mTabLayout.addTab(mTabLayout.newTab().setText("个人中心"));mViewPager &＃61; findViewById(R.id.i20_content);mViewPager.setAdapter(new A20TVFAdapter(getSupportFragmentManager(),0,mFragments));mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){&＃64;Overridepublic void onTabSelected(TabLayout.Tab tab) {mViewPager.setCurrentItem(tab.getPosition());// 不要切换动画// mViewPager.setCurrentItem(tab.getPosition(),false);}&＃64;Overridepublic void onTabUnselected(TabLayout.Tab tab) {}&＃64;Overridepublic void onTabReselected(TabLayout.Tab tab) {}});mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {&＃64;Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}&＃64;Overridepublic void onPageSelected(int position) {mTabLayout.getTabAt(position).select();}&＃64;Overridepublic void onPageScrollStateChanged(int state) {}});}
}