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

目录
相关文章
|
20天前
|
XML 编解码 Android开发
安卓开发中的自定义视图控件
【9月更文挑战第14天】在安卓开发中,自定义视图控件是一种高级技巧,它可以让开发者根据项目需求创建出独特的用户界面元素。本文将通过一个简单示例,引导你了解如何在安卓项目中实现自定义视图控件,包括创建自定义控件类、处理绘制逻辑以及响应用户交互。无论你是初学者还是有经验的开发者,这篇文章都会为你提供有价值的见解和技巧。
30 3
|
2月前
|
编解码 测试技术 Android开发
Android经典实战之用 CameraX 库实现高质量的照片和视频拍摄功能
本文详细介绍了如何利用CameraX库实现高质量的照片及视频拍摄功能,包括添加依赖、初始化、权限请求、配置预览与捕获等关键步骤。此外,还特别针对不同分辨率和帧率的视频拍摄提供了性能优化策略,确保应用既高效又稳定。
90 1
Android经典实战之用 CameraX 库实现高质量的照片和视频拍摄功能
|
10天前
|
Android开发 开发者
Android平台无纸化同屏如何实现实时录像功能
Android平台无纸化同屏,如果需要本地录像的话,实现难度不大,只要复用之前开发的录像模块的就可以,对我们来说,同屏采集这块,只是数据源不同而已,如果是自采集的其他数据,我们一样可以编码录像。
|
2月前
|
图形学 Android开发
小功能⭐️Unity调用Android常用事件
小功能⭐️Unity调用Android常用事件
|
2月前
|
前端开发 Android开发 开发者
安卓开发中的自定义视图:构建你的第一个控件
【8月更文挑战第26天】在安卓开发的浩瀚海洋中,自定义视图是一块充满魔力的乐土。它不仅是开发者展示创造力的舞台,更是实现独特用户体验的关键。本文将带你步入自定义视图的世界,从基础概念到实战应用,一步步教你如何打造自己的第一个控件。无论你是初学者还是有经验的开发者,这篇文章都将为你的开发之旅增添新的风景。
|
3月前
|
XML 数据格式
Android-自定义三角形评分控件
Android-自定义三角形评分控件
33 0
|
4月前
|
XML Android开发 数据格式
Android基础控件介绍
Android基础控件介绍
|
XML Android开发 数据格式
Android自定义控件(十二)——自定义属性及应用
Android自定义控件(十二)——自定义属性及应用
167 0
Android自定义控件(十二)——自定义属性及应用
|
XML Android开发 数据格式
Android开发技巧——自定义控件之自定义属性
Android开发技巧——自定义控件之自定义属性 掌握自定义控件是很重要的,因为通过自定义控件,能够:解决UI问题,优化布局性能,简化布局代码。 上一篇讲了如何通过xml把几个控件组织起来,并继承某个ViewGroup子类,把它们封装起来使用。
1153 0