Android之ViewPager实现图片+小圆点切换【有图有码】实例

看了好多小伙伴和我一样在寻找焦点图片对应地下小圆点的例子  我自己做好了 特地来分享一下

话不多说  come  !!!

packagecom.zh.xiaodiantest;

importjava.util.ArrayList;

importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.os.Parcelable;
importandroid.support.v4.view.PagerAdapter;
importandroid.support.v4.view.ViewPager;
importandroid.support.v4.view.ViewPager.OnPageChangeListener;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.view.ViewGroup.LayoutParams;
importandroid.view.Window;
importandroid.widget.ImageView;
importandroid.widget.ImageView.ScaleType;
importandroid.widget.LinearLayout;
importandroid.widget.TextView;

publicclass MainActivity extendsActivity {

privateViewPager viewPager;
privateArrayList<View> pageViews;
privateImageView imageView;
privateImageView[] imageViews;
// 包裹滑动图片LinearLayout
privateViewGroup main;
// 包裹小圆点的LinearLayout
privateViewGroup group;
@SuppressWarnings("unused")
privateTextView content;

@Override
publicvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

// 设置无标题窗口
requestWindowFeature(Window.FEATURE_NO_TITLE);
int[] img = newint[] { R.drawable.no1, R.drawable.no2, R.drawable.no3,
R.drawable.no4, R.drawable.no5 };
LayoutInflater inflater = getLayoutInflater();
pageViews = newArrayList<View>();
for(inti = 0; i < img.length; i++) {
LinearLayout layout = newLinearLayout(this);
LayoutParams ltp = newLayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT);
finalImageView imageView = newImageView(this);
imageView.setScaleType(ScaleType.CENTER_INSIDE);
imageView.setImageResource(img<i>);
imageView.setPadding(15,30,15,30);
layout.addView(imageView, ltp);
pageViews.add(layout);
}
imageViews = newImageView[pageViews.size()];
main = (ViewGroup) inflater.inflate(R.layout.pager_layout, null);
group = (ViewGroup) main.findViewById(R.id.viewGroup);
viewPager = (ViewPager) main.findViewById(R.id.guidePages);
content = (TextView) findViewById(R.id.photo_content);

/**
* 有几张图片 下面就显示几个小圆点
*/

for(inti = 0; i < pageViews.size(); i++) {
LinearLayout.LayoutParams margin = newLinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
//设置每个小圆点距离左边的间距
margin.setMargins(10,0,0,0);
imageView = newImageView(MainActivity.this);
//设置每个小圆点的宽高
imageView.setLayoutParams(newLayoutParams(15,15));
imageViews<i> = imageView;
if(i == 0) {
// 默认选中第一张图片
imageViews<i>
.setBackgroundResource(R.drawable.page_indicator_focused);
}else{
//其他图片都设置未选中状态
imageViews<i>
.setBackgroundResource(R.drawable.page_indicator_unfocused);
}
group.addView(imageViews<i>, margin);
}
setContentView(main);
//给viewpager设置适配器
viewPager.setAdapter(newGuidePageAdapter());
//给viewpager设置监听事件
viewPager.setOnPageChangeListener(newGuidePageChangeListener());
}

// 指引页面数据适配器
classGuidePageAdapter extendsPagerAdapter {

@Override
publicint getCount() {
returnpageViews.size();
}

@Override
publicboolean isViewFromObject(View arg0, Object arg1) {
returnarg0 == arg1;
}

@Override
publicint getItemPosition(Object object) {
// TODO Auto-generated method stub
returnsuper.getItemPosition(object);
}

@Override
publicvoid destroyItem(View arg0, intarg1, Object arg2) {
// TODO Auto-generated method stub
((ViewPager) arg0).removeView(pageViews.get(arg1));
}

@Override
publicObject instantiateItem(View arg0, intarg1) {
// TODO Auto-generated method stub
((ViewPager) arg0).addView(pageViews.get(arg1));
returnpageViews.get(arg1);
}

@Override
publicvoid restoreState(Parcelable arg0, ClassLoader arg1) {
// TODO Auto-generated method stub

}

@Override
publicParcelable saveState() {
// TODO Auto-generated method stub
returnnull;
}

@Override
publicvoid startUpdate(View arg0) {
// TODO Auto-generated method stub

}

@Override
publicvoid finishUpdate(View arg0) {
// TODO Auto-generated method stub

}
}

// 指引页面更改事件监听器
classGuidePageChangeListener implementsOnPageChangeListener {

@Override
publicvoid onPageScrollStateChanged(intarg0) {
// TODO Auto-generated method stub

}

@Override
publicvoid onPageScrolled(intarg0, floatarg1, intarg2) {
// TODO Auto-generated method stub

}

@Override
publicvoid onPageSelected(intarg0) {
//遍历数组让当前选中图片下的小圆点设置颜色
for(inti = 0; i < imageViews.length; i++) {
imageViews[arg0]
.setBackgroundResource(R.drawable.page_indicator_focused);

if(arg0 != i) {
imageViews<i>
.setBackgroundResource(R.drawable.page_indicator_unfocused);
}
}
}
}
}
</i></i></i></i></i></i>

XML

<?xml version="1.0"encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.zh.xiaodiantest"
android:versionCode="1"
android:versionName="1.0">

<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17"/>

<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen">
<activity
android:name="com.zh.xiaodiantest.MainActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>

<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>

</manifest>

<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"
   tools:ignore="UselessParent">

   <android.support.v4.view.ViewPager
       android:id="@+id/guidePages"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_above="@+id/scrollview"/>

   <LinearLayout
       android:id="@+id/viewGroup"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true"
       android:layout_alignParentLeft="true"
       android:gravity="center_horizontal"
       android:orientation="horizontal"
       android:layout_marginBottom="5dp"
       >
   </LinearLayout>

   <ScrollView
       android:id="@+id/scrollview"
       android:layout_width="match_parent"
       android:layout_height="70dp"
       android:layout_above="@+id/viewGroup"
       android:layout_marginBottom="15dp">

       <TextView
           android:id="@+id/photo_content"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:gravity="center_horizontal"
           android:text="@string/hello_world"/>
   </ScrollView>

</RelativeLayout>