tablayout+fragment+viewpager实现新闻

     今天介绍tablayout,tablayout是meterial design设计风格的design包中的控件。

用tablayout结合fragment+viewpager可以实现如下效果：

实现思路：

一、先写XML布局：

一个TabLayout,一个viewpager用线性布局包裹起来

解释下tablayout控件的几个属性的含义：

tabIndicatorColor:底部指示器的颜色

tabTextColor:tab文字的颜色

tabSelectedTextColor:tab选项卡被选中时文字的颜色

tabMode:是否可以滑动

tabGravity:是否占满整个布局或者居中显示

二、MainActivity中的主要代码

//找到控件

tabLayout= (TabLayout) findViewById(R.id.tablayout);

viewPager= (ViewPager) findViewById(R.id.vp);

MyPagerAdapter adapter =newMyPagerAdapter(getSupportFragmentManager());

//tab的标题来自于adapter

tabLayout.setTabsFromPagerAdapter(adapter);

viewPager.addOnPageChangeListener(newTabLayout.TabLayoutOnPageChangeListener(tabLayout));

//tabLayout 和 viewpager关联

tabLayout.addOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {

@Override

public voidonTabSelected(TabLayout.Tab tab) {

    //tab选中时的回调

    viewPager.setCurrentItem(tab.getPosition(),true);

}

@Override

public voidonTabUnselected(TabLayout.Tab tab) {

}

@Override

public voidonTabReselected(TabLayout.Tab tab) {

}

});

viewPager.setAdapter(adapter);

}

classMyPagerAdapterextendsFragmentPagerAdapter{

          publicMyPagerAdapter(FragmentManager fm) {

                   super(fm);

          }

//返回标题

@Override

publicCharSequencegetPageTitle(intposition) {

              return  titles[position];

}

@Override

publicFragmentgetItem(intposition) {

         //返回fragment 带标题

         NewsFragment f =newNewsFragment();

         Bundle bundle =newBundle();

          bundle.putString("title",titles[position]);

          f.setArguments(bundle);

          return f;

}

@Override

public intgetCount() {

      return titles.length;

}

三、fragment代码

publicViewonCreateView(LayoutInflater inflater,

@NullableViewGroup container,@NullableBundle savedInstanceState) {

       Bundle bundle = getArguments();

       String title = bundle.getString("title");

       TextView tv =newTextView(getContext());

       tv.setBackgroundColor(Color.rgb((int)(Math.random()*255),(int)(Math.random()*255),(int)       (Math.random()*255)));

       tv.setText(title);

       return  tv;

}

代码链接：http://pan.baidu.com/s/1gfiQf7P