Android ViewPager實現圖片 小圓點切換
阿新 • • 發佈:2019-02-02
pager_layout.xml:
MainActivity.java:<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/viewGroup" /> <LinearLayout android:id="@+id/viewGroup" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true android:gravity="center_horizontal" android:orientation="horizontal" > </LinearLayout> </RelativeLayout>
完整打包程式碼:http://download.csdn.net/detail/u014071669/7184439package 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.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; public class MainActivity extends Activity { private ViewPager viewPager; private ArrayList<View> pageViews; private ImageView imageView; private ImageView[] imageViews; // 包裹小圓點的LinearLayout private ViewGroup group; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 設定無標題視窗 requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.pager_layout); int[] img = new int[] { R.drawable.no1, R.drawable.no2, R.drawable.no3, R.drawable.no4, R.drawable.no5 }; 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]); layout.addView(imageView, ltp); pageViews.add(layout); } imageViews = new ImageView[pageViews.size()]; group = (ViewGroup) this.findViewById(R.id.viewGroup); viewPager = (ViewPager) this.findViewById(R.id.guidePages); /** * 有幾張圖片 下面就顯示幾個小圓點 */ for (int i = 0; i < pageViews.size(); i++) { LinearLayout.LayoutParams margin = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); // 設定每個小圓點距離左邊的間距 margin.setMargins(15, 0, 0, 0); imageView = new ImageView(MainActivity.this); // 設定每個小圓點的寬高 imageView.setLayoutParams(new LayoutParams(25, 25)); 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); } // 給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); } } } } }