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;@Overrideprotected 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>();//初始化各个FragmentChatsFragment 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()) {@Overridepublic int getCount() {return mDatas.size();}@Overridepublic 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);}@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic 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->1tablineLayoutParams.leftMargin = (int) (positionOffset * mScreen1_3 + mCurrentPageIndex* mScreen1_3);} else if (mCurrentPageIndex == 1 && position == 0) {// 1->0tablineLayoutParams.leftMargin = (int) ((positionOffset-1) * mScreen1_3 + mCurrentPageIndex * mScreen1_3);}else if (mCurrentPageIndex == 1 && position == 1) {// 1->2tablineLayoutParams.leftMargin = (int) ( positionOffset * mScreen1_3 +mCurrentPageIndex * mScreen1_3);} else if (mCurrentPageIndex == 2 && position == 1) {// 2->1tablineLayoutParams.leftMargin = (int) ((positionOffset-1)* mScreen1_3 + mCurrentPageIndex * mScreen1_3);}mTabline.setLayoutParams(tablineLayoutParams);}@Overridepublic 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();@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);context =  getActivity();}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View view = inflater.inflate(initResource(), null, false);initComponent(view);return view;}@Overridepublic 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 {@Overridepublic int initResource() {return R.layout.fragment_chats;}@Overridepublic void initComponent(View view) {}@Overridepublic void initData() {}}

其余两个类似

源码下载地址：点击