实现这种效果:
有好几个页面,上面是viewpager可以左右滑,中间是按钮,只在最后一页显示出来,点击跳转到主页面。下面的几个点的实现可以是几张图片,也可以动态的添加几个点,小红点跟随页面动。
1.布局
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <android.support.v4.view.ViewPager android:id="@+id/vp_guide" android:layout_width="match_parent" android:layout_height="match_parent" /> <Button android:id="@+id/btn_start" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="60dp" android:background="@drawable/btn_guide_selector" android:padding="5dp"//padding是从内往外撑 android:text="开始体验" android:visibility="invisible" android:textColor="@drawable/btn_guide_text_selector" /> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="20dp" > <LinearLayout android:id="@+id/ll_point_group" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" > </LinearLayout> <View android:id="@+id/view_red_point" android:layout_width="10dp" android:layout_height="10dp" android:background="@drawable/shape_point_red" /> </RelativeLayout></RelativeLayout>
按钮的选择器
//新建drawable目录,背景状态选择器<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/button_red_pressed" android:state_pressed="true"/> <item android:drawable="@drawable/button_red_normal"/></selector>
//文字颜色选择器<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:color="@android:color/black"/> <item android:color="@android:color/white"/></selector>
小点:
//drawable目录下,形状选择器<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <solid android:color="#f00" /></shape><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <solid android:color="@android:color/darker_gray" /></shape>
2.主页面
LayoutParams相当于一个Layout的信息包,它封装了Layout的位置、高、宽等信息。其实这个LayoutParams类是用于child view(子视图) 向 parent view(父视图)传达自己的意愿的一个东西(孩子想变成什么样向其父亲说明)其实子视图父视图可以简单理解成
一个LinearLayout 和 这个LinearLayout里边一个 TextView 的关系 TextView 就算LinearLayout的子视图 child view 。需要注意的是LayoutParams只是ViewGroup的一个内部类这里边这个也就是ViewGroup里边这个LayoutParams类是 base class 基类实际上每个不同的ViewGroup都有自己的LayoutParams子类
//第一个参数为宽的设置,第二个参数为高的设置。 LinearLayout.LayoutParams p = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT ); //调用addView()方法增加一个TextView到线性布局中 mLayout.addView(textView, p); //比较简单的一个例子 /**<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text View"/>*/ 效果一样
/** * 新手引导 * * @author Kevin * */public class GuideActivity extends Activity { private static final int[] mImageIds = new int[] { R.drawable.guide_1, R.drawable.guide_2, R.drawable.guide_3 }; private ViewPager vpGuide; private ArrayList<ImageView> mImageViewList; private LinearLayout llPointGroup;// 引导圆点的父控件 private int mPointWidth;// 圆点间的距离 private View viewRedPoint;// 小红点 private Button btnStart;// 开始体验 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题 setContentView(R.layout.activity_guide); vpGuide = (ViewPager) findViewById(R.id.vp_guide); llPointGroup = (LinearLayout) findViewById(R.id.ll_point_group); viewRedPoint = findViewById(R.id.view_red_point); btnStart = (Button) findViewById(R.id.btn_start); btnStart.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // 更新sp, 表示已经展示了新手引导 PrefUtils.setBoolean(GuideActivity.this, "is_user_guide_showed", true); // 跳转主页面 startActivity(new Intent(GuideActivity.this, MainActivity.class)); finish(); } }); initViews(); vpGuide.setAdapter(new GuideAdapter()); vpGuide.setOnPageChangeListener(new GuidePageListener()); } /** * 初始化界面 */ private void initViews() { mImageViewList = new ArrayList<ImageView>(); // 初始化引导页的3个页面 for (int i = 0; i < mImageIds.length; i++) { ImageView image = new ImageView(this); image.setBackgroundResource(mImageIds[i]);// 设置引导页背景,注意是Resource mImageViewList.add(image); } // 初始化引导页的小圆点 for (int i = 0; i < mImageIds.length; i++) { View point = new View(this); point.setBackgroundResource(R.drawable.shape_point_gray);// 设置引导页默认圆点 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10, 10);//通过params设置布局的参数,括号里是宽高 if (i > 0) { params.leftMargin = 10;// 设置圆点间隔 } point.setLayoutParams(params);// 设置圆点的大小 llPointGroup.addView(point);// 将圆点添加给线性布局 } // 获取视图树, 对layout结束事件进行监听,获取小灰点的距离 llPointGroup.getViewTreeObserver().addOnGlobalLayoutListener( new OnGlobalLayoutListener() { // 当layout执行结束后回调此方法 @Override public void onGlobalLayout() { System.out.println("layout 结束"); llPointGroup.getViewTreeObserver() .removeGlobalOnLayoutListener(this); mPointWidth = llPointGroup.getChildAt(1).getLeft() - llPointGroup.getChildAt(0).getLeft(); System.out.println("圆点距离:" + mPointWidth); } }); } /** * ViewPager数据适配器 * * @author Kevin * */ class GuideAdapter extends PagerAdapter { @Override public int getCount() { return mImageIds.length; } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(mImageViewList.get(position)); return mImageViewList.get(position); } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } } /** * viewpager的滑动监听 * * @author Kevin * */ class GuidePageListener implements OnPageChangeListener { // 滑动事件 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { // System.out.println("当前位置:" + position + ";百分比:" + positionOffset // + ";移动距离:" + positionOffsetPixels); int len = (int) (mPointWidth * positionOffset) + position * mPointWidth; RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) viewRedPoint .getLayoutParams();// 获取当前红点的布局参数 params.leftMargin = len;// 设置左边距 viewRedPoint.setLayoutParams(params);// 重新给小红点设置布局参数 } // 某个页面被选中 @Override public void onPageSelected(int position) { if (position == mImageIds.length - 1) {// 最后一个页面 btnStart.setVisibility(View.VISIBLE);// 显示开始体验的按钮 } else { btnStart.setVisibility(View.INVISIBLE); } } // 滑动状态发生变化 @Override public void onPageScrollStateChanged(int state) { } }}
3.SharePreference封装类
public class PrefUtils { public static final String PREF_NAME = "config"; public static boolean getBoolean(Context ctx, String key, boolean defaultValue) { SharedPreferences sp = ctx.getSharedPreferences(PREF_NAME, Context.MODE_PRIVATE); return sp.getBoolean(key, defaultValue); } public static void setBoolean(Context ctx, String key, boolean value) { SharedPreferences sp = ctx.getSharedPreferences(PREF_NAME, Context.MODE_PRIVATE); sp.edit().putBoolean(key, value).commit(); }}
2.闪屏页
只有一个imageview,主要是对动画的操作
/** * 闪屏页 */public class SplashActivity extends Activity { RelativeLayout rlRoot; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_splash); rlRoot = (RelativeLayout) findViewById(R.id.rl_root); startAnim(); //LibUtils.doSomething(); //rlRoot.setBackgroundResource(R.drawable.newscenter_press); } /** * 开启动画 */ private void startAnim() { // 动画集合 AnimationSet set = new AnimationSet(false); // 旋转动画 RotateAnimation rotate = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); rotate.setDuration(1000);// 动画时间 rotate.setFillAfter(true);// 保持动画状态 // 缩放动画 ScaleAnimation scale = new ScaleAnimation(0, 1, 0, 1, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); scale.setDuration(1000);// 动画时间 scale.setFillAfter(true);// 保持动画状态 // 渐变动画 AlphaAnimation alpha = new AlphaAnimation(0, 1); alpha.setDuration(2000);// 动画时间 alpha.setFillAfter(true);// 保持动画状态 set.addAnimation(rotate); set.addAnimation(scale); set.addAnimation(alpha); // 设置动画监听 set.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation animation) { } @Override public void onAnimationRepeat(Animation animation) { } // 动画执行结束 @Override public void onAnimationEnd(Animation animation) { jumpNextPage(); } }); rlRoot.startAnimation(set); } /** * 跳转下一个页面 */ private void jumpNextPage() { // 判断之前有没有显示过新手引导 boolean userGuide = PrefUtils.getBoolean(this, "is_user_guide_showed", false); if (!userGuide) { // 跳转到新手引导页 startActivity(new Intent(SplashActivity.this, GuideActivity.class)); } else { startActivity(new Intent(SplashActivity.this, MainActivity.class)); } finish(); }}