1、首先加入TabLayout依赖
compile('com.android.support:design:27.1.1') {
force = true
}2、activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/activity_tablayout"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@color/white"
android:layout_alignParentBottom="true"
app:tabIndicatorColor="@color/line_cc"
>
</android.support.design.widget.TabLayout>
<com.tianxin.fragment2activity.NoAnimationViewPager
android:id="@+id/activity_viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="40dp">
</com.tianxin.fragment2activity.NoAnimationViewPager>
</RelativeLayout>3、创建三个fragment
/**
* 作者：created by meixi
* 邮箱：[email protected]
* 日期：2019/4/22 14
*/
public class Fragment1 extends Fragment {
protected View contentView;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
contentView = inflater.inflate(R.layout.fragment1, container, false);
initViews();
return contentView;
}
public void initViews(){
TextView textView =(TextView)contentView.findViewById(R.id.f1te);
textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getContext(),"ssssf1",Toast.LENGTH_SHORT).show();
}
});
}
}4、MainActivity实现代码
public class MainActivity extends AppCompatActivity implements View.OnTouchListener{
NoAnimationViewPager viewPagerl;
TabLayout tabLayout;
private List<Fragment> fragmentList;
private List<String> titleList;
private MyFragmentAdapter adapter;
private Fragment1 fragment1;
private Fragment3 fragment3;
private Fragment2 fragment2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPagerl = (NoAnimationViewPager) findViewById(R.id.activity_viewPager);
tabLayout = (TabLayout) findViewById(R.id.activity_tablayout);
getdata();
}
private void getdata() {
fragment1 = new Fragment1();
fragment2 = new Fragment2();
fragment3 = new Fragment3();
fragmentList = new ArrayList<>();
fragmentList.add(fragment1);
fragmentList.add(fragment2);
fragmentList.add(fragment3);
titleList = new ArrayList<>();
titleList.add("首页");
titleList.add("通讯录");
titleList.add("我的");
tabLayout.setTabMode(TabLayout.MODE_FIXED);//不可以轮动
tabLayout.addTab(tabLayout.newTab().setText(titleList.get(0)));
tabLayout.addTab(tabLayout.newTab().setText(titleList.get(1)));
tabLayout.addTab(tabLayout.newTab().setText(titleList.get(2)));
adapter = new MyFragmentAdapter(getSupportFragmentManager(), fragmentList, titleList,this);
viewPagerl.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPagerl);
viewPagerl.setOnTouchListener(this::onTouch);
viewPagerl.setOnPageChangeListener(new ViewPager.OnPageChangeListener()
{
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
// 把当前显示的position传递出去
nowpersion = position;
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
for (int i = 0; i <3; i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
//注意！！！这里就是添加我们自定义的布局
tab.setCustomView(adapter.getCustomView(i));
//这里是初始化时，默认item0被选中，setSelected（true）是为了给图片和文字设置选中效果，代码在文章最后贴出
if (i == 0) {
((ImageView) tab.getCustomView().findViewById(R.id.tab_iv)).setSelected(true);
((TextView) tab.getCustomView().findViewById(R.id.tab_tv)).setSelected(true);
}
}
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
((ImageView) tab.getCustomView().findViewById(R.id.tab_iv)).setSelected(true);
((TextView) tab.getCustomView().findViewById(R.id.tab_tv)).setSelected(true);
viewPagerl.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
((ImageView) tab.getCustomView().findViewById(R.id.tab_iv)).setSelected(false);
((TextView) tab.getCustomView().findViewById(R.id.tab_tv)).setSelected(false);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
//渐变色
float x1 = 0;
float x2 = 0;
private int nowpersion = 0;
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
if (ev.getAction() == MotionEvent.ACTION_DOWN) {
// Log.i("lgq","ssssMainActivity_dispatchTouchEvent==="+ev.getX());
x1 = ev.getX();
}
return super.dispatchTouchEvent(ev);
}
@Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_MOVE) {
x2 = event.getX();
float h = x1 - x2;
// Log.i("lgq","eee==滑动距离aaa===="+(h)+"......"+nowpersion+"...."+x1);
float f = (h + 0f) / 640;//滑动距离350px
if (f > 1) {
f = 1f;
}
if (f < 0) {
f = 0;
}
if (nowpersion == 0 && h < 0) {
return false;
} else if (nowpersion == 0 && h > 0) {
if (f < 0.4) {
return false;
}
// TextView textView = tabLayout.getTabAt(1).getCustomView().findViewById(R.id.tab_iv);
// TextView textView0 = tabLayout.getTabAt(0).getCustomView().findViewById(R.id.tab_iv);
// textView.setTextColor(changeAlpha(ContextCompat.getColor(MainActivity.this, R.color.textlan), (int) (f * 1 * 0xff)));
// textView0.setTextColor(changeAlpha(ContextCompat.getColor(MainActivity.this, R.color.texthui), (int) (f * 1 * 0xff)));
}
}
return false;
}
/**
* 修改颜色透明度
* @param color
* @param alpha
* @return
*/
public int changeAlpha(int color, int alpha) {
int red = Color.red(color);
int green = Color.green(color);
int blue = Color.blue(color);
return Color.argb(alpha, red, green, blue);
}
}
5、实现效果，可点击或者滑动切换fragment
点击 滑动
demo云盘链接：https://pan.baidu.com/s/1OJ-LtBzdcuDSwyzKMiI2rg
密码 在线回复:QQ1085220040
demo链接：https://download.csdn.net/download/meixi_android/11136389