android中TabLayout的使用和icon与文字的位置设置

设置tab标题的使用方法1：
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));  
设置tab标题的使用方法2：

<android.support.design.widget.TabLayout
         android:layout_height="wrap_content"
         android:layout_width="match_parent">

     <android.support.design.widget.TabItem
             android:text="@string/tab_text"/>

     <android.support.design.widget.TabItem
             android:icon="@drawable/ic_android"/>

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

设置tab标题icon的默认使用方法1：

tabLayout.addTab(tabLayout.newTab().setText("tab").setIcon(R.drawable.icon));  

设置tab标题icon的默认使用方法2：

tabLayout.getTabAt(0).setIcon(R.mipmap.ic_launcher);  

设置icon的上下左右的位置的方法1：
采用自定义View

TextView newTab = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
newTab.setText("tab1"); 
newTab.setCompoundDrawablesWithIntrinsicBounds(your_drawable_icon_here, 0, 0, 0);
tabLayout.getTabAt(tab_index_here_).setCustomView(newTab);
其中通过setCompoundDrawablesWithIntrinsicBounds(leftDrawable, topDrawable, rightDrawable, bottomDrawable)设置icon的位置

其中custom_tab：

custom_tab.xml  
<?xml version="1.0" encoding="utf-8"?>  
<TextView xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content"  
    android:id="@+id/tab"  
    android:textColor="@color/colorAccent"  
    android:textSize="@dimen/tab_label"  
    android:fontFamily="@string/font_fontFamily_medium"/>  

自定义icon和text的view方法2：（推荐）

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="horizontal"  
    android:layout_width="wrap_content"  
    android:layout_height="48dp"  
    android:gravity="center"  
    >  
    <ImageView  
        android:layout_gravity="center"  
        android:id="@+id/tabicon"  
        android:src="@mipmap/ic_launcher"  
        android:layout_width="24dp"  
        android:layout_height="24dp" />  
    <TextView  
        android:id="@+id/tabtext"  
        android:gravity="center"  
        android:textSize="14sp"  
        android:text="TAB"  
        android:layout_width="wrap_content"  
        android:layout_height="match_parent" />  
</LinearLayout>  

如图：

其中主要方法：

private void new_tab(){  
        tabLayout.addTab(tabLayout.newTab().setCustomView(tab_icon("首页",R.drawable.home_selector)));  
        tabLayout.addTab(tabLayout.newTab().setCustomView(tab_icon("行情",R.drawable.prices_selector)));  
        tabLayout.addTab(tabLayout.newTab().setCustomView(tab_icon("资讯",R.drawable.news_selector)));  
        tabLayout.addTab(tabLayout.newTab().setCustomView(tab_icon("个人",R.drawable.my_selector)));  
              
        //Tablayout自定义view绑定ViewPager 自定义view时使用 tabLayout.setupWithViewPager(viewPager);方法关联无效，通过以下方法进行viewpager和tablayout的关联  
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));  
        tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));  
  
    }  
  
    private View tab_icon(String name,int iconID){  
        View newtab =  LayoutInflater.from(this).inflate(R.layout.icon_view,null);  
        TextView tv = (TextView) newtab.findViewById(R.id.tabtext);  
        tv.setText(name);  
        ImageView im = (ImageView)newtab.findViewById(R.id.tabicon);  
        im.setImageResource(iconID);  
        return newtab;  
    }  

其中主要的MainActivity:

package com.example.cuboo.mlcircles.activity;  
  
  
import android.os.Bundle;  
import android.support.design.widget.TabLayout;  
import android.support.v4.app.Fragment;  
import android.view.LayoutInflater;  
import android.view.View;  
import android.widget.ImageView;  
import android.widget.TextView;  
  
import com.example.cuboo.mlcircles.R;  
import com.example.cuboo.mlcircles.fragment.fragment_pageradpter;  
import com.example.cuboo.mlcircles.fragment.home_fragment;  
import com.example.cuboo.mlcircles.fragment.my_fragment;  
import com.example.cuboo.mlcircles.fragment.news_fragment;  
import com.example.cuboo.mlcircles.fragment.prices_fragment;  
import com.example.cuboo.mlcircles.utils.BaseAvtivity;  
import com.example.cuboo.mlcircles.utils.CustomView;  
  
import java.util.ArrayList;  
  
public class MainActivity extends BaseAvtivity {  
    private TabLayout tabLayout;  
    private CustomView viewPager;  
    private ArrayList<Fragment> fragments;  
    private ArrayList<String> titles;  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        init();  
        initViewpager();  
    }  
    private void init(){  
        tabLayout = (TabLayout) findViewById(R.id.tab);  
        viewPager = (CustomView) findViewById(R.id.viewpager);  
        //设置是否开启ViewPager滑动  
        viewPager.setPagingEnabled(true);  
  
        fragments = new ArrayList<Fragment>();  
        titles = new ArrayList<String>();  
        //tabLayout.addTab(tabLayout.newTab().setText("首页"));  
        //tabLayout.addTab(tabLayout.newTab().setText("消息"));  
  
    }  
        private void initViewpager(){  
        fragments.add(new home_fragment());  
        fragments.add(new prices_fragment());  
        fragments.add(new news_fragment());  
        fragments.add(new my_fragment());  
//        titles.add("首页");  
//        titles.add("行情");  
//        titles.add("资讯");  
//        titles.add("个人");  
  
        fragment_pageradpter adpter = new fragment_pageradpter(getSupportFragmentManager(),fragments,null);  
        viewPager.setAdapter(adpter);  
//        tabLayout.setupWithViewPager(viewPager);  
//        tabLayout.getTabAt(0).setIcon(R.drawable.home_selector);  
//        tabLayout.getTabAt(1).setIcon(R.drawable.prices_selector);  
//        tabLayout.getTabAt(2).setIcon(R.drawable.news_selector);  
//        tabLayout.getTabAt(3).setIcon(R.drawable.my_selector);  
         new_tab();  
  
        }  
    private void new_tab(){  
        tabLayout.addTab(tabLayout.newTab().setCustomView(tab_icon("首页",R.drawable.home_selector)));  
        tabLayout.addTab(tabLayout.newTab().setCustomView(tab_icon("行情",R.drawable.prices_selector)));  
        tabLayout.addTab(tabLayout.newTab().setCustomView(tab_icon("资讯",R.drawable.news_selector)));  
        tabLayout.addTab(tabLayout.newTab().setCustomView(tab_icon("个人",R.drawable.my_selector)));  
        //Tablayout自定义view绑定ViewPager  
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));  
        tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));  
  
    }  
  
    private View tab_icon(String name,int iconID){  
        View newtab =  LayoutInflater.from(this).inflate(R.layout.icon_view,null);  
        TextView tv = (TextView) newtab.findViewById(R.id.tabtext);  
        tv.setText(name);  
        ImageView im = (ImageView)newtab.findViewById(R.id.tabicon);  
        im.setImageResource(iconID);  
        return newtab;  
    }  
  
}  

fragmentpageradapter:

package com.example.cuboo.mlcircles.fragment;  
  
import android.support.v4.app.Fragment;  
import android.support.v4.app.FragmentManager;  
import android.support.v4.app.FragmentPagerAdapter;  
  
import java.util.ArrayList;  
  
/** 
 * Created by cuboo on 2016/10/3. 
 */  
  
public class fragment_pageradpter extends FragmentPagerAdapter {  
    private ArrayList<Fragment> fragments;  
    private ArrayList<String> titles;  
  
    public fragment_pageradpter(FragmentManager fm, ArrayList<Fragment> fragments, ArrayList<String> tiles) {  
        super(fm);  
        this.fragments = fragments;  
        this.titles = tiles;  
    }  
  
    @Override  
    public Fragment getItem(int position) {  
        return fragments.get(position);  
    }  
  
    @Override  
    public int getCount() {  
        return fragments.size();  
    }  
  
    @Override  
    public CharSequence getPageTitle(int position) {  
        return titles.get(position);  
    }  
}  

自定义view的xml:

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="vertical"  
    android:layout_width="wrap_content"  
    android:layout_height="48dp"  
    android:layout_gravity="center"  
    android:gravity="center"  
    >  
    <ImageView  
        android:layout_gravity="center"  
        android:id="@+id/tabicon"  
        android:src="@mipmap/ic_launcher"  
        android:layout_width="24dp"  
        android:layout_height="24dp" />  
    <TextView  
        android:id="@+id/tabtext"  
        android:gravity="center"  
        android:textSize="12sp"  
        android:textColor="@drawable/tab_selector"  
        android:layout_width="wrap_content"  
        android:layout_height="match_parent" />  
</LinearLayout>  

icon位置方法3:

上icon下text：

compile 'com.android.support:appcompat-v7:23.2.1'
compile 'com.android.support:design:23.2.1'

左icon右text：

compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:design:23.0.1'

源码下载地址：

点击打开链接