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

前端技术 2023/09/03 Android

在如今的互联网时代，微信已是一个超级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.ViewPager
android: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\">
<TextView
android: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\">
<LinearLayout
android:id=\"@+id/firstLinearLayout\"
android:layout_width=\"wrap_content\"
android:layout_height=\"wrap_content\"
android:orientation=\"vertical\"
android:gravity=\"center_horizontal\"
android:layout_weight=\"1\">
<ImageView
android:id=\"@+id/firstImageView\"
android:background=\"@drawable/tab_weixin\"
android:layout_width=\"wrap_content\"
android:layout_height=\"wrap_content\" />
<TextView
android:id=\"@+id/firstTextView\"
android:layout_width=\"wrap_content\"
android:layout_height=\"wrap_content\"
android:text=\"微信\"
/>
</LinearLayout>
<LinearLayout
android:id=\"@+id/secondLinearLayout\"
android:layout_width=\"wrap_content\"
android:layout_height=\"wrap_content\"
android:orientation=\"vertical\"
android:gravity=\"center_horizontal\"
android:layout_weight=\"1\">
<ImageView
android:id=\"@+id/secondImageView\"
android:layout_width=\"wrap_content\"
android:layout_height=\"wrap_content\"
android:background=\"@drawable/tab_setting\"/>
<TextView
android:id=\"@+id/secondTextView\"
android:layout_width=\"wrap_content\"
android:layout_height=\"wrap_content\"
android:text=\"朋友\"
/>
</LinearLayout>
<LinearLayout
android:id=\"@+id/threeLinearLayout\"
android:layout_width=\"wrap_content\"
android:layout_height=\"wrap_content\"
android:orientation=\"vertical\"
android:gravity=\"center_horizontal\"
android:layout_weight=\"1\">
<ImageView
android:id=\"@+id/threeImageView\"
android:layout_width=\"wrap_content\"
android:layout_height=\"wrap_content\"
android:background=\"@drawable/tab_find\"/>
<TextView
android: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;
}
@Override
public Fragment getItem(int position) {
return mList.get(position);
}
@Override
public 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
@Override
public 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>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mFragmentManager = getSupportFragmentManager();
setContentView(R.layout.activity_main);
initFragmetList();
mViewPagerFragmentAdapter = new ViewPagerFragmentAdapter(mFragmentManager,mFragmentList);
initView();
initViewPager();
}
@Override
protected 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);
}
@Override
public 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 {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// Log.d(TAG,\"onPageScrooled\");
}
@Override
public 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]);
}
@Override
public void onPageScrollStateChanged(int state) {
Log.d(TAG,\"onPageScrollStateChanged\");
}
}
}

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

本文地址：https://www.stayed.cn/item/6368

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案