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

简介:

1、概述

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

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

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

FILE——project struct

右键app选择Library dependancy



选择design库

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

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

到此,准备工作已经搞定!

本例主要通过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

目录
相关文章
|
2月前
|
编解码 测试技术 Android开发
Android经典实战之用 CameraX 库实现高质量的照片和视频拍摄功能
本文详细介绍了如何利用CameraX库实现高质量的照片及视频拍摄功能,包括添加依赖、初始化、权限请求、配置预览与捕获等关键步骤。此外,还特别针对不同分辨率和帧率的视频拍摄提供了性能优化策略,确保应用既高效又稳定。
104 1
Android经典实战之用 CameraX 库实现高质量的照片和视频拍摄功能
|
16天前
|
Android开发 开发者
Android平台无纸化同屏如何实现实时录像功能
Android平台无纸化同屏,如果需要本地录像的话,实现难度不大,只要复用之前开发的录像模块的就可以,对我们来说,同屏采集这块,只是数据源不同而已,如果是自采集的其他数据,我们一样可以编码录像。
|
2月前
|
图形学 Android开发
小功能⭐️Unity调用Android常用事件
小功能⭐️Unity调用Android常用事件
|
4月前
|
数据库 Android开发 数据安全/隐私保护
在 Android Studio 中结合使用 SQLite 数据库实现简单的注册和登录功能
在 Android Studio 中结合使用 SQLite 数据库实现简单的注册和登录功能
178 2
|
4月前
|
存储 数据库 Android开发
在 Android Studio 中结合使用 SQLite 数据库实现简单的注册和登录功能
在 Android Studio 中结合使用 SQLite 数据库实现简单的注册和登录功能
111 0
|
Java Android开发 开发者
Android 悬浮窗功能的实现
Android 悬浮窗功能的实现
1314 2
Android 悬浮窗功能的实现
|
3天前
|
XML 存储 Java
探索安卓开发之旅:从基础到进阶
【9月更文挑战第37天】安卓开发,一个充满无限可能的领域。它不仅关乎技术的深度与广度,更关乎开发者的成长与突破。本文将带你走进安卓开发的世界,从基础知识的学习到进阶技巧的掌握,一起感受编程的魅力与乐趣。
|
Android开发 容器 数据格式
Android 购物车功能的实现
首先,众所周知,ListView是Android最常用的控件,可以说是最简单的控件,也可以说是最复杂的控件。 作为一个Android初级开发者,可能会简单的ListView展示图文信息。 作为一个有一定项目开发经验的Android开发者来说,可能会遇到ListView的列表项中存在各种按钮的需求。
1160 0