首页 > 代码库 > Android 利用ViewPager实现底部圆点导航左右滑动效果以及Fragment页面切换
Android 利用ViewPager实现底部圆点导航左右滑动效果以及Fragment页面切换
上一篇博文我们介绍了利用ViewPager和Fragment实现顶部滑块左右滑动效果，具体参考(http://blog.csdn.net/a123demi/article/details/39480385)。
而本篇博文将实例讲解利用ViewPager实现底部圆点导航左右滑动效果，以及被滑动界面实现监听事件，同时通过Fragment实现页面的切换。
对于该效果的实现，需要实现以下几个问题：
1. 底部圆点加载和实现方法？
2. 怎样实现左右滑动效果？
3. 被滑动页面，怎样实现监听事件？
4. 滑动页面怎样和其他页面切换？
一.实现效果如下
二.具体代码如下
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切换预留的。
<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的父容器。
<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>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页面切换
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。