一:首先上代码,此处是一个ViewPager 当作引导页面,用三张图片作为引导界面,实现小红点左右滑动,最后一页点击Button 开启登录页面:
二:xml页面,首先准备三张图片
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> <Button android:id="@+id/start" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:text="@string/starttxt" android:textColor="#ffffff" android:background="#00000000" android:textSize="20sp" android:visibility="invisible" android:layout_marginTop="530dp"/> <RelativeLayout android:layout_below="@+id/start" android:layout_centerHorizontal="true" android:layout_width="wrap_content" android:layout_height="wrap_content"> <LinearLayout android:id="@+id/container" android:layout_width="wrap_content" android:layout_height="wrap_content"> </LinearLayout> <ImageView android:id="@+id/iv_p" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/shaped"/> </RelativeLayout> </RelativeLayout>
Activity 页面代码:
package com.luosnn.socialstudy; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; import android.view.ViewGroup; import android.view.ViewTreeObserver; import android.view.Window; import android.view.WindowManager; import android.widget.Button; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.RelativeLayout; import java.util.ArrayList; import java.util.List; import static com.luosnn.socialstudy.Util.PrefUtil.putBoolean; /** * Created by 罗申申 on 2017/8/26. */ public class GuideAct extends Activity implements View.OnClickListener { ViewPager v; LinearLayout container; private int[] img = {R.drawable.first,R.drawable.second,R.drawable.third}; List<ImageView> list = new ArrayList<>(); private static int myd; ImageView redpo; Button button; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.guide); button = (Button) findViewById(R.id.start); button.setOnClickListener(this); initview(); initData(); } public void initview() { v = (ViewPager) findViewById(R.id.vp); container = (LinearLayout) findViewById(R.id.container); redpo = (ImageView) findViewById(R.id.iv_p); } public void initData(){ for (int i =0;i<img.length;i++){ ImageView image = new ImageView(this); image.setBackgroundResource(img[i]); list.add(image); // 初始化引导页面小圆点 ImageView point = new ImageView(this); point.setImageResource(R.drawable.shape); //布局参数 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewPager.LayoutParams.WRAP_CONTENT, WindowManager.LayoutParams.WRAP_CONTENT); if (i>0){ params.leftMargin = 20; //左边距10 } point.setLayoutParams(params); container.addView(point); } v.setAdapter( new Adapter()); // myd = container.getChildAt(1).getLeft()-container.getChildAt(0).getLeft(); //更新小红点位置 v.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { //监听页面移动 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { int leftMargin = (int) (myd*positionOffset+0.5f+position*myd); //获取小红点布局参数 RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) redpo.getLayoutParams(); params.leftMargin = leftMargin; redpo.setLayoutParams(params); } @Override public void onPageSelected(int position) { if (position ==img.length-1){ button.setVisibility(View.VISIBLE); }else { button.setVisibility(View.INVISIBLE); } } @Override public void onPageScrollStateChanged(int state) { } }); //视图树 redpo.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() { @Override //一旦视图树调用完成就会调用此方法 代表试图位置已经确定 public void onGlobalLayout() { //小红点移动距离 myd = container.getChildAt(1).getLeft()-container.getChildAt(0).getLeft(); //移除观察者 节省资源 redpo.getViewTreeObserver().removeGlobalOnLayoutListener(this); } }); } @Override public void onClick(View v) { //记录引导页状态 putBoolean(this,"show",true); switch (v.getId()){ case R.id.start: startActivity(new Intent(GuideAct.this, Login.class)); overridePendingTransition(R.anim.zoomin, R.anim.zoomout); finish(); } } class Adapter extends PagerAdapter{ @Override public int getCount() { return list.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } //初始化布局 @Override public Object instantiateItem(ViewGroup container, int position) { ImageView view = list.get(position); container.addView(view); return view; } //销毁布局 @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } } }