TabLayout+ViewPager+fragment实现头条效果

TabLayout+ViewPager+fragment实现头条效果

一、效果图

二、实现原理

TabLayout+ViewPager+fragment

三、实现

    private TabLayout tablayout;
private ViewPager viewPager;
   
private String[] titles = {"头条", "新闻", "娱乐", "体育", "美女", "科技", "财经", "汽车", "彩票", "国际", "推荐",};
 
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
 
 
tablayout = (TabLayout) findViewById(R.id.tablayout);
viewPager = (ViewPager) findViewById(R.id.viewpager);
 
MyPagerAdapter myPagerAdapter = new MyPagerAdapter(getSupportFragmentManager());
 
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));
viewPager.setAdapter(myPagerAdapter);
 
tablayout.setupWithViewPager(viewPager);
 
		
LinearLayout linearLayout = (LinearLayout) tablayout.getChildAt(0);
 
linearLayout.setShowDividers(LinearLayout.SHOW_DIVIDER_MIDDLE);
 
linearLayout.setDividerDrawable(ContextCompat.getDrawable(this,
R.drawable.layout_divider_vertical));
 
 
class MyPagerAdapter extends FragmentPagerAdapter {
 
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
 
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
 
@Override
public Fragment getItem(int position) {
CategoryFragment fragment = new CategoryFragment();
Bundle bundle = new Bundle();
bundle.putString("title", titles[position]);
fragment.setArguments(bundle);
return testFragment;
}
 
@Override
public int getCount() {
return titles.length;
}
}

activity_main.xml

<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
 
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
app:tabMode="scrollable"
app:tabSelectedTextColor="@android:color/holo_blue_bright"
app:tabTextColor="@android:color/holo_green_dark"
app:tabIndicatorColor="@android:color/holo_orange_dark"
app:tabGravity="center"
android:layout_height="wrap_content"/>
 
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
 
</LinearLayout>

CategoryFragment

public class CategoryFragment extends Fragment {
 
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
TextView textView = new TextView(getContext());
textView.setTextColor(Color.WHITE);
String name = this.getArguments().getString("title");
textView.setBackgroundColor(Color.rgb((int)(Math.random()*255),(int)(Math.random()*255),(int)(Math.random()*255)));
textView.setText(name);
return textView;
}
}

注意：
如果出现tab不会自动回弹，注意检查一下问题：

解决办法：

MyPagerAdapter myPagerAdapter = new MyPagerAdapter(getSupportFragmentManager())
这里getSupportFragmentManager替换成getChildFragmentManager

MyPagerAdapter myPagerAdapter = new MyPagerAdapter(getChildFragmentManager())

或者：

检查是否子View是否有填充布局