1. 前提准备
今天回顾了下TabLayout与ViewPager的联合使用,顺便写个demo来加深下理解。首先要明确TabLayout是design下的,并非系统原来的widget下的。所以首先在app下的build.gradle的dependencies闭包中加入如下引用:
compile 'com.android.support:design:26.0.0-alpha1'
2. 主界面的布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.TabLayoutandroid:id="@+id/tablayout"android:layout_width="match_parent"android:layout_height="wrap_content"></android.support.design.widget.TabLayout><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="match_parent"></android.support.v4.view.ViewPager></LinearLayout>
其中,android.support.design.widget.TabLayout标签中有个app:tabMode属性,值为scrollable表示可滑动;fixed表示固定不可滑动。默认是不可滑动。
3. Java代码中
public class MainActivity extends AppCompatActivity {private ViewPager mViewPager;private TabLayout mTabLayout;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mViewPager = (ViewPager) findViewById(R.id.viewpager);mTabLayout = (TabLayout) findViewById(R.id.tablayout);init();
}private void init() {//初始化标题数据List<String> titles = new ArrayList<>();titles.add("新闻");titles.add("视频");titles.add("音乐");for (int i = 0; i < titles.size(); i++) {mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));}//初始化Fragment数据List<Fragment> fragments = new ArrayList<>();fragments.add(new NewsListFragment());fragments.add(new VideoListFragment());fragments.add(new MusicListFragment());//给ViewPager设置适配器mViewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(),fragments,titles));//将TabLayout与ViewPager关联起来mTabLayout.setupWithViewPager(mViewPager);}
}
其中,初始化了3个标题,并创建了相应的TabLayout和Fragment,给ViewPager设置了适配器,并将TabLayout与ViewPager关联起来。
4. 条目Fragment
为了完善效果演示,对每个Fragment进行了简单的初始化:
public class VideoListFragment extends Fragment {@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {return inflater.inflate(R.layout.fragment_video_list, container, false);}
}
注:VideoListFragment继承的Fragment是android.support.v4.app.Fragment包下的。
VideoListFragment的布局如下:
<?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"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:text="这是视频界面"android:textSize="24dp" /></LinearLayout>
NewsListFragment和MusicListFragment()与VideoListFragment类似,这里就不重复叙述。