Android Studio 使用ViewPager + Fragment实现滑动菜单Tab效果 --简易版 _viewPager

知识为进步之母,而进步又为富强之源泉。这篇文章主要讲述Android Studio 使用ViewPager + Fragment实现滑动菜单Tab效果 --简易版相关的知识，希望能为你提供帮助。
描述：
【Android Studio 使用ViewPager + Fragment实现滑动菜单Tab效果 --简易版】 之前有做过一个记账本APP，拿来练手的，做的很简单，是用Eclipse开发的；
最近想把这个APP重新完善一下，添加了一些新的功能，并选用android Studio来开发；
APP已经完善了一部分，现在就想把已经做好的功能整理一下，记录下来。

效果图：
可以手动滑动菜单
也可以通过点击头部菜单进行切换

文章图片

文章图片

源码：
https://github.com/AnneHan/slidingMenu

具体实现的代码：
前台代码（activity_main.xml）：

文章图片

1 < ?xml version="1.0" encoding="utf-8"?> 2 < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3android:layout_width="match_parent" 4android:layout_height="match_parent" 5android:orientation="vertical"> 6 7< LinearLayout 8android:layout_width="match_parent" 9android:layout_height="40dp" 10android:layout_marginTop="1dp" 11android:background="@android:color/white" 12android:baselineAligned="false" 13android:gravity="center_vertical" 14android:orientation="horizontal" 15android:paddingBottom="5dp" 16android:paddingTop="5dp"> 17 18< !--detail Tab--> 19< TextView 20android:id="@+id/item_detail" 21android:layout_width="0dp" 22android:layout_height="match_parent" 23android:layout_weight="1" 24android:gravity="center_horizontal|center_vertical" 25android:text="@string/detail_tab" 26android:textColor="@color/main_tab_text_color" 27android:textSize="20dp"/> 28 29< !--category report Tab--> 30< TextView 31android:id="@+id/item_category_report" 32android:layout_width="0dp" 33android:layout_height="match_parent" 34android:layout_weight="1" 35android:gravity="center_horizontal|center_vertical" 36android:text="@string/category_report_tab" 37android:textColor="@color/main_tab_text_color" 38android:textSize="20dp"/> 39< /LinearLayout> 40 41< android.support.v4.view.ViewPager 42android:id="@+id/mainViewPager" 43android:layout_width="match_parent" 44android:layout_height="0dp" 45android:layout_weight="1"/> 46 < /LinearLayout>

View Code
主界面代码（MainActivity.java）：

文章图片

1 package com.hyl.acccountbookdemo; 2 3 import android.graphics.Color; 4 import android.os.Bundle; 5 import android.support.v4.app.Fragment; 6 import android.support.v4.app.FragmentManager; 7 import android.support.v4.app.FragmentPagerAdapter; 8 import android.support.v4.view.ViewPager; 9 import android.support.v7.app.AppCompatActivity; 10 import android.view.View; 11 import android.widget.TextView; 12 13 import java.util.ArrayList; 14 import java.util.List; 15 16 /** 17* @programName: MainActivity.java 18* @programFunction: Recording of income and expenditure 19* @createDate: 2018/09/25 20* @author: AnneHan 21* @version: 22* xx.yyyy/mm/ddverauthorcomments 23* 01.2018/09/251.00AnneHanNew Create 24*/ 25 public class MainActivity extends AppCompatActivity implements View.OnClickListener { 26private TextView item_detail, item_category_report; 27private ViewPager vp; 28private OneFragment oneFragment; 29private TwoFragment twoFragment; 30private List< Fragment> mFragmentList = new ArrayList< Fragment> (); 31private FragmentAdapter mFragmentAdapter; 32 33@Override 34protected void onCreate(Bundle savedInstanceState) { 35super.onCreate(savedInstanceState); 36setContentView(R.layout.activity_main); 37 38initViews(); 39 40mFragmentAdapter = new FragmentAdapter(this.getSupportFragmentManager(), mFragmentList); 41vp.setOffscreenPageLimit(2); //ViewPager的缓存为2帧 42vp.setAdapter(mFragmentAdapter); 43vp.setCurrentItem(0); //初始设置ViewPager选中第一帧 44item_detail.setTextColor(Color.parseColor("#1ba0e1")); 45 46//ViewPager的监听事件 47vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 48@Override 49public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 50 51} 52 53@Override 54public void onPageSelected(int position) { 55/*此方法在页面被选中时调用*/ 56changeTextColor(position); 57} 58 59@Override 60public void onPageScrollStateChanged(int state) { 61/*此方法是在状态改变的时候调用，其中arg0这个参数有三种状态（0，1，2）。 62arg0==1的时辰默示正在滑动， 63arg0==2的时辰默示滑动完毕了， 64arg0==0的时辰默示什么都没做。*/ 65} 66}); 67} 68 69/** 70* 初始化布局View 71*/ 72private void initViews() { 73item_detail = (TextView) findViewById(R.id.item_detail); 74item_category_report = (TextView) findViewById(R.id.item_category_report); 75 76item_detail.setOnClickListener(this); 77item_category_report.setOnClickListener(this); 78 79vp = (ViewPager) findViewById(R.id.mainViewPager); 80oneFragment = new OneFragment(); 81twoFragment = new TwoFragment(); 82//给FragmentList添加数据 83mFragmentList.add(oneFragment); 84mFragmentList.add(twoFragment); 85} 86 87/** 88* 点击头部Text 动态修改ViewPager的内容 89*/ 90@Override 91public void onClick(View v) { 92switch (v.getId()) { 93case R.id.item_detail: 94vp.setCurrentItem(0, true); 95break; 96case R.id.item_category_report: 97vp.setCurrentItem(1, true); 98break; 99} 100} 101 102public class FragmentAdapter extends FragmentPagerAdapter { 103 104List< Fragment> fragmentList = new ArrayList< Fragment> (); 105 106public FragmentAdapter(FragmentManager fm, List< Fragment> fragmentList) { 107super(fm); 108this.fragmentList = fragmentList; 109} 110 111@Override 112public Fragment getItem(int position) { 113return fragmentList.get(position); 114} 115 116@Override 117public int getCount() { 118return fragmentList.size(); 119} 120 121} 122 123/** 124* 由ViewPager的滑动修改头部导航Text的颜色 125* @param position 126*/ 127private void changeTextColor(int position) { 128if (position == 0) { 129item_detail.setTextColor(Color.parseColor("#1ba0e1")); 130item_category_report.setTextColor(Color.parseColor("#000000")); 131} else if (position == 1) { 132item_category_report.setTextColor(Color.parseColor("#1ba0e1")); 133item_detail.setTextColor(Color.parseColor("#000000")); 134} 135} 136 }

View Code
需要多少个Fragment，便创建多少个，这里只举例写一个，其它相同
建立Fragment（fragment_one.xml）：

文章图片

1 < ?xml version="1.0" encoding="utf-8"?> 2 < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3android:layout_width="match_parent" 4android:layout_height="match_parent"> 5 6< TextView 7android:layout_width="wrap_content" 8android:layout_height="wrap_content" 9android:layout_gravity="center" 10android:text="@string/detail_tab" 11android:textSize="25sp"/> 12 13 < /LinearLayout>

View Code
Fragment界面代码（OneFragment.java）：

文章图片

1 package com.hyl.acccountbookdemo; 2 3 import android.os.Bundle; 4 import android.support.v4.app.Fragment; 5 import android.view.LayoutInflater; 6 import android.view.View; 7 import android.view.ViewGroup; 8 9 /** 10* @programName: OneFragment.java 11* @programFunction: 12* @createDate: 2018/09/25 13* @author: AnneHan 14* @version: 15* xx.yyyy/mm/ddverauthorcomments 16* 01.2018/09/251.00AnneHanNew Create 17*/ 18 public class OneFragment extends Fragment { 19@Override 20public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 21// Inflate the layout for this fragment 22return inflater.inflate(R.layout.fragment_one, container, false); 23} 24 }

View Code
strings.xml：