ViewPager 与 Fragment相结合实现微信界面实例代码

概述在如今的互联网时代，微信已是一个超级App。这篇通过ViewPager+Fragment实现一个类似于微信的界面，之前有用FragmentTabHost实现过类似界面，ViewPager的实现方式相对于FragmentTabHost的方式更简单明了。

在如今的互联网时代，微信已是一个超级App。这篇通过VIEwPager + Fragment实现一个类似于微信的界面，之前有用FragmentTabHost实现过类似界面，VIEwPager的实现方式相对于FragmentTabHost的方式更简单明了。

VIEwPager:

　　VIEwPager继承自VIEwGroup,是一个容器类，可以往里添加VIEw.

　　VIEwPager的使用很简单，通过setAdapter()方法设置一个PagerAdapter即可，这个PagerAdapter需要自己写，实现里面的一些方法。本篇要和Fragment结合，所以实现的是FragmentPagerAdapter类，FragmentPagerAdapter继承自PagerAdapter.

　　VIEwPager通过addOnPagechangelistener（）方法可以设置一个VIEwPager.OnPagechangelistener监听，当Pager发生变化时就调用相应的方法。

Fragment:

　　Fragment有自己的生命周期， 有兴趣的可以自己通过各种方式研究下（自己打Log看是最简单的一种方式），这里就不在赘述。和VIEwPager结合，有几个Pager就需要实现几个不同的Fragment.

先看一下最后实现的效果图：

布局上分为三部分：

　　最上面的layout_top.xml,主要就是上面那个标题，就一个TextVIEw，中间的VIEwPager,最下面的layout_bottom.xml包括三个线性布局，每个线性布局包括一个ImageVIEw和TextVIEw.

activity_main.xml:

<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"xmlns:tools="http://schemas.androID.com/tools"androID:layout_wIDth="match_parent"androID:layout_height="match_parent"androID:orIEntation="vertical"tools:context="com.example.administrator.vIEwpagerl.MainActivity"><include layout="@layout/layout_top"></include><androID.support.v4.vIEw.VIEwPagerandroID:ID="@+ID/VIEwPagerLayout"androID:layout_wIDth="match_parent"androID:layout_height="match_parent"androID:layout_weight="1"></androID.support.v4.vIEw.VIEwPager><include layout="@layout/layout_bottom"></include></linearLayout>

layout_top.xml

<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"androID:orIEntation="horizontal"androID:layout_wIDth="match_parent"androID:layout_height="wrap_content"androID:paddingtop="3dp"androID:paddingBottom="3dp"androID:background="@androID:color/darker_gray"><TextVIEwandroID:ID="@+ID/VIEwTitle"androID:layout_marginleft="20dp"androID:layout_margintop="5dp"androID:textSize="25sp"androID:layout_wIDth="wrap_content"androID:layout_height="wrap_content" /></linearLayout>

layout_bottom.xml

<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"androID:orIEntation="horizontal" androID:layout_wIDth="match_parent"androID:layout_height="wrap_content"androID:layout_alignParentBottom="true"androID:paddingtop="3dp"androID:paddingBottom="3dp"androID:background="@androID:color/holo_green_light"><linearLayoutandroID:ID="@+ID/firstlinearLayout"androID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:orIEntation="vertical"androID:gravity="center_horizontal"androID:layout_weight="1"><ImageVIEwandroID:ID="@+ID/firstimageVIEw"androID:background="@drawable/tab_weixin"androID:layout_wIDth="wrap_content"androID:layout_height="wrap_content" /><TextVIEwandroID:ID="@+ID/firstTextVIEw"androID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:text="微信"/></linearLayout><linearLayoutandroID:ID="@+ID/secondlinearLayout"androID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:orIEntation="vertical"androID:gravity="center_horizontal"androID:layout_weight="1"><ImageVIEwandroID:ID="@+ID/secondImageVIEw"androID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:background="@drawable/tab_setting"/><TextVIEwandroID:ID="@+ID/secondTextVIEw"androID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:text="朋友"/></linearLayout><linearLayoutandroID:ID="@+ID/threelinearLayout"androID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:orIEntation="vertical"androID:gravity="center_horizontal"androID:layout_weight="1"><ImageVIEwandroID:ID="@+ID/threeImageVIEw"androID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:background="@drawable/tab_find"/><TextVIEwandroID:ID="@+ID/threeTextVIEw"androID:layout_wIDth="wrap_content"androID:layout_height="wrap_content"androID:text="发现"/></linearLayout></linearLayout>

　　上面有提到，VIEwPager需要实现一个Pageradapter，很简单继承FragmentPagerAdapter,实现里面的getItem()和getCount()方法即可。

VIEwPagerFragmentAdapter .java

package com.example.administrator.vIEwpagerl;import androID.support.v4.app.Fragment;import androID.support.v4.app.FragmentManager;import androID.support.v4.app.FragmentPagerAdapter;import androID.util.Log;import java.util.ArrayList;import java.util.List;public class VIEwPagerFragmentAdapter extends FragmentPagerAdapter {private List<Fragment> mList = new ArrayList<Fragment>();public VIEwPagerFragmentAdapter(FragmentManager fm,List<Fragment> List) {super(fm);this.mList = List;}@OverrIDepublic Fragment getItem(int @R_404_4612@) {return mList.get(@R_404_4612@);}@OverrIDepublic int getCount() {return mList != null ? mList.size() : 0;}}

　　VIEwPager的每个Pager都需要一个Fragment,Fragment会实例化布局，显示在VIEwPager的每个Pager中

ChatFragment.java

package com.example.administrator.fragment;import androID.os.Bundle;import androID.support.annotation.Nullable;import androID.support.v4.app.Fragment;import androID.util.Log;import androID.vIEw.LayoutInflater;import androID.vIEw.VIEw;import androID.vIEw.VIEwGroup;import androID.Widget.TextVIEw;import com.example.administrator.vIEwpagerl.R;public class ChatFragment extends Fragment {VIEw mVIEw;@Nullable@OverrIDepublic VIEw onCreateVIEw(LayoutInflater inflater,@Nullable VIEwGroup container,@Nullable Bundle savedInstanceState) {if (mVIEw == null) {mVIEw = inflater.inflate(R.layout.fragment_layout,null);}((TextVIEw)mVIEw.findVIEwByID(R.ID.mTextVIEw)).setText("聊天界面");return mVIEw;}}

　　这里需要三个Fragment,因为这里使用的布局很简单，三个布局基本是一致的，FrIEndFragment、FindFragment 这里就都不贴出代码了。微信里面的聊天列表，朋友列表都是在Fragment里面实例化的布局里有个ListVIEw,通过ListVIEw的方式实现的，这里只是为了记录VIEwPager就没有实现那些，有兴趣的可以自己搞搞，其实也不难。

　　在Activity里面只需要给VIEwPager设置上面那个Adapter,设置一个监听知道Pager如何变化即可。点击最下面微信、朋友、发现三个按钮，通过VIEwPager的setCurrentItem()方法就能跳转到对应的Pager，除了这些还有就是通过一些简单的逻辑，控制一下界面的改变就行，没有太难的东西。

MainActivity.java

package com.example.administrator.vIEwpagerl;import androID.support.v4.app.Fragment;import androID.support.v4.app.FragmentManager;import androID.support.v4.vIEw.VIEwPager;import androID.support.v7.app.AppCompatActivity;import androID.os.Bundle;import androID.util.Log;import androID.vIEw.VIEw;import androID.Widget.linearLayout;import androID.Widget.TextVIEw;import com.example.administrator.fragment.ChatFragment;import com.example.administrator.fragment.FindFragment;import com.example.administrator.fragment.FrIEndFragment;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity implements VIEw.OnClickListener {private static final String TAG = "MainActivity.TAG";TextVIEw TitleTextVIEw;public linearLayout firstlinearLayout;public linearLayout secondlinearLayout;public linearLayout threelinearLayout;VIEwPager mVIEwPager;VIEwPagerFragmentAdapter mVIEwPagerFragmentAdapter;FragmentManager mFragmentManager;String[] Titlename = new String[] {"微信","朋友","发现"};List<Fragment> mFragmentList = new ArrayList<Fragment>();@OverrIDeprotected voID onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);mFragmentManager = getSupportFragmentManager();setContentVIEw(R.layout.activity_main);initFragmetList();mVIEwPagerFragmentAdapter = new VIEwPagerFragmentAdapter(mFragmentManager,mFragmentList);initVIEw();initVIEwPager();}@OverrIDeprotected voID onResume() {super.onResume();}public voID initVIEwPager() {mVIEwPager.addOnPagechangelistener(new VIEwPagetonPagerChangedlisenter());mVIEwPager.setAdapter(mVIEwPagerFragmentAdapter);mVIEwPager.setCurrentItem(0);TitleTextVIEw.setText(Titlename[0]);updateBottomlinearLayoutSelect(true,false,false);}public voID initFragmetList() {Fragment chat = new ChatFragment();Fragment frIEnd = new FrIEndFragment();Fragment find = new FindFragment();mFragmentList.add(chat);mFragmentList.add(frIEnd);mFragmentList.add(find);}public voID initVIEw() {TitleTextVIEw = (TextVIEw) findVIEwByID(R.ID.VIEwTitle);mVIEwPager = (VIEwPager) findVIEwByID(R.ID.VIEwPagerLayout);firstlinearLayout = (linearLayout) findVIEwByID(R.ID.firstlinearLayout);firstlinearLayout.setonClickListener(this);secondlinearLayout = (linearLayout) findVIEwByID(R.ID.secondlinearLayout);secondlinearLayout.setonClickListener(this);threelinearLayout = (linearLayout) findVIEwByID(R.ID.threelinearLayout);threelinearLayout.setonClickListener(this);}@OverrIDepublic voID onClick(VIEw v) {switch (v.getID()) {case R.ID.firstlinearLayout:mVIEwPager.setCurrentItem(0);updateBottomlinearLayoutSelect(true,false);break;case R.ID.secondlinearLayout:mVIEwPager.setCurrentItem(1);updateBottomlinearLayoutSelect(false,true,false);break;case R.ID.threelinearLayout:mVIEwPager.setCurrentItem(2);updateBottomlinearLayoutSelect(false,true);break;default:break;}}private voID updateBottomlinearLayoutSelect(boolean f,boolean s,boolean t) {firstlinearLayout.setSelected(f);secondlinearLayout.setSelected(s);threelinearLayout.setSelected(t);}class VIEwPagetonPagerChangedlisenter implements VIEwPager.OnPagechangelistener {@OverrIDepublic voID onPageScrolled(int @R_404_4612@,float @R_404_4612@Offset,int @R_404_4612@OffsetPixels) {// Log.d(TAG,"onPageScrooled");}@OverrIDepublic voID onPageSelected(int @R_404_4612@) {Log.d(TAG,"onPageSelected");boolean[] state = new boolean[Titlename.length];state[@R_404_4612@] = true;TitleTextVIEw.setText(Titlename[@R_404_4612@]);updateBottomlinearLayoutSelect(state[0],state[1],state[2]);}@OverrIDepublic voID onPageScrollStateChanged(int state) {Log.d(TAG,"onPageScrollStateChanged");}}}

以上所述是小编给大家介绍的VIEwPager 与 Fragment相结合实现微信界面实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程小技巧网站的支持！

总结

以上是内存溢出为你收集整理的ViewPager 与 Fragment相结合实现微信界面实例代码全部内容，希望文章能够帮你解决ViewPager 与 Fragment相结合实现微信界面实例代码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。