使用Android Support Design 控件TabLayout 方便快捷实现选项卡功能

2021-09-18 04:25:13

1、概述

TabLayout是在2015年的google大会上，google发布了新的Android Support Design库的新组件之一，以此来全面支持Material Design

设计风格的UI效果，为了可以使用这些新颖MD组件首先必须要在Android Studio的SDK的EXTRA支持库安装Android Support Library支持库，如下所示

使用Android Support Design 控件TabLayout 方便快捷实现选项卡功能

该组件在design库中因此还需要在AS中添加依赖库

FILE——project struct

右键app选择Library dependancy

使用Android Support Design 控件TabLayout 方便快捷实现选项卡功能


选择design库

使用Android Support Design 控件TabLayout 方便快捷实现选项卡功能

然后AS会自动帮我们在APP的build.gradle文件下添加依赖如下图，由于

TabLayout配合V ierPager，因此还需要导入viewerpager的依赖库 support-v4包，（就是上图的正数第二个库）

到此，准备工作已经搞定！

本例主要通过tablayout实现选项卡切换功能，这里实现了一个框架，比较简单，效果图如下，可以直接拿去加点扩展使用

使用Android Support Design 控件TabLayout 方便快捷实现选项卡功能

2. 使用过程

首先要在布局文件中引入Tablayout和viewpager，然后在Activity通过adapter联动 vierpager，内部每个页面通常是个fragment

2.1 布局文件

引入俩个组件，

常用属性如下（需要引入xmlns:app="http://schemas.android.com/apk/res-auto"）
    app:tabSelectedTextColor：Tab被选中字体的颜色
    app:tabTextColor：Tab未被选中字体的颜色
    app:tabIndicatorColor：Tab指示器下标的颜色

[html] view plain copy
  1. <span style="font-size:18px;"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  3.     xmlns:tools="http://schemas.android.com/tools"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:orientation="vertical"  
  7.     tools:context=".MainActivity">  
  8.   
  9.     <android.support.design.widget.TabLayout  
  10.         android:id="@+id/id_tablayout"  
  11.         android:layout_width="match_parent"  
  12.         android:layout_height="wrap_content"  
  13.         android:background="#FFFFFFFF"  
  14.         app:tabGravity="fill"  
  15.         app:tabIndicatorColor="#FF007AA2"  
  16.         app:tabMode="fixed"  
  17.         app:tabTextColor="#FF000000">  
  18.   
  19.     </android.support.design.widget.TabLayout>  
  20.   
  21.     <android.support.v4.view.ViewPager  
  22.         android:id="@+id/id_viewpager"  
  23.         android:layout_width="match_parent"  
  24.         android:layout_height="0dp"  
  25.         android:layout_weight="1"  
  26.   
  27.         >  
  28.   
  29.     </android.support.v4.view.ViewPager>  
  30.   
  31.   
  32. </LinearLayout>  
  33. </span>  

2.2、每个vierpager对应各自的fragment

这里是俩个选项卡，因此实现俩个fragment，省略下面有整个demo代码

2.3、viewPager+fragment  与Tablayout的联动

一般TabLayout都是和ViewPager共同使用才发挥它的优势

[java] view plain copy
  1. <span style="font-size:18px;">package com.elvis.tablayout_demo;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.design.widget.TabLayout;  
  5. import android.support.v4.app.Fragment;  
  6. import android.support.v4.app.FragmentPagerAdapter;  
  7. import android.support.v4.view.ViewPager;  
  8. import android.support.v7.app.AppCompatActivity;  
  9. import android.view.Menu;  
  10. import android.view.MenuItem;  
  11.   
  12. import com.elvis.tablayout_demo.fragment.FragmenthotRec;  
  13. import com.elvis.tablayout_demo.fragment.Fragmenthotpot;  
  14.   
  15. import java.util.ArrayList;  
  16. import java.util.List;  
  17.   
  18. public class MainActivity extends AppCompatActivity {  
  19.     private TabLayout mTabLayout;  
  20.     private ViewPager mViewPager;  
  21.     private List<Fragment> list_fragment;  
  22.     private Fragmenthotpot mHotpot;  
  23.     private FragmenthotRec mHotRec;  
  24.     //tablayout的标题  
  25.     private String[] mTitles = new String[]{"今日热点","热门推荐"};  
  26.   
  27.     @Override  
  28.     protected void onCreate(Bundle savedInstanceState) {  
  29.         super.onCreate(savedInstanceState);  
  30.         setContentView(R.layout.activity_main);  
  31.         initViews();  
  32.     }  
  33.   
  34.     private void initViews() {  
  35.         mTabLayout = (TabLayout) findViewById(R.id.id_tablayout);  
  36.         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  
  37.         mHotpot = new Fragmenthotpot();  
  38.         mHotRec = new FragmenthotRec();  
  39.         list_fragment = new ArrayList<>();  
  40.         list_fragment.add(mHotpot);  
  41.         list_fragment.add(mHotRec);  
  42.         /*viewPager通过适配器与fragment关联*/  
  43.   
  44.         mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {  
  45.             @Override  
  46.             public Fragment getItem(int position) {  
  47.                 return list_fragment.get(position);  
  48.             }  
  49.   
  50.             @Override  
  51.             public int getCount() {  
  52.                 return mTitles.length;  
  53.             }  
  54.   
  55.             @Override  
  56.             public CharSequence getPageTitle(int position) {  
  57.                 return mTitles[position];  
  58.             }  
  59.         });  
  60.         //TabLayout和ViewPager的关联  
  61.         mTabLayout.setupWithViewPager(mViewPager);  
  62.     }  
  63.   
  64.     @Override  
  65.     public boolean onCreateOptionsMenu(Menu menu) {  
  66.         // Inflate the menu; this adds items to the action bar if it is present.  
  67.         getMenuInflater().inflate(R.menu.menu_main, menu);  
  68.         return true;  
  69.     }  
  70.   
  71.     @Override  
  72.     public boolean onOptionsItemSelected(MenuItem item) {  
  73.         // Handle action bar item clicks here. The action bar will  
  74.         // automatically handle clicks on the Home/Up button, so long  
  75.         // as you specify a parent activity in AndroidManifest.xml.  
  76.         int id = item.getItemId();  
  77.   
  78.         //noinspection SimplifiableIfStatement  
  79.         if (id == R.id.action_settings) {  
  80.             return true;  
  81.         }  
  82.   
  83.         return super.onOptionsItemSelected(item);  
  84.     }  
  85. }  
  86. </span>  

这里Tablayout很多属性在xml文件设置了，在代码中也可通过其方法自己设置，常用方法如下
- addTab(TabLayout.Tab tab, int position, boolean setSelected) 增加选项卡到 layout 中
- addTab(TabLayout.Tab tab, boolean setSelected) 同上
- addTab(TabLayout.Tab tab) 同上
- getTabAt(int index) 得到选项卡
- getTabCount() 得到选项卡的总个数
- getTabGravity() 得到 tab 的 Gravity
- getTabMode() 得到 tab 的模式
- getTabTextColors() 得到 tab 中文本的颜色
- newTab() 新建个 tab
- removeAllTabs() 移除所有的 tab
- removeTab(TabLayout.Tab tab) 移除指定的 tab
- removeTabAt(int position) 移除指定位置的 tab
- setOnTabSelectedListener(TabLayout.OnTabSelectedListener onTabSelectedListener) 为每个 tab 增加选择监听器
- setScrollPosition(int position, float positionOffset, boolean updateSelectedText) 设置滚动位置
- setTabGravity(int gravity) 设置 Gravity
- setTabMode(int mode) 设置 Mode,有两种值：TabLayout.MODE_SCROLLABLE和TabLayout.MODE_FIXED分别表示当tab的内容超过屏幕宽度是否支持横向水平滑动，第一种支持滑动，第二种不支持，默认不支持水平滑动。
- setTabTextColors(ColorStateList textColor) 设置 tab 中文本的颜色
- setTabTextColors(int normalColor, int selectedColor) 设置 tab 中文本的颜色 默认 选中
- setTabsFromPagerAdapter(PagerAdapter adapter) 设置 PagerAdapter
- setupWithViewPager(ViewPager viewPager) 和 ViewPager 联动

demo源码地址http://download.csdn.net/detail/xsf50717/9211991

这里只是搭了一个框架，自己去添枝加叶吧~


转载：http://blog.csdn.net/xsf50717/article/details/49405309

上一篇：linux 修改最大文件描述符


下一篇：为什么高并发小事务, unlogged table不比logged table快多少? - commit wal log