fragment+viewpager学习一（高仿微信5.2.1主界面）

有一段时间没接触fragment，今天特地回顾了下，顺便模仿微信5.2.1主界面写了个demo

先看效果图如下：

下图是我的项目结构图：

MainActivity.java

<pre name="code" class="java">package com.xwj.xwj_wechat5;

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

import com.xwj.xwj_wechat5.fragment.ChatsFragment;
import com.xwj.xwj_wechat5.fragment.ContactsFragment;
import com.xwj.xwj_wechat5.fragment.FindFragment;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
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.Window;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends FragmentActivity implements OnPageChangeListener{
	
	private ViewPager mViewPager;
	private TextView mChatsTv;
	private TextView mFindTv;
	private TextView mContactsTv;
	
	private FragmentPagerAdapter mFpAdapter;
	private List<Fragment> mDatas;
	
	private ImageView mTabline;
	private int mScreen1_3;
	private int mCurrentPageIndex;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		//去掉本身的标题栏
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);	
		initView();
	}

	private void initView() {
		mViewPager = (ViewPager) findViewById(R.id.viewpager_main);
		mChatsTv = (TextView) findViewById(R.id.tv_chats);
		mFindTv = (TextView) findViewById(R.id.tv_find);
		mContactsTv = (TextView) findViewById(R.id.tv_contacts);
		
		initTabLine();
		
		mDatas = new ArrayList<Fragment>();
		//初始化各个Fragment
		ChatsFragment chatsFragment = new ChatsFragment();
		ContactsFragment contactsFragment = new ContactsFragment();
		FindFragment findFragment = new FindFragment();
		//将Fragment添加到List中
		mDatas.add(chatsFragment);
		mDatas.add(findFragment);
		mDatas.add(contactsFragment);
			
		mFpAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
			
			@Override
			public int getCount() {
				return mDatas.size();
			}
			
			@Override
			public Fragment getItem(int arg0) {
				return mDatas.get(arg0);
			}
		};
		
		mViewPager.setAdapter(mFpAdapter);
		mViewPager.setOnPageChangeListener(this);
	}
	
	
	private void initTabLine() {
		mTabline = (ImageView) findViewById(R.id.iv_tabline);
		Display display = getWindow().getWindowManager().getDefaultDisplay();
		DisplayMetrics outMetrics = new DisplayMetrics();
		display.getMetrics(outMetrics);
		mScreen1_3 = outMetrics.widthPixels / 3;
		LayoutParams tablineLp = mTabline.getLayoutParams();
		tablineLp.width = mScreen1_3;
		mTabline.setLayoutParams(tablineLp);
	}

	@Override
	public void onPageScrollStateChanged(int arg0) {
		
	}

	@Override
	public void onPageScrolled(int position, float positionOffset,
			int positionOffsetPixels) {
		System.out.println(position + "," + positionOffset + ","+ positionOffsetPixels);
		//  滑动的时候mTabline跟着滑动
		LinearLayout.LayoutParams tablineLayoutParams = (android.widget.LinearLayout.LayoutParams) mTabline
				.getLayoutParams();
		if (mCurrentPageIndex == 0 && position == 0) { // 0->1
			tablineLayoutParams.leftMargin = (int) (positionOffset * mScreen1_3 + mCurrentPageIndex* mScreen1_3);
		} else if (mCurrentPageIndex == 1 && position == 0) {// 1->0
			tablineLayoutParams.leftMargin = (int) ((positionOffset-1) * mScreen1_3 + mCurrentPageIndex * mScreen1_3);
		}else if (mCurrentPageIndex == 1 && position == 1) {// 1->2
			tablineLayoutParams.leftMargin = (int) ( positionOffset * mScreen1_3 +mCurrentPageIndex * mScreen1_3);
		} else if (mCurrentPageIndex == 2 && position == 1) {// 2->1
			tablineLayoutParams.leftMargin = (int) ((positionOffset-1)* mScreen1_3 + mCurrentPageIndex * mScreen1_3);
		}
		mTabline.setLayoutParams(tablineLayoutParams);
	}

	@Override
	public void onPageSelected(int position) {
		mChatsTv.setTextColor(Color.BLACK);
		mFindTv.setTextColor(Color.BLACK);
		mContactsTv.setTextColor(Color.BLACK);
		switch (position) {
		case 0:
			//滑动的时候改变标题栏字体的颜色
			mChatsTv.setTextColor(Color.parseColor("#008000"));
			break;
		case 1:
			mFindTv.setTextColor(Color.parseColor("#008000"));
			break;
		case 2:
			mContactsTv.setTextColor(Color.parseColor("#008000"));
			break;
		default:
			break;
		}
		mCurrentPageIndex = position;
	}

}

initTabLine方法主要用用于初始化基线的，这里不做过多解释，在onPageScrolled方法中，用于是基线跟着按钮移动，(int position, float positionOffset,int positionOffsetPixels) 大家可以打印出这三个参数在界面滑动的值的变化就能了解此方法的意义了，有不懂的可以留言，本人就不多做解释了

Fragment父类BaseFragment.java

package com.xwj.xwj_wechat5.fragment;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public abstract class BaseFragment extends Fragment{
	
	public Context context;
	
	/**
	 * 初始化布局文件
	 * @return
	 */
	public abstract int initResource();
	
	/**
	 * 初始化组件
	 * @param view
	 */
	public abstract void initComponent(View view);
	
	/**
	 * 初始化数据
	 */
	public abstract void initData();

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);	
		context =  getActivity();
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View view = inflater.inflate(initResource(), null, false);
		initComponent(view);
		return view;
	}
	
	@Override
	public void onActivityCreated(Bundle savedInstanceState) {
		super.onActivityCreated(savedInstanceState);
		initData();
	}
	
}

ChatsFragment、ContactsFragment、FindFragment都继承此父类

ChatsFragment.java

package com.xwj.xwj_wechat5.fragment;

import com.xwj.xwj_wechat5.R;

import android.view.View;

public class ChatsFragment extends BaseFragment {

	@Override
	public int initResource() {
		return R.layout.fragment_chats;
	}

	@Override
	public void initComponent(View view) {

	}

	@Override
	public void initData() {

	}

}

其余两个类似

源码下载地址：点击