硅谷新闻8--TabLayout替换ViewPagerIndicator_移动开发_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > 移动开发 > 硅谷新闻8--TabLayout替换ViewPagerIndicator

硅谷新闻8--TabLayout替换ViewPagerIndicator

 2016/10/31 5:30:57  ganchuanpu  程序员俱乐部  我要评论(0)
  • 摘要:1.关联库compile'com.android.support:design:23.3.0'2.布局写上TabLayout<android.support.design.widget.TabLayoutandroid:id="@+id/tabLayout"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android
  • 标签:view 硅谷

1.关联库

compile 'com.android.support:design:23.3.0'

 

2.布局写上TabLayout

class="brush:java;gutter:true;"> <android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:layout_weight="1" />

 

3.TabLayout和ViewPager关联  

tabLayout.setupWithViewPager(viewPager);
//注意以后监听页面的变化 ,TabPageIndicator监听页面的变化
// tabPagerIndicator.setOnPageChangeListener(new MyOnPageChangeListener()); 
viewPager.addOnPageChangeListener(new MyOnPageChangeListener()); 
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE)

  

4.解决TabLayout和ViewPagerIndicator的兼容问题  

4.1 <activity android:name=".activity.MainActivity" android:theme="@style/Theme.PageIndicatorDefaults" />

4.2 ViewPagerIndicator库修改成如下

<style name="Theme.PageIndicatorDefaults" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="vpiIconPageIndicatorStyle">@style/Widget.IconPageIndicator</item>
    <item name="vpiTabPageIndicatorStyle">@style/Widget.TabPageIndicator</item>
</style>

4.3添加V7包 compile 'com.android.support:appcompat-v7:23.3.0'  

 

5.TabLayout设置指针颜色和高度&文字颜色

5.1.添加样式

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

5.2. values目录下styles.xml里面

 <style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">

        <item name="tabMaxWidth">72dp</item>
        <item name="tabMinWidth">72dp</item>
        <item name="tabIndicatorColor">#ff0000</item>
        <item name="tabIndicatorHeight">2dp</item>
        <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
        <item name="tabSelectedTextColor">@android:color/holo_red_light</item>

    </style>

    <style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@android:color/black</item>
        <item name="textAllCaps">false</item>
    </style>

 

6.TabLayout自定义样式

1.设置的样式

vp_news_menu_detailpager.setAdapter(adapter);
tabLayout.setupWithViewPager(vp_news_menu_detailpager);
//设置滚动模式
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

for (int i = 0; i < tabLayout.getTabCount(); i++) {
	TabLayout.Tab tab = tabLayout.getTabAt(i);
	tab.setCustomView(getTabView(i));
}
//注意了setupWithViewPager必须在ViewPager.setAdapter()之后调用

2.在适配器中添加getTabView()方法

public View getTabView(int position){
	View view = LayoutInflater.from(context).inflate(R.layout.tab_item, null);
	TextView tv= (TextView) view.findViewById(R.id.textView);
	tv.setText(childrenDatas.get(position).getTitle());
	ImageView img = (ImageView) view.findViewById(R.id.imageView);
	img.setImageResource(R.drawable.dot_focus);
	return view;
}

布局文件tab_item.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:gravity="center_horizontal"
	android:orientation="vertical">

	<TextView
		android:text="text"
		android:id="@+id/textView"
		android:textColor="#000000"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_marginLeft="3dp" />

	<ImageView
		android:src="@drawable/dot_focus"
		android:id="@+id/imageView"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_centerVertical="true" />
	
</LinearLayout>

  

  

 

  

  

发表评论
用户名: 匿名