TabLayout 和 ViewPager综合示例

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了TabLayout 和 ViewPager综合示例相关的知识，希望对你有一定的参考价值。

MainActivity 

  1. public class MainActivity extends ListActivity {
  3. 	protected void onCreate(Bundle savedInstanceState) {
  4. 		super.onCreate(savedInstanceState);
  5. 		String[] array = {"0、不重写getPageTitle，会导致没有标题",
  6. 				"1、使用默认的MODE_FIXED模式",
  7. 				"2、代码中设置Tab样式",
  8. 				"3、XML中设置Tab样式",
  10. 				"4、和VP联动演示，自定义Tab，添加监听，自定义Tab间距",
  11. 				"5、不自定义Tab，不添加监听，不自定义Tab间距(注意：这里tabMinWidth的默认值会严重影响Tab的宽度)",
  12. 				"6、自定义Tab，添加监听，不自定义Tab间距",
  14. 				"7、添加点击事件，但不手动处理点击Tab后TabLayout和VP的变化",
  15. 				"8、添加点击事件，并手动处理点击Tab后TabLayout和VP的变化",
  16. 				"9、【动态添加、删除VP中的数据--正常情况】",
  17. 				"9、【动态添加、删除VP中的数据--非正常情况】",};
  18. 		setListAdapter(new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, new ArrayList<>(Arrays.asList(array))));
  19. 	}
  21. 	@Override
  22. 	protected void onListItemClick(ListView l, View v, int position, long id) {
  23. 		switch (position) {
  24. 			case 0:
  25. 			case 1:
  26. 			case 2:
  27. 			case 3:
  28. 				Intent intent = new Intent(this, Activity1.class);
  29. 				intent.putExtra("tag", position);
  30. 				startActivity(intent);
  31. 				break;
  32. 			case 4:
  33. 			case 5:
  34. 			case 6:
  35. 				Intent intent2 = new Intent(this, Activity2.class);
  36. 				intent2.putExtra("tag", position);
  37. 				startActivity(intent2);
  38. 				break;
  39. 			case 7:
  40. 			case 8:
  41. 				Intent intent3 = new Intent(this, Activity3.class);
  42. 				intent3.putExtra("tag", position);
  43. 				startActivity(intent3);
  44. 				break;
  45. 			case 9:
  46. 				Intent intent4 = new Intent(this, Activity_VP1.class);
  47. 				intent4.putExtra("tag", position);
  48. 				startActivity(intent4);
  49. 				break;
  50. 			case 10:
  51. 				Intent intent5 = new Intent(this, Activity_VP2.class);
  52. 				intent5.putExtra("tag", position);
  53. 				startActivity(intent5);
  54. 				break;
  55. 		}
  56. 	}
  57. }

MyFragment

  1. public class MyFragment extends Fragment {
  2. 	
  3. 	public static MyFragment newInstance(String tag) {
  4. 		Bundle args = new Bundle();
  5. 		args.putString("tag", tag);
  6. 		MyFragment fragment = new MyFragment();
  7. 		fragment.setArguments(args);
  8. 		return fragment;
  9. 	}
  10. 	
  11. 	@Override
  12. 	public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
  13. 		TextView textView = new TextView(getContext());
  14. 		textView.setText(getArguments().getString("tag"));
  15. 		textView.setGravity(Gravity.CENTER);
  16. 		textView.setBackgroundColor(0xFF000000 + new Random().nextInt(0xFFFFFF));
  17. 		//注意，Integer.MAX_VALUE= 0x7fffffff，超过这个值就是负数了，所以通过随机数获取int值时，传入的值要小于0x7fffffff
  18. 		return textView;
  19. 	}
  20. }

Activity1 样式

  1. public class Activity1 extends FragmentActivity {
  2. 	private List<String> list = new ArrayList<>(Arrays.asList(new String[]{"包青天", "白", "baiqiantao(注意大小写)", "1", "12", "123", "1234",}));
  3. 	private int tag;
  5. 	@Override
  6. 	protected void onCreate(Bundle savedInstanceState) {
  7. 		super.onCreate(savedInstanceState);
  8. 		setContentView(R.layout.activity_main);
  9. 		tag = getIntent().getIntExtra("tag", 0);
  11. 		//3、XML中设置Tab样式
  12. 		TabLayout tabLayout;
  13. 		if (tag != 3) {
  14. 			tabLayout = (TabLayout) findViewById(R.id.tablayout1);
  15. 			findViewById(R.id.tablayout1).setVisibility(View.VISIBLE);
  16. 		} else {
  17. 			tabLayout = (TabLayout) findViewById(R.id.tablayout2);
  18. 			findViewById(R.id.tablayout2).setVisibility(View.VISIBLE);
  19. 		}
  21. 		ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
  22. 		viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
  23. 			@Override
  24. 			public Fragment getItem(int position) {
  25. 				return MyFragment.newInstance(list.get(position));
  26. 			}
  28. 			@Override
  29. 			public int getCount() {
  30. 				return list.size();
  31. 			}
  33. 			@Override
  34. 			public CharSequence getPageTitle(int position) {
  35. 				if (tag == 0) return super.getPageTitle(position);
  36. 					//0、不重写ViewPager的getPageTitle方法，会导致TabLayout没有标题
  37. 				else return list.get(position);//因为返回值是CharSequence，所以可以返回一个内容丰富的SpannableString
  38. 			}
  39. 		});
  40. 		tabLayout.setupWithViewPager(viewPager);
  42. 		//1、默认MODE_FIXED模式，会将每个tab都显示出来，tab的宽度一样；MODE_SCROLLABLE会根据tab中的内容自动调整tab宽度
  43. 		if (tag != 1) tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
  45. 		//2、代码中设置Tab样式
  46. 		if (tag == 2) {
  47. 			tabLayout.setTabGravity(Gravity.TOP);//没卵用啊！
  48. 			tabLayout.setTabTextColors(Color.RED, Color.GREEN);
  49. 			tabLayout.setSelectedTabIndicatorColor(Color.BLUE);
  50. 			tabLayout.setSelectedTabIndicatorHeight(15);
  51. 			tabLayout.setBackgroundColor(Color.YELLOW);
  52. 		}
  53. 	}
  54. }

Activity2 样式

  1. public class Activity2 extends FragmentActivity {
  2. 	private List<String> list = new ArrayList<>(Arrays.asList(new String[]{"包青天", "白", "baiqiantao(注意大小写)", "1", "12", "123", "1234",}));
  3. 	private TabLayout tabLayout;
  4. 	private ViewPager viewPager;
  6. 	@Override
  7. 	protected void onCreate(Bundle savedInstanceState) {
  8. 		super.onCreate(savedInstanceState);
  9. 		setContentView(R.layout.activity_main);
  10. 		int tag = getIntent().getIntExtra("tag", 0);
  12. 		initView();
  14. 		if (tag != 5) {//是否自定义Tab，是否添加监听
  15. 			setCustomTabView();
  16. 			addOnTabSelectedListener();
  17. 		}
  18. 		if (tag != 6) {//是否自定义Tab间距
  19. 			tabLayout.post(new Runnable() {
  20. 				@Override
  21. 				public void run() {
  22. 					setIndicator(tabLayout, 1, 1);//必须在setupWithViewPager之后（数据确定后）才可以操作
  23. 				}
  24. 			});
  25. 		}
  26. 	}
  28. 	private void initView() {
  29. 		viewPager = (ViewPager) findViewById(R.id.view_pager);
  30. 		tabLayout = (TabLayout) findViewById(R.id.tablayout1);
  31. 		findViewById(R.id.tablayout1).setVisibility(View.VISIBLE);
  33. 		PagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
  34. 			@Override
  35. 			public Fragment getItem(int position) {
  36. 				return MyFragment.newInstance(list.get(position));
  37. 			}
  39. 			@Override
  40. 			public int getCount() {
  41. 				return list.size();
  42. 			}
  44. 			@Override
  45. 			public CharSequence getPageTitle(int position) {
  46. 				return list.get(position);
  47. 			}
  48. 		};
  49. 		viewPager.setAdapter(adapter);
  51. 		tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//可滚动模式，另一个是固定宽度模式
  52. 		tabLayout.setupWithViewPager(viewPager);
  53. 	}
  55. 	/**
  56. 	 * 使用自定义的Tab，设置后要自己控制每个Tab的文字以及【默认】选中Tab的样式（比如默认第一个Tab要显示indicator等）
  57. 	 */
  58. 	private void setCustomTabView() {
  59. 		tabLayout.setSelectedTabIndicatorHeight(0);
  61. 		for (int i = 0; i < list.size(); i++) {//必须在setupWithViewPager之后（即被绑定VP的数据确定后）才可以操作
  62. 			View view = LayoutInflater.from(this).inflate(R.layout.item_tab, null);
  64. 			TextView tv_tab_name = (TextView) view.findViewById(R.id.tv_tab_name);
  65. 			View line_indicator = view.findViewById(R.id.line_indicator);
  66. 			tv_tab_name.setText(list.get(i));//控制每个Tab的文字
  67. 			if (i == 0) {//控制默认选中Tab的样式
  68. 				view.setSelected(true);//背景样式
  69. 				line_indicator.setSelected(true);//指示器样式
  70. 			} else {
  71. 				view.setSelected(false);
  72. 				line_indicator.setSelected(false);
  73. 			}
  75. 			TabLayout.Tab tab = tabLayout.getTabAt(i);//获得每一个tab
  76. 			if (tab != null) tab.setCustomView(view);//给每一个tab设置view
  77. 		}
  78. 	}
  80. 	/**
  81. 	 * 添加监听，当使用自定义的Tab时，要自己控制选中Tab【改变】时Tab的样式，以及ViewPager的当前Item
  82. 	 */
  83. 	private void addOnTabSelectedListener() {
  84. 		tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
  85. 			@Override
  86. 			public void onTabSelected(TabLayout.Tab tab) {
  87. 				if (tab.getCustomView() != null) {
  88. 					tab.getCustomView().setSelected(true);//要自己控制选中Tab改变时Tab的样式
  89. 					tab.getCustomView().findViewById(R.id.line_indicator).setSelected(true);
  90. 					viewPager.setCurrentItem(tab.getPosition());//要自己控制ViewPager的当前Item
  91. 				}
  92. 			}
  94. 			@Override
  95. 			public void onTabUnselected(TabLayout.Tab tab) {
  96. 				if (tab.getCustomView() != null) {
  97. 					tab.getCustomView().setSelected(false);
  98. 					tab.getCustomView().findViewById(R.id.line_indicator).setSelected(false);
  99. 				}
  100. 			}
  102. 			@Override
  103. 			public void onTabReselected(TabLayout.Tab tab) {
  104. 			}
  105. 		});
  106. 	}
  108. 	/**
  109. 	 * 自定义Indicator左右间距。适用于自定义Tab的情况下，在使用默认Tab时，通过tabPadding设置既可以了
  110. 	 * 注意：除了tabPadding外，tabMinWidth的值也会影响Tab的宽度，特别是1-2两字符时，会非常明显
  111. 	 */
  112. 	public static void setIndicator(TabLayout tabs, int leftDip, int rightDip) {
  113. 		try {
  114. 			Class<?> tabLayout = tabs.getClass();
  115. 			Field tabStrip = tabLayout.getDeclaredField("mTabStrip");
  116. 			tabStrip.setAccessible(true);
  118. 			int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());
  119. 			int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());
  121. 			LinearLayout llTab = (LinearLayout) tabStrip.get(tabs);
  122. 			for (int i = 0; i < llTab.getChildCount(); i++) {
  123. 				View child = llTab.getChildAt(i);
  124. 				child.setPadding(0, 0, 0, 0);
  125. 				LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
  126. 				params.leftMargin = left;
  127. 				params.rightMargin = right;
  128. 				child.setLayoutParams(params);
  129. 				child.invalidate();
  130. 			}
  131. 		} catch (Exception e) {
  132. 			e.printStackTrace();
  133. 		}
  134. 	}
  135. }

Activity3 样式

  1. public class Activity3 extends FragmentActivity implements View.OnClickListener {
  2. 	private List<String> list = new ArrayList<>(Arrays.asList(new String[]{"包青天", "白", "baiqiantao(注意大小写)", "1", "12", "123", "1234",}));
  3. 	
  4. 	private TabLayout tabLayout;
  5. 	private ViewPager viewPager;
  6. 	private int tag;
  7. 	private static final int OFFSET = 10086;
  8. 	
  9. 	@Override
  10. 	protected void onCreate(Bundle savedInstanceState) {
  11. 		super.onCreate(savedInstanceState);
  12. 		setContentView(R.layout.activity_main);
  13. 		tag = getIntent().getIntExtra("tag", 0);
  14. 		initView();
  15. 		setCustomTabView();
  16. 		addOnTabSelectedListener();
  17. 		
  18. 		tabLayout.post(new Runnable() {
  19. 			@Override
  20. 			public void run() {
  21. 				setIndicator(tabLayout, 1, 1);//必须在setupWithViewPager之后（数据确定后）才可以操作
  22. 			}
  23. 		});
  24. 	}
  25. 	
  26. 	private void initView() {
  27. 		viewPager = (ViewPager) findViewById(R.id.view_pager);
  28. 		tabLayout = (TabLayout) findViewById(R.id.tablayout1);
  29. 		findViewById(R.id.tablayout1).setVisibility(View.VISIBLE);
  30. 		
  31. 		PagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
  32. 			@Override
  33. 			public Fragment getItem(int position) {
  34. 				return MyFragment.newInstance(list.get(position));
  35. 			}
  36. 			
  37. 			@Override
  38. 			public int getCount() {
  39. 				return list.size();
  40. 			}
  41. 			
  42. 			@Override
  43. 			public CharSequence getPageTitle(int position) {
  44. 				return list.get(position);
  45. 			}
  46. 		};
  47. 		viewPager.setAdapter(adapter);
  48. 		
  49. 		tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
  50. 		tabLayout.setupWithViewPager(viewPager);
  51. 	}
  52. 	
  53. 	private void setCustomTabView() {
  54. 		tabLayout.setSelectedTabIndicatorHeight(0);
  55. 		
  56. 		for (int i = 0; i < list.size(); i++) {//必须在setupWithViewPager之后（数据确定后）才可以操作
  57. 			View view = LayoutInflater.from(this).inflate(R.layout.item_tab, null);
  58. 			
  59. 			//注意：给view添加点击事件后，点击Tab后的点击事件会被这里的view消耗掉，所以Tab自身的点击事件不会响应
  60. 			//也即点击Tab后将不会触发OnTabSelectedListener，也不会自动切换VP，这些都需要我们自己手动处理
  61. 			if (i <= 3) {
  62. 				view.setTag(i + OFFSET);
  63. 				view.setOnClickListener(this);
  64. 			}
  65. 			
  66. 			TextView tv_tab_name = (TextView) view.findViewById(R.id.tv_tab_name);
  67. 			View line_indicator = view.findViewById(R.id.line_indicator);
  68. 			tv_tab_name.setText(list.get(i));
  69. 			if (i == 0) {
  70. 				view.setSelected(true);
  71. 				line_indicator.setSelected(true);
  72. 			} else {
  73. 				view.setSelected(false);
  74. 				line_indicator.setSelected(false);
  75. 			}
  76. 			
  77. 			TabLayout.Tab tab = tabLayout.getTabAt(i);//获得每一个tab
  78. 			if (tab != null) tab.setCustomView(view);//给每一个tab设置view
  79. 		}
  80. 	}
  81. 	
  82. 	private void addOnTabSelectedListener() {
  83. 		tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
  84. 			@Override
  85. 			public void onTabSelected(TabLayout.Tab tab) {
  86. 				if (tab.getCustomView() != null) {
  87. 					tab.getCustomView().setSelected(true);
  88. 					tab.getCustomView().findViewById(R.id.line_indicator).setSelected(true);
  89. 					viewPager.setCurrentItem(tab.getPosition());
  90. 				}
  91. 			}
  92. 			
  93. 			@Override
  94. 			public void onTabUnselected(TabLayout.Tab tab) {
  95. 				if (tab.getCustomView() != null) {
  96. 					tab.getCustomView().setSelected(false);
  97. 					tab.getCustomView().findViewById(R.id.line_indicator).setSelected(false);
  98. 				}
  99. 			}
  100. 			
  101. 			@Override
  102. 			public void onTabReselected(TabLayout.Tab tab) {
  103. 			}
  104. 		});
  105. 	}
  106. 	
  107. 	/**
  108. 	 * 自定义Indicator左右间距。适用于自定义Tab的情况下，在使用默认Tab时，通过tabPadding设置既可以了
  109. 	 * 注意：除了tabPadding外，tabMinWidth的值也会影响Tab的宽度，特别是1-2两字符时，会非常明显
  110. 	 */
  111. 	public static void setIndicator(TabLayout tabs, int leftDip, int rightDip) {
  112. 		try {
  113. 			Class<?> tabLayout = tabs.getClass();
  114. 			Field tabStrip = tabLayout.getDeclaredField("mTabStrip");
  115. 			tabStrip.setAccessible(true);
  116. 			
  117. 			int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics());
  118. 			int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics());
  119. 			
  120. 			LinearLayout llTab = (LinearLayout) tabStrip.get(tabs);
  121. 			for (int i = 0; i < llTab.getChildCount(); i++) {
  122. 				View child = llTab.getChildAt(i);
  123. 				child.setPadding(0, 0, 0, 0);
  124. 				LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
  125. 				params.leftMargin = left;
  126. 				params.rightMargin = right;
  127. 				child.setLayoutParams(params);
  128. 				child.invalidate();
  129. 			}
  130. 		} catch (Exception e) {
  131. 			e.printStackTrace();
  132. 		}
  133. 	}
  134. 	
  135. 	@Override
  136. 	public void onClick(View v) {
  137. 		if (tag != 7) {
  138. 			int currentTabPosition = (int) v.getTag() - OFFSET;
  139. 			if (currentTabPosition >= 0 && currentTabPosition < tabLayout.getTabCount()) {
  140. 				reSetTabLayout(currentTabPosition);
  141. 				//setCurrentItem时，当点击最边缘那个Tab后，TabLayout也会像之前那样，将被点击的那个Tab滚动到屏幕中间
  142. 				viewPager.setCurrentItem(currentTabPosition);
  143. 			}
  144. 		}
  145. 		Toast.makeText(this, "我们需要自己手动处理点击Tab后所有变化", Toast.LENGTH_SHORT).show();
  146. 	}
  147. 	
  148. 	private void reSetTabLayout(int currentTabPosition) {
  149. 		for (int j = 0, count = tabLayout.getTabCount(); j < count; j++) {
  150. 			TabLayout.Tab tab = tabLayout.getTabAt(j);
  151. 			if (tab != null) {
  152. 				View view = tab.getCustomView();
  153. 				if (view != null) {
  154. 					TextView tv_tab_name = (TextView) view.findViewById(R.id.tv_tab_name);
  155. 					View line_indicator = view.findViewById(R.id.line_indicator);
  156. 					tv_tab_name.setText(list.get(j));
  157. 					if (j == currentTabPosition) {
  158. 						view.setSelected(true);
  159. 						line_indicator.setSelected(true);
  160. 					} else {
  161. 						view.setSelected(false);
  162. 						line_indicator.setSelected(false);
  163. 					}
  164. 				}
  165. 			}
  166. 		}
  167. 	}
  168. }

Activity_VP1 样式

  1. public class Activity_VP1 extends FragmentActivity {
  2. 	/**
  3. 	 * 此Demo演示：不保存Fragment的引用，当adapter调用getItem时去【重新创建】新的Fragment
  4. 	 */
  5. 	private List<String> list = new ArrayList<>(Arrays.asList(new String[]{"白", "1", "2", "3", "4", "5", "6", "7", "8",}));
  6. 	private PagerAdapter adapter;
  8. 	@Override
  9. 	protected void onCreate(Bundle savedInstanceState) {
  10. 		super.onCreate(savedInstanceState);
  11. 		setContentView(R.layout.activity_main);
  12. 		findViewById(R.id.tv_add).setVisibility(View.VISIBLE);
  13. 		findViewById(R.id.tv_remove).setVisibility(View.VISIBLE);
  14. 		ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
  16. 		//1、必须使用【FragmentStatePagerAdapter】，而不能使用FragmentPagerAdapter
  17. 		adapter = new FragmentStatePagerAdapter(getSupportFragmentManager()) {
  18. 			@Override
  19. 			public Fragment getItem(int position) {
  20. 				return MyFragment.newInstance(list.get(position));//每次都是创建新的Fragment
  21. 			}
  23. 			@Override
  24. 			public int getCount() {
  25. 				return list.size();
  26. 			}
  28. 			//2、必须重写getItemPosition，并且返回【PagerAdapter.POSITION_NONE】
  29. 			@Override
  30. 			public int getItemPosition(Object object) {
  31. 				return PagerAdapter.POSITION_NONE;
  32. 			}
  33. 		};
  34. 		viewPager.setAdapter(adapter);
  35. 	}
  37. 	public void add(View view) {
  38. 		list.add(0, new SimpleDateFormat("yyyy.MM.dd HH:mm:ss", Locale.getDefault()).format(new Date()));
  39. 		adapter.notifyDataSetChanged();
  40. 	}
  42. 	public void remove(View view) {
  43. 		if (list.size() > 0) list.remove(0);
  44. 		adapter.notifyDataSetChanged();
  45. 	}
  46. }

Activity_VP2 样式

  1. public class Activity_VP2 extends FragmentActivity {
  2. 	/**
  3. 	 * 此Demo演示：保存所有Fragment的引用，当adapter调用getItem时去【获取】已经创建的Fragment
  4. 	 */
  5. 	private List<Fragment> fragments;
  6. 	private PagerAdapter adapter;
  8. 	@Override
  9. 	protected void onCreate(Bundle savedInstanceState) {
  10. 		super.onCreate(savedInstanceState);
  11. 		setContentView(R.layout.activity_main);
  12. 		findViewById(R.id.tv_add).setVisibility(View.VISIBLE);
  13. 		findViewById(R.id.tv_remove).setVisibility(View.VISIBLE);
  14. 		ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
  16. 		String[] array = new String[]{"baiqiantao", "白", "包青天", "白乾涛", "1", "2", "3", "4", "5", "6", "7", "8",};
  17. 		fragments = new ArrayList<>();
  18. 		for (String string : array) {
  19. 			fragments.add(MyFragment.newInstance(string));
  20. 		}
  22. 		//1、必须使用【FragmentStatePagerAdapter】，而不能使用FragmentPagerAdapter
  23. 		adapter = new FragmentStatePagerAdapter(getSupportFragmentManager()) {
  25. 			@Override
  26. 			public Fragment getItem(int position) {
  27. 				return fragments.get(position);//这里的Fragment都是已经创建好的，而不是getItem时重新创建的
  28. 			}
  30. 			@Override
  31. 			public int getCount() {
  32. 				return fragments.size();
  33. 			}
  35. 			//2、必须重写getItemPosition，并且返回【PagerAdapter.POSITION_NONE】
  36. 			@Override
  37. 			public int getItemPosition(Object object) {
  38. 				return POSITION_NONE;
  39. 			}
  40. 		};
  41. 		viewPager.setAdapter(adapter);
  42. 	}
  44. 	public void add(View view) {
  45. 		String data = new SimpleDateFormat("yyyy.MM.dd HH:mm:ss", Locale.getDefault()).format(new Date());
  46. 		fragments.add(0, MyFragment.newInstance(data));
  47. 		setFragments(fragments);
  48. 	}
  50. 	public void remove(View view) {
  51. 		if (fragments.size() > 0) fragments.remove(0);
  52. 		setFragments(fragments);
  53. 	}
  55. 	public void setFragments(List<Fragment> fragments) {
  56. 		FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
  57. 		for (Fragment f : fragments) {
  58. 			ft.remove(f);
  59. 		}
  60. 		ft.commit();
  61. 		getSupportFragmentManager().executePendingTransactions();
  62. 		this.fragments = fragments;
  63. 		adapter.notifyDataSetChanged();
  64. 	}
  65. }

XML布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:orientation="vertical">
  9.     <TextView
  10.         android:id="@+id/tv_add"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="50dp"
  13.         android:background="@color/colorAccent"
  14.         android:gravity="center"
  15.         android:onClick="add"
  16.         android:text="添加一个Item"
  17.         android:visibility="gone"/>
  19.     <TextView
  20.         android:id="@+id/tv_remove"
  21.         android:layout_width="match_parent"
  22.         android:layout_height="50dp"
  23.         android:background="@color/colorPrimary"
  24.         android:gravity="center"
  25.         android:onClick="remove"
  26.         android:text="移除一个Item"
  27.         android:visibility="gone"/>
  29.     <android.support.design.widget.TabLayout
  30.         android:id="@+id/tablayout1"
  31.         android:layout_width="match_parent"
  32.         android:layout_height="wrap_content"
  33.         android:visibility="gone"
  34.         app:theme="@style/Widget.Design.TabLayout"/>
  36.     <android.support.design.widget.TabLayout
  37.         android:id="@+id/tablayout2"
  38.         style="@style/MyTabStyle"
  39.         android:layout_width="match_parent"
  40.         android:layout_height="wrap_content"
  41.         android:visibility="gone"
  42.         app:tabTextAppearance="@style/MyTabTextAppearance"/>
  44.     <android.support.v4.view.ViewPager
  45.         android:id="@+id/view_pager"
  46.         android:layout_width="match_parent"
  47.         android:layout_height="match_parent"/>
  48. </LinearLayout>

自定义Tab的布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.                 android:layout_width="50dp"
  4.                 android:layout_height="35dp"
  5.                 android:background="@drawable/sel_tab_bgcolor">
  7.     <TextView
  8.         android:id="@+id/tv_tab_name"
  9.         android:layout_width="wrap_content"
  10.         android:layout_height="match_parent"
  11.         android:layout_centerInParent="true"
  12.         android:ellipsize="end"
  13.         android:gravity="center"
  14.         android:maxEms="3"
  15.         android:maxLines="1"
  16.         android:text="热门热门热门热门"
  17.         android:textColor="@drawable/sel_tab_textcolor"
  18.         android:textSize="12sp"/>
  20.     <TextView
  21.         android:id="@+id/line_indicator"
  22.         android:layout_width="40dp"
  23.         android:layout_height="3dp"
  24.         android:layout_alignParentBottom="true"
  25.         android:layout_centerHorizontal="true"
  26.         android:background="@drawable/sel_tab_indicator"/>
  27. </RelativeLayout>

选择器

sel_tab_textcolor
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <item android:color="#f00" android:state_selected="true"/>
  4.     <item android:color="#00f"/>
  5. </selector>
sel_tab_bgcolor 和 sel_tab_indicator
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <item android:state_selected="true">
  4.         <shape>
  5.             <corners android:radius="2dp"/>
  6.             <solid android:color="#f00"/>
  7.         </shape>
  8.     </item>
  9.     <item>
  10.         <shape>
  11.             <corners android:radius="2dp"/>
  12.             <solid android:color="#00f"/>
  13.         </shape>
  14.     </item>
  15. </selector>

定义的样式

  1. <style name="MyTabStyle" parent="Widget.Design.TabLayout">
  2. 	<item name="android:background">@android:color/holo_green_dark</item><!--此背景会被tabBackground覆盖掉-->
  3. 	<item name="tabBackground">@android:color/holo_orange_dark</item><!--"通常"和background的效果完全一样-->
  5. 	<item name="tabContentStart">20dp</item><!--此值导致左边一块区域属于background，但不属于tabBackground-->
  6. 	<item name="tabGravity">fill</item><!--只能是fill或center，貌似没有卵用啊-->
  7. 	<item name="tabIndicatorHeight">5dp</item>
  8. 	<item name="tabIndicatorColor">#f00</item>
  10. 	<item name="tabMaxWidth">120dp</item>
  11. 	<item name="tabMinWidth">20dp</item>
  12. 	<item name="tabPadding">0dp</item>
  14. 	<item name="tabMode">scrollable</item>
  15. 	<item name="tabSelectedTextColor">#f00</item>
  17. 	<!--以下属性貌似都无效！-->
  18. 	<item name="android:ellipsize">end</item>
  19. 	<item name="android:maxLines">1</item>
  20. 	<item name="android:gravity">top</item>
  21. 	<item name="android:textColor">#fff</item>
  22. </style>
  24. <style name="MyTabTextAppearance" parent="TextAppearance.Design.Tab"><!--必须继承自TextAppearance.Design.Tab -->
  25. 	<!--只支持以下三个属性-->
  26. 	<item name="android:textSize">15sp</item>
  27. 	<item name="android:textAllCaps">false</item>
  28. 	<!--选择器无效！除非根据tab的选中状态手动设置-->
  29. 	<item name="android:textColor">@drawable/sel_tab_textcolor</item>
  30. </style>
2017-6-28




以上是关于TabLayout 和 ViewPager综合示例的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Android 中使用 TabLayout 和 ViewPager2

如何从（和替换）TabLayout 和 ViewPager 移动到新片段？

TabLayout 和ViewPager联动

Tablayout 和 Viewpager 之间的小填充

使用ViewPager和TabLayout与Xamarin时出错

TabLayout +ViewPager 自定义Tab的UI