Material之TabLayout与ViewPager

在此之前如果要实现滑动式导航条：第一种：使用ActionBar第二种：使用Git开源的指示器第三种：自己重写android 5.0之后，google在v7包种新增加TabLayout实现滑动式导航条，贴上代码：

1.首先主Activity:

package com.sjz.tablayouttest;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends FragmentActivity{

private ArrayList<String> mTitle;
private List<Fragment> mListFrag;
private TabFragmentAdapter mTabFragment;
private ViewPager mViewPager;
private TabLayout mTabLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);
initId();

}

private void initId(){
mViewPager = (ViewPager) findViewById(R.id.viewPager);
initTitle();
initContent();
setAdapter();

}

private void setAdapter(){
if(mTabFragment == null) {
mTabFragment = new TabFragmentAdapter(mListFrag, mTitle, getSupportFragmentManager(), this);
mViewPager.setAdapter(mTabFragment);
mTabLayout = (TabLayout) findViewById(R.id.tablayout);
mTabLayout.setupWithViewPager(mViewPager);
mTabLayout.setTabTextColors(getResources().getColor(R.color.dark_white), Color.WHITE);
}else{
mTabFragment.notifyDataSetChanged();
mTabLayout.notify();
}

}

private void initTitle(){
String[] initTitle = getResources().getStringArray(R.array.inittitle);
mTitle = new ArrayList<String>();
int length = initTitle.length;
for(int i = 0; i < length; i++){
mTitle.add(initTitle[i]);
}
}

private void initContent(){
mListFrag = new ArrayList<Fragment>();
int size = mTitle.size();
for (int i = 0; i < size; i++) {
Fragment fragment = new MyFragment();
Bundle bundle = new Bundle();
bundle.putString("text",mTitle.get(i));
fragment.setArguments(bundle);
mListFrag.add(fragment);
}
}

}

2.Fragment代码：

package com.sjz.tablayouttest;

import android.graphics.Color;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;

public class TabFragment extends Fragment{

private String mText;

@Override
public void onCreate(@Nullable Bundle bundle) {
super.onCreate(bundle);
if(getArguments()!=null){
mText = getArguments().getString("text");
}
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
EditText textView = new EditText(getActivity());
ViewGroup.LayoutParams params= new ViewGroup.LayoutParams(-1,-1);
textView.setLayoutParams(params);
textView.setGravity(Gravity.CENTER);
textView.setTextColor(Color.RED);
textView.setText(mText);
return textView;
}
}

3.FragmentAdapter

package com.sjz.tablayouttest;

import android.content.Context;
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;

public class TabFragmentAdapter extends FragmentPagerAdapter{

private ArrayList<String> mTitles;
private Context context;
private List<Fragment> fragments;

public TabFragmentAdapter(List<Fragment> fragments,ArrayList<String> titles, FragmentManager fm, Context context) {
super(fm);
this.context = context;
this.fragments = fragments;
this.mTitles = titles;
}

@Override
public Fragment getItem(int position) {
return fragments.get(position);
}

@Override
public int getCount() {
return mTitles.size();
}

@Override
public CharSequence getPageTitle(int position) {
return mTitles.get(position);
}
}

下面是布局文件：

1.主界面布局文件：

<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">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#D33C3C"
android:gravity="center_vertical"
android:orientation="horizontal">

<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
app:tabIndicatorColor="@android:color/holo_blue_bright"
app:tabMode="scrollable"></android.support.design.widget.TabLayout>

<ImageView
android:id="@+id/image_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:src="@mipmap/ic_plus" />
</LinearLayout>

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"></android.support.v4.view.ViewPager>
</LinearLayout>

2.Fragment的布局文件：

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">

<TextView
android:text="@string/hello_world"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

</RelativeLayout>

3.贴上剩余：

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="dark_white">#99ffffff</color>
<color name="blue">#600fb979</color>

</resources>

<resources>
<string name="app_name">demo</string>

<string name="hello_world">Hello world!</string>
<string name="action_settings">Settings</string>
<array name="inittitle">
<item>推荐</item>
<item>娱乐</item>
<item>体育</item>
<item>北京</item>
<item>财经</item>
<item>视频</item>
<item>体育</item>
<item>科技</item>
<item>汽车</item>
<item>社会</item>
<item>搞笑</item>
<item>军事</item>
<item>历史</item>
<item>涨姿势</item>
</array>
</resources>

最后附上效果图：