zoukankan      html  css  js  c++  java
  • 浅谈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>
    activity_main.xml

    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 }
    OneFragment
     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>
    fragment_one

    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 }
    MyAdapter.java

    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 }
    MainActivity.java

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

    其他相关:

    浅谈FloatingActionButton(悬浮按钮)

    浅谈DrawerLayout(抽屉效果)

    浅谈GridLayout(网格布局)

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

  • 相关阅读:
    Java关键字instanceof
    java中equals和==的区别
    Servlet、Filter、Listener总结
    struts2 拦截器配置
    Struts2技术详解
    构建Java并发模型框架
    基于MINA框架快速开发网络应用程序
    Spring的IOC原理
    Spring AOP原理及拦截器
    JAVA三大框架SSH和MVC
  • 原文地址:https://www.cnblogs.com/xqxacm/p/5101927.html
Copyright © 2011-2022 走看看