TabLaout简单实现（转载）

在2015年谷歌发布了一个新控件TabLayout，下面谈一谈他的简单使用的详细步骤，以及全代码

第一次写博客，写的不好请不要见笑！感谢您的支持。

先说步骤，再附源码。

TabLayout是Design包下面的一个常用部件，用它可以实现 Tablayout，Viewpager，Fragment的联动，完成非常好的效果。

使用步骤：

步骤1 ：（熟练引包的通知可绕过此步骤）因为该部件不在默认的包下，所以每次使用以前都要先导包导包有两种方法，第一种在

添加

compile 'com.android.support:design:24.0.0'

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile files('libs/library-1.0.19.jar')
    'com.android.support:design:24.0.0'
    compile 'com.android.support:recyclerview-v7:24.0.0'
}

直接build完成就能使用了

第二种导包方式

点开

ok，然后会自动编译导包完成

步骤2：在xml文件创建

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.csdn.test.MainActivity">

<android.support.design.widget.TabLayout
    android:id="@+id/tab_test"
    android:layout_width="match_parent"
    android:layout_height="40dp">
</android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>
</LinearLayout>

Activity中

package com.csdn.test;

import android.graphics.Color;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    TabLayout tab_test;
    ViewPager vp_test;
    List<Fragment> fragments;
    FragmentManager manager;
    MyAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init(); //调用
    }

    /* 初始化*/
    private void init() {
        tab_test = (TabLayout) findViewById(R.id.tab_test);
        vp_test = (ViewPager) findViewById(R.id.vp_test);
//        new 一个Fragment的集合
        fragments = new ArrayList<>();
//        给Fragment集合中添加子Fragment;
        fragments.add(new OneFragment());
        fragments.add(new TwoFragment());
//        获取Fragment管理者
        manager = getSupportFragmentManager();
//        new 出Adapter
        adapter = new MyAdapter(manager, (ArrayList<Fragment>) fragments);
//        给Viewpager设置adapter
        vp_test.setAdapter(adapter);
//        实现联动
        tab_test.setupWithViewPager(vp_test);
//        设置tab标签上的文字
        tab_test.getTabAt(0).setText("第一个栏目");
        tab_test.getTabAt(1).setText("第二个栏目");
//        设置标签栏的图标
        tab_test.getTabAt(0).setIcon(R.mipmap.ic_launcher);
        tab_test.getTabAt(1).setIcon(R.mipmap.ic_launcher);
//        设置TabLayout文字的颜色（平常颜色，选中颜色）
        tab_test.setTabTextColors(Color.BLACK, Color.BLUE);
//        设置TabLayout下划线 颜色
        tab_test.setSelectedTabIndicatorColor(Color.BLUE);

    }
}

tablayout填充满布局宽度，默认设置是可以滑动

tab.setTabMode(TabLayout.MODE_SCROLLABLE);
控件设置下app:tabGravity="fill"这个属性

MyAdapter

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;

/**
 * Created by hanhui on 16/6/29.
 * 这是一个可以多次复用的，实用的的工具类
 * 可以作为所有TabLayout的Adapter
 */
public class MyAdapter extends FragmentPagerAdapter {
    ArrayList<Fragment> fragments;

    public MyAdapter(FragmentManager fm, ArrayList<Fragment> fragments) {
        super(fm);
        this.fragments = fragments;
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }
}

实现效果

这样接可以简单实现TabLayout，Viewpager，Fragment的联动，按照我的方法以及代码就实现了整个过程，是不是很简单有很实用呢

不过的列出的仅仅是最见到的功能更多功能有待大家去开发，感谢浏览本博客！

TabLaout简单实现 （转载）

猜你喜欢

TabLaout简单实现（转载）