仿照知乎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显示列表的详细内容，这样就类似于网易新闻客户端了。

戳我下载源码：源码下载

1楼finddreams前天 22:23

不错。