FragmentPageAdapter子类中，我们的标题是带有图片的，因此可以重写getPageTitle方法，通过SpannableString+ImageSpan来设置
Code TabLayoutAct.java package demo.turing.com.materialdesignwidget.tabLayout; import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import demo.turing.com.materialdesignwidget.R; public class TabLayoutAct extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab_layout); // Get the ViewPager and set it\'s PagerAdapter so that it can display items ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); viewPager.setAdapter(new SimpleFragmentPagerAdapter(getSupportFragmentManager(), TabLayoutAct.this)); // Give the TabLayout the ViewPager TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs); tabLayout.setupWithViewPager(viewPager); // 设置MODE_FIXED避免TabLayout挤到一块去 tabLayout.setTabMode(TabLayout.MODE_FIXED); } }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
activity_tab_layout.xmlstyle见分析中的第一条
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/sliding_tabs" android:layout_width="match_parent" android:layout_height="wrap_content" style="@style/MyCustomTabLayout"/> <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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
SimpleFragmentPagerAdapter.java package demo.turing.com.materialdesignwidget.tabLayout; import android.content.Context; import android.graphics.drawable.Drawable; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.text.Spannable; import android.text.SpannableString; import android.text.style.ImageSpan; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import demo.turing.com.materialdesignwidget.R; /** * MyApp * * @author Mr.Yang on 2016-03-08 09:58. * @version 1.0 * @desc */ public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter { /** * Add Icons to TabLayout ,在getPageTitle获取 */ private int[] imageResId = { R.drawable.tag_blue, R.drawable.flag_mark_violet, R.drawable.flag_mark_yellow }; final int PAGE_COUNT = 3; private String tabTitles[] = new String[]{"TAB_1", "TAB_2", "TAB_3"}; private Context context; /** * 构造函数 * * @param fm * @param context */ 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 PAGE_COUNT; } @Override public CharSequence getPageTitle(int position) { // Generate title based on item position 设置文字 // return tabTitles[position]; // 设置图片 // Drawable image = ContextCompat.getDrawable(context, imageResId[position]); // image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); // SpannableString sb = new SpannableString(" "); // ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); // sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); // return sb; // 设置文字和图片 // Generate title based on item position Drawable image = context.getResources().getDrawable(imageResId[position]); image.setBounds(0, 0, image.getIntrinsicWidth(), image.getIntrinsicHeight()); // Replace blank spaces with image icon 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; } /** * 自定义tab * 如果需要每个TAB都需要指定成单独的布局，switch即可，如果是相同的，写一个即可 * 这里自定义的不是Fragment的布局，不要搞混了，仅仅是TAB的样式 * @param * @return */ public View getTabView(int position) { View view = null; Log.d("getTabView", String.valueOf(position)); switch (position) { case 0: // Given you have a custom layout in `res/layout/custom_tab.xml` with a TextView and ImageView view = LayoutInflater.from(context).inflate(R.layout.custom_tab, 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]); break; case 1: // Given you have a custom layout in `res/layout/custom_tab1.xml` with a TextView and ImageView view = LayoutInflater.from(context).inflate(R.layout.custom_tab1, null); // TextView tv2 = (TextView) view.findViewById(R.id.textView); // tv2.setText(tabTitles[position]); // ImageView img2 = (ImageView) view.findViewById(R.id.imageView); // img2.setImageResource(imageResId[position]); break; case 2: // Given you have a custom layout in `res/layout/custom_tab2.xml` with a TextView and ImageView view = LayoutInflater.from(context).inflate(R.layout.custom_tab2, null); // TextView tv3 = (TextView) view.findViewById(R.id.textView); // tv3.setText(tabTitles[position]); // ImageView img3 = (ImageView) view.findViewById(R.id.imageView); // img3.setImageResource(imageResId[position]); break; default: break; } return view; } }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131