android,安卓,TabLayout + ViewPager + Fragment
TabLayout
展示效果:方便的实现tab跟随Viewpager切换,不需要第三方或者自定义
在layout里使用tablayout
向tablayout对象addTab
方式一: viewpager.addOnPagerChangeListener(new TabLayoutOnPagerChangeListener(tabLayout))
方式二:tabLayout.setupWithViewPager(viewPager) ,在使用TabItem布局在XML中添加标题以及图片的时候,不能使 用这种方式因为,源码会移除item,所以显示不了文字以及图片
展示效果:方便的实现tab跟随Viewpager切换,不需要第三方或者自定义
在layout里使用tablayout
向tablayout对象addTab
tabLayout.addTab(tabLayout.newTab().setText(""))
方式一: viewpager.addOnPagerChangeListener(new TabLayoutOnPagerChangeListener(tabLayout))
方式二:tabLayout.setupWithViewPager(viewPager) ,在使用TabItem布局在XML中添加标题以及图片的时候,不能使 用这种方式因为,源码会移除item,所以显示不了文字以及图片
具体示例代码 :
----------------------------------------------------------------->
----------------------------------------------------------------->
首先 : 添加依赖包 :
compile 'com.android.support:design:25.3.1'
布局文件 :
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".Main3Activity"> <android.support.design.widget.TabLayout android:background="@android:color/darker_gray" android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMaxWidth="0dp" app:tabGravity="fill" app:tabIndicatorColor="@android:color/holo_green_light" app:tabSelectedTextColor="@color/colorAccent" app:tabTextColor="@android:color/black" /> <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
Main的主要代码 :
public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener { String[] titles = new String[]{"首页", "尾页","第三"}; ArrayList<Fragment> fragmentLists = new ArrayList<>(); private ViewPager mViewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_ACTION_BAR); setContentView(R.layout.activity_main); TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout); mViewPager = (ViewPager) findViewById(R.id.viewpager); tabLayout.setTabMode(TabLayout.MODE_FIXED); // 设置固定的模式 for (String title: titles) { tabLayout.addTab(tabLayout.newTab().setText(title)); } tabLayout.setOnTabSelectedListener(this); fragmentLists.add(new FirstFragment()); fragmentLists.add(new LastFragment()); fragmentLists.add(new ThreeFragment()); MyAdapter myadapter = new MyAdapter(getSupportFragmentManager(),titles,fragmentLists); mViewPager.setAdapter(myadapter); tabLayout.setupWithViewPager(mViewPager); } @Override public void onTabSelected(TabLayout.Tab tab) { mViewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }
VIewPagerAdapter 的主要示例代码 :
public class MyAdapter extends FragmentPagerAdapter { private String[] titles; private List<Fragment> fragments; public MyAdapter(FragmentManager fm, String[]titles, List<Fragment> fragments) { super(fm); this.titles=titles; this.fragments=fragments; } @Override public Fragment getItem(int position) { return fragments.get(position); } @Override public CharSequence getPageTitle(int position) { return titles[position]; } @Override public int getCount() { return fragments.size(); } }
使用模拟器中发现,当TabLayout 在宽屏幕的设备上,tab的宽度超过一定值后,就不在平均分配宽度,而是居中显示。此时设置 app :tabMode 或者在代码中设置模式没有效果,这时候可以在XML中这样设置 :
app:tabMaxWidth="0dp" app:tabGravity="fill"就可以成功显示
--------------------------------------------------------------------------------------------------------------------->
另外包含图片的方式 : 有图片的形式 : ☆☆☆☆☆
添加图片的最好的办法 : 首先添加 design 依赖
<android.support.design.widget.TabLayout android:id="@+id/tab_layout2" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@mipmap/ic_launcher" // 在这里直接添加图片以及文字就行 android:text="个性推荐"/> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@mipmap/ic_launcher" android:text="歌单"/> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="主播电台"/> <android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="排行榜"/> </android.support.design.widget.TabLayout>
MainAvtivvity 里面的代码 : 注意下面注释(重要) ☆☆
public class SecondActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener { private TabLayout mTabLayout; private ViewPager mViewPager; private ArrayList<Fragment> mFragmentArrayList = new ArrayList<>(); // fragment集合 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_second); mViewPager = (ViewPager) findViewById(R.id.vp); mTabLayout = (TabLayout) findViewById(R.id.tab_layout2); mTabLayout.setTabMode(TabLayout.MODE_FIXED); mFragmentArrayList.add(new Music()); mFragmentArrayList.add(new NewsFragment()); mFragmentArrayList.add(new Singer()); MyNewAdapter adapter = new MyNewAdapter(getSupportFragmentManager(), mFragmentArrayList); mViewPager.setAdapter(adapter); mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout)); // 用这句话 // 用 mViewPager.addOnPageChangeListener代替下面的,下面注释掉的源码里面会清除所有Item,造成显示不了文字以及图片 //mTabLayout.setupWithViewPager(mViewPager); // 这里不要用这句话 mTabLayout.addOnTabSelectedListener(this); } @Override public void onTabSelected(TabLayout.Tab tab) { mViewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }
效果图片 :
---------------------------------------添加图片的另外一种实现方式(复杂不建议使用)------------------------------------>
1.首先 : adapter 代码 : (这个效果和上面是一样的)
public class MyViewPagerAdapter extends FragmentPagerAdapter { private String[] titles; private List<Fragment> fragments; Context mContext; public MyViewPagerAdapter(Context context,FragmentManager fm, String[] titles, List<Fragment> list) { super(fm); mContext = context; this.titles = titles; fragments = list; } @Override public Fragment getItem(int position) { return fragments.get(position); } @Override public int getCount() { return fragments.size(); } public View getTabView(int position) { View view = LayoutInflater.from(mContext).inflate(R.layout.tab_layout, null); ImageView iv_tab = (ImageView) view.findViewById(R.id.iv_tab); // 图片可以这样写 : 写一个数据保存id,如: images[position] ; TextView tv_tab = (TextView) view.findViewById(R.id.tv_tab); iv_tab.setImageResource(R.mipmap.ic_launcher); tv_tab.setText(titles[position]); return view; }
2 .再者布局代码 :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/iv_tab" android:layout_width="30dp" android:layout_height="30dp" android:scaleType="fitXY"/> <TextView android:id="@+id/tv_tab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center"/> </LinearLayout>
3.最后 :
public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener { ArrayList<Fragment> mFragments = new ArrayList<>(); private String[] titles = new String[]{"待审批", "已审批"}; private TabLayout mTableLayout; private ViewPager mViewPager; private int [] drawablws = new int[]{R.mipmap.ic_launcher}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mTableLayout = (TabLayout) findViewById(R.id.tab); mViewPager = (ViewPager) findViewById(R.id.viewpager); mTableLayout.setOnTabSelectedListener(this); mFragments.add(new WaitApprovalFragment()); mFragments.add(new ApprovalEndFragment()); MyViewPagerAdapter myViewpagerAdapter = new MyViewPagerAdapter(this,getSupportFragmentManager(), titles, mFragments); mViewPager.setAdapter(myViewpagerAdapter); mTableLayout.setupWithViewPager(mViewPager); /**这段代码要在 mTableLayout.setupWithViewPager(mViewPager) 之后写......start.....*/ for (int i = 0; i < mTableLayout.getTabCount(); i++) { TabLayout.Tab tab = mTableLayout.getTabAt(i); //设置自定义的标题 if (tab != null) { tab.setCustomView(myViewpagerAdapter.getTabView(i)); } } /**..................end................./
@Override public void onTabSelected(TabLayout.Tab tab) { mViewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { }
----------------------------------------------------------------------------------------------------->