TabLayout,ViewPager,Fragment组合页卡

来源:互联网 发布:知乎手机客户端打不开 编辑:程序博客网 时间:2024/04/30 15:09

TabLayout,ViewPager,Fragment组合页卡

心烦。今天静下来看了下新闻头条,觉得人家布局还不错。所以拿来琢磨一番。其实昨天就在偷偷的瞄它了。

首先吐槽一下eclipse,同样的代码,在eclipse里就需要配置半天,而且还配置不对。。。
总之各种不爽,害我浪费了半小时时间。

然后又用AS重新建的,分分钟搞定,只不过我电脑渣编译时卡,但无大碍。

在AS上使用时,只需要引入design包即可。
引入方式:

compile 'com.android.support:design:23.3.0'//版本号根据你的sdk而定

之前我有看过5.0之后出的新控件,似乎有个和ViewPager组合使用的东西,其实就是它。

来两张效果图

TabLayout

来自Android Support Design包,主要用于界面的切换,类似于tabhost的效果。

 <android.support.design.widget.TabLayout    android:id="@+id/tab_group"    android:layout_width="match_parent"    android:layout_height="wrap_content"    app:tabIndicatorColor="@color/colorAccent"    app:tabMode="scrollable"//tablayou的模式    app:tabSelectedTextColor="@android:color/white"//选中后文字的颜色    app:tabTextColor="@android:color/darker_gray" />//未选中的颜色

虽然它是一个layout,但是它内部不可以放其他东西,只能放tabItem。

切记与ViewPager组合使用时,ViewPager不要放进TabLayout里面。
我就犯了这个错误

java.lang.IllegalArgumentException: Only TabItem instances can be added to TabLayout.

直接上码

布局:

 <android.support.design.widget.TabLayout    android:id="@+id/tab_group"    android:layout_width="match_parent"    android:layout_height="wrap_content"    app:tabIndicatorColor="@color/colorAccent"    app:tabMode="scrollable"    app:tabSelectedTextColor="@android:color/white"    app:tabTextColor="@android:color/darker_gray" /><android.support.v4.view.ViewPager    android:id="@+id/viewpager"    android:layout_width="match_parent"    android:layout_height="wrap_content" />

Activity:

//这里要继承FragmentActivity,一定要注意public class MainActivity extends FragmentActivity {private TabLayout tabLayout;private ViewPager viewPager;@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    tabLayout = (TabLayout) findViewById(R.id.tab_group);    viewPager = (ViewPager) findViewById(R.id.viewpager);    MyFragPageAdapter adapter = new MyFragPageAdapter(getSupportFragmentManager(), this);    viewPager.setAdapter(adapter);    // setupWithViewPager必须在ViewPager.setAdapter()之后调用    // 具体原因查看源码    tabLayout.setupWithViewPager(viewPager);    }}

MyFragPagerAdapter:

//这里面所有的Fragment相关的都是v4包内的,需要注意别跳坑里了。public class MyFragPageAdapter extends FragmentPagerAdapter {private int pages = 5;private Context context;private String[] datas = {"头条", "国内", "国际", "搞笑", "热门"};//构造必须一个FragmentManager管理器,注意也是v4里的public MyFragPageAdapter(FragmentManager fm, Context context) {    super(fm);    this.context = context;}@Overridepublic int getCount() {    return pages;}@Overridepublic Fragment getItem(int position) {    return Fragment1.newInstance(position);   }@Overridepublic CharSequence getPageTitle(int position) {    return datas[position];   }}

到这里就可以开心的用了。
只是一些简单的使用方法,希望大家有所收获。

2 1
原创粉丝点击