因为我是在之前的基础上写的,所以这个TableLayout和Viewpager实际上是写在Fragment上的。要写到Activity里其实也是一样的啦。
先看效果图,原谅我不会动态图,只能截个图啦
布局文件
app:tabIndicatorcolor意思是选中的导航条的颜色。
app:tabSelectesTextColor是选中的导航条的文字颜色。
app:tabTextColor 是没有选中的导航条文字的颜色。
<?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="match_parent" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/tab" android:layout_width="fill_parent" android:layout_height="wrap_content" app:tabIndicatorColor="@color/selectTable" app:tabSelectedTextColor="@color/selectTable" app:tabTextColor="@color/black" /> <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout>java代码
import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import com.lvyequeen.mystudysummry.R; import com.lvyequeen.mystudysummry.adapters.FragmentVpAdapter; import java.util.ArrayList; import java.util.List; /** * author: lvqueen * mailbox: lvyequeen@163.com * time: 15/12/18 10:06 */ public class CertificFragment extends Fragment { private ViewPager vp; private TabLayout tab; private List<String> tablist = new ArrayList<>(); private List<View> views = new ArrayList<>(); private FragmentVpAdapter fragmentVpAdapter; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { initViews(); initTabStr(); View view = inflater.inflate(R.layout.fragment_certific, null); tab = ((TabLayout) view.findViewById(R.id.tab)); vp = ((ViewPager) view.findViewById(R.id.vp)); tab.setTabMode(TabLayout.MODE_FIXED); for (int i = 0; i < 3; i++) { tab.addTab(tab.newTab().setText(tablist.get(i))); } fragmentVpAdapter = new FragmentVpAdapter(views, tablist); vp.setAdapter(fragmentVpAdapter); // 将tablelayout和ViewPager关联起来 tab.setupWithViewPager(vp); tab.setTabsFromPagerAdapter(fragmentVpAdapter); return view; } /** * 初始化Viewpager的每个页面内容,这里为了简单,就直接new的视图 * 如果想要不同布局的内容,就按ViewPager的使用方式就行了。 */ private void initViews() { views.clear(); for (int i = 0; i < 3; i++) { TextView view = new TextView(getContext()); view.setText(i + 1 + "个viewpager的填充界面"); views.add(view); } } /** * 同样为了简单,标题栏的内容就这么附值了。 */ private void initTabStr() { tablist.clear(); for (int i = 0; i < 3; i++) { tablist.add("标题" + (1 + i)); } } }适配器的代码,和平时viewpager的写法是一样的,但是多了一个方法getPageTitle();
import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup; import java.util.List; /** * author: lvqueen * mailbox: lvyequeen@163.com * time: 15/12/22 23:17 */ public class FragmentVpAdapter extends PagerAdapter { // 这个是viewpager的填充视图 private List<View> views; // 这个是table导航条里面的内容填充 private List<String> tabstrs; public FragmentVpAdapter(List<View> views, List<String> tabstrs) { this.views = views; this.tabstrs = tabstrs; } @Override public int getCount() { return views.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(views.get(position)); return views.get(position); } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(views.get(position)); } // 这个是和tablelayout相关的 @Override public CharSequence getPageTitle(int position) { return tabstrs.get(position); } }