Android TabLayout setCustomView 实现带图标的tab

转自：http://blog.csdn.net/u010399316/article/details/51040031

首先.二话不说.先看下我们实现了怎么样的效果,不符合你要求的话,就可以直接出门左转.以免耽误你的时间

,如果,你还能看到这里.说明还是比较符合你的要求的,辣么,让咱们一点一点来实现这样的效果吧

先说一下坑.在网上看到别的代码来实现这样的左边icon右边文字的tab,只需要给这个tab设置一下icon就行

tabLayout.getTabAt(0).setIcon(R.drawable.tab_home_normal);

ok,如果我们gradle的配置信息用的版本是23.0.1的话,这个的确可以实现这样的效果.但是,同样的代码.我们把该版本修改到23.2.1(我的版本信息),竟然变成了上边icon下边文字的效果了.简直了

ok,那么我们就只能用setCustomView来实现我们的效果了

首先看一下咱们的布局:

[html] view plain copy

1. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:app="http://schemas.android.com/apk/res-auto"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent">  
5.   
6.     <android.support.design.widget.AppBarLayout  
7.         android:layout_width="match_parent"  
8.         android:layout_height="wrap_content"  
9.         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">  
10.   
11.         <android.support.v7.widget.Toolbar  
12.             android:id="@+id/toolbar"  
13.             android:layout_width="match_parent"  
14.             android:layout_height="?attr/actionBarSize"  
15.             android:background="?attr/colorPrimary"  
16.             app:layout_scrollFlags="scroll|enterAlways"  
17.             app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />  
18.   
19.         <android.support.design.widget.TabLayout  
20.             android:id="@+id/tabs"  
21.             android:layout_width="match_parent"  
22.             android:layout_height="wrap_content"  
23.             app:tabMode="fixed"  
24.             app:tabGravity="fill"  />  
25.     </android.support.design.widget.AppBarLayout>  
26.   
27.     <android.support.v4.view.ViewPager  
28.         android:id="@+id/viewpager"  
29.         android:layout_width="match_parent"  
30.         android:layout_height="match_parent"  
31.         app:layout_behavior="@string/appbar_scrolling_view_behavior"/>  
32. </android.support.design.widget.CoordinatorLayout>  

基本上也就一个TabLayout和ViewPager,还是很简单的

再来看下我们的adapter是怎么写的

[html] view plain copy

1. package com.example.imgod.testtabicontext.adapter;  
2.   
3. import android.support.v4.app.Fragment;  
4. import android.support.v4.app.FragmentManager;  
5. import android.support.v4.app.FragmentPagerAdapter;  
6.   
7. import java.util.List;  
8.   
9. /**  
10.  * Created by imgod on 2016/3/30.  
11.  */  
12. public class FragmentViewPagerAdapter extends FragmentPagerAdapter {  
13.     private List<Fragment> fragments;  
14.     private List<String> titles;  
15.   
16.     public FragmentViewPagerAdapter(FragmentManager manager, List<Fragment> fragments, List<String> titles) {  
17.         super(manager);  
18.         this.fragments = fragments;  
19.         this.titles = titles;  
20.   
21.     }  
22.   
23.     @Override  
24.     public Fragment getItem(int position) {  
25.         return fragments.get(position);  
26.     }  
27.   
28.     @Override  
29.     public int getCount() {  
30.         return fragments.size();  
31.     }  
32.   
33.     @Override  
34.     public CharSequence getPageTitle(int position) {  
35.         return titles.get(position);  
36.     }  
37.   
38. }  

我们的Fragment是这么写的:

[java] view plain copy

1. package com.example.imgod.testtabicontext.fragments;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.Fragment;  
5. import android.view.LayoutInflater;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8. import android.widget.TextView;  
9.   
10. import com.example.imgod.testtabicontext.R;  
11.   
12.   
13. public class OneFragment extends Fragment {  
14.   
15.     public static final String TYPE = "type";  
16.     private View parentView;  
17.     private TextView txt_content;  
18.   
19.     public OneFragment() {  
20.         // Required empty public constructor  
21.     }  
22.   
23.     @Override  
24.     public void onCreate(Bundle savedInstanceState) {  
25.         super.onCreate(savedInstanceState);  
26.     }  
27.   
28.     @Override  
29.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
30.                              Bundle savedInstanceState) {  
31.         // Inflate the layout for this fragment  
32.         parentView = inflater.inflate(R.layout.fragment_one, container, false);  
33.         initVIew();  
34.         return parentView;  
35.     }  
36.   
37.     private void initVIew() {  
38.   
39.         txt_content = (TextView) parentView.findViewById(R.id.txt_content);  
40.         txt_content.setText(getArguments().getString(TYPE, "Default"));  
41.     }  
42.   
43.     public static OneFragment newInstance(String text) {  
44.         OneFragment fragment = new OneFragment();  
45.         Bundle bundle = new Bundle();  
46.         bundle.putString(TYPE, text);  
47.         fragment.setArguments(bundle);  
48.         return fragment;  
49.     }  
50.   
51.   
52. }  

好了.上面都比较简单,下面就看我们的Activity的了

[java] view plain copy

1. package com.example.imgod.testtabicontext.activitys;  
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.view.ViewPager;  
7. import android.support.v7.app.AppCompatActivity;  
8. import android.support.v7.widget.Toolbar;  
9. import android.view.LayoutInflater;  
10. import android.view.View;  
11. import android.widget.ImageView;  
12. import android.widget.TextView;  
13.   
14. import com.example.imgod.testtabicontext.R;  
15. import com.example.imgod.testtabicontext.adapter.FragmentViewPagerAdapter;  
16. import com.example.imgod.testtabicontext.fragments.OneFragment;  
17.   
18. import java.util.ArrayList;  
19. import java.util.List;  
20.   
21.   
22. public class IconTextTabsActivityTemp1 extends AppCompatActivity {  
23.   
24.     private Toolbar toolbar;  
25.     private TabLayout tabLayout;  
26.     private ViewPager viewPager;  
27.     private List<String> titles;  
28.     private List<Fragment> fragments;  
29.     private int[] tabIcons = {  
30.             R.drawable.tab_home_normal,  
31.             R.drawable.tab_mine_normal,  
32.             R.drawable.tab_info_normal  
33.     };  
34.   
35.     @Override  
36.     protected void onCreate(Bundle savedInstanceState) {  
37.         super.onCreate(savedInstanceState);  
38.         setContentView(R.layout.activity_icon_text_tabs);  
39.         initView();  
40.         initValue();  
41.         initEvent();  
42.     }  
43.   
44.     private void initView() {  
45.         toolbar = (Toolbar) findViewById(R.id.toolbar);  
46.         setSupportActionBar(toolbar);  
47.         getSupportActionBar().setDisplayHomeAsUpEnabled(true);  
48.   
49.         viewPager = (ViewPager) findViewById(R.id.viewpager);  
50.         tabLayout = (TabLayout) findViewById(R.id.tabs);  
51.     }  
52.   
53.     private void initValue() {  
54.         fragments = new ArrayList<>();  
55.         fragments.add(OneFragment.newInstance("One"));  
56.         fragments.add(OneFragment.newInstance("Two"));  
57.         fragments.add(OneFragment.newInstance("Three"));  
58.         titles = new ArrayList<>();  
59.         titles.add("One");  
60.         titles.add("Two");  
61.         titles.add("Three");  
62.         FragmentViewPagerAdapter adapter = new FragmentViewPagerAdapter(getSupportFragmentManager(), fragments, titles);  
63.         viewPager.setAdapter(adapter);  
64.         tabLayout.setupWithViewPager(viewPager);  
65.         setupTabIcons();  
66.     }  
67.   
68.     private void initEvent() {  
69.     }  
70.   
71.   
72.     private void setupTabIcons() {  
73.         tabLayout.getTabAt(0).setCustomView(getTabView(0));  
74.         tabLayout.getTabAt(1).setCustomView(getTabView(1));  
75.         tabLayout.getTabAt(2).setCustomView(getTabView(2));  
76.     }  
77.   
78.   
79.     public View getTabView(int position) {  
80.         View view = LayoutInflater.from(this).inflate(R.layout.item_tab, null);  
81.         TextView txt_title = (TextView) view.findViewById(R.id.txt_title);  
82.         txt_title.setText(titles.get(position));  
83.         ImageView img_title = (ImageView) view.findViewById(R.id.img_title);  
84.         img_title.setImageResource(tabIcons[position]);  
85.         return view;  
86.     }  
87.   
88. }  

主要的就是getTabView方法.从布局加载一个View出来.然后设置给Tab,于是我们得到了下面的运行效果

咦,效果出来了.但是总感觉少点什么,是的,的确少点什么.我们发现Tab的文字颜色不会变了,图标一直也就一个颜色,实在是单调的很那,于是乎,我们匆匆在代码上加了这么一句话

tabLayout.setTabTextColors(Color.WHITE,Color.YELLOW);

but,然并卵.依然还是这个样子,于是乎我们只能在代码加载View和Tablayout的位置改变监听中,拿到View,然后在对他进行修改了

so,我们最后的代码是酱紫的:

[java] view plain copy

1. package com.example.imgod.testtabicontext.activitys;  
2.   
3. import android.graphics.Color;  
4. import android.os.Bundle;  
5. import android.support.design.widget.TabLayout;  
6. import android.support.v4.app.Fragment;  
7. import android.support.v4.view.ViewPager;  
8. import android.support.v7.app.AppCompatActivity;  
9. import android.support.v7.widget.Toolbar;  
10. import android.view.LayoutInflater;  
11. import android.view.View;  
12. import android.widget.ImageView;  
13. import android.widget.TextView;  
14.   
15. import com.example.imgod.testtabicontext.R;  
16. import com.example.imgod.testtabicontext.adapter.FragmentViewPagerAdapter;  
17. import com.example.imgod.testtabicontext.fragments.OneFragment;  
18.   
19. import java.util.ArrayList;  
20. import java.util.List;  
21.   
22.   
23. public class IconTextTabsActivity extends AppCompatActivity {  
24.   
25.     private Toolbar toolbar;  
26.     private TabLayout tabLayout;  
27.     private ViewPager viewPager;  
28.     private List<String> titles;  
29.     private List<Fragment> fragments;  
30.     private int[] tabIcons = {  
31.             R.drawable.tab_home_normal,  
32.             R.drawable.tab_mine_normal,  
33.             R.drawable.tab_info_normal  
34.     };  
35.     private int[] tabIconsPressed = {  
36.             R.drawable.tab_home_passed,  
37.             R.drawable.tab_mine_passed,  
38.             R.drawable.tab_info_passed  
39.     };  
40.   
41.     @Override  
42.     protected void onCreate(Bundle savedInstanceState) {  
43.         super.onCreate(savedInstanceState);  
44.         setContentView(R.layout.activity_icon_text_tabs);  
45.         initView();  
46.         initValue();  
47.         initEvent();  
48.     }  
49.   
50.     private void initView() {  
51.         toolbar = (Toolbar) findViewById(R.id.toolbar);  
52.         setSupportActionBar(toolbar);  
53.         getSupportActionBar().setDisplayHomeAsUpEnabled(true);  
54.   
55.         viewPager = (ViewPager) findViewById(R.id.viewpager);  
56.         tabLayout = (TabLayout) findViewById(R.id.tabs);  
57.     }  
58.   
59.     private void initValue() {  
60.         fragments = new ArrayList<>();  
61.         fragments.add(OneFragment.newInstance("One"));  
62.         fragments.add(OneFragment.newInstance("Two"));  
63.         fragments.add(OneFragment.newInstance("Three"));  
64.         titles = new ArrayList<>();  
65.         titles.add("One");  
66.         titles.add("Two");  
67.         titles.add("Three");  
68.         FragmentViewPagerAdapter adapter = new FragmentViewPagerAdapter(getSupportFragmentManager(), fragments, titles);  
69.         viewPager.setAdapter(adapter);  
70.         tabLayout.setupWithViewPager(viewPager);  
71.         setupTabIcons();  
72.     }  
73.   
74.     private void initEvent() {  
75.         tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {  
76.             @Override  
77.             public void onTabSelected(TabLayout.Tab tab) {  
78.                 changeTabSelect(tab);  
79.             }  
80.   
81.             @Override  
82.             public void onTabUnselected(TabLayout.Tab tab) {  
83.                 changeTabNormal(tab);  
84.             }  
85.   
86.             @Override  
87.             public void onTabReselected(TabLayout.Tab tab) {  
88.   
89.             }  
90.         });  
91.   
92.     }  
93.   
94.     private void changeTabSelect(TabLayout.Tab tab) {  
95.         View view = tab.getCustomView();  
96.         ImageView img_title = (ImageView) view.findViewById(R.id.img_title);  
97.         TextView txt_title = (TextView) view.findViewById(R.id.txt_title);  
98.         txt_title.setTextColor(Color.YELLOW);  
99.         if (txt_title.getText().toString().equals("One")) {  
100.             img_title.setImageResource(R.drawable.tab_home_passed);  
101.             viewPager.setCurrentItem(0);  
102.         } else if (txt_title.getText().toString().equals("Two")) {  
103.             img_title.setImageResource(R.drawable.tab_mine_passed);  
104.             viewPager.setCurrentItem(1);  
105.         } else {  
106.             img_title.setImageResource(R.drawable.tab_info_passed);  
107.             viewPager.setCurrentItem(2);  
108.         }  
109.     }  
110.   
111.     private void changeTabNormal(TabLayout.Tab tab) {  
112.         View view = tab.getCustomView();  
113.         ImageView img_title = (ImageView) view.findViewById(R.id.img_title);  
114.         TextView txt_title = (TextView) view.findViewById(R.id.txt_title);  
115.         txt_title.setTextColor(Color.WHITE);  
116.         if (txt_title.getText().toString().equals("One")) {  
117.             img_title.setImageResource(R.drawable.tab_home_normal);  
118.         } else if (txt_title.getText().toString().equals("Two")) {  
119.             img_title.setImageResource(R.drawable.tab_mine_normal);  
120.         } else {  
121.             img_title.setImageResource(R.drawable.tab_info_normal);  
122.         }  
123.     }  
124.   
125.   
126.     private void setupTabIcons() {  
127.         tabLayout.getTabAt(0).setCustomView(getTabView(0));  
128.         tabLayout.getTabAt(1).setCustomView(getTabView(1));  
129.         tabLayout.getTabAt(2).setCustomView(getTabView(2));  
130.     }  
131.   
132.   
133.     public View getTabView(int position) {  
134.         View view = LayoutInflater.from(this).inflate(R.layout.item_tab, null);  
135.         TextView txt_title = (TextView) view.findViewById(R.id.txt_title);  
136.         txt_title.setText(titles.get(position));  
137.         ImageView img_title = (ImageView) view.findViewById(R.id.img_title);  
138.         img_title.setImageResource(tabIcons[position]);  
139.   
140.         if (position == 0) {  
141.             txt_title.setTextColor(Color.YELLOW);  
142.             img_title.setImageResource(tabIconsPressed[position]);  
143.         } else {  
144.             txt_title.setTextColor(Color.WHITE);  
145.             img_title.setImageResource(tabIcons[position]);  
146.         }  
147.         return view;  
148.     }  
149.   
150. }  

2016年4月5日 10:53:14修改

其实我们可以看到,上面的代码很繁杂,我们可以用Selector来代替监听

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:drawable="@drawable/tab_home_normal" android:state_selected="false" />  
4.     <item android:drawable="@drawable/tab_home_passed" android:state_selected="true" />  
5. </selector>  

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:color="@color/colorYellow" android:state_selected="true" />  
4.     <item android:color="@color/colorWhite" android:state_selected="false" />  
5. </selector>  

那么最后,我们代码就是这个样子的了,注意一下下面唯一一行的注释,那是个坑

[java] view plain copy

1. package com.example.imgod.testtabicontext.activitys;  
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.view.ViewPager;  
7. import android.support.v7.app.AppCompatActivity;  
8. import android.support.v7.widget.Toolbar;  
9. import android.view.LayoutInflater;  
10. import android.view.View;  
11. import android.widget.ImageView;  
12. import android.widget.TextView;  
13.   
14. import com.example.imgod.testtabicontext.R;  
15. import com.example.imgod.testtabicontext.adapter.FragmentViewPagerAdapter;  
16. import com.example.imgod.testtabicontext.fragments.OneFragment;  
17.   
18. import java.util.ArrayList;  
19. import java.util.List;  
20.   
21.   
22. public class IconTextTabsActivityTemp2 extends AppCompatActivity {  
23.   
24.     private Toolbar toolbar;  
25.     private TabLayout tabLayout;  
26.     private ViewPager viewPager;  
27.     private List<String> titles;  
28.     private List<Fragment> fragments;  
29.     private int[] tabIcons = {  
30.             R.drawable.selector_tab1,  
31.             R.drawable.selector_tab2,  
32.             R.drawable.selector_tab3  
33.     };  
34.   
35.     @Override  
36.     protected void onCreate(Bundle savedInstanceState) {  
37.         super.onCreate(savedInstanceState);  
38.         setContentView(R.layout.activity_icon_text_tabs);  
39.         initView();  
40.         initValue();  
41.         initEvent();  
42.     }  
43.   
44.     private void initView() {  
45.         toolbar = (Toolbar) findViewById(R.id.toolbar);  
46.         setSupportActionBar(toolbar);  
47.         getSupportActionBar().setDisplayHomeAsUpEnabled(true);  
48.   
49.         viewPager = (ViewPager) findViewById(R.id.viewpager);  
50.         tabLayout = (TabLayout) findViewById(R.id.tabs);  
51.     }  
52.   
53.     private void initValue() {  
54.         fragments = new ArrayList<>();  
55.         fragments.add(OneFragment.newInstance("One"));  
56.         fragments.add(OneFragment.newInstance("Two"));  
57.         fragments.add(OneFragment.newInstance("Three"));  
58.         titles = new ArrayList<>();  
59.         titles.add("One");  
60.         titles.add("Two");  
61.         titles.add("Three");  
62.         FragmentViewPagerAdapter adapter = new FragmentViewPagerAdapter(getSupportFragmentManager(), fragments, titles);  
63.         viewPager.setAdapter(adapter);  
64.         tabLayout.setupWithViewPager(viewPager);  
65.         setupTabIcons();  
66.         viewPager.setCurrentItem(1);  
67.         viewPager.setCurrentItem(0);//直接设置0的话竟然不起作用,好吧.就这样迂回一下吧  
68.     }  
69.   
70.     private void initEvent() {  
71.     }  
72.   
73.   
74.     private void setupTabIcons() {  
75.         tabLayout.getTabAt(0).setCustomView(getTabView(0));  
76.         tabLayout.getTabAt(1).setCustomView(getTabView(1));  
77.         tabLayout.getTabAt(2).setCustomView(getTabView(2));  
78.     }  
79.   
80.   
81.     public View getTabView(int position) {  
82.         View view = LayoutInflater.from(this).inflate(R.layout.item_tab, null);  
83.         TextView txt_title = (TextView) view.findViewById(R.id.txt_title);  
84.         txt_title.setText(titles.get(position));  
85.         ImageView img_title = (ImageView) view.findViewById(R.id.img_title);  
86.         img_title.setImageResource(tabIcons[position]);  
87.         return view;  
88.     }  
89.   
90. }  

最后的最后,demo的Github地址: https://github.com/imgod1/TestTabIconText