浅谈TabLayout(ViewPager+Tab联动)

google发布了的Android Support Design库中提供了TabLayout

通过TabLayout+ViewPager实现导航栏效果,点击Tab ,ViewPager跟随变化,滑动ViewPager,Tab跟随变化

看效果图:

通过一个Demo来了解TabLayout的简单使用(Android Studio开发),代码中都有注释了 ,很简单

1、build.gradle文件中加入

compile 'com.android.support:design:22.2.0'

2、写Xml文件,注意TabLayout的三个属性

app:tabIndicatorColor="#0f0"                每个tab下方的下划线的颜色    
app:tabSelectedTextColor="#00f"             被选中的tab的文本颜色
app:tabTextColor="#f00"                     未被选中的tab的文本颜色
 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
 3     xmlns:app="http://schemas.android.com/apk/res-auto"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical"
 6     tools:context=".MainActivity">
 7 
 8     <android.support.design.widget.TabLayout
 9         android:id="@+id/tablayout"
10         android:layout_width="match_parent"
11         android:layout_height="wrap_content"
12         android:background="#777"
13         app:tabIndicatorColor="#0f0"
14         app:tabSelectedTextColor="#00f"
15         app:tabTextColor="#f00"
16         />
17 
18 
19     <android.support.v4.view.ViewPager
20         android:id="@+id/viewpager"
21         android:layout_width="fill_parent"
22         android:layout_height="0dp"
23         android:layout_weight="1"
24         android:background="#cccc"
25         />
26 
27 </LinearLayout>

3、创建4个fragment

这里只创建一个,其他三个类似

 1 package com.xqx.com.tablayoutdemo;
 2 
 3 
 4 import android.os.Bundle;
 5 import android.support.v4.app.Fragment;
 6 import android.view.LayoutInflater;
 7 import android.view.View;
 8 import android.view.ViewGroup;
 9 
10 
11 /**
12  * A simple {@link Fragment} subclass.
13  */
14 public class OneFragment extends Fragment {
15 
16 
17     public OneFragment() {
18         // Required empty public constructor
19     }
20 
21 
22     @Override
23     public View onCreateView(LayoutInflater inflater, ViewGroup container,
24                              Bundle savedInstanceState) {
25         // Inflate the layout for this fragment
26         return inflater.inflate(R.layout.fragment_one, container, false);
27     }
28 
29 
30 }
 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical"
 6     tools:context="com.xqx.com.tablayoutdemo.OneFragment">
 7 
 8     <!-- TODO: Update blank fragment layout -->
 9     <TextView android:layout_width="match_parent"
10         android:layout_height="match_parent"
11         android:layout_gravity="center"
12         android:gravity="center"
13         android:text="第一个fragment界面" />
14 
15 </LinearLayout>

4、创建ViewPager的适配器

 1 package com.xqx.com.tablayoutdemo;
 2 
 3 import android.support.v4.app.Fragment;
 4 import android.support.v4.app.FragmentManager;
 5 import android.support.v4.app.FragmentPagerAdapter;
 6 
 7 import java.util.List;
 8 
 9 
10 public class MyAdapter extends FragmentPagerAdapter{
11 
12     private List<Fragment> fragments;           //fragment集合
13     private List<String> titles;                //tab标题集合
14 
15     public MyAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
16         super(fm);
17         this.fragments = fragments;
18         this.titles = titles;
19     }
20 
21     @Override
22     public Fragment getItem(int position) {
23         return fragments.get(position);
24     }
25 
26     @Override
27     public int getCount() {
28         int ret = 0;
29         if (fragments!=null && fragments.size()!=0){
30             ret = fragments.size();
31         }
32         return ret;
33     }
34 
35     @Override
36     public CharSequence getPageTitle(int position) {
37         return titles.get(position);
38     }
39 
40 
41 }

5、MainActivity.java

 1 package com.xqx.com.tablayoutdemo;
 2 
 3 import android.support.design.widget.TabLayout;
 4 
 5 import android.support.v4.app.Fragment;
 6 import android.support.v4.app.FragmentActivity;
 7 import android.support.v4.view.ViewPager;
 8 import android.os.Bundle;
 9 
10 import java.util.ArrayList;
11 import java.util.List;
12 
13 public class MainActivity extends FragmentActivity {
14 
15     private TabLayout tabLayout;
16     private ViewPager viewPager;
17 
18     //四个fragment
19     private OneFragment oneFragment;
20     private TwoFragment twoFragment;
21     private ThreeFragment threeFragment;
22     private FourFragment fourFragment;
23 
24     //适配器
25     private MyAdapter adapter;
26 
27     private List<Fragment> fragments;           //fragment集合
28     private List<String> titles;                //tab标题集合
29     @Override
30     protected void onCreate(Bundle savedInstanceState) {
31         super.onCreate(savedInstanceState);
32         setContentView(R.layout.activity_main);
33 
34         tabLayout = (TabLayout) findViewById(R.id.tablayout);
35         viewPager = (ViewPager) findViewById(R.id.viewpager);
36 
37         //创建四个Fragment对象
38         oneFragment = new OneFragment();
39         twoFragment = new TwoFragment();
40         threeFragment = new ThreeFragment();
41         fourFragment = new FourFragment();
42 
43         //将四个Fragment对象添加到集合中
44         fragments = new ArrayList<>();
45         fragments.add(oneFragment);
46         fragments.add(twoFragment);
47         fragments.add(threeFragment);
48         fragments.add(fourFragment);
49 
50         //给Tab添加标题
51         titles = new ArrayList<>();
52         titles.add("one");
53         titles.add("two");
54         titles.add("three");
55         titles.add("four");
56 
57         //创建适配器
58         adapter = new MyAdapter(getSupportFragmentManager(),fragments,titles);
59         //viewpager绑定适配器
60         viewPager.setAdapter(adapter);
61         //tabLayout绑定viewpager
62         tabLayout.setupWithViewPager(viewPager);
63 
64     }
65 
66 }

-------------------------------------------------------------------------------------------------

其他相关:

浅谈FloatingActionButton(悬浮按钮)

浅谈DrawerLayout(抽屉效果)

浅谈GridLayout(网格布局)

浅谈RecyclerView(完美替代ListView,GridView)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

slidingmenu开源效果

本文将更进一步, 在很多实际的应用场景中我们需要一个更复杂的场景,比如说需要在一个菜单选项中集成多个tab来集中显示信息。这个时候 Viewpager就派上用场...

2605
来自专栏水击三千

Android学习Tabhost、gallery、listview、imageswitcher

Tabhost控件又称分页控件,在很多的开发语言中都存在。它可以拥有多个标签页,每个标签页可以拥有不同的内容。android中,一个标签页可以放 一个view或...

2726
来自专栏Sorrower的专栏

使用代码动态增删布局(2018.8重编版)

782
来自专栏向治洪

android 仿qq手写板涂鸦

以前博客的链接:点击打开链接 附上关键代码: MainView.java package com.tszy.views;   import java.io....

2336
来自专栏Android开发指南

3.PopupWindow 、拍照、裁剪

3229
来自专栏向治洪

RecyclerView 实现gallery画廊效果

1、RecyclerView的基本用法 首先主Activity的布局文件: <RelativeLayout xmlns:android="http://sc...

5845
来自专栏Coding+

FloatWindowUtils 实现及事件冲突解决详解

悬浮窗即可以显示在宿主应用之外的 View 视图,理论上任何 View 都能以悬浮窗形式展示在宿主应用之外甚至锁屏界面,一般在工具类应用中使用的比较多,通过悬浮...

1822
来自专栏Android干货

安卓开发ScrollView嵌套ListView只显示一行

4008
来自专栏Android干货

Android项目实战(二十七):数据交互(信息编辑)填写总结

3217
来自专栏Android知识点总结

1-VVI-材料设计之-TabLayout上标签

1235

扫码关注云+社区

领取腾讯云代金券