TabLayout+Fragment android design

前段时间项目改版,将首页改成Tab+Fragment的形式,看了看UI，就想到Google推出的Design中的一些控件。了解了一番觉得非常不错,就集成了一些到项目中，今天主要分享一下Design中的android.support.design.widget.TabLayout控件配合Fragment在Eclipse环境下的使用;

         具体的控件解释这里就不啰嗦了，感兴趣的朋友可以自己去网上了解Google推出的Design工具包.

        1.准备工作,你需要升级你的SDK或下载（android-support-appcompat、android-support-design）这两个工程，引入到你的项目中. 在你的SDK目录下的extras文件夹下可以找到这两个工程。

        2.MainActivity继承至android.support.v7.app.AppCompatActivity,并配置对应的main.xml文件，内容如下:

      

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="38dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:background="@color/app_background" />

    <RelativeLayout
        android:id="@+id/layout_tabs"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        android:layout_marginTop="-1dp"
        android:background="@color/red"
        android:paddingBottom="4dp" >

        <android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:tabGravity="center"
            app:tabIndicatorColor="@color/white"
            app:tabMode="scrollable"
            app:tabPaddingEnd="15dp"
            app:tabPaddingStart="15dp"
            app:tabSelectedTextColor="@color/white"
            app:tabTextColor="@color/green" />
    </RelativeLayout>

</RelativeLayout>

          3.在MainActivity中初始化一些数据，并给ViewPager和TabLayout配置数据：

public class MainActivity extends AppCompatActivity {

	private ViewPager mViewPager = null;
	private SPageAdapter mAdapter = null;
	private TabLayout mTabLayout = null;
	private List<String> mTabList = new ArrayList<String>();
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		initData();
		initView();
	}

	private void initData() {
		mTabList.add("头条");
		mTabList.add("娱乐");
		mTabList.add("财经");
		mTabList.add("图片");
		mTabList.add("军事");
		mTabList.add("轻松一刻");
		mAdapter = new SPageAdapter(getSupportFragmentManager(), mTabList);
	}

	private void initView() {
		mViewPager = (ViewPager) findViewById(R.id.viewpager);
		mViewPager.setAdapter(mAdapter);
		mTabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
		for(String title:mTabList){
			mTabLayout.addTab(mTabLayout.newTab().setText(title));
		}
		mTabLayout.setupWithViewPager(mViewPager);
	}
}

        4.编写SPageAdapter，(有兴趣的朋友可以去具体了解一下FragmentStatePagerAdapter和 getItemPosition 中的返回 )内容如下:

public class SPageAdapter extends FragmentStatePagerAdapter {
	private final List<Fragment> mFragments = new ArrayList<Fragment>();
	private List<String> mContent = null;

	public SPageAdapter(FragmentManager fm, List<String> content) {
		super(fm);
		this.mContent = content;
		init();
	}

	private void init() {
		for (String content : mContent) {
			mFragments.add(SSimpleFragment.newInstance(content));
		}
	}

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

	@Override
	public int getItemPosition(Object object) {
		return POSITION_NONE;
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return mFragments.size();
	}

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

}

      5,mFragments中可以添加你需要显示的Fragment内容，这里你可以自定义Fragment将它add到Fragment集合中,我简单写了一个SSimpleFragment，内容如下:

public class SSimpleFragment extends Fragment {

	public static SSimpleFragment newInstance(String content) {
		Bundle args = new Bundle();
		SSimpleFragment fragment = new SSimpleFragment();
		args.putString("Content", content);
		fragment.setArguments(args);
		return fragment;
	}
	
	TextView tvContent;
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.fragment_simple, null);
		tvContent = (TextView) view.findViewById(R.id.tvContent);
		tvContent.setText(getArguments().getString("Content"));
		tvContent.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				Toast.makeText(getActivity(), tvContent.getText().toString(),
						Toast.LENGTH_SHORT).show();
			}
		});
		return view;
	}
}

   完成以上步骤代码方面就O了，接下我提一下稍微要注意的几个地方可能会导致你的程序出现异常不能启动；

1：如果你的Activity继承至 AppCompatActivity ，那么这个Activity的主题样式必须派生Theme.AppCompat.**；

2 : 确保你的jar包一致性,android-support-appcompat 中包含了 v4包,check你的项目看其它地方是否有v4包的引入，删除多余的或者保持他们的版本一致，否则会导致你的项目无法启动;

  以下是效果截图: