1.添加三個Fragment

　　MsgFragment 消息

　　CCFragment 發現

　　UserFragment 我

2.添加標簽欄(GridView) 用來放置下方的按鈕控件

　　activity_main.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout
 3     xmlns:android="http://schemas.android.com/apk/res/android"
 4     xmlns:app="http://schemas.android.com/apk/res-auto"
 5
 
     xmlns:tools="http://schemas.android.com/tools"
 6     android:layout_width="match_parent"
 7     android:layout_height="match_parent"
 8     tools:context="com.example.senior0302_test2.MainActivity"
 9     android:orientation="vertical">
10 
11 
12     <view
13         android:id="@+id/id_viewpager"
 

14         class="android.support.v4.view.ViewPager"
15         android:layout_weight="1"
16         android:layout_width="match_parent"
17         android:layout_height="0dp"/>
18 
19     <!--中間的分割線-->
20     <View android:layout_width="match_parent"
21           android:layout_height="1dp"
 

22           android:background="#ccc" />
23 
24 
25     <GridView
26         android:id="@+id/id_gridview"
27         android:layout_width="match_parent"
28         android:layout_height="wrap_content"/>
29 </LinearLayout>

3.構造類AfTabBarAdapter.java 該類繼承於BaseAdapter

　　AfTabBarAdapter.java

  1 package example.senior0301;
  2 
  3 import android.content.Context;
  4 import android.graphics.Color;
  5 import android.graphics.drawable.Drawable;
  6 import android.view.LayoutInflater;
  7 import android.view.View;
  8 import android.view.ViewGroup;
  9 import android.widget.BaseAdapter;
 10 import android.widget.ImageView;
 11 import android.widget.TextView;
 12 
 13 import java.util.ArrayList;
 14 
 15 /**
 16  * Created by shaofa on 2017/12/9.
 17  */
 18 
 19 public class AfTabBarAdapter extends BaseAdapter
 20 {
 21     Context context;
 22     LayoutInflater inflater;
 23 
 24     // 顏色也字體
 25     int colorNormal = Color.argb(0xFF, 0x44, 0x44, 0x44);
 26     int colorActive = Color.argb(0xFF, 0x00, 0xFF, 0x00);
 27 
 28     // 標簽項數據
 29     ArrayList<Item> listData = new ArrayList();
 30 
 31     public AfTabBarAdapter(Context context)
 32     {
 33         this.context = context;
 34         this.inflater = LayoutInflater.from(context);
 35     }
 36 
 37     // 添加一項數據
 38     public void addItem(Item it)
 39     {
 40         listData.add(it);
 41     }
 42     // 添加多項數據
 43     public void addItems(Item[] items)
 44     {
 45         for(Item it:items) listData.add(it);
 46     }
 47     // 當一個項被選中時 圖片跟標簽的樣式
 48     public void setActive(int position, boolean update)
 49     {
 50         //遍歷看一共有幾個標簽按鈕
 51         for(int i=0; i<listData.size(); i++)
 52         {
 53             //獲取每個按鈕
 54             Item it = listData.get(i);
 55 
 56             //如果遍歷道的按鈕跟所點擊或移動的一樣 則設置相應的值
 57             if(i == position)
 58                 it.active = true;
 59             else
 60                 it.active = false;
 61         }
 62         if(update) notifyDataSetChanged();
 63     }
 64 
 65     @Override
 66     public int getCount()
 67     {
 68         return listData.size();
 69     }
 70 
 71     @Override
 72     public Object getItem(int position)
 73     {
 74         return listData.get(position);
 75     }
 76 
 77     @Override
 78     public long getItemId(int position)
 79     {
 80         return position;
 81     }
 82 
 83     @Override
 84     public View getView(int position, View convertView, ViewGroup parent)
 85     {
 86         // 創建控件
 87         if (convertView == null)
 88         {
 89             convertView = inflater.inflate(R.layout.af_tab_bar_item, parent, false);
 90         }
 91 
 92         // 獲取/顯示數據
 93         Item it = (Item) getItem(position);
 94         TextView label = (TextView) convertView.findViewById(R.id.id_tabbar_label);
 95         ImageView imageView = (ImageView) convertView.findViewById(R.id.id_tabbar_icon);
 96 
 97         label.setText( it.label);
 98 
 99         if (it.active)
100         {
101             // 選中狀態
102             if (it.label.length() > 0)
103                 label.setTextColor(colorActive);
104             if (it.iconActive != null)
105                 imageView.setImageDrawable( it.iconActive);
106             else // iconActive未設置,則顯示iconNormal  如果沒有放置圖片時
107                 imageView.setImageDrawable( it.iconNormal);
108         } else
109         {
110             // 普通狀態
111             if (it.label.length() > 0)
112                 label.setTextColor(colorNormal);
113             if (it.iconNormal != null)
114                 imageView.setImageDrawable( it.iconNormal);
115         }
116 
117         return convertView;
118     }
119 
120     ///////////////////////////////
121     public static class Item
122     {
123         String label;  // 標簽顯示
124         String value;   // 關聯的數據
125         public Drawable iconNormal; // 圖標
126         public Drawable iconActive; // 選中高亮
127         public boolean active = false; // 是否選中狀態
128 
129         public Item()
130         {
131         }
132 
133         public Item(String label, String value)
134         {
135             this.label = label;
136             this.value = value;
137         }
138         public Item(String label, String value, Drawable iconNormal, Drawable iconActive)
139         {
140             this.label = label;
141             this.value = value;
142             this.iconNormal = iconNormal;
143             this.iconActive = iconActive;
144         }
145     }
146 }

4.MainActivity.java中

　　a.創建一個Fragment的數組 頁面數組

 Fragment[] fragments = new Fragment[3];

　　b.初始化三個創建的頁面

　　　　　fragments[0] = new MsgFragment();
        fragments[1] = new CCFragment();
        fragments[2] = new UserFragment();

　　　c.創建內部類 MyViewPagerAdapter

    public class MyViewPagerAdapter extends FragmentPagerAdapter
    {

        public MyViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            //?????????
            return fragments[position];

        }

        @Override
        public int getCount() {
            //?????????
            return fragments.length;
        }
    }

　　d.給viewPage 設置Adapter

1 　　　　　FragmentPagerAdapter pagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager());
2         final ViewPager viewPager=(ViewPager)findViewById(R.id.id_viewpager);
3         viewPager.setAdapter(pagerAdapter);

　　e.設置標簽欄中的內容

1 　　　　　AfTabBarAdapter.Item[] labels=new AfTabBarAdapter.Item[3];
2         labels[0]=new AfTabBarAdapter.Item("微信","msg",getDrawable(R.drawable.ic_msg_active),getDrawable(R.drawable.ic_msg_normal));
3         labels[1]=new AfTabBarAdapter.Item("發現","cc",getDrawable(R.drawable.ic_find_active),getDrawable(R.drawable.ic_find_normal));
4         labels[2]=new AfTabBarAdapter.Item("我的","user",getDrawable(R.drawable.ic_user_active),getDrawable(R.drawable.ic_user_normal));

tabAdapter=new AfTabBarAdapter(this);
tabAdapter.addItems(labels);

　　　f.給標簽欄的主體 GridView設置Adapter

        GridView gridView=(GridView)findViewById(R.id.id_gridview);
        gridView.setAdapter(tabAdapter);
        gridView.setNumColumns(labels.length);//GridView設置 列
        tabAdapter.setActive(0,true);//默認選中第一頁  第一個標簽

　　　　g.監聽器：點擊標簽頁 顯示相應的頁面

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {

                //讓pagerVier切換到相應的頁面
                viewPager.setCurrentItem(position);

                //讓標簽按鈕改變選相應的樣式
                tabAdapter.setActive(position,true);
            }
        });

　　　　h.監聽器：當滑動上方頁面時

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {

            //讓標簽欄該改變相應的樣式
            tabAdapter.setActive(position,true);
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
});

MainActivity.java

  1 package com.example.senior0302_test2;
  2 
  3 import android.os.Bundle;
  4 import android.support.v4.app.Fragment;
  5 import android.support.v4.app.FragmentManager;
  6 import android.support.v4.app.FragmentPagerAdapter;
  7 import android.support.v4.view.ViewPager;
  8 import android.support.v7.app.AppCompatActivity;
  9 import android.view.View;
 10 import android.widget.AdapterView;
 11 import android.widget.GridView;
 12 
 13 public class MainActivity extends AppCompatActivity {
 14 
 15     Fragment[] fragments = new Fragment[3];
 16     AfTabBarAdapter tabAdapter;
 17 
 18 
 19     @Override
 20     protected void onCreate(Bundle savedInstanceState) {
 21         super.onCreate(savedInstanceState);
 22         setContentView(R.layout.activity_main);
 23 
 24         //將頁面初始化
 25         fragments[0] = new MsgFragment();
 26         fragments[1] = new CCFragment();
 27         fragments[2] = new UserFragment();
 28 
 29         FragmentPagerAdapter pagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager());
 30         final ViewPager viewPager=(ViewPager)findViewById(R.id.id_viewpager);
 31         viewPager.setAdapter(pagerAdapter);
 32 
 33         //設置標簽欄中的內容
 34         AfTabBarAdapter.Item[] labels=new AfTabBarAdapter.Item[3];
 35         labels[0]=new AfTabBarAdapter.Item("微信","msg",getDrawable(R.drawable.ic_msg_active),getDrawable(R.drawable.ic_msg_normal));
 36         labels[1]=new AfTabBarAdapter.Item("發現","cc",getDrawable(R.drawable.ic_find_active),getDrawable(R.drawable.ic_find_normal));
 37         labels[2]=new AfTabBarAdapter.Item("我的","user",getDrawable(R.drawable.ic_user_active),getDrawable(R.drawable.ic_user_normal));
 38 
 39         tabAdapter=new AfTabBarAdapter(this);
 40         tabAdapter.addItems(labels);
 41 
 42         GridView gridView=(GridView)findViewById(R.id.id_gridview);
 43         gridView.setAdapter(tabAdapter);
 44         gridView.setNumColumns(labels.length);//GridView設置 列
 45         tabAdapter.setActive(0,true);//默認選中第一頁  第一個標簽
 46 
 47         //監聽器：點擊標簽頁  顯示相應的頁面
 48         gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
 49             @Override
 50             public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
 51 
 52                 //讓pagerVier切換到相應的頁面
 53                 viewPager.setCurrentItem(position);
 54 
 55                 //讓標簽按鈕改變選相應的樣式
 56                 tabAdapter.setActive(position,true);
 57             }
 58         });
 59 
 60         //監聽器：當滑動上方頁面時
 61         viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
 62             @Override
 63             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 64 
 65             }
 66 
 67             @Override
 68             public void onPageSelected(int position) {
 69 
 70                     //讓標簽欄該改變相應的樣式
 71                     tabAdapter.setActive(position,true);
 72             }
 73 
 74             @Override
 75             public void onPageScrollStateChanged(int state) {
 76 
 77             }
 78         });
 79     }
 80 
 81     public class MyViewPagerAdapter extends FragmentPagerAdapter
 82     {
 83 
 84         public MyViewPagerAdapter(FragmentManager fm) {
 85             super(fm);
 86         }
 87 
 88         @Override
 89         public Fragment getItem(int position) {
 90             //?????????
 91             return fragments[position];
 92 
 93         }
 94 
 95         @Override
 96         public int getCount() {
 97             //?????????
 98             return fragments.length;
 99         }
100     }
101 }

仿微信多頁滑動