使用Android Support Design 控件TabLayout 方便快捷实现选项卡功能-阿里云开发者社区

开发者社区> shy丶gril> 正文

使用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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
运维编排场景系列----检测MFA功能状态
应用场景 Multi-Factor Authentication (MFA)是一种简单有效的最佳安全实践方法,它能够在用户名和密码之外再额外增加一层安全保护。当一个主账号下拥有多个子账号时,为了检测主账号下的每个子账户是否开启MFA功能,需要每天或自定义时间去做定时检测,并将未开启MFA功能的用户发送给指定的钉钉用户。
2134 0
Android Studio 通过一个登录功能介绍SQLite数据库的使用
前言:         SQLite简介:是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中。它是D.RichardHipp建立的公有领域项目。它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中使用了它,它占用资源非常的低,在嵌入式设备中,可能只需要几百K的内存就够了。
4226 0
RedisManager使用手册(六)-- 监控功能介绍
RedisManager Monitor功能和query功能介绍,Monitor模块对Redis 集群的重要指标进行监控,如平均内存占用、客户端连接数、cache命中率,节点内存碎片等,Monitor 模块中支持查看 Config、Info、Slowlog 和查询数据功能。
1878 0
+关注
1878
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载