码迷,mamicode.com
首页 > 其他好文 > 详细

1.viewpager

时间:2015-10-27 21:47:05      阅读:266      评论:0      收藏:0      [点我收藏+]

标签:

  • ViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view。
  • ViewPager类直接继承了ViewGroup类,所以它是一个容器类,可以在其中添加其他的view类。
  • ViewPager类需要一个PagerAdapter适配器类给它提供数据。
  • ViewPager经常和Fragment一起使用,并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。
技术分享
实现这种效果:
有好几个页面,上面是viewpager可以左右滑,中间是按钮,只在最后一页显示出来,点击跳转到主页面。下面的几个点的实现可以是几张图片,也可以动态的添加几个点,小红点跟随页面动。
1.布局
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent" >
  4. <android.support.v4.view.ViewPager
  5. android:id="@+id/vp_guide"
  6. android:layout_width="match_parent"
  7. android:layout_height="match_parent" />
  8. <Button
  9. android:id="@+id/btn_start"
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:layout_alignParentBottom="true"
  13. android:layout_centerHorizontal="true"
  14. android:layout_marginBottom="60dp"
  15. android:background="@drawable/btn_guide_selector"
  16. android:padding="5dp"//padding是从内往外撑
  17. android:text="开始体验"
  18. android:visibility="invisible"
  19. android:textColor="@drawable/btn_guide_text_selector" />
  20. <RelativeLayout
  21. android:layout_width="wrap_content"
  22. android:layout_height="wrap_content"
  23. android:layout_alignParentBottom="true"
  24. android:layout_centerHorizontal="true"
  25. android:layout_marginBottom="20dp" >
  26. <LinearLayout
  27. android:id="@+id/ll_point_group"
  28. android:layout_width="wrap_content"
  29. android:layout_height="wrap_content"
  30. android:orientation="horizontal" >
  31. </LinearLayout>
  32. <View
  33. android:id="@+id/view_red_point"
  34. android:layout_width="10dp"
  35. android:layout_height="10dp"
  36. android:background="@drawable/shape_point_red" />
  37. </RelativeLayout>
  38. </RelativeLayout>
按钮的选择器
  1. //新建drawable目录,背景状态选择器
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item android:drawable="@drawable/button_red_pressed" android:state_pressed="true"/>
  4. <item android:drawable="@drawable/button_red_normal"/>
  5. </selector>
  1. //文字颜色选择器
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item android:state_pressed="true" android:color="@android:color/black"/>
  4. <item android:color="@android:color/white"/>
  5. </selector>
小点:
  1. //drawable目录下,形状选择器
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="oval" >
  4. <solid android:color="#f00" />
  5. </shape>
  6. <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子类
  1. //第一个参数为宽的设置,第二个参数为高的设置。
  2. LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(
  3. LinearLayout.LayoutParams.FILL_PARENT,
  4. LinearLayout.LayoutParams.WRAP_CONTENT
  5. );
  6. //调用addView()方法增加一个TextView到线性布局中
  7. mLayout.addView(textView, p);
  8. //比较简单的一个例子
  9.  /**<TextView             android:layout_width="fill_parent"             android:layout_height="wrap_content"             android:text="Text View"/>*/  效果一样
  1. /**
  2. * 新手引导
  3. *
  4. * @author Kevin
  5. *
  6. */
  7. public class GuideActivity extends Activity {
  8. private static final int[] mImageIds = new int[] { R.drawable.guide_1,
  9. R.drawable.guide_2, R.drawable.guide_3 };
  10. private ViewPager vpGuide;
  11. private ArrayList<ImageView> mImageViewList;
  12. private LinearLayout llPointGroup;// 引导圆点的父控件
  13. private int mPointWidth;// 圆点间的距离
  14. private View viewRedPoint;// 小红点
  15. private Button btnStart;// 开始体验
  16. @Override
  17. protected void onCreate(Bundle savedInstanceState) {
  18. super.onCreate(savedInstanceState);
  19. requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题
  20. setContentView(R.layout.activity_guide);
  21. vpGuide = (ViewPager) findViewById(R.id.vp_guide);
  22. llPointGroup = (LinearLayout) findViewById(R.id.ll_point_group);
  23. viewRedPoint = findViewById(R.id.view_red_point);
  24. btnStart = (Button) findViewById(R.id.btn_start);
  25. btnStart.setOnClickListener(new OnClickListener() {
  26. @Override
  27. public void onClick(View v) {
  28. // 更新sp, 表示已经展示了新手引导
  29. PrefUtils.setBoolean(GuideActivity.this,
  30. "is_user_guide_showed", true);
  31. // 跳转主页面
  32. startActivity(new Intent(GuideActivity.this, MainActivity.class));
  33. finish();
  34. }
  35. });
  36. initViews();
  37. vpGuide.setAdapter(new GuideAdapter());
  38. vpGuide.setOnPageChangeListener(new GuidePageListener());
  39. }
  40. /**
  41. * 初始化界面
  42. */
  43. private void initViews() {
  44. mImageViewList = new ArrayList<ImageView>();
  45. // 初始化引导页的3个页面
  46. for (int i = 0; i < mImageIds.length; i++) {
  47. ImageView image = new ImageView(this);
  48. image.setBackgroundResource(mImageIds[i]);// 设置引导页背景,注意是Resource
  49. mImageViewList.add(image);
  50. }
  51. // 初始化引导页的小圆点
  52. for (int i = 0; i < mImageIds.length; i++) {
  53. View point = new View(this);
  54. point.setBackgroundResource(R.drawable.shape_point_gray);// 设置引导页默认圆点
  55. LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10, 10);//通过params设置布局的参数,括号里是宽高
  56. if (i > 0) {
  57. params.leftMargin = 10;// 设置圆点间隔
  58. }
  59. point.setLayoutParams(params);// 设置圆点的大小
  60. llPointGroup.addView(point);// 将圆点添加给线性布局
  61. }
  62. // 获取视图树, 对layout结束事件进行监听,获取小灰点的距离
  63. llPointGroup.getViewTreeObserver().addOnGlobalLayoutListener(
  64. new OnGlobalLayoutListener() {
  65. // 当layout执行结束后回调此方法
  66. @Override
  67. public void onGlobalLayout() {
  68. System.out.println("layout 结束");
  69. llPointGroup.getViewTreeObserver()
  70. .removeGlobalOnLayoutListener(this);
  71. mPointWidth = llPointGroup.getChildAt(1).getLeft()
  72. - llPointGroup.getChildAt(0).getLeft();
  73. System.out.println("圆点距离:" + mPointWidth);
  74. }
  75. });
  76. }
  77. /**
  78. * ViewPager数据适配器
  79. *
  80. * @author Kevin
  81. *
  82. */
  83. class GuideAdapter extends PagerAdapter {
  84. @Override
  85. public int getCount() {
  86. return mImageIds.length;
  87. }
  88. @Override
  89. public boolean isViewFromObject(View arg0, Object arg1) {
  90. return arg0 == arg1;
  91. }
  92. @Override
  93. public Object instantiateItem(ViewGroup container, int position) {
  94. container.addView(mImageViewList.get(position));
  95. return mImageViewList.get(position);
  96. }
  97. @Override
  98. public void destroyItem(ViewGroup container, int position, Object object) {
  99. container.removeView((View) object);
  100. }
  101. }
  102. /**
  103. * viewpager的滑动监听
  104. *
  105. * @author Kevin
  106. *
  107. */
  108. class GuidePageListener implements OnPageChangeListener {
  109. // 滑动事件
  110. @Override
  111. public void onPageScrolled(int position, float positionOffset,
  112. int positionOffsetPixels) {
  113. // System.out.println("当前位置:" + position + ";百分比:" + positionOffset
  114. // + ";移动距离:" + positionOffsetPixels);
  115. int len = (int) (mPointWidth * positionOffset) + position
  116. * mPointWidth;
  117. RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) viewRedPoint
  118. .getLayoutParams();// 获取当前红点的布局参数
  119. params.leftMargin = len;// 设置左边距
  120. viewRedPoint.setLayoutParams(params);// 重新给小红点设置布局参数
  121. }
  122. // 某个页面被选中
  123. @Override
  124. public void onPageSelected(int position) {
  125. if (position == mImageIds.length - 1) {// 最后一个页面
  126. btnStart.setVisibility(View.VISIBLE);// 显示开始体验的按钮
  127. } else {
  128. btnStart.setVisibility(View.INVISIBLE);
  129. }
  130. }
  131. // 滑动状态发生变化
  132. @Override
  133. public void onPageScrollStateChanged(int state) {
  134. }
  135. }
  136. }
3.SharePreference封装类
  1. public class PrefUtils {
  2. public static final String PREF_NAME = "config";
  3. public static boolean getBoolean(Context ctx, String key,
  4. boolean defaultValue) {
  5. SharedPreferences sp = ctx.getSharedPreferences(PREF_NAME,
  6. Context.MODE_PRIVATE);
  7. return sp.getBoolean(key, defaultValue);
  8. }
  9. public static void setBoolean(Context ctx, String key, boolean value) {
  10. SharedPreferences sp = ctx.getSharedPreferences(PREF_NAME,
  11. Context.MODE_PRIVATE);
  12. sp.edit().putBoolean(key, value).commit();
  13. }
  14. }
2.闪屏页
只有一个imageview,主要是对动画的操作
  1. /**
  2. * 闪屏页
  3. */
  4. public class SplashActivity extends Activity {
  5. RelativeLayout rlRoot;
  6. @Override
  7. protected void onCreate(Bundle savedInstanceState) {
  8. super.onCreate(savedInstanceState);
  9. setContentView(R.layout.activity_splash);
  10. rlRoot = (RelativeLayout) findViewById(R.id.rl_root);
  11. startAnim();
  12. //LibUtils.doSomething();
  13. //rlRoot.setBackgroundResource(R.drawable.newscenter_press);
  14. }
  15. /**
  16. * 开启动画
  17. */
  18. private void startAnim() {
  19. // 动画集合
  20. AnimationSet set = new AnimationSet(false);
  21. // 旋转动画
  22. RotateAnimation rotate = new RotateAnimation(0, 360,
  23. Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
  24. 0.5f);
  25. rotate.setDuration(1000);// 动画时间
  26. rotate.setFillAfter(true);// 保持动画状态
  27. // 缩放动画
  28. ScaleAnimation scale = new ScaleAnimation(0, 1, 0, 1,
  29. Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
  30. 0.5f);
  31. scale.setDuration(1000);// 动画时间
  32. scale.setFillAfter(true);// 保持动画状态
  33. // 渐变动画
  34. AlphaAnimation alpha = new AlphaAnimation(0, 1);
  35. alpha.setDuration(2000);// 动画时间
  36. alpha.setFillAfter(true);// 保持动画状态
  37. set.addAnimation(rotate);
  38. set.addAnimation(scale);
  39. set.addAnimation(alpha);
  40. // 设置动画监听
  41. set.setAnimationListener(new AnimationListener() {
  42. @Override
  43. public void onAnimationStart(Animation animation) {
  44. }
  45. @Override
  46. public void onAnimationRepeat(Animation animation) {
  47. }
  48. // 动画执行结束
  49. @Override
  50. public void onAnimationEnd(Animation animation) {
  51. jumpNextPage();
  52. }
  53. });
  54. rlRoot.startAnimation(set);
  55. }
  56. /**
  57. * 跳转下一个页面
  58. */
  59. private void jumpNextPage() {
  60. // 判断之前有没有显示过新手引导
  61. boolean userGuide = PrefUtils.getBoolean(this, "is_user_guide_showed",
  62. false);
  63. if (!userGuide) {
  64. // 跳转到新手引导页
  65. startActivity(new Intent(SplashActivity.this, GuideActivity.class));
  66. } else {
  67. startActivity(new Intent(SplashActivity.this, MainActivity.class));
  68. }
  69. finish();
  70. }
  71. }





1.viewpager

标签:

原文地址:http://www.cnblogs.com/liuyu0529/p/4915336.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!