Android Studio 使用ViewPager + Fragment實現滑動選單Tab效果 --簡易版

ViewPager AndroidStudio · 發表 2018-09-25 18:42:00

摘要：描述：之前有做過一個記賬本APP，拿來練手的，做的很簡單，是用Eclipse開發的；最近想把這個APP重新完善一下，添加了一些新的功能，並選用Android Studio來開發； APP已經完善了一部分，現在就想把已經做好的功能整理一下，記錄下來。效果圖：可以手動滑...

描述：

之前有做過一個記賬本APP，拿來練手的，做的很簡單，是用Eclipse開發的；

最近想把這個APP重新完善一下，添加了一些新的功能，並選用Android+Studio/">Android Studio來開發；

APP已經完善了一部分，現在就想把已經做好的功能整理一下，記錄下來。

效果圖：

可以手動滑動選單

也可以通過點選頭部選單進行切換

具體實現的程式碼：

前臺程式碼（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：

<string name="detail_tab">明細</string>
<string name="category_report_tab">類別報表</string>

colors.xml：

<color name="main_tab_text_color">#000000</color>

Android Studio 使用ViewPager + Fragment實現滑動選單Tab效果 --簡易版

描述：

效果圖：

您可能也會喜歡…