zoukankan      html  css  js  c++  java
  • 1.viewpager

    • 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. }





  • 相关阅读:
    [Oracle工程师手记]如何收集 RMAN 工作时的 10046 trace
    [Linux]Linux环境,如何查找一个目录下所有包含特定字符串的文件
    [Oracle工程师手记]如何找到 RMAN 的所有 session
    PowerShell提交HTTP Request Post请求
    PowerShell计算字符串MD5 Hash值
    《异类》笔记
    《哈弗商学院 判断与决策心理学课》笔记
    《影响力》笔记
    《金字塔原理》笔记
    三月十九日,偶感
  • 原文地址:https://www.cnblogs.com/sixrain/p/4915336.html
Copyright © 2011-2022 走看看