如何设置 android.support.design.widget.tablayout的选择的文本进行加粗显示

Posted 2023-02-16

1.首先导入库:
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'
compile 'com.android.support:support-v4:23.1.1'

2. 然后就是 布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".TabLayoutActivity">

<android.support.design.widget.TabLayout
android:id="@+id/tl_tabs"
style="@style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

<android.support.v4.view.ViewPager
android:id="@+id/vp_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@android:color/white"/>
</LinearLayout>
3. 这里将TabLaoyut的样式设置放入到了style文件中了,颜色神马的就不贴了
如果在布局中使用属性, 带tab开头的属性使用"app:"前缀而不是"andorid:"前缀
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout"> <!--Tablayout 使用的样式-->
<item name="tabMaxWidth">@dimen/tab_max_width</item> <!--TAB最大宽度-->
<item name="tabIndicatorColor">?attr/colorAccent</item> <!--TAB底部滑块颜色-->
<item name="tabIndicatorHeight">5dp</item> <!--TAB底部滑块高度-->
<item name="tabPaddingStart">12dp</item> <!--TAB左边padding-->
<item name="tabPaddingEnd">12dp</item> <!--TAB右边padding-->
<item name="tabBackground">?attr/selectableItemBackground</item> <!--TAB背景色-->
<item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item> <!--TAB文字样式-->
<item name="tabSelectedTextColor">?android:textColorPrimary</item> <!--TAB选中文字颜色-->
</style>
<style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab"> <!--TAB文字样式-->
<item name="android:textSize">14sp</item>
<item name="android:textColor">?android:textColorSecondary</item>
<item name="textAllCaps">false</item> <!--英文大写,默认true-->
</style>
<dimen name="tab_max_width">36dp</dimen>
</resources>

4.然后就是Activity文件了
public class TabLayoutActivity extends AppCompatActivity
private ViewPagerAdapter viewPagerAdapter;
private ViewPager viewPager;
private TabLayout tl;
private static final String POSITION = "position";

@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tablayout);
viewPager = (ViewPager) findViewById(R.id.vp_viewpager);
tl = (TabLayout) findViewById(R.id.tl_tabs);


@Override
protected void onResume()
super.onResume();
viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(viewPagerAdapter);
tl.setupWithViewPager(viewPager); //ViewPager 和 TabLayout 关联
tl.setTabMode(TabLayout.MODE_SCROLLABLE); //用于多个TAB, Tablayout可以滚动
//更改TAB默认的文本布局,自定义TAB布局
for (int i = 0; i < tl.getTabCount(); i++)
TabLayout.Tab tabAt = tl.getTabAt(i);
tabAt.setCustomView(viewPagerAdapter.getTabView(i));

viewPagerAdapter.notifyDataSetChanged();


@Override
public void onSaveInstanceState(Bundle outState)
super.onSaveInstanceState(outState);
outState.putInt(POSITION, tl.getSelectedTabPosition());


@Override
protected void onRestoreInstanceState(Bundle savedInstanceState)
super.onRestoreInstanceState(savedInstanceState);
viewPager.setCurrentItem(savedInstanceState.getInt(POSITION));



5. 然后就是ViewPager的Adapter了
private class ViewPagerAdapter extends FragmentPagerAdapter
int pageCount = 10;
private int color[] = new int[]R.color.orange, R.color.green, R.color.red,
R.color.color_grays, R.color.color_red, R.color.color_black,
R.color.color_furvous, R.color.color_blue, R.color.color_green,R.color.color_orange
;

public ViewPagerAdapter(FragmentManager supportFragmentManager)
super(supportFragmentManager);


@Override
public Fragment getItem(int position)
return ViewPagerFragment.getInstance(position + 1, color[position]);


@Override
public int getCount()
return pageCount;


@Override
public CharSequence getPageTitle(int position)
// if (position == 4)
// Drawable img = getResources().getDrawable(R.drawable.ic_one);
// img.setBounds(0, 0, img.getIntrinsicWidth(), img.getIntrinsicHeight());
// SpannableString sb = new SpannableString("Page" + (position + 1) + " ");
// ImageSpan imageSpan = new ImageSpan(img, ImageSpan.ALIGN_BASELINE);
// sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
// return sb;
// else
// return "Page" + (position + 1);
//
return null; //如果采用自定义TAB布局,则这里返回null就可以了

//引入TAB自定义布局
public View getTabView(int position)
View view = View.inflate(TabLayoutActivity.this, R.layout.tab_item, null);
TextView tv = (TextView) view.findViewById(R.id.tv);
ImageView iv = (ImageView) view.findViewById(R.id.iv);
tv.setText("Page" + (position + 1));
if (position == 5)
iv.setVisibility(View.VISIBLE);
else
iv.setVisibility(View.GONE);

return view;



6.然后可能重要的就是Fragment了

public class ViewPagerFragment extends BaseFragment
public int page;
private int color;
public static final String GETPAGE = "get_page";
public static final String GETCOLOR = "get_color";
private static List<ViewPagerFragment> frags = new ArrayList<>();
private View rootView;
public static Fragment getInstance(int page, int color)
ViewPagerFragment cacheFrag = null;
cacheFrag = getCacheFrag(page, cacheFrag);
if (cacheFrag != null)
return cacheFrag; //首先尝试获取缓存的Fragment


Bundle args = new Bundle();
args.putInt(GETPAGE, page);
args.putInt(GETCOLOR, color);
//new 一个Fragment
ViewPagerFragment pageFragment = new ViewPagerFragment();
pageFragment.setArguments(args);
frags.add(pageFragment);
return pageFragment;

//获取缓存的Fragment
private static ViewPagerFragment getCacheFrag(int page, ViewPagerFragment cacheFrag)
if (frags != null && frags.size() > 0)
for (ViewPagerFragment frag : frags)
if (frag.page == page)
cacheFrag = frag;
break;



return cacheFrag;


@Override
public void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
page = getArguments().getInt(GETPAGE);
color = getArguments().getInt(GETCOLOR);


@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
Log.i(this.getClass().getSimpleName(), "onCreateView");
if(rootView == null)
rootView = inflater.inflate(R.layout.layout_fragment, container, false);
TextView tv = (TextView) rootView.findViewById(R.id.tv_fragment);
tv.setText("Page=====>" + page);
rootView.setBackgroundResource(color);

//缓存的rootView需要判断是否已经被加过parent， 如果有parent需要从parent删除，
//要不然会发生这个rootview已经有parent的错误。
ViewGroup parent = (ViewGroup) rootView.getParent();
if (parent != null)
parent.removeView(rootView);

return rootView;

参考技术A 首先sdk的版本必须是22，要想使用这个控件，你必须下载或更新sdk的版本，你要更新的22也就是5.1的版本，才会有这个控件的出现。
我们用一个例子来介绍一个这个控件：
activity_main.xml文件

[html] view plain copy
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<!--
android design library提供的TabLayout控件
tabIndicatorColor：菜单下方移动的横线的颜色
tabSelectedTextColor ：菜单被选中之后的颜色
tabTextColor : 菜单正常的颜色
app:tabTextAppearance : 添加样式，这里加了样式主要是为了在文字前面加一个图所用，就是把textAllCaps设置成false
-->
<android.support.design.widget.TabLayout
android:id="@+id/tab_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/titleBlue"
app:tabIndicatorColor="@color/white"
app:tabSelectedTextColor="@color/gray"
app:tabTextColor="@color/white"
app:tabTextAppearance="@style/tablayoutIcon"
/>

<android.support.v4.view.ViewPager
android:id="@+id/vp_pager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>

</LinearLayout>

在TabLayout中我使用了color.xml和style.xml中的颜色和样式。下面把代码给大家
color.xml

[html] view plain copy
<?xml version="1.0" encoding="utf-8" ?>
<resources>
<color name="white">#FFFFFF</color><!--白色 -->
<color name="titleBlue">#4876FF</color><!--天兰色 -->
<color name="gray">#808080</color><!--灰色 -->
</resources>

style.xml
[html] view plain copy
style.xml
<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
<style name="tablayoutIcon" parent="TextAppearance.Design.Tab">
<item name="textAllCaps">false</item>
</style>
</resources>