Android Studio使用ViewPager+Fragment实现仿微信滑动切换界面
来源：互联网 发布：淘宝培训班 编辑：程序博客网 时间：2024/05/21 10:18
前言
微信的滑动切换获得大家一致好评，在我们开发的过程中我们也经常模仿微信的导航效果。
- 首先看下效果图
效果还算不错，可以滑动切换和点击切换，微信界面用listview展示数据,通讯录界面用的recyclerview展示数据，在接下来就带着大家一一分析。
- activity_main.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <RelativeLayout android:layout_width="match_parent" android:layout_height="50dp" android:background="@color/blue"> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="微信" android:textColor="@android:color/white" android:textSize="20sp"/> </RelativeLayout> <android.support.v4.view.ViewPager android:id="@+id/mainViewPager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> <LinearLayout android:layout_width="match_parent" android:layout_height="40dp" android:layout_marginTop="1dp" android:background="@android:color/white" android:baselineAligned="false" android:gravity="center_vertical" android:orientation="horizontal" android:paddingBottom="5dp" android:paddingTop="5dp"> <TextView android:id="@+id/item_weixin" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center_horizontal|center_vertical" android:text="微信" android:textColor="@drawable/main_tab_text_color" android:textSize="15dp"/> <TextView android:id="@+id/item_tongxunlu" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center_horizontal|center_vertical" android:text="通讯录" android:textColor="@drawable/main_tab_text_color" android:textSize="15dp"/> <TextView android:id="@+id/item_faxian" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center_horizontal|center_vertical" android:text="发现" android:textColor="@drawable/main_tab_text_color" android:textSize="15dp"/> <TextView android:id="@+id/item_me" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center_horizontal|center_vertical" android:text="我" android:textColor="@drawable/main_tab_text_color" android:textSize="15dp"/> </LinearLayout></LinearLayout>主布局内容很明了,最外层一个垂直的LinearLayout，里面依次排列着标题栏,ViewPager,和导航栏。
- MainActivity.class
package com.cc.testdemo;import android.graphics.Color;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.widget.TextView;import java.util.ArrayList;import java.util.List;public class MainActivity extends AppCompatActivity implements View.OnClickListener { private TextView title, item_weixin, item_tongxunlu, item_faxian, item_me; private ViewPager vp; private OneFragment oneFragment; private TwoFragment twoFragment; private ThreeFragment threeFragment; private FouthFragment fouthFragmen; private List<Fragment> mFragmentList = new ArrayList<Fragment>(); private FragmentAdapter mFragmentAdapter; String[] titles = new String[]{"微信", "通讯录", "发现", "我"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //去除工具栏 getSupportActionBar().hide(); setContentView(R.layout.activity_main); initViews(); mFragmentAdapter = new FragmentAdapter(this.getSupportFragmentManager(), mFragmentList); vp.setOffscreenPageLimit(4);//ViewPager的缓存为4帧 vp.setAdapter(mFragmentAdapter); vp.setCurrentItem(0);//初始设置ViewPager选中第一帧 item_weixin.setTextColor(Color.parseColor("#66CDAA")); //ViewPager的监听事件 vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { /*此方法在页面被选中时调用*/ title.setText(titles[position]); changeTextColor(position); } @Override public void onPageScrollStateChanged(int state) { /*此方法是在状态改变的时候调用，其中arg0这个参数有三种状态（0，1，2）。 arg0 ==1的时辰默示正在滑动， arg0==2的时辰默示滑动完毕了， arg0==0的时辰默示什么都没做。*/ } }); } /** * 初始化布局View */ private void initViews() { title = (TextView) findViewById(R.id.title); item_weixin = (TextView) findViewById(R.id.item_weixin); item_tongxunlu = (TextView) findViewById(R.id.item_tongxunlu); item_faxian = (TextView) findViewById(R.id.item_faxian); item_me = (TextView) findViewById(R.id.item_me); item_weixin.setOnClickListener(this); item_tongxunlu.setOnClickListener(this); item_faxian.setOnClickListener(this); item_me.setOnClickListener(this); vp = (ViewPager) findViewById(R.id.mainViewPager); oneFragment = new OneFragment(); twoFragment = new TwoFragment(); threeFragment = new ThreeFragment(); fouthFragmen = new FouthFragment(); //给FragmentList添加数据 mFragmentList.add(oneFragment); mFragmentList.add(twoFragment); mFragmentList.add(threeFragment); mFragmentList.add(fouthFragmen); } /** * 点击底部Text 动态修改ViewPager的内容 */ @Override public void onClick(View v) { switch (v.getId()) { case R.id.item_weixin: vp.setCurrentItem(0, true); break; case R.id.item_tongxunlu: vp.setCurrentItem(1, true); break; case R.id.item_faxian: vp.setCurrentItem(2, true); break; case R.id.item_me: vp.setCurrentItem(3, true); break; } } public class FragmentAdapter extends FragmentPagerAdapter { List<Fragment> fragmentList = new ArrayList<Fragment>(); public FragmentAdapter(FragmentManager fm, List<Fragment> fragmentList) { super(fm); this.fragmentList = fragmentList; } @Override public Fragment getItem(int position) { return fragmentList.get(position); } @Override public int getCount() { return fragmentList.size(); } } /* *由ViewPager的滑动修改底部导航Text的颜色 */ private void changeTextColor(int position) { if (position == 0) { item_weixin.setTextColor(Color.parseColor("#66CDAA")); item_tongxunlu.setTextColor(Color.parseColor("#000000")); item_faxian.setTextColor(Color.parseColor("#000000")); item_me.setTextColor(Color.parseColor("#000000")); } else if (position == 1) { item_tongxunlu.setTextColor(Color.parseColor("#66CDAA")); item_weixin.setTextColor(Color.parseColor("#000000")); item_faxian.setTextColor(Color.parseColor("#000000")); item_me.setTextColor(Color.parseColor("#000000")); } else if (position == 2) { item_faxian.setTextColor(Color.parseColor("#66CDAA")); item_weixin.setTextColor(Color.parseColor("#000000")); item_tongxunlu.setTextColor(Color.parseColor("#000000")); item_me.setTextColor(Color.parseColor("#000000")); } else if (position == 3) { item_me.setTextColor(Color.parseColor("#66CDAA")); item_weixin.setTextColor(Color.parseColor("#000000")); item_tongxunlu.setTextColor(Color.parseColor("#000000")); item_faxian.setTextColor(Color.parseColor("#000000")); } }}MainActivity.class里面主要是处理滑动切换的逻辑处理，切换后导航菜单字体颜色的切换,代码上注释也比较清晰，就不多做解释。
- Fragement
package com.cc.testdemo;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class FouthFragment extends Fragment { public FouthFragment() { // Required empty public constructor } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_fouth, container, false); }}- fragment.xml
<FrameLayout 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" tools:context=".FouthFragment"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="'我'界面" android:textSize="25sp"/></FrameLayout>这里面有4个fragment，代码一样，fragment.xml里面也只有一个TextView,上面的代码就可以实现滑动切换和点击切换。
- 上述代码的效果如下:
好了现在我们来加上数据分别用listview和recyclerview来实现，recycylerview是谷歌力推的替代listview的控件。
- Onefragment页面展示用Listview显示:
修改后的Onefragment.xml代码：
package com.cc.testdemo;import android.os.AsyncTask;import android.os.Bundle;import android.os.SystemClock;import android.support.v4.app.Fragment;import android.support.v4.widget.SwipeRefreshLayout;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.AdapterView;import android.widget.ArrayAdapter;import android.widget.ListView;import android.widget.Toast;import java.util.ArrayList;import java.util.List;import butterknife.BindView;import butterknife.ButterKnife;public class OneFragment extends Fragment { @BindView(R.id.lv) ListView lv; @BindView(R.id.srl) SwipeRefreshLayout mSwipeRefreshLayout; private List<String> stringList; private ArrayAdapter lvAdapter; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment View view = inflater.inflate(R.layout.fragment_one, container, false); ButterKnife.bind(this, view); initData(); return view; } private void initData() { stringList = new ArrayList<String>(); for (int i = 0; i < 20; i++) { stringList.add(String.valueOf(i)); } lvAdapter = new ArrayAdapter(getActivity(), android.R.layout.simple_list_item_1, stringList); lv.setAdapter(lvAdapter); lv.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) { Toast.makeText(getActivity(), stringList.get(i).toString(), Toast.LENGTH_SHORT).show(); } }); lv.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() { @Override public boolean onItemLongClick(AdapterView<?> adapterView, View view, int i, long l) { Toast.makeText(getActivity(), "long click:" + stringList.get(i).toString(), Toast.LENGTH_SHORT).show(); return true; } }); //初始化下拉控件颜色 mSwipeRefreshLayout.setColorSchemeResources(android.R.color.holo_blue_bright, android.R.color.holo_green_light, android.R.color.holo_orange_light, android.R.color.holo_red_light); mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { new AsyncTask<Void, Void, Void>() { @Override protected Void doInBackground(Void... voids) { SystemClock.sleep(2000); return null; } @Override protected void onPostExecute(Void aVoid) { Toast.makeText(getActivity(), "下拉刷新成功", Toast.LENGTH_SHORT).show(); mSwipeRefreshLayout.setRefreshing(false); } }.execute(); } }); }}OneFragment里面代码就是用Listview展示模拟的数据，listview外层有一个swipeRefreshLayout下拉刷新控件。
- fragment_one.xml
<FrameLayout 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" tools:context="com.cc.testdemo.OneFragment"> <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/srl" android:layout_width="match_parent" android:layout_height="match_parent"> <ListView android:id="@+id/lv" android:layout_width="match_parent" android:layout_height="match_parent"></ListView> </android.support.v4.widget.SwipeRefreshLayout></FrameLayout>OneFragment的效果图:
好了上述知识大家都很熟悉，现在来看下重点的recyclerview替代listview显示数据。
RecyclerView的使用
RecyclerView出现已经有一段时间了，相信大家肯定不陌生了，大家可以通过导入support-v7对其进行使用。
据官方的介绍，该控件用于在有限的窗口中展示大量数据集，其实这样功能的控件我们并不陌生，例如：ListView、GridView。
那么有了ListView、GridView为什么还需要RecyclerView这样的控件呢？整体上看RecyclerView架构，提供了一种插拔式的体验，高度的解耦，异常的灵活，通过设置它提供的不同LayoutManager，ItemDecoration , ItemAnimator实现令人瞠目的效果。
你想要控制其显示的方式，请通过布局管理器LayoutManager
你想要控制Item间的间隔（可绘制），请通过ItemDecoration
你想要控制Item增删的动画，请通过ItemAnimator
详细的使用请参考:http://blog.csdn.net/lmj623565791/article/details/45059587
现在我们就用TwoFragment页面来使用recyclerview展示数据:
TwoFragment.class代码:
package com.cc.testdemo;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.Toast;import java.util.ArrayList;import java.util.List;import butterknife.BindView;import butterknife.ButterKnife;public class TwoFragment extends Fragment implements MyRecyclerViewOnclickInterface { @BindView(R.id.id_recyclerview) RecyclerView mRecyclerview; private MyRecyclerViewAdapter mAdapter; private List<String> stringList; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment View view = inflater.inflate(R.layout.fragment_two, container, false); ButterKnife.bind(this, view); initData(); return view; } private void initData() { stringList = new ArrayList<String>(); for (int i = 0; i < 20; i++) { stringList.add(String.valueOf(i)); } mAdapter = new MyRecyclerViewAdapter(getActivity(), stringList); //设置布局管理器 mRecyclerview.setLayoutManager(new LinearLayoutManager(getActivity())); //设置adapter mRecyclerview.setAdapter(mAdapter); //添加分割线 mRecyclerview.addItemDecoration(new DividerItemDecoration(getActivity(), DividerItemDecoration.VERTICAL_LIST)); mAdapter.setOnItemClickLitener(this); } @Override public void onItemClick(View view, int position) { Toast.makeText(getActivity(), stringList.get(position), Toast.LENGTH_SHORT).show(); } @Override public void onItemLongClick(View view, int position) { Toast.makeText(getActivity(), "onItemLongClick" + stringList.get(position), Toast.LENGTH_SHORT).show(); }}- fragment_two.xml
<FrameLayout 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" tools:context="com.cc.testdemo.TwoFragment"> <!-- TODO: Update blank fragment layout --> <android.support.v7.widget.RecyclerView android:id="@+id/id_recyclerview" android:layout_width="match_parent" android:layout_height="match_parent"/></FrameLayout>- MyRecyclerViewAdapter
package com.cc.testdemo;import android.content.Context;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;import java.util.List;/** * Created by CC on 2016/12/27. */public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.MyViewHolder> { private Context context; private List<String> mDatas; private MyRecyclerViewOnclickInterface mOnItemClickLitener; public void setOnItemClickLitener(MyRecyclerViewOnclickInterface mOnItemClickLitener) { this.mOnItemClickLitener = mOnItemClickLitener; } public MyRecyclerViewAdapter(Context context, List<String> mDatas) { this.context = context; this.mDatas = mDatas; } @Override public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { MyViewHolder holder = new MyViewHolder(LayoutInflater.from(context).inflate(R.layout.recyclerview_item, parent, false)); return holder; } @Override public void onBindViewHolder(final MyViewHolder holder, int position) { holder.tv.setText(mDatas.get(position)); // 如果设置了回调，则设置点击事件 if (mOnItemClickLitener != null) { //点击监听 holder.itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { int pos = holder.getLayoutPosition(); mOnItemClickLitener.onItemClick(holder.itemView, pos); } }); //长按监听 holder.itemView.setOnLongClickListener(new View.OnLongClickListener() { @Override public boolean onLongClick(View v) { int pos = holder.getLayoutPosition(); mOnItemClickLitener.onItemLongClick(holder.itemView, pos); //返回true可以让长按事件被消耗，避免出发点击事件 return true; } }); } } @Override public int getItemCount() { return mDatas.size(); } class MyViewHolder extends RecyclerView.ViewHolder { TextView tv; public MyViewHolder(View view) { super(view); tv = (TextView) view.findViewById(R.id.tv); } }}- MyRecyclerViewOnclickInterface
package com.cc.testdemo;import android.view.View;/** * Created by CC on 2016/12/27. */public interface MyRecyclerViewOnclickInterface { void onItemClick(View view, int position); void onItemLongClick(View view, int position);}MyRecyclerViewOnclickInterface初始化接口方法，由于recyclerview暂时没有实现点击处理，所以只能通过手动添加回调。
- DividerItemDecoration
package com.cc.testdemo;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Rect;import android.graphics.drawable.Drawable;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.view.View;/** * This class is from the v7 samples of the Android SDK. It's not by me! * <p> * See the license above for details. */public class DividerItemDecoration extends RecyclerView.ItemDecoration { private static final int[] ATTRS = new int[]{ android.R.attr.listDivider }; public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL; public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL; private Drawable mDivider; private int mOrientation; public DividerItemDecoration(Context context, int orientation) { final TypedArray a = context.obtainStyledAttributes(ATTRS); mDivider = a.getDrawable(0); a.recycle(); setOrientation(orientation); } public void setOrientation(int orientation) { if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) { throw new IllegalArgumentException("invalid orientation"); } mOrientation = orientation; } @Override public void onDraw(Canvas c, RecyclerView parent) {// Log.v("recyclerview - itemdecoration", "onDraw()"); if (mOrientation == VERTICAL_LIST) { drawVertical(c, parent); } else { drawHorizontal(c, parent); } } public void drawVertical(Canvas c, RecyclerView parent) { final int left = parent.getPaddingLeft(); final int right = parent.getWidth() - parent.getPaddingRight(); final int childCount = parent.getChildCount(); for (int i = 0; i < childCount; i++) { final View child = parent.getChildAt(i); android.support.v7.widget.RecyclerView v = new android.support.v7.widget.RecyclerView(parent.getContext()); final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child .getLayoutParams(); final int top = child.getBottom() + params.bottomMargin; final int bottom = top + mDivider.getIntrinsicHeight(); mDivider.setBounds(left, top, right, bottom); mDivider.draw(c); } } public void drawHorizontal(Canvas c, RecyclerView parent) { final int top = parent.getPaddingTop(); final int bottom = parent.getHeight() - parent.getPaddingBottom(); final int childCount = parent.getChildCount(); for (int i = 0; i < childCount; i++) { final View child = parent.getChildAt(i); final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child .getLayoutParams(); final int left = child.getRight() + params.rightMargin; final int right = left + mDivider.getIntrinsicHeight(); mDivider.setBounds(left, top, right, bottom); mDivider.draw(c); } } @Override public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) { if (mOrientation == VERTICAL_LIST) { outRect.set(0, 0, 0, mDivider.getIntrinsicHeight()); } else { outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0); } }}DividerItemDecoration该类很好的实现了RecyclerView添加分割线（当使用LayoutManager为LinearLayoutManager时）。
最后附上完整的代码:http://download.csdn.net/detail/qq_33792946/9722637
1 0
- Android Studio使用ViewPager+Fragment实现仿微信滑动切换界面
- Fragment+ViewPager实现仿微信点击和滑动切换界面
- Android 安卓 fragment+viewpager 仿qq界面 实现点击菜单切换界面+滑动切换viewpager切换界面
- android使用viewPager和Fragment实现滑动切换activity！
- ViewPager+Fragment滑动切换界面
- ［周四］viewpager fragment实现界面的滑动切换
- Android之Fragment+ViewPager实现点击+滑动界面切换学习笔记
- ViewPager+Fragment实现界面滑动
- 【Android】viewpager+fragment实现界面滑动，顶部导航也滑动
- Android 使用ViewPager和RadioGroup配合Fragment实现标签页，可点击按钮切换、滑动切换。
- ViewPager+Fragment打造滑动切换界面
- android 使用Fragment实现ViewPager滑动
- Android ViewPager加Fragment实现滑动或者点击页面切换
- Android ViewPager和Fragment实现顶部导航界面滑动效果
- Android ViewPager和Fragment实现顶部导航界面滑动效果
- Android ViewPager和Fragment实现顶部导航界面滑动效果
- Android ViewPager和Fragment实现顶部导航界面滑动效果
- Android ViewPager和Fragment实现顶部导航界面滑动效果
- 1 第一个网络爬虫（3）
- 深入理解JavaScript系列（3）：强大的原型和原型链
- 小细节决定大人生 或 对于细节的在意程度决定你人生到达的高度 或 对于细节的把控决定你是否比水平大致相同的人优秀与否 + 做事要带点脑子
- apusic5.1与c标签兼容
- 去除list里面的重复项
- Android Studio使用ViewPager+Fragment实现仿微信滑动切换界面
- Jsp/Servlet Request getReader()/getInputStream()返回空值的解决方法
- Infinidb问题处理
- linux常用命令
- java中System.setProperty()方法
- ubuntu 常见错误--Could not get lock /var/lib/dpkg/lock
- ffmpeg 将视频和图片互转化
- mysql的价格存储类型
- android framework 添加系统服务
