FlycoTabLayout使用

最新推荐文章于 2025-11-17 02:44:02 发布

原创最新推荐文章于 2025-11-17 02:44:02 发布 · 4.4k 阅读

4 ·

CC 4.0 BY-SA版权

经典例子同时被 2 个专栏收录

35 篇文章

订阅专栏

Android 工具类

7 篇文章

订阅专栏

本文介绍如何使用FlycoTabLayout库在Android应用中实现带图标的Tab布局，并关联不同的Fragment。通过具体步骤展示了如何配置依赖、创建TabEntity、设置Activity布局等。

部署运行你感兴趣的模型镜像

step1：在module.gradle中添加

dependencies{
    compile 'com.android.support:support-v4:23.1.1'
    compile 'com.nineoldandroids:library:2.4.0'
    compile 'com.flyco.roundview:FlycoRoundView_Lib:1.1.2@aar'
    compile 'com.flyco.tablayout:FlycoTabLayout_Lib:1.5.0@aar'
}

After v2.0.0
dependencies{
    compile 'com.android.support:support-v4:23.1.1'
    compile 'com.nineoldandroids:library:2.4.0'
    compile 'com.flyco.tablayout:FlycoTabLayout_Lib:2.0.0@aar'
}

step 2：建立TabEntity这里是tab的标题、选中的图标、未选中的图标

package com.example.maoyh.myapplication.app.entity;

import com.flyco.tablayout.listener.CustomTabEntity;

public class TabEntity implements CustomTabEntity {
    public String title;
    public int selectedIcon;
    public int unSelectedIcon;

    public TabEntity(String title, int selectedIcon, int unSelectedIcon) {
        this.title = title;
        this.selectedIcon = selectedIcon;
        this.unSelectedIcon = unSelectedIcon;
    }

    @Override
    public String getTabTitle() {
        return title;
    }

    @Override
    public int getTabSelectedIcon() {
        return selectedIcon;
    }

    @Override
    public int getTabUnselectedIcon() {
        return unSelectedIcon;
    }
}

step 3:建立要关联的fragment

package com.example.maoyh.myapplication.app.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.example.maoyh.myapplication.app.R;


/**
 * Created by MAOYH on 2016/3/2.
 */
public class SimpleCardFragment extends Fragment {
    private String mTitle;

    public static SimpleCardFragment getInstance(String title) {
        SimpleCardFragment sf = new SimpleCardFragment();
        sf.mTitle = title;
        return sf;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.layout_fragment, null);
        TextView card_title_tv = (TextView) v.findViewById(R.id.card_title_tv);
        card_title_tv.setText(mTitle);

        return v;
    }
}

step 4：设置activity的layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:tl="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/fl_change"
        android:layout_width="match_parent"
        android:layout_height="400dp">

    </FrameLayout>

    <com.flyco.tablayout.CommonTabLayout
        android:layout_alignBottom="@+id/fl_change"
        android:id="@+id/tl"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="#ffffff"
        android:layout_alignParentBottom="true"
        tl:tl_iconGravity="LEFT"
        tl:tl_iconHeight="18dp"
        tl:tl_iconMargin="5dp"
        tl:tl_iconWidth="18dp"
        tl:tl_indicator_bounce_enable="true"
        tl:tl_indicator_color="#2C97DE"
        tl:tl_indicator_gravity="BOTTOM"
        tl:tl_indicator_height="0dp"
        tl:tl_textSelectColor="#2C97DE"
        tl:tl_textUnselectColor="#66000000"
        tl:tl_textsize="15sp"
        tl:tl_underline_color="#DDDDDD"
        tl:tl_underline_gravity="TOP"
        tl:tl_underline_height="1dp"/>
</RelativeLayout>

step 5：fragment的layout

step 6：编码activity

package com.example.maoyh.myapplication.app.activity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;

import com.example.maoyh.myapplication.app.R;
import com.example.maoyh.myapplication.app.entity.TabEntity;
import com.example.maoyh.myapplication.app.fragment.SimpleCardFragment;
import com.flyco.tablayout.CommonTabLayout;
import com.flyco.tablayout.listener.CustomTabEntity;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    private ArrayList<Fragment> mFragments = new ArrayList<>();
    private CommonTabLayout mTabLayout;
    private String[] mTitles = {"首页", "消息", "联系人", "我的"};
    private int[] mIconUnselectIds = {
            R.mipmap.tab_home_unselect, R.mipmap.tab_speech_unselect,
            R.mipmap.tab_contact_unselect, R.mipmap.tab_more_unselect};
    private int[] mIconSelectIds = {
            R.mipmap.tab_home_select, R.mipmap.tab_speech_select,
            R.mipmap.tab_contact_select, R.mipmap.tab_more_select};
    //tab的标题、选中图标、未选中图标
    private ArrayList<CustomTabEntity> mTabEntities = new ArrayList<>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
        initData();
        initView();
        //给tab设置数据和关联的fragment
        mTabLayout.setTabData(mTabEntities, this, R.id.fl_change, mFragments);
        //设置红点
        mTabLayout.showDot(1);

    }

    private void initView() {
        mTabLayout = (CommonTabLayout) findViewById(R.id.tl);
    }

    private void initData() {
        for (String title : mTitles) {
            mFragments.add(SimpleCardFragment.getInstance( title));
        }
        //设置tab的标题、选中图标、未选中图标
        for (int i = 0; i < mTitles.length; i++) {
            mTabEntities.add(new TabEntity(mTitles[i], mIconSelectIds[i], mIconUnselectIds[i]));
        }
    }
}