有些时候经常可以看到其他APP中有一排的图标，可以在一个界面中滑来滑去，并且图标可以进行点击事件进行页面的跳转。这里对这种方法的实现做出总结。
首先看一下图片：
下面这两种图片是在一个Fragment中进行滑动的两个不同的界面。下面来说一下具体实现，请看下面代码：
图一（下）
图二（下）
上面两张图片是两个不同的xml来实现，图一对应slide1.xml，图二对应slide2.xml：
slide1.xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="horizontal" > 6 7 <LinearLayout 8 android:id="@+id/dept_list" 9 android:layout_width="0dp" 10 android:layout_height="match_parent" 11 android:layout_weight="1" 12 android:gravity="center" 13 android:orientation="vertical" > 14 15 <ImageView 16 android:layout_width="63dp" 17 android:layout_height="54dp" 18 android:layout_gravity="center" 19 android:paddingTop="10dp" 20 android:src="@drawable/image_group" /> 21 22 <TextView 23 android:layout_width="fill_parent" 24 android:layout_height="wrap_content" 25 android:gravity="center" 26 android:paddingTop="10dp" 27 android:text="@string/dept_list" 28 android:textColor="#000000" 29 android:textSize="20px" /> 30 31 </LinearLayout> 32 33 <LinearLayout 34 android:id="@+id/slideclassalbum" 35 android:layout_width="0dp" 36 android:layout_height="match_parent" 37 android:layout_weight="1" 38 android:gravity="center" 39 android:orientation="vertical" > 40 <ImageView 41 android:id="@+id/zhuxue" 42 android:layout_width="63dp" 43 android:layout_height="54dp" 44 android:layout_gravity="center" 45 android:paddingTop="10dp" 46 android:src="@drawable/testmemberimg6" /> 47 48 <TextView 49 android:layout_width="fill_parent" 50 android:layout_height="wrap_content" 51 android:gravity="center" 52 android:paddingTop="10dp" 53 android:text="@string/dept_list" 54 android:textColor="#000000" 55 android:textSize="20px" /> 56 </LinearLayout> 57 <LinearLayout 58 android:id="@+id/slidegrade" 59 android:layout_width="0dp" 60 android:layout_height="match_parent" 61 android:layout_weight="1" 62 android:gravity="center" 63 android:orientation="vertical" > 64 <ImageView 65 android:id="@+id/zhuxue" 66 android:layout_width="63dp" 67 android:layout_height="54dp" 68 android:layout_gravity="center" 69 android:paddingTop="10dp" 70 android:src="@drawable/testmemberimg3" /> 71 72 <TextView 73 android:layout_width="fill_parent" 74 android:layout_height="wrap_content" 75 android:gravity="center" 76 android:paddingTop="10dp" 77 android:text="@string/dept_list" 78 android:textColor="#000000" 79 android:textSize="20px" /> 80 </LinearLayout> 81 <LinearLayout 82 android:id="@+id/slideloving" 83 android:layout_width="0dp" 84 android:layout_height="match_parent" 85 android:layout_weight="1" 86 android:gravity="center" 87 android:orientation="vertical" > 88 <ImageView 89 android:id="@+id/zhuxue" 90 android:layout_width="63dp" 91 android:layout_height="54dp" 92 android:layout_gravity="center" 93 android:paddingTop="10dp" 94 android:src="@drawable/testmemberimg2" /> 95 96 <TextView 97 android:layout_width="fill_parent" 98 android:layout_height="wrap_content" 99 android:gravity="center" 100 android:paddingTop="10dp" 101 android:text="@string/dept_list" 102 android:textColor="#000000" 103 android:textSize="20px" /> 104 </LinearLayout> 105 <LinearLayout 106 android:id="@+id/slideabroad" 107 android:layout_width="0dp" 108 android:layout_height="match_parent" 109 android:layout_weight="1" 110 android:gravity="center" 111 android:orientation="vertical" > 112 <ImageView 113 android:id="@+id/zhuxue" 114 android:layout_width="63dp" 115 android:layout_height="54dp" 116 android:layout_gravity="center" 117 android:paddingTop="10dp" 118 android:src="@drawable/testmemberimg1" /> 119 120 <TextView 121 android:layout_width="fill_parent" 122 android:layout_height="wrap_content" 123 android:gravity="center" 124 android:paddingTop="10dp" 125 android:text="@string/dept_list" 126 android:textColor="#000000" 127 android:textSize="20px" /> 128 </LinearLayout> 129 </LinearLayout>
slide2.xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="horizontal" > 6 7 <LinearLayout 8 android:id="@+id/slidefile" 9 android:layout_width="0dp" 10 android:layout_height="match_parent" 11 android:layout_weight="1" 12 android:gravity="center" 13 android:orientation="vertical" > 14 15 <ImageView 16 android:id="@+id/file" 17 android:layout_width="63dp" 18 android:layout_height="54dp" 19 android:layout_gravity="center" 20 android:paddingTop="10dp" 21 android:src="@drawable/image_group" /> 22 23 <TextView 24 android:layout_width="fill_parent" 25 android:layout_height="wrap_content" 26 android:gravity="center" 27 android:paddingTop="10dp" 28 android:text="@string/dept_list" 29 android:textColor="#000000" 30 android:textSize="20px" /> 31 32 </LinearLayout> 33 34 <LinearLayout 35 android:id="@+id/slidealbum" 36 android:layout_width="0dp" 37 android:layout_height="match_parent" 38 android:layout_weight="1" 39 android:gravity="center" 40 android:orientation="vertical" > 41 <ImageView 42 android:id="@+id/operation" 43 android:layout_width="63dp" 44 android:layout_height="54dp" 45 android:layout_gravity="center" 46 android:paddingTop="10dp" 47 android:src="@drawable/testmemberimg6" /> 48 49 <TextView 50 android:layout_width="fill_parent" 51 android:layout_height="wrap_content" 52 android:gravity="center" 53 android:paddingTop="10dp" 54 android:text="@string/dept_list" 55 android:textColor="#000000" 56 android:textSize="20px" /> 57 </LinearLayout> 58 <LinearLayout 59 android:id="@+id/grade" 60 android:layout_width="0dp" 61 android:layout_height="match_parent" 62 android:layout_weight="1" 63 android:gravity="center" 64 android:orientation="vertical" > 65 66 </LinearLayout> 67 <LinearLayout 68 android:id="@+id/loving" 69 android:layout_width="0dp" 70 android:layout_height="match_parent" 71 android:layout_weight="1" 72 android:gravity="center" 73 android:orientation="vertical" > 74 75 </LinearLayout> 76 <LinearLayout 77 android:id="@+id/abroad" 78 android:layout_width="0dp" 79 android:layout_height="match_parent" 80 android:layout_weight="1" 81 android:gravity="center" 82 android:orientation="vertical" > 83 84 </LinearLayout> 85 </LinearLayout>
下面是Fragment所对应的布局文件fragment_my.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:background="@drawable/timg" android:orientation="vertical" > <com.example.myassembly.VerticalScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/timg" android:fillViewport="true" > <LinearLayout android:id="@+id/slide" android:layout_width="match_parent" android:layout_height="130dp" android:background="@drawable/timg" > <FrameLayout android:layout_width="fill_parent" android:layout_height="130dp" android:orientation="vertical" > <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > <LinearLayout android:id="@+id/viewGroup" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_marginBottom="10dp" android:gravity="center_horizontal" android:orientation="horizontal" > </LinearLayout> </RelativeLayout> </FrameLayout> </LinearLayout> </com.example.myassembly.VerticalScrollView> </LinearLayout>
接下来是Fragment中的代码，关于一些具体的情况，还有使用的细节里面有着具体的代码注释。
1 import java.util.ArrayList; 2 import com.example.activity.DeptActivity; 3 import com.example.myproject.R; 4 import android.content.Intent; 5 import android.os.Bundle; 6 import android.support.v4.app.Fragment; 7 import android.support.v4.view.PagerAdapter; 8 import android.support.v4.view.ViewPager; 9 import android.support.v4.view.ViewPager.OnPageChangeListener; 10 import android.view.LayoutInflater; 11 import android.view.View; 12 import android.view.View.OnClickListener; 13 import android.view.ViewGroup; 14 import android.widget.ImageView; 15 import android.widget.LinearLayout; 16 /** 17 * 我的Fragment 18 * @author admin 19 * 20 */ 21 public class MyFragment extends Fragment implements OnPageChangeListener { 22 private View rootView; 23 /****************************************** 滑动界面代码 声明下 *********************************************/ 24 // 用于存放滑动viewpager底部导航栏(点点) 25 private ImageView[] tips; 26 private ViewPager viewPager;// 声明viewPager 27 // 装View数组 28 private ArrayList<View> viewContainter = new ArrayList<View>(); 29 // 资源id 30 private int[] imgIdArray; 31 // 声明ViewPager变量 32 private View slide1; 33 private View slide2; 34 // 声明slide1中的变量 35 private LinearLayout dept_list; 36 37 /****************************************** 滑动界面代码声明 上 *********************************************/ 38 @Override 39 public View onCreateView(LayoutInflater inflater, ViewGroup container, 40 Bundle savedInstanceState) { 41 //Fragment中引入fragment的布局文件 42 if (null == rootView) { 43 rootView = inflater.inflate(R.layout.fragment_my, container, false); 44 initView(rootView); 45 } 46 return rootView; 47 } 48 49 @Override 50 public void onStart() { 51 // 无论是activity中还是在Fragment中，对于另外一个布局文件中的子控件进行操作不能在onceate中进行操作。 52 InitSetPage(); 53 // super.onStart();不能去掉，否则会出现错误 54 super.onStart(); 55 } 56 57 /** 58 * 获取子view中的控件，并绑定对应操作监听器 59 */ 60 private void InitSetPage() { 61 // 获取slide1中的子控件 62 dept_list = (LinearLayout) slide1.findViewById(R.id.dept_list); 63 // 对slide1中的子控件slidezhuxue绑定监听器 64 dept_list.setOnClickListener(new OnClickListener() { 65 66 @Override 67 public void onClick(View v) { 68 // TODO Auto-generated method stub 69 Intent intent = new Intent(getActivity(), DeptActivity.class); 70 startActivity(intent); 71 } 72 }); 73 } 74 75 private void initView(View rootView) { 76 // 布局文件中的group用来放置viewPager的底部导航栏。 77 ViewGroup group = (ViewGroup) rootView.findViewById(R.id.viewGroup); 78 viewPager = (ViewPager) rootView.findViewById(R.id.viewPager); 79 // 载入资源 80 imgIdArray = new int[] { R.layout.slide1, R.layout.slide2 }; 81 // 创建底部指示导航栏 82 tips = new ImageView[imgIdArray.length]; 83 for (int i = 0; i < tips.length; i++) { 84 ImageView imageView = new ImageView(getActivity() 85 .getApplicationContext()); 86 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( 87 10, 10); 88 params.setMargins(5, 0, 5, 0); 89 imageView.setLayoutParams(params); 90 if (i == 0) { 91 imageView.setBackgroundResource(R.drawable.dot); 92 } else { 93 imageView.setBackgroundResource(R.drawable.dot_focus); 94 } 95 tips[i] = imageView; 96 group.addView(imageView); 97 } 98 // 获取要引入的布局文件。在Fragment用getActivity().getApplicationContext()来代替Activity中的this或getApplication。 99 slide1 = LayoutInflater.from(getActivity().getApplicationContext()) 100 .inflate(R.layout.slide1, null); 101 slide2 = LayoutInflater.from(getActivity().getApplicationContext()) 102 .inflate(R.layout.slide2, null); 103 // 将布局文件装载到集合中 104 viewContainter.add(slide1); 105 viewContainter.add(slide2); 106 // 设置adapter 107 viewPager.setAdapter(new MyAdapter()); 108 // 为viewPager设置监听 109 viewPager.setOnPageChangeListener(this); 110 // 设置viewpager显示的默认图片，进去之后直接是第一张图片 111 viewPager.setCurrentItem(0); 112 } 113 114 /* 115 * 滑动界面PagerView的适配器 116 */ 117 public class MyAdapter extends PagerAdapter { 118 119 @Override 120 public int getCount() { 121 // TODO Auto-generated method stub 122 return viewContainter.size(); 123 } 124 125 @Override 126 public boolean isViewFromObject(View arg0, Object arg1) { 127 // TODO Auto-generated method stub 128 return arg0 == arg1; 129 } 130 131 @Override 132 public int getItemPosition(Object object) { 133 // TODO Auto-generated method stub 134 return super.getItemPosition(object); 135 } 136 137 @Override 138 public void destroyItem(ViewGroup container, int position, Object object) { 139 ((ViewPager) container).removeView(viewContainter.get(position)); 140 } 141 142 /** 143 * 载入图片进去，用当前的position 除以 图片数组长度取余数是关键 144 */ 145 @Override 146 public Object instantiateItem(View container, int position) { 147 ((ViewPager) container).addView(viewContainter.get(position)); 148 return viewContainter.get(position); 149 } 150 151 } 152 153 @Override 154 public void onPageScrollStateChanged(int arg0) { 155 // TODO Auto-generated method stub 156 157 } 158 159 @Override 160 public void onPageScrolled(int arg0, float arg1, int arg2) { 161 // TODO Auto-generated method stub 162 163 } 164 165 @Override 166 public void onPageSelected(int arg0) { 167 // TODO Auto-generated method stub 168 setImageBackground(arg0 % viewContainter.size()); 169 } 170 171 /** 172 * 设置选中的tip的背景 173 * 174 * @param selectItems 175 */ 176 private void setImageBackground(int selectItems) { 177 for (int i = 0; i < tips.length; i++) { 178 if (i == selectItems) { 179 tips[i].setBackgroundResource(R.drawable.dot); 180 } else { 181 tips[i].setBackgroundResource(R.drawable.dot_focus); 182 } 183 } 184 } 185 }
通过上面的代码即可实现界面的滑动，有一点必须要注意：在对子菜单中的控件进行点击操作时一定要在onstart()方法中进行同时super.onStart()；不可省略，否则程序将会崩溃。这一点要特别注意，关于这部分源码稍后会上传CSDN，源码地址稍后补充，不过如果上面的代码看懂了无需源码即可实现。