Android Design：原生TabLayout+viewpaper+fragment实现滑动效果

最新推荐文章于 2024-05-17 14:24:17 发布

原创最新推荐文章于 2024-05-17 14:24:17 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#TabLayout

Material Design 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用TabLayout和ViewPager创建简单的安卓应用导航界面。包括布局文件配置、Tab创建及绑定ViewPager的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 类似于新闻app或者引用宝，先看效果图

2 简单实现

 * 需求：TabLayout的简单使用
 *  确定布局---找到控件--设置adapter--
 *  1 initView()--
 *  2 initAdapter
 *  3 initTablayout
 *  4 initViewpager*/

2-1 布局：注意V4，V7，Design包里面的属性是不主动提示的，要手敲或copy

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
<!--要引用全路径+特有属性不提示，最好copy，title的大小不可设置，只能通过@style设置-->
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        app:tabTextColor="#000000"			//tab的字体颜色
        app:tabSelectedTextColor="#ff00ff"		//选中的tab的字体颜色
        app:tabIndicatorColor="#ffff00">	//下划线的颜色
	app:tabTextAppearance="@style/MyTablayoutTextAppearance"//字体大小
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/tabLayout">
    </android.support.v4.view.ViewPager>
</RelativeLayout>

2-2 比较简单，不是重点

initView();
initData();
initAdapter();

2-3 设置TabLayout：添加Tab及设置mode

TabLayout.MODE_SCROLLABLE);//此模式与viewpaper常和viewpaper一起用。

private void initTabLayout() {
        tabLayout.setTabMode(TabLayout.MODE_FIXED);//官网解释fixed是个滑动
        tabLayout.addTab(tabLayout.newTab().setText(tabs.get(0)));/**注意创建TAB对象：tabLayout.newTab()*/
        tabLayout.addTab(tabLayout.newTab().setText(tabs.get(1)));
        tabLayout.addTab(tabLayout.newTab().setText(tabs.get(2)));
        tabLayout.addTab(tabLayout.newTab().setText(tabs.get(3)));
        tabLayout.addTab(tabLayout.newTab().setText(tabs.get(4)));
    }

2-4 将二者绑定；TabLayout+Viewpager

private void initViewPager() {
        /**注意这2行代码的顺序：viewpaper要先设置adapter，才可以让 tablayout绑定
         *  否则报错：viewpager没有setAdapter()*/
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
        viewPager.setCurrentItem(0);
    }

源码地址：http://download.youkuaiyun.com/detail/ss1168805219/9422782

点击打开链接