先附上效果图
第一步:书写布局
我的布局文件是这样的
<?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" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="9"> </android.support.v4.view.ViewPager> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="fill_horizontal|center_horizontal" android:background="@color/colorPrimary" app:tabTextColor="@color/tabTextColor" android:layout_weight="1"> </android.support.design.widget.TabLayout> </LinearLayout>
第二步:自定义fragment适配器
package com.example.wf.study; 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 WF on 2018/6/29. */ public class MyFragmentAdapter extends FragmentPagerAdapter { private List<Fragment> mFragmentList; public void setFragments(ArrayList<Fragment> fragments) { mFragmentList = fragments; } public MyFragmentAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { Fragment fragment = mFragmentList.get(position); return fragment; } @Override public int getCount() { return mFragmentList.size(); } @Override public CharSequence getPageTitle(int position) { return super.getPageTitle(position); } }
第三步:书写activity
package com.example.wf.study; import android.content.res.ColorStateList; import android.graphics.Typeface; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.widget.ImageView; import android.widget.TextView; import com.example.wf.study.fragment.FourFragment; import com.example.wf.study.fragment.OneFragment; import com.example.wf.study.fragment.ThreeFragment; import com.example.wf.study.fragment.TwoFragment; import java.util.ArrayList; public class TabLayoutActivity extends AppCompatActivity { private TabLayout tabLayout; private ViewPager viewPager; String[] tabName = {"", "大厅", "任务", "我的"}; int[] tab_img = {R.drawable.head4, R.drawable.head2, R.drawable.e4well, R.drawable.cat, R.drawable.head1}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab_layout); tabLayout = findViewById(R.id.tab_layout); viewPager = findViewById(R.id.view_pager); Typeface iconfont = Typeface.createFromAsset(getAssets(), "fonts/iconfont.ttf"); // 创建一个集合,装填Fragment ArrayList<Fragment> fragments = new ArrayList<>(); // 装填 fragments.add(new OneFragment()); fragments.add(new TwoFragment()); fragments.add(new ThreeFragment()); fragments.add(new FourFragment()); // 创建ViewPager适配器 MyFragmentAdapter myPagerAdapter = new MyFragmentAdapter(getSupportFragmentManager()); myPagerAdapter.setFragments(fragments); // 给ViewPager设置适配器 viewPager.setAdapter(myPagerAdapter); // 使用 TabLayout 和 ViewPager 相关联 tabLayout.setupWithViewPager(viewPager); // TabLayout 指示器 (记得自己手动创建4个Fragment,注意是 app包下的Fragment 还是 V4包下的 Fragment) tabLayout.setTabTextColors(ColorStateList); tabLayout.getTabAt(0).setText("主页").setIcon(tab_img[0]); tabLayout.getTabAt(1).setText("大厅").setIcon(tab_img[0]); tabLayout.getTabAt(2).setText("任务").setIcon(tab_img[0]); tabLayout.getTabAt(3).setText("我的").setIcon(tab_img[0]); for (int i = 0; i < 4; i++) { setTabItem(i); } }}
注:这里我在将tabLayout与viewPager进行绑定后,直接使用getTabAt()方法获取一个tab,但是我并没有使用addTab()方法来添加过任何一个tab,那为什么能够拿到tab呢?
原因如下:查看TabLayout源码发现这样一个方法
void populateFromPagerAdapter() { removeAllTabs(); if (mPagerAdapter != null) { final int adapterCount = mPagerAdapter.getCount(); for (int i = 0; i < adapterCount; i++) { addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false); } // Make sure we reflect the currently set ViewPager item if (mViewPager != null && adapterCount > 0) { final int curItem = mViewPager.getCurrentItem(); if (curItem != getSelectedTabPosition() && curItem < getTabCount()) { selectTab(getTabAt(curItem)); } } } }相信你已经注意到了,在第一个for循环中,它已经根据我已经关联的fragment个数创建了相应个数的tab。再拓展一下,这里他调用了getPageTitle()方法获取并设置tab标题,所以我们可以在自定义的fragment适配器中重写该方法,让他返回一个标题(不然它返回为空字符,你会看不到标题),这样我们就可以不使用setText()方法设置标题了。
二、通过自定义布局文件自定义tab样式
1、自定义一个tab_item.xml文件
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical"> <ImageView android:id="@+id/tab_img" android:layout_width="24dp" android:layout_height="24dp" android:contentDescription="@string/app_name" android:scaleType="fitXY" android:src="@drawable/selector_tab_image" /> <TextView android:id="@+id/tab_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="儿童" android:textColor="@drawable/selector_tab_text" /> </LinearLayout>
这是tab的通用样式,可以通过改变图片和文字来达到显示不同的效果
2、通过activity来配置显示效果
package com.example.wf.study; import android.content.res.ColorStateList; import android.graphics.Typeface; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.widget.ImageView; import android.widget.TextView; import com.example.wf.study.fragment.FourFragment; import com.example.wf.study.fragment.OneFragment; import com.example.wf.study.fragment.ThreeFragment; import com.example.wf.study.fragment.TwoFragment; import java.util.ArrayList; public class TabLayoutActivity extends AppCompatActivity { private TabLayout tabLayout; private ViewPager viewPager; String[] tabName = {"主页", "大厅", "任务", "我的"}; int[] tab_img = {R.drawable.head4, R.drawable.head2, R.drawable.e4well, R.drawable.cat, R.drawable.head1}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab_layout); tabLayout = findViewById(R.id.tab_layout); viewPager = findViewById(R.id.view_pager); Typeface iconfont = Typeface.createFromAsset(getAssets(), "fonts/iconfont.ttf"); // 创建一个集合,装填Fragment ArrayList<Fragment> fragments = new ArrayList<>(); // 装填 fragments.add(new OneFragment()); fragments.add(new TwoFragment()); fragments.add(new ThreeFragment()); fragments.add(new FourFragment()); // 创建ViewPager适配器 MyFragmentAdapter myPagerAdapter = new MyFragmentAdapter(getSupportFragmentManager()); myPagerAdapter.setFragments(fragments); // 给ViewPager设置适配器 viewPager.setAdapter(myPagerAdapter); // 使用 TabLayout 和 ViewPager 相关联 tabLayout.setupWithViewPager(viewPager); for (int i = 0; i < 4; i++) { setTabItem(i); } } public void setTabItem(int position) { View view = LayoutInflater.from(this).inflate(R.layout.tab_item, null); TextView textView = (TextView) view.findViewById(R.id.tab_name); textView.setText(tabName[position]); ImageView imageView=(ImageView)view.findViewById(R.id.tab_img); imageView.setImageResource(tab_img[position]); tabLayout.getTabAt(position).setCustomView(view); } }
这里通过获取到tab_item布局文件的view对象,通过该对象获取我们定义的ImageView和TextView并设置相关属性,最后通过setCustomView()方法将view传给tab显示。