TabLayout+ViewPager自定义view实现图文混排微信选项卡框架和联动切换同步改变数据功能

效果图：



1.MainAcvitity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.ytf.myapplication.MainActivity">

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="none">

</android.support.v4.view.ViewPager>

<ImageView
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:src="@android:color/darker_gray" />

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_gravity="bottom">

<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
app:tabGravity="fill"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#FF4081"
app:tabTextColor="#000"></android.support.design.widget.TabLayout>
</RelativeLayout>
10e31
;

</LinearLayout>

自定义TabLayout的图文混排的view布局

<?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">

<ImageView
android:padding="4dp"
android:id="@+id/tab_iv"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_gravity="center"
android:scaleType="centerCrop" />

<TextView
android:id="@+id/tab_tv"
android:layout_width="match_parent"
android:layout_height="20dp"
android:gravity="center"
android:textSize="12sp"
android:textColor="@drawable/text_selector"
android:layout_gravity="center"/>
</LinearLayout>

3.上述的textcolor使用自定义文字选择指示器切换不同状态下的文字颜色

如果要改大小样式，那就引用自定义的style

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#ff5252" android:state_selected="true" ></item>
<item android:color="#abd0bc" android:state_selected="false"></item>
</selector>

给ViewPager添加fragment的数据源

package com.ytf.myapplication.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.ytf.myapplication.R;

/**
* A simple {@link Fragment} subclass.
*/
public class Fragment1 extends Fragment {

public Fragment1() {
// Required empty public constructor
}
//使用静态工厂方法实例化对象
public static Fragment1 newInstance() {

Bundle args = new Bundle();

Fragment1 fragment = new Fragment1();
fragment.setArguments(args);
return fragment;
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_fragment1, container, false);
}

}

4.自定义FragmentPagerAdapter设置fragment数据源到ViewPager上

package com.ytf.myapplication.fragment;

import android.content.Context;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.ytf.myapplication.R;

import java.util.ArrayList;
import java.util.List;

/**
* Created by YTF on 2017/7/19.
*/

public class MyPageAdapter extends FragmentPagerAdapter {
private  List<Fragment> list=new ArrayList<>();
//    private String[] mTitles = null;//只有文字的选项卡在此处合fragment一起设置数据源
//    private int[] mImg = new int[]{R.drawable.login_qq, R.drawable.login_wechat, R.drawable.login_qq, R.drawable.login_wechat};
private Context context;
private LayoutInflater inflater;
private TabLayout mTableLayout;
private ImageView tab_iv;
private TextView tab_tv;

public MyPageAdapter(FragmentManager fm, List<Fragment> list,Context context) {
super(fm);
this.list = list;
this.context = context;
inflater=LayoutInflater.from(context);
}

//    public void addFragment(Fragment fragment){
//       list.add(fragment);
//
//   }
public MyPageAdapter(FragmentManager fm) {
super(fm);
}

@Override
public Fragment getItem(int position) {
return list.get(position);
}

@Override
public int getCount() {
return list.size();
}
/**
* 此方法只在只有文字的选项卡中重写用于配合setupWithViewPager实现联动
* 自定义view不需要重写，写了也会清除
*/
//    @Override
//    public CharSequence getPageTitle(int position) {
//        return super.getPageTitle(position);
////        return list.get(position);
//    }
}

5、MainAcvitity。Java的实现：

package com.ytf.myapplication;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.ytf.myapplication.fragment.Fragment1;
import com.ytf.myapplication.fragment.Fragment2;
import com.ytf.myapplication.fragment.Fragment3;
import com.ytf.myapplication.fragment.Fragment4;
import com.ytf.myapplication.fragment.MyPageAdapter;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
private TabLayout mTableLayout;
private ViewPager mViewPager;
private String[] mTitles = new String[]{"微信", "通讯录", "发现", "我"};
private int[] mImg = new int[]{R.drawable.a8w, R.drawable.zg, R.drawable.yo, R.drawable.y_};
private int[] mImg_selector = new int[]{R.drawable.u4, R.drawable.u5, R.drawable.a6d, R.drawable.a6m};
private ImageView tab_iv;
private TextView tab_tv;
private List<Fragment> list = new ArrayList<>();
//    private Fragment1 fragment1;
//    private Fragment2 fragment2;
//    private Fragment3 fragment3;
//    private Fragment4 fragment4;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initview();
}

/**
* setupWithViewPager只能适应文字的选项卡样式，如果在Tab中有自定义的view
* 意味着放弃自定义view，TabLayout内部在添加Tab时候，会自动从ViewPager适配器PagerAdapter的getPageTitle()
* 获得一个字符串然后作为一个TextView添加到TabLayout中(自定义view会被完全清除)
*/
private void initview() {
mTableLayout = (TabLayout) findViewById(R.id.tabLayout);
mViewPager = (ViewPager) findViewById(R.id.viewPager);
showFragment();
LayoutInflater inflater = this.getLayoutInflater();
setTabs(mTableLayout, inflater, mTitles, mImg);

//        mTableLayout.setupWithViewPager(mViewPager);
// 此处只能实现文字选项卡，自定义图文混排tab设置联动会清除setTab中的数据
//果要实现自定义的view，那么就要放弃setupWithViewPager()，用如下方式实现
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTableLayout));
mTableLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));

}

private void setTabs(final TabLayout mTableLayout, LayoutInflater layoutInflater, String[] mTitles, final int[] mImg) {
for (int i = 0; i < mTitles.length; i++) {
TabLayout.Tab tab = mTableLayout.newTab();
View view = layoutInflater.inflate(R.layout.tab_custom_layout, null);
tab.setCustomView(view);
tab_iv = (ImageView) view.findViewById(R.id.tab_iv);
tab_tv = (TextView) view.findViewById(R.id.tab_tv);
tab_tv.setText(mTitles[i].toString());
if (i == 0) {//默认第一个tab为选中状态
tab_iv.setImageResource(mImg_selector[i]);
} else {
tab_iv.setImageResource(mImg[i]);
}
mTableLayout.addTab(tab);

}
//        点击不同的tab选项卡或者滑动ViewPager时候更换选项卡图片的操作
//        如果直接设置自定义view中的ImageView就会默认左右图片的改变都集中在最后一个tab
mTableLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
switch (tab.getPosition()) {
case 0:
ImageView img0 = (ImageView) mTableLayout.getTabAt(0).getCustomView().findViewById(R.id.tab_iv);
img0.setImageResource(mImg_selector[0]);
break;
case 1:
ImageView img1 = (ImageView) mTableLayout.getTabAt(1).getCustomView().findViewById(R.id.tab_iv);
img1.setImageResource(mImg_selector[1]);
//                        tab_iv.setImageResource(mImg_selector[1]);
break;
case 2:
ImageView img2 = (ImageView) mTableLayout.getTabAt(2).getCustomView().findViewById(R.id.tab_iv);
img2.setImageResource(mImg_selector[2]);
break;
case 3:
ImageView img3 = (ImageView) mTableLayout.getTabAt(3).getCustomView().findViewById(R.id.tab_iv);
img3.setImageResource(mImg_selector[1]);
break;
}
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {//未选中状态的图片恢复各自默认
switch (tab.getPosition()) {
case 0:
ImageView img0 = (ImageView) mTableLayout.getTabAt(0).getCustomView().findViewById(R.id.tab_iv);
img0.setImageResource(mImg[0]);
break;
case 1:
ImageView img1 = (ImageView) mTableLayout.getTabAt(1).getCustomView().findViewById(R.id.tab_iv);
img1.setImageResource(mImg[1]);
break;
case 2:
ImageView img2 = (ImageView) mTableLayout.getTabAt(2).getCustomView().findViewById(R.id.tab_iv);
img2.setImageResource(mImg[2]);
break;
case 3:
ImageView img3 = (ImageView) mTableLayout.getTabAt(3).getCustomView().findViewById(R.id.tab_iv);
img3.setImageResource(mImg[3]);
break;
}
}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
Fragment fragment=list.get(position);
fragment.onResume();//当fragment选中时手动调用onresume方法更新Fragment数据
}

@Override
public void onPageScrollStateChanged(int state) {

}
});

}

/**
* viewpager展示fragment
*/
private void showFragment() {
list.add(Fragment1.newInstance());
list.add(Fragment2.newInstance());
list.add(Fragment3.newInstance());
list.add(Fragment4.newInstance());
MyPageAdapter myPageAdapter = new MyPageAdapter(getSupportFragmentManager(), list, this);
mViewPager.setAdapter(myPageAdapter);
}
}