这里有新鲜出炉的精品教程,程序狗速度看过来!
Android 是一种基于 Linux 的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由 Google 公司和开放手机联盟领导及开发。尚未有统一中文名称,中国大陆地区较多人使用 "安卓" 或 "安致"。
本篇文章主要介绍了 Android 中 TabLayout+ViewPager 实现 tab 和页面联动效果,具有一定的参考价值,有兴趣的可以了解一下
TabLayout+ViewPager 实现 tab 和页面联动效果
xml 中:
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:app="http://schemas.android.com/apk/res-auto"
- android:id="@+id/activity_main"
- android:layout_width="match_parent"
- android:layout_height="match_parent">
- <android.support.design.widget.TabLayout
- android:id="@+id/toolbar_tl_tab"
- android:layout_width="match_parent"
- android:layout_height="?attr/actionBarSize"
- android:layout_gravity="bottom"
- app:layout_scrollFlags="scroll"
- app:tabIndicatorColor="@android:color/holo_green_light"
- app:tabSelectedTextColor="@android:color/holo_green_light" />
- <View
- android:layout_width="match_parent"
- android:layout_height="1dp"
- android:background="#f0f0f0" />
- <android.support.v4.view.ViewPager
- android:id="@+id/vp_container"
- android:layout_width="match_parent"
- android:layout_height="match_parent" />
- </RelativeLayout>
代码中使用:
- public class MainActivity extends AppCompatActivity {
- private TabLayout toolbar_tl_tab;
- private ViewPager vp_container;
- private String[] titles = {"标题1", "标题2", "标题3", "标题4"};
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- init();
- }
- private void init() {
- toolbar_tl_tab = (TabLayout) findViewById(R.id.toolbar_tl_tab);
- vp_container = (ViewPager) findViewById(R.id.vp_container);
- toolbar_tl_tab.setupWithViewPager(vp_container);
- toolbar_tl_tab.setTabMode(TabLayout.MODE_SCROLLABLE);
- vp_container.setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
- @Override
- public Fragment getItem(int position) {
- return new PageFragment();
- }
- @Override
- public CharSequence getPageTitle(int position) {
- return titles[position];
- }
- @Override
- public int getCount() {
- return titles.length;
- }
- });
- }
- }
碎片:PageFragment
- public class PageFragment extends Fragment {
- @Nullable
- @Override
- public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
- View view = inflater.inflate(R.layout.fragment_page, null);
- return view;
- }
- }
碎片 xml:fragment_page.xml
- <?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"
- android:orientation="vertical">
- <TextView
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:gravity="center"
- android:text="页面" />
- </LinearLayout>
注意:
1、模式相关
使用滚动模式,特点是超过屏幕可以滚动显示:
- toolbar_tl_tab.setTabMode(TabLayout.MODE_SCROLLABLE);
使用屏幕等分模式,特点是显示 tab 的宽度是屏幕等分后的宽度:
- toolbar_tl_tab.setTabMode(TabLayout.MODE_FIXED);
来源: http://www.phperz.com/article/17/0617/336111.html