仿微信多页滑动
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 }