安卓从API22（5.1）推出了Design的支持包，方便开发者使用Material Design元素来美化自己的应用，今天为大家整理了简单使用TabLayout+ViewPager做的一个小DEMO，方便大家借阅参考。
项目需要先引入Design的包，如果读者使用的是studio的话引入还是比较方便的，就不在这里多说了，话不多说，直接贴代码供大家参考了
主Activity代码
/** * Created by 谢栋 on 2016/12/2. */ public class DesignDemo extends AppCompatActivity{ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.design_test); ViewPager viewPager = (ViewPager) findViewById(R.id.pager); TabLayout tabLayout = (TabLayout) findViewById(R.id.tab); List<String > list = new ArrayList<>(); for (int i = 0; i < 3; i++) { list.add(String.format(Locale.CANADA,"第d页", i)); } //Activity继承自Activity的话可能会使得getSupportFragmentManager()不能使用，继承AppCompatActivity或者BaseActivity即可 viewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager(),list)); tabLayout.setupWithViewPager(viewPager); //完成TabLayout导航与ViewPager同步 } } 主布局文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/linearlayout" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!--app:tabMode="scrollable"当Tab导航上的条目比较多的时候，应该设置模式为滚动，否则看不见导航上的文字显示--> <android.support.design.widget.TabLayout android:id="@+id/tab" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabBackground="@color/design_test_color" app:tabTextColor="@android:color/white" app:tabSelectedTextColor="@android:color/black" app:tabIndicatorColor="@android:color/holo_red_dark" app:tabTextAppearance="@android:style/TextAppearance.DeviceDefault.Large" app:tabMode="scrollable" /> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> </LinearLayout>
需要给每个导航页填充内容，使用Fragment的形式填充，Fragment代码如下： package designTest; 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; import android.widget.TextView; import com.zhuandian.msuic.R; /** * Created by 谢栋 on 2016/12/3. */ public class FragmentLayout extends Fragment { //构造方法 public FragmentLayout() { } public static FragmentLayout newInstance(String text) { Bundle args = new Bundle(); args.putString("text",text); FragmentLayout fragment = new FragmentLayout(); fragment.setArguments(args); return fragment; } @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_layout,null); } @Override public void onViewCreated(View view, Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); TextView pagerText = (TextView) view.findViewById(R.id.pager_text); String string = getArguments().getString("text"); pagerText.setText(string); } }
Fragment对应的layout文件比较简单，测试仅用一个TexttView填充
<?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"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/pager_text" /> </LinearLayout> 还需要自定义一个FragmentPagerAdapter做为数据源，代码如下package designTest; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import java.util.List; /** * Created by 谢栋 on 2016/12/3. */ public class MyPagerAdapter extends FragmentPagerAdapter { private List<String> list; //构造方法 public MyPagerAdapter(FragmentManager fm, List<String> list) { super(fm); this.list = list; } @Override public Fragment getItem(int position) { return FragmentLayout.newInstance(list.get(position)); } @Override public int getCount() { return list.size(); } /** * 设置Tab导航条的标题 * @param position 当前的Tab角标索引 * @return Tab导航条的标题 */ @Override public CharSequence getPageTitle(int position) { return list.get(position); } } 关于Tab导航上字体颜色跟背景色的细节优化以及ViewPager的一些细节问题，笔者在这里就不在赘述，具体优化详情请根据项目需求进行优化。
