今天写一下TabLayout与ViewPager的联动效果,以平常我们写的ViewPager与按钮的联动基本上是一样的,相比较下,更显简单。
首先,先导入依赖
compile 'com.android.support:appcompat-v7:23.4.0'
compile 'com.android.support:design:24.2.0'
这里导入依赖要如意,我刚开始在网上找了一个依赖,最后报错了,说版本号不匹配,所以大家导入依赖的时候,都注意点!
接下来,就直接上代码了:
先看一下布局文件:activity_main.xml:
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"></android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/tablayout"></android.support.v4.view.ViewPager>
与Viewpager的联动效果,肯定是少不了Fragment的,所以,TabLayout中有几个按钮,就应该有几个fragment,当然,导航栏内容过多,可以建一个fragment,重复利用,今天我整的比较少,所以,就不重复使用了,
接下来,我们建4个fragment(需要几个建几个):分别为:fragment1、
fragment2、fragment3、fragment4,这里我就不粘贴代码了,这个还是比较简单的。
4个fragment建完之后,相应的,接着建4个fragment.class
这里由于基本上都是一样的,我就展示一个就行了,剩下的3个,就可以自己看着整了;
fragment1.class:
package com.bwie.test.tablayouttext;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by 笔片 on 2017/10/25.
*/
public class fragment1 extends Fragment{
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment1,container,false);
return view;
}
}
主要还是对应上就可以了,不要粗心写岔了;
有了Viewpager,当然就应该有对应的Adapter了。
ViewPagerAdapter:
package adapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.ArrayList;
import java.util.List;
/**
* Created by 笔片 on 2017/10/25.
*/
public class ViewPagerAdapter extends FragmentPagerAdapter{
ArrayList<Fragment> list;
private List<String> list_Title;
public ViewPagerAdapter(FragmentManager fm, ArrayList<Fragment> list, List<String> list_Title) {
super(fm);
this.list = list;
this.list_Title = list_Title;
}
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
//重写这个方法,将设置每个Tab的标题
//此方法用来显示tab上的名字
@Override
public CharSequence getPageTitle(int position) {
return list_Title.get(position % list_Title.size());
}
}
接下来,就剩下MainActivity了:
package com.bwie.test.yuekaotext;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import java.util.ArrayList;
import adapter.ViewPagerAdapter;
import fragments.fragment1;
import fragments.fragment2;
import fragments.fragment3;
import fragments.fragment4;
public class MainActivity extends AppCompatActivity {
TabLayout tabLayout;
ViewPager viewpager;
ArrayList<Fragment> list;
ViewPagerAdapter adapter;
FragmentManager manager;
fragment1 f1;
fragment2 f2;
fragment3 f3;
fragment4 f4;
private ArrayList<String> list_title;
@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);
manager = getSupportFragmentManager();
list = new ArrayList<Fragment>();
list_title = new ArrayList<>();
f1 = new fragment1();
f2 = new fragment2();
f3 = new fragment3();
f4 = new fragment4();
list.add(f1);
list.add(f2);
list.add(f3);
list.add(f4);
list_title = new ArrayList<>();
list_title.add("最新日报");
list_title.add("专栏");
list_title.add("热门");
list_title.add("主题日报");
//设置TabLayout的模式
tabLayout.setTabMode(TabLayout.MODE_FIXED);
//为TabLayout添加tab名称
tabLayout.addTab(tabLayout.newTab().setText(list_title.get(0)));
tabLayout.addTab(tabLayout.newTab().setText(list_title.get(1)));
tabLayout.addTab(tabLayout.newTab().setText(list_title.get(2)));
tabLayout.addTab(tabLayout.newTab().setText(list_title.get(3)));
adapter = new ViewPagerAdapter(manager,list,list_title);
viewpager.setAdapter(adapter);
//绑定
tabLayout.setupWithViewPager(viewpager);
}
}
最重要的还是最后一句了,
tabLayout.setupWithViewPager(viewpager);
将TabLayout与Viewpager联系到一起。最后展示一下效果图: