模仿知乎Android APP三

这是接着上一篇blog的，然后，做出的改变是在点击了LeftMenuFragment之后，显示了FirstFragment，现在，我们需要在FirstFragment中使用ViewPager + Fragment的形式来使得FirstFragment去显示更多的内容。

实现的大致效如下：

主要思路就是在点击进入了FirstFragment为内容界面的时候，我们为FirstFragment添加一个布局文件，里面包含了Fragment + ViewPager。使用FragmentPagerAdapter去绑定数据。

主要代码如下：

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

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.Display;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.mytoolbar_04.R;
import com.example.mytoolbar_04.fragment.firstFragments.Tab01;
import com.example.mytoolbar_04.fragment.firstFragments.Tab02;
import com.example.mytoolbar_04.fragment.firstFragments.Tab03;

public class FirstFragment extends Fragment implements OnClickListener
{
	private View mFirstFragmentView;
	private ViewPager mViewPager;
	private TextView tab_01;
	private TextView tab_02;
	private TextView tab_03;
	private ImageView mImageView;
	private FragmentPagerAdapter mAdapter;
	private List<Fragment> datas;
	private int width_1_3;

	private int currentPadgeIndex = 0;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
	{
		mFirstFragmentView = inflater.inflate(R.layout.first_page, null);
		intiView();
		intiEvent();
		initTabline();
		Tab01 view_01 = new Tab01();
		Tab02 view_02 = new Tab02();
		Tab03 view_03 = new Tab03();
		datas = new ArrayList<Fragment>();
		datas.add(view_01);
		datas.add(view_02);
		datas.add(view_03);
		mAdapter = new FragmentPagerAdapter(getFragmentManager())
		{
			public int getCount()
			{
				return datas.size();
			}

			public Fragment getItem(int arg0)
			{
				return datas.get(arg0);
			}
		};
		mViewPager.setAdapter(mAdapter);
		mViewPager.setOnPageChangeListener(new MyOnPageChangeListener());
		return mFirstFragmentView;
	}

	class MyOnPageChangeListener implements OnPageChangeListener
	{
		public void onPageScrollStateChanged(int arg0)
		{

		}

		public void onPageScrolled(int arg0, float arg1, int arg2)
		{
			LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mImageView
			    .getLayoutParams();
			if (currentPadgeIndex == arg0)
			{
				lp.leftMargin = (int) (width_1_3 * (currentPadgeIndex + arg1));
			} else
			{
				lp.leftMargin = (int) (width_1_3 * (currentPadgeIndex - 1 + arg1));
			}
			mImageView.setLayoutParams(lp);
		}

		@Override
		public void onPageSelected(int arg0)
		{
			resetTextColor();
			switch (arg0)
			{
			case 0:
				tab_01.setTextColor(Color.parseColor("#008000"));
				break;
			case 1:
				tab_02.setTextColor(Color.parseColor("#008000"));
				break;
			case 2:
				tab_03.setTextColor(Color.parseColor("#008000"));
				break;
			}
			currentPadgeIndex = arg0;
		}

	}

	private void initTabline()
	{
		Display display = getActivity().getWindow().getWindowManager().getDefaultDisplay();
		DisplayMetrics outMetrics = new DisplayMetrics();
		display.getMetrics(outMetrics);
		width_1_3 = outMetrics.widthPixels / 3;
		LayoutParams lp = mImageView.getLayoutParams();
		lp.width = width_1_3;
		mImageView.setLayoutParams(lp);
	}

	private void intiEvent()
	{
		tab_01.setOnClickListener(this);
		tab_02.setOnClickListener(this);
		tab_03.setOnClickListener(this);
	}

	private void intiView()
	{
		mViewPager = (ViewPager) mFirstFragmentView.findViewById(R.id.id_viewPager);
		tab_01 = (TextView) mFirstFragmentView.findViewById(R.id.id_fist_tab);
		tab_02 = (TextView) mFirstFragmentView.findViewById(R.id.id_second_tab);
		tab_03 = (TextView) mFirstFragmentView.findViewById(R.id.id_third_tab);
		mImageView = (ImageView) mFirstFragmentView.findViewById(R.id.id_imageView);
	}

	@Override
	public void onClick(View v)
	{
		resetTextColor();
		LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mImageView
		    .getLayoutParams();
		lp.width = width_1_3;
		switch (v.getId())
		{
		case R.id.id_fist_tab:
			lp.leftMargin = 0;
			tab_01.setTextColor(Color.parseColor("#008000"));
			mViewPager.setCurrentItem(0);
			break;
		case R.id.id_second_tab:
			lp.leftMargin = width_1_3;
			tab_02.setTextColor(Color.parseColor("#008000"));
			mViewPager.setCurrentItem(1);
			break;
		case R.id.id_third_tab:
			lp.leftMargin = width_1_3 * 2;
			mViewPager.setCurrentItem(2);
			tab_03.setTextColor(Color.parseColor("#008000"));
			break;
		}
		mImageView.setLayoutParams(lp);
	}

	private void resetTextColor()
	{
		tab_01.setTextColor(Color.parseColor("#000000"));
		tab_02.setTextColor(Color.parseColor("#000000"));
		tab_03.setTextColor(Color.parseColor("#000000"));
	}
}

FirstFragment的布局文件

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

    <LinearLayout
        android:id="@+id/id_titlebar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/id_fist_tab"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="粤剧歌曲"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/id_second_tab"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="粤剧图片"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/id_third_tab"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="粤剧新闻"
            android:textSize="16sp" />
    </LinearLayout>

    <ImageView
        android:id="@+id/id_imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/tabline" />

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

然后那些嵌套在FirstFragment里面的Fragment，他们只是包含了一个TextView，需要的时侯为他们添加复杂布局，然后对对应的事件进行处理。比如显示一个新闻列表，然后点击ListVIew之后再去启动一个Activity显示列表的详细内容，这样就类似于网易新闻客户端了。

戳我下载源码：源码下载