`
TonySun3544
  • 浏览: 161306 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Android TabLayout 浅显总结

阅读更多

 

环境搭建

 

1.Android design支持包和Android v4 支持包。

2.在build.gradle中添加

dependencies {
    compile files('libs/android-support-v4.jar')
    compile 'com.android.support:design:23.1.0'
}



3.如果TabLayout的Title想自己定义Layout则需根据需求自己添加Layout文件。

示例代码(如何使用)

 

布局文件:activity_sxp_tablayout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_transitions"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        style="@style/CustomTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

  

TabLayout Title 样式

<style name="CustomTabLayout" parent="Widget.Design.TabLayout">
    <!--<item name="tabMaxWidth">@dimen/tab_max_width</item>-->
    <item name="tabIndicatorColor">@color/tab_indicator_color</item>
    <item name="tabIndicatorHeight">10dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">@color/colorPrimary</item>
    <item name="tabTextAppearance">@style/CustomTabTextAppearance</item>
    <item name="tabSelectedTextColor">@color/tab_indicator_color</item>
</style>
<style name="CustomTabTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">20sp</item>
    <item name="android:textColor">@color/white</item>
    <item name="textAllCaps">false</item>
</style>

 

1.tabMaxWidth:tab item的最大宽度,当app:tabMode="fixed"时不起作用,当app:tabMode="fixed"时才起作用。其中:

2.tabIndicatorColor:TabLayout指示器的颜色

3.tabIndicatorHeight:TabLayout指示器高度

4.tabPaddingStart:距离开始的长度

5.tabPaddingEnd:距离结束的长度

6.tabBackground:背景

7.tabTextAppearance:TabLayout title字体属性

8.tabSelectedTextColor:当前选择的tab的字体颜色

9.textAllCaps:TabLayout创建的Tab默认的是true,如果设置图标的话要设置成false。

初始化TabLayout和ViewPager

//初始化ViewPager
viewPager = (ViewPager) findViewById(R.id.viewpager);
// 设置适配器
pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
viewPager.setAdapter(pagerAdapter);
// 初始化TabLayout
tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
// 为TabLayout设置ViewPager
tabLayout.setupWithViewPager(viewPager);

  

ViewPager适配器

public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter {

    private Context context;
    // TabLayout title
    private String tabTitles[] = new String[]{"TAB1", "TAB2", "TAB3"};
    // TabLayout 图标
    private int[] imageResId = {R.mipmap.icon_tab,
            R.mipmap.icon_tab,
            R.mipmap.icon_tab};

    public SimpleFragmentPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }

    @Override
    public Fragment getItem(int position) {
        return PageFragment.newInstance(position + 1);
    }

    @Override
    public int getCount() {
        return tabTitles.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        // 返回纯文字
        // return tabTitles[position];

        // 返回ICON和文字
        Drawable image = context.getResources().getDrawable(imageResId[position]);
        image.setBounds(0, 0, image.getIntrinsicWidth() * 2, image.getIntrinsicHeight() * 2);
        SpannableString sb = new SpannableString(tabTitles[position]);
        ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM);
        sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        return sb;
    }

    /**
     * 自定义TabLayout title
     * @param position
     * @return
     */
    public View getTabView(int position){
        View view = LayoutInflater.from(context).inflate(R.layout.view_sxp_tab_title, null);
        TextView tv= (TextView) view.findViewById(R.id.textView);
        tv.setText(tabTitles[position]);
        ImageView img = (ImageView) view.findViewById(R.id.imageView);
        img.setImageResource(imageResId[position]);
        return view;
    }

}

  

其中getTagView()方法是自己定义的方法,作用是自定义TabLayout Title,需要在初始化TabLayout的时候调用:

//初始化ViewPager
viewPager = (ViewPager) findViewById(R.id.viewpager);
// 设置适配器
pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this);
viewPager.setAdapter(pagerAdapter);
// 初始化TabLayout
tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
// 为TabLayout设置ViewPager
tabLayout.setupWithViewPager(viewPager);
for (int i = 0; i < tabLayout.getTabCount(); i++) {
    TabLayout.Tab tab = tabLayout.getTabAt(i);
    tab.setCustomView(pagerAdapter.getTabView(i));
}

  

 

常见问题

1.自定义TabLayout Title时需要自己在ViewPager的OnPageChangeListener中自己处理。

 

1
2
分享到:
评论

相关推荐

    Android应用程序设计 (张思民 编著) pdf

    《21世纪高等学校计算机基础实用规划教材:Android应用程序设计》在叙述上浅显易懂,对每一个知识点都配了相应的例题。随书光盘中收录了本书所有例题的源代码、电子课件,以及本书大部分例题的视频教学录像。《21...

    Android程序设计教程 (丁山 编) pdf

    《Android程序设计教程》介绍基于Android系统的程序设计技术,内容涵盖了Android相关领域,本书大致可以分成两个部分,第一部分为基础篇,主要介绍Android操作系统概况、Android生命周期与组件通信、Android用户界面...

    Android初学者起步书籍(英文原版,浅显易读,附带源码)

    《Android初学者起步书籍》是一本专为Android编程新手设计的入门教程,其英文原版以其清晰易懂的表述和丰富的实例,深受广大读者好评。这本书不仅覆盖了Android开发的基础知识,还提供了易于理解的范例,使得学习...

    android蓝牙模块源码分析

    本文档将对Android蓝牙模块的源码进行浅显易懂的分析,帮助你了解其工作原理和关键组件。 首先,我们要知道Android的蓝牙功能主要由两个层次实现:HAL(Hardware Abstraction Layer,硬件抽象层)和上层API。HAL...

    Windows Mobile和Android获得IMEI、MEID和IMSI demo

    Windows Mobile和Android获得IMEI、MEID和IMSI demo Windows Mobile是从别处拿来的, sim5.rar是IMEI、MEID和IMSI demo CallGetDeviceUniqueId是获取window mobile系统UID的另一个方式 Android很浅显,一起共享吧

    Android程序设计基础

     这本书极其出色,不仅文笔流畅、浅显易懂,内容也妙趣横生。本书既恰到好处地讲解了Android独有的特性,同时也突出了高质量编程的原则。  ——Anthony Stevens  PocketJourney创始人兼CTO,Google Android竞赛...

    android的任务栈

    本文档清晰的论述了 android的任务栈,浅显易懂。

    java入门非常的浅显易懂

    java 入门 java 入门 java入门非常的浅显易懂 java入门非常的浅显易懂 java入门 java 入门 java 入门 java 入门 java 入门 java 入门 java 入门 java 入门 java 入门 java 入门 java 入门 java 入门

    Android开发教程

    用于 Android编程学习,浅显易懂,实乃入门菜鸟不可多得的宝典。

    Android 开发者必备的书单1

    5. **《Head First Android Development》**:虽然尚未有中文版,但这本书同样适合初学者,内容浅显易懂,与《第一行代码》内容有较高重合度,适合英语阅读能力强的读者。 6. **《Android群英传》** - 名宜生:作为...

    浅入浅出Android安全.epub

    《浅入浅出Android安全》epub文档格式。浅显讲解Android相关安全知识,并不深入,只是简单讲解

    java入门,非常的浅显易懂

    这篇教程“java入门,非常的浅显易懂”旨在为初学者提供一个简单易懂的起点,帮助他们快速掌握Java编程的基础。 1. **Java简介**: Java是由Sun Microsystems公司(现已被Oracle收购)在1995年推出的。它的设计目标...

    史上最浅显易懂的Git教程_Git教程2.pdf

    史上最浅显易懂的Git教程! 史上最浅显易懂的Git教程! 史上最浅显易懂的Git教程! 读过好几遍,非常赞,很适合初学者

    设计模式之追MM---浅显易懂

    ### 设计模式之追MM——浅显易懂 #### 1. Factory(工厂模式) **概念解释:** 工厂模式是一种创建型设计模式,其目的是为了将客户端与具体的产品类解耦。在这种模式下,客户端无需了解产品的具体创建细节,只...

    JSP入门经典 JSP的最浅显易懂的教程

    本资源"JSP入门经典 JSP的最浅显易懂的教程"显然是针对初学者设计的一份详尽的教学材料,旨在帮助那些想要涉足网站开发领域的学习者快速理解和掌握JSP的基本概念和应用。 首先,让我们从基础开始。JSP的核心思想是...

    DebugFest 浅显的调试技术

    ### DebugFest浅显的调试技术 #### 概述 在软件开发过程中,调试是一项至关重要的技能。DebugFest作为一次聚焦于调试技术的主题活动,旨在帮助开发者掌握更高效的调试方法,提高解决问题的能力。本篇文章将围绕...

Global site tag (gtag.js) - Google Analytics