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

来源：互联网发布：沥青混合料油石比数据编辑：程序博客网时间：2024/05/16 11:45

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.csdn.net/detail/ss1168805219/9422782

点击打开链接

0 0