Android开发之利用ViewPager实现在Activity或Fragment中引入别的布局文件实现滑动并进行页面跳转 - 龙从一

公告

Android开发之利用ViewPager实现在Activity或Fragment中引入别的布局文件实现滑动并进行页面跳转

有些时候经常可以看到其他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，源码地址稍后补充，不过如果上面的代码看懂了无需源码即可实现。

posted on 2017-09-08 14:20 龙从一阅读(1782) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部