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

2019-12-12 05:58:32

字体：大中小

来源：转载

供稿：网友

在如今的互联网时代，微信已是一个超级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 position) {return mList.get(position);}@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,false);break;case R.id.secondLinearLayout:mViewPager.setCurrentItem(1);updateBottomLinearLayoutSelect(false,true,false);break;case R.id.threeLinearLayout:mViewPager.setCurrentItem(2);updateBottomLinearLayoutSelect(false,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 position, float positionOffset, int positionOffsetPixels) {// Log.d(TAG,"onPageScrooled");}@Overridepublic void onPageSelected(int position) {Log.d(TAG,"onPageSelected");boolean[] state = new boolean[titleName.length];state[position] = true;titleTextView.setText(titleName[position]);updateBottomLinearLayoutSelect(state[0],state[1],state[2]);}@Overridepublic void onPageScrollStateChanged(int state) {Log.d(TAG,"onPageScrollStateChanged");}}}

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

上一篇：Android DrawerLayout带有侧滑功能的布局类（1）

下一篇：Android仿微信、录制音频并发送功能