Android 利用ViewPager實作底部圓點導航左右滑動效果以及Fragment頁面切換

上一篇博文我們介紹了利用ViewPager和Fragment實作頂部滑塊左右滑動效果，具體參考(http://blog.csdn.net/a123demi/article/details/39480385)。

而本篇博文将執行個體講解利用ViewPager實作底部圓點導航左右滑動效果，以及被滑動界面實作監聽事件，同時通過Fragment實作頁面的切換。

對于該效果的實作，需要實作以下幾個問題：

1. 底部圓點加載和實作方法？

2. 怎樣實作左右滑動效果？

3. 被滑動頁面，怎樣實作監聽事件？

4. 滑動頁面怎樣和其他頁面切換？

一.實作效果如下

Android 利用ViewPager實作底部圓點導航左右滑動效果以及Fragment頁面切換

二.具體代碼如下

1.XML布局檔案

1>主布局activity_main.xml

<span style="font-size:18px;"><?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></span>

注意：id為fragment_switch_ll的LinearLayout是為Fragment切換預留的。

2>Fragment頁面切換布局fragment_other.xml

<span style="font-size:18px;"><?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></span>

3>左右滑動布局fragment_switch.xml(Fragment頁面切換中的另一個布局)

<span style="font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
	
	<LinearLayout
	    android:id="@+id/viewGroup"
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:layout_alignParentBottom="true"
	    android:layout_marginBottom="40dp"
	    android:gravity="center_horizontal"
	    android:orientation="horizontal"
	    ></LinearLayout> 
	<android.support.v4.view.ViewPager
	    android:id="@+id/viewPager"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent"
	    android:layout_alignParentTop="true"
	    android:layout_above="@id/viewGroup"
	    android:layout_marginBottom="20dp"
	    ></android.support.v4.view.ViewPager>
</RelativeLayout>
</span>

注意：id為viewGroup的LinearLayout是實作圓點ImageView的父容器。

4>左右滑動界面布局view_one.xml(本例帶監聽事件)，view_one.xml，view_one.xml(隻給出其中一個，其他類似)

<span style="font-size:18px;"><?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></span>

2.java代碼實作

1>主函數MainActivity.java

<span style="font-size:18px;">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();
	}

}
</span>

注意：switchFragment()實作了Fragment的切換，解決了問題4.

2>Fragment切換頁面OtherFragment.java

<span style="font-size:18px;">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;
	}
}
</span>

3>Fragment切換界面及滑動界面SwitchFragment.java

<span style="font-size:18px;">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()];
<span style="white-space:pre">		</span>//滑動界面事件監聽，解決問題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();
			}

		});
<span style="white-space:pre">		</span>//動态生成ImageView，實作底部圓點(圓點數量根據左右滑動View而确定)，解決問題1</span><span style="font-family: Arial, Helvetica, sans-serif;">	</span><span style="font-size:18px;">
		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]);
		}
<span style="white-space:pre">		</span>//通過滑動擴充卡實作滑動效果，解決問題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);
				}
			}
		}
	}

}
</span>

注意：SwitchPageChangeListener實作了底部導航圓點滑動變色的效果。

4>滑動擴充卡MyPagerAdapter.java

<span style="font-size:18px;">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) {
	}

}
</span>

注意：擴充卡通過添加或删除View來實作頁面滑動時，頁面變化的效果

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

源碼下載下傳位址：http://download.csdn.net/detail/a123demi/7960273

Android 利用ViewPager實作底部圓點導航左右滑動效果以及Fragment頁面切換

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯