main.xml
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <include layout="@layout/item_header" /> <android.support.v4.view.ViewPager android:id="@+id/guidePages" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout> <!-- 指引图标 --> <LinearLayout android:id="@+id/viewGroup" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_marginBottom="40dp" android:gravity="center_horizontal" android:orientation="horizontal" > </LinearLayout> </FrameLayout>
item01:
<?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" > <LinearLayout android:id="@+id/linearLayout02" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/divider_horizontal_line" android:orientation="vertical" /> <ImageView android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/feature_guide_0" /> <LinearLayout android:id="@+id/linearLayout2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/bg" android:orientation="vertical" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="30px" android:background="@drawable/divider_horizontal_line" android:orientation="vertical" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="30px" android:paddingRight="30px" android:text="@string/text1" android:textColor="#000000" /> </LinearLayout> </LinearLayout>
MainActivity:
package com.ly.test; 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.Window; import android.view.ViewGroup.LayoutParams; import android.widget.ImageView; /** * Android实现左右滑动指引效果 * * @Description: Android实现左右滑动指引效果 * */ public class GuideViewTestActivity extends Activity { private ViewPager viewPager; private ArrayList<View> pageViews; private ImageView imageView; private ImageView[] imageViews; private ViewGroup main;// 包裹滑动图片LinearLayout private ViewGroup group;// 包裹小圆点的LinearLayout /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); LayoutInflater inflater = getLayoutInflater(); pageViews = new ArrayList<View>(); pageViews.add(inflater.inflate(R.layout.item05, null)); pageViews.add(inflater.inflate(R.layout.item06, null)); pageViews.add(inflater.inflate(R.layout.item01, null)); pageViews.add(inflater.inflate(R.layout.item02, null)); pageViews.add(inflater.inflate(R.layout.item03, null)); pageViews.add(inflater.inflate(R.layout.item04, null)); // 有几个布局页面就有几个圆点图片 imageViews = new ImageView[pageViews.size()]; main = (ViewGroup) inflater.inflate(R.layout.main, null); viewPager = (ViewPager) main.findViewById(R.id.guidePages); group = (ViewGroup) main.findViewById(R.id.viewGroup); // 通过for循环设置圆点图片的布局 for (int i = 0; i < pageViews.size(); i++) { imageView = new ImageView(GuideViewTestActivity.this); 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); } group.addView(imageViews[i]); } setContentView(main); viewPager.setAdapter(new GuidePageAdapter()); 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) { return super.getItemPosition(object); } @Override public void destroyItem(View arg0, int arg1, Object arg2) { ((ViewPager) arg0).removeView(pageViews.get(arg1)); } @Override public Object instantiateItem(View arg0, int arg1) { ((ViewPager) arg0).addView(pageViews.get(arg1)); return pageViews.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) { } } // 指引页面更改事件监听器 class GuidePageChangeListener 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); } } } } }
没有列出所有的代码,详见附件