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

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

话不多说  come  !!!

代码片段，双击复制

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180

package com.zh.xiaodiantest;   import java.util.ArrayList;   import android.app.Activity; import android.os.Bundle; import android.os.Parcelable; import android.support.v4.view.PagerAdapter; 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.ViewGroup.LayoutParams; import android.view.Window; import android.widget.ImageView; import android.widget.ImageView.ScaleType; import android.widget.LinearLayout; import android.widget.TextView;   public class MainActivity extends Activity {   private ViewPager viewPager; private ArrayList<View> pageViews; private ImageView imageView; private ImageView[] imageViews; // 包裹滑动图片LinearLayout private ViewGroup main; // 包裹小圆点的LinearLayout private ViewGroup group; @SuppressWarnings ( "unused" ) private TextView content;   @Override public void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState);   // 设置无标题窗口 requestWindowFeature(Window.FEATURE_NO_TITLE); int [] img = new int [] { R.drawable.no1, R.drawable.no2, R.drawable.no3, R.drawable.no4, R.drawable.no5 }; LayoutInflater inflater = getLayoutInflater(); pageViews = new ArrayList<View>(); for ( int i = 0 ; i < img.length; i++) { LinearLayout layout = new LinearLayout( this ); LayoutParams ltp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); final ImageView imageView = new ImageView( this ); imageView.setScaleType(ScaleType.CENTER_INSIDE); imageView.setImageResource(img<i>); imageView.setPadding( 15 , 30 , 15 , 30 ); layout.addView(imageView, ltp); pageViews.add(layout); } imageViews = new ImageView[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 ( int i = 0 ; i < pageViews.size(); i++) { LinearLayout.LayoutParams margin = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); //设置每个小圆点距离左边的间距 margin.setMargins( 10 , 0 , 0 , 0 ); imageView = new ImageView(MainActivity. this ); //设置每个小圆点的宽高 imageView.setLayoutParams( new LayoutParams( 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( new GuidePageAdapter()); //给viewpager设置监听事件 viewPager.setOnPageChangeListener( new GuidePageChangeListener()); }   // 指引页面数据适配器 class GuidePageAdapter extends PagerAdapter {   @Override public int getCount() { return pageViews.size(); }   @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; }   @Override public int getItemPosition(Object object) { // TODO Auto-generated method stub return super .getItemPosition(object); }   @Override public void destroyItem(View arg0, int arg1, Object arg2) { // TODO Auto-generated method stub ((ViewPager) arg0).removeView(pageViews.get(arg1)); }   @Override public Object instantiateItem(View arg0, int arg1) { // TODO Auto-generated method stub ((ViewPager) arg0).addView(pageViews.get(arg1)); return pageViews.get(arg1); }   @Override public void restoreState(Parcelable arg0, ClassLoader arg1) { // TODO Auto-generated method stub   }   @Override public Parcelable saveState() { // TODO Auto-generated method stub return null ; }   @Override public void startUpdate(View arg0) { // TODO Auto-generated method stub   }   @Override public void finishUpdate(View arg0) { // TODO Auto-generated method stub   } }   // 指引页面更改事件监听器 class GuidePageChangeListener implements OnPageChangeListener {   @Override public void onPageScrollStateChanged( int arg0) { // TODO Auto-generated method stub   }   @Override public void onPageScrolled( int arg0, float arg1, int arg2) { // TODO Auto-generated method stub   }   @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_unfocused); } } } } } </i></i></i></i></i></i>

XML

代码片段，双击复制

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<?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>

代码片段，双击复制

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<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>