Android 利用ViewPager实现底部圆点导航左右滑动效果以及Fragment页面切换

比眉伴天荒 2022-08-12 09:30 504阅读 0赞

上一篇博文我们介绍了利用ViewPager和Fragment实现顶部滑块左右滑动效果，具体参考([http://blog.csdn.net/a123demi/article/details/39480385][http_blog.csdn.net_a123demi_article_details_39480385])。

而本篇博文将实例讲解利用ViewPager实现底部圆点导航左右滑动效果，以及被滑动界面实现监听事件，同时通过Fragment实现页面的切换。

对于该效果的实现，需要实现以下几个问题：

1. 底部圆点加载和实现方法？

2. 怎样实现左右滑动效果？

3. 被滑动页面，怎样实现监听事件？

4. 滑动页面怎样和其他页面切换？

一.实现效果如下

![20140922231742437][]

二.具体代码如下

1.XML布局文件

1>主布局activity\_main.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:orientation="vertical" >
 	<Button
 	 android:id="@+id/fragment_switch_btn"
 	 android:layout_width="match_parent"
 	 android:layout_height="wrap_content"
 	 android:text="Fragment切换"
 	 />
 	
 	<LinearLayout
 	 android:id="@+id/fragment_switch_ll"
 	 android:layout_width="match_parent"
 	 android:layout_height="match_parent"
 	 android:orientation="vertical"
 	 android:layout_marginTop="20dp"
 	 ></LinearLayout>
 
 </LinearLayout>

注意：id为fragment\_switch\_ll的LinearLayout是为Fragment切换预留的。

2>Fragment页面切换布局fragment\_other.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:orientation="vertical" >
 	<TextView
 	 android:layout_width="match_parent"
 	 android:layout_height="match_parent"
 	 android:text="另一个Fragment界面"
 	 android:textSize="24sp"
 	 android:textColor="#FF0000"
 	 android:gravity="center"
 	 />
 
 </LinearLayout>

3>左右滑动布局fragment\_switch.xml(Fragment页面切换中的另一个布局)

注意：id为viewGroup的LinearLayout是实现圆点ImageView的父容器。

4>左右滑动界面布局view\_one.xml(本例带监听事件)，view\_one.xml，view\_one.xml(只给出其中一个，其他类似)

<?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" >
 
 <Button
 android:id="@+id/btn"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="btn" >
 </Button>
 
 <ImageView
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:background="@drawable/image_one" >
 </ImageView>
 
 </LinearLayout>

2.java代码实现

1>主函数MainActivity.java

package com.example.pagerdemo;
 
 import android.app.Activity;
 import android.app.Fragment;
 import android.app.FragmentTransaction;
 import android.os.Bundle;
 import android.view.View;
 import android.view.View.OnClickListener;
 import android.widget.Button;
 
 public class MainActivity extends Activity {
 
 	private Button fgSwitchBtn;
 	private boolean isSwitch = true;//true:进入SwitchFragment,false:进入OtherFragment
 
 	@Override
 	protected void onCreate(Bundle savedInstanceState) {
 		super.onCreate(savedInstanceState);
 		setContentView(R.layout.activity_main);
 
 		fgSwitchBtn = (Button) this.findViewById(R.id.fragment_switch_btn);
 		
 		fgSwitchBtn.setOnClickListener(new OnClickListener() {
 
 			@Override
 			public void onClick(View v) {
 				// TODO Auto-generated method stub
 				switchFragment();
 			}
 
 		});
 	}
 	
 	@Override
 	public void onResume(){
 		super.onResume();
 		switchFragment();
 	}
 	
 	/**
 	 * Fragment界面切换
 	 */
 	private void switchFragment(){
 		Fragment fragment = null;
 		if(isSwitch){
 			fragment = new SwitchFragment();
 		}else{
 			fragment = new OtherFragment();
 		}
 		isSwitch = !isSwitch;
 		FragmentTransaction ft = this.getFragmentManager().beginTransaction();
 		ft.replace(R.id.fragment_switch_ll, fragment);
 		ft.commitAllowingStateLoss();
 	}
 
 }

注意：switchFragment()实现了Fragment的切换，解决了问题4.

2>Fragment切换页面OtherFragment.java

package com.example.pagerdemo;
 
 import android.app.Fragment;
 import android.os.Bundle;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 
 public class OtherFragment extends Fragment {
 	@Override
 	public View onCreateView(LayoutInflater inflater, ViewGroup container,
 			Bundle savedInstanceState) {
 		super.onCreateView(inflater, container, savedInstanceState);
 		View otherView = inflater.inflate(R.layout.fragment_other, container,
 				false);
 		return otherView;
 	}
 }

3>Fragment切换界面及滑动界面SwitchFragment.java

package com.example.pagerdemo;
 
 import java.util.ArrayList;
 import java.util.List;
 
 import android.app.Activity;
 import android.app.Fragment;
 import android.content.Context;
 import android.os.Bundle;
 import android.support.v4.view.ViewPager;
 import android.support.v4.view.ViewPager.OnPageChangeListener;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.view.View.OnClickListener;
 import android.view.ViewGroup.LayoutParams;
 import android.widget.Button;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
 import android.widget.Toast;
 
 public class SwitchFragment extends Fragment {
 
 	private LinearLayout groupViewLl;
 	private ViewPager viewPager;
 
 	private ImageView[] imageViews;
 	private ImageView imageView;
 	private Button btn;
 
 	private List<View> viewList = new ArrayList<View>();
 	private LayoutInflater mInflater;
 
 	public View onCreateView(LayoutInflater inflater, ViewGroup container,
 			Bundle savedInstanceState) {
 		super.onCreateView(inflater, container, savedInstanceState);
 		View switchView = inflater.inflate(R.layout.fragment_switch, container,
 				false);
 		mInflater = inflater;
 
 		groupViewLl = (LinearLayout) switchView.findViewById(R.id.viewGroup);
 		viewPager = (ViewPager) switchView.findViewById(R.id.viewPager);
 
 		return switchView;
 
 	}
 
 	@Override
 	public void onActivityCreated(Bundle savedInstanceState) {
 		super.onActivityCreated(savedInstanceState);
 		/**
 		 * 将需要滑动的View加入到viewList
 		 */
 		View oneView = mInflater.inflate(R.layout.view_one, null);
 		viewList.add(oneView);
 		viewList.add(mInflater.inflate(R.layout.view_two, null));
 		viewList.add(mInflater.inflate(R.layout.view_three, null));
 
 		/**
 		 * 定义个圆点滑动导航ImageView，根据View的个数而定
 		 */
 		imageViews = new ImageView[viewList.size()];
 		//滑动界面事件监听，解决问题3
 		btn = (Button) oneView.findViewById(R.id.btn);
 		btn.setOnClickListener(new OnClickListener() {
 
 			@Override
 			public void onClick(View v) {
 				Toast.makeText(SwitchFragment.this.getActivity(),
 						"this is view_one", Toast.LENGTH_SHORT).show();
 			}
 
 		});
 		//动态生成ImageView，实现底部圆点(圆点数量根据左右滑动View而确定)，解决问题1	
 		for (int i = 0; i < viewList.size(); i++) {
 			imageView = new ImageView(this.getActivity());
 			imageView.setLayoutParams(new LayoutParams(20, 20));
 			imageView.setPadding(20, 0, 20, 0);
 			imageViews[i] = imageView;
 
 			if (i == 0) {
 				// 默认选中第一张图片
 				imageViews[i]
 						.setBackgroundResource(R.drawable.page_indicator_focused);
 			} else {
 				imageViews[i].setBackgroundResource(R.drawable.page_indicator);
 			}
 
 			groupViewLl.addView(imageViews[i]);
 		}
 		//通过滑动适配器实现滑动效果，解决问题2
 		viewPager.setAdapter(new MyPagerAdapter(viewList));
 		viewPager.setOnPageChangeListener(new SwitchPageChangeListener());
 	}
 
 	@Override
 	public void onResume() {
 		super.onResume();
 	}
 
 	// 指引页面更改事件监听器，设置圆点滑动时的背景变化。
 	class SwitchPageChangeListener implements OnPageChangeListener {
 		@Override
 		public void onPageScrollStateChanged(int arg0) {
 		}
 
 		@Override
 		public void onPageScrolled(int arg0, float arg1, int arg2) {
 		}
 
 		@Override
 		public void onPageSelected(int arg0) {
 			for (int i = 0; i < imageViews.length; i++) {
 				imageViews[arg0]
 						.setBackgroundResource(R.drawable.page_indicator_focused);
 
 				if (arg0 != i) {
 					imageViews[i]
 							.setBackgroundResource(R.drawable.page_indicator);
 				}
 			}
 		}
 	}
 
 }

注意：SwitchPageChangeListener实现了底部导航圆点滑动变色的效果。

4>滑动适配器MyPagerAdapter.java

package com.example.pagerdemo;
 
 import java.util.List;
 
 import android.os.Parcelable;
 import android.support.v4.view.PagerAdapter;
 import android.support.v4.view.ViewPager;
 import android.view.View;
 
 public class MyPagerAdapter extends PagerAdapter {
 	private List<View> viewList;
 	public MyPagerAdapter(List<View> viewList){
 		this.viewList = viewList;
 	}
 
 	@Override
 	public int getCount() {
 		return viewList.size();
 	}
 
 	@Override
 	public boolean isViewFromObject(View arg0, Object arg1) {
 		return arg0 == arg1;
 	}
 
 	@Override
 	public int getItemPosition(Object object) {
 		return super.getItemPosition(object);
 	}
 
 	@Override
 	public void destroyItem(View arg0, int arg1, Object arg2) {
 		((ViewPager) arg0).removeView(viewList.get(arg1));
 	}
 
 	@Override
 	public Object instantiateItem(View arg0, int arg1) {
 		((ViewPager) arg0).addView(viewList.get(arg1));
 		return viewList.get(arg1);
 	}
 
 	@Override
 	public void restoreState(Parcelable arg0, ClassLoader arg1) {
 	}
 
 	@Override
 	public Parcelable saveState() {
 		return null;
 	}
 
 	@Override
 	public void startUpdate(View arg0) {
 	}
 
 	@Override
 	public void finishUpdate(View arg0) {
 	}
 
 }

注意：适配器通过添加或删除View来实现页面滑动时，页面变化的效果

以上就是本博文的所有内容。

源码下载地址：[http://download.csdn.net/detail/a123demi/7960273][http_download.csdn.net_detail_a123demi_7960273]

[http_blog.csdn.net_a123demi_article_details_39480385]: http://blog.csdn.net/a123demi/article/details/39480385
[20140922231742437]: /images/20220810/277f172999984cce94f8d0ba1798378b.png
[http_download.csdn.net_detail_a123demi_7960273]: http://download.csdn.net/detail/a123demi/7960273