学习这篇文章,请先学习ToolBar文章。
修改activity_main.xml布局文件,定义TabLayout和ViewPager
先修改MainActivity.java类如下:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("MeterialDesign");
setSupportActionBar(toolbar);
// 显示左边的箭头
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
}
接着增加项目依赖
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<include layout="@layout/toolbar" />
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#1FBCD2" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white" />
</LinearLayout>
接下来是MainActivty里面逻辑代码的实现
public class MainActivity extends AppCompatActivity {
TabLayout tabLayout;
ViewPager pager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("MeterialDesign");
setSupportActionBar(toolbar);
// 显示左边的箭头
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.setTabTextColors(Color.WHITE, Color.RED);// 设置文本在选中和为选中时候的颜色
pager = (ViewPager) findViewById(R.id.viewpager);
MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
pager.setAdapter(adapter);
tabLayout.setupWithViewPager(pager);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
// 当个数比较少的话,请使用Mode_Fixed
// tabLayout.setTabMode(TabLayout.MODE_FIXED);
tabLayout.setTabsFromPagerAdapter(adapter);
}
// 这里我把MyAdapter和MyFragment都写成内部类的形式,
// 并不代表开发中都是这样,实际上需要单独成一个类。
public class MyAdapter extends FragmentPagerAdapter {
private String tabTitles[] = new String[] { " 新闻 ", " 娱乐 ", " 科技 ", " 图片 "," 体育 "," 军事 "," 农业 "," 社会 "," 美女 " };
public MyAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return MyFragment.newInstance(position + 1);
}
@Override
public int getCount() {
return tabTitles.length;
}
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
}
public static class MyFragment extends Fragment {
public static final String ARG_PAGE = "ARG_PAGE";
private int mPage;
public static MyFragment newInstance(int page) {
Bundle args = new Bundle();
args.putInt(ARG_PAGE, page);
MyFragment pageFragment = new MyFragment();
pageFragment.setArguments(args);
return pageFragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setHasOptionsMenu(true);
// 如果需要添加菜单,请调用此方法,并重写onCreateOptionsMenu
mPage = getArguments().getInt(ARG_PAGE);
}
@Override
@Nullable
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
TextView textView = new TextView(getActivity());
ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT);
textView.setGravity(Gravity.CENTER);
textView.setLayoutParams(lp);
textView.setText("Fragment # " + mPage);
textView.setTextSize(30);
textView.setTextColor(Color.BLACK);
return textView;
}
}
}
运行效果图如下:
好了,这篇教程到此结束。下面附赠源码