<button id="u2w23"></button>

<tbody id="u2w23"><track id="u2w23"></track></tbody><dd id="u2w23"><track id="u2w23"></track></dd><button id="u2w23"><acronym id="u2w23"></acronym></button> <tbody id="u2w23"><noscript id="u2w23"></noscript></tbody>

  • <button id="u2w23"></button><li id="u2w23"><acronym id="u2w23"><cite id="u2w23"></cite></acronym></li>

  • android UI進階之用ViewPager實現歡迎引導頁面

    [來源] 達內    [編輯] 達內   [時間]2012-08-30

    注意實現OnClickListener, OnPageChangeListener接口,監聽小點的點擊事件以及viewPager的滑動,在相應的回調方法中設置小點的enable狀態,我相信這個部分代碼比我講的清楚,就是判斷當前選中的位置對相應的小點進行設置

    ViewPager需要android-support-v4.jar這個包的支持,來自google提供的一個附加包。大家搜下即可。
    ViewPager主要用來組織一組數據,并且通過左右滑動的方式來展示。
    現在的大多數應用都會有一個歡迎引導頁面,如圖所示,通過左右滑動來告知用戶一些功能特性。

    這個引導圖效果用ViewPager可以很輕松的實現。
    正如前面所說,ViewPager是用來展示一組數據的,所以肯定需要Adapter來綁定數據和view。先寫一個Adapter:
    [java] view plaincopy
    1. package com.notice.viewpagerd;
    2.
    3. import java.util.List;
    4.
    5. import android.os.Parcelable;
    6. import android.support.v4.view.PagerAdapter;
    7. import android.support.v4.view.ViewPager;
    8. import android.view.View;
    9.
    10. public class ViewPagerAdapter extends PagerAdapter{
    11.
    12. //界面列表
    13. private List<View> views;
    14.
    15. public ViewPagerAdapter (List<View> views){
    16. this.views = views;
    17. }
    18.
    19. //銷毀arg1位置的界面
    20. @Override
    21. public void destroyItem(View arg0, int arg1, Object arg2) {
    22. ((ViewPager) arg0).removeView(views.get(arg1));
    23. }
    24.
    25. @Override
    26. public void finishUpdate(View arg0) {
    27. // TODO Auto-generated method stub
    28.
    29. }
    30.
    31. //獲得當前界面數
    32. @Override
    33. public int getCount() {
    34. if (views != null)
    35. {
    36. return views.size();
    37. }
    38.
    39. return 0;
    40. }
    41.
    42.
    43. //初始化arg1位置的界面
    44. @Override
    45. public Object instantiateItem(View arg0, int arg1) {
    46.
    47. ((ViewPager) arg0).addView(views.get(arg1), 0);
    48.
    49. return views.get(arg1);
    50. }
    51.
    52. //判斷是否由對象生成界面
    53. @Override
    54. public boolean isViewFromObject(View arg0, Object arg1) {
    55. return (arg0 == arg1);
    56. }
    57.
    58. @Override
    59. public void restoreState(Parcelable arg0, ClassLoader arg1) {
    60. // TODO Auto-generated method stub
    61.
    62. }
    63.
    64. @Override
    65. public Parcelable saveState() {
    66. // TODO Auto-generated method stub
    67. return null;
    68. }
    69.
    70. @Override
    71. public void startUpdate(View arg0) {
    72. // TODO Auto-generated method stub
    73.
    74. }
    75.
    76. }

    這里我們要綁定的每一個item就是一個引導界面,我們用一個list來保存。
    通過繼承PagerAdapter,并實現幾個我寫注釋的方法即可。
    布局界面比較簡單,加入ViewPager組件,以及底部的引導小點:
    [html] view plaincopy
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3. android:layout_width="fill_parent"
    4. android:layout_height="fill_parent"
    5. android:orientation="vertical" >
    6.
    7. <android.support.v4.view.ViewPager
    8. android:id="@+id/viewpager"
    9. android:layout_width="fill_parent"
    10. android:layout_height="fill_parent"
    11. />
    12.
    13.
    14. <LinearLayout
    15. android:id="@+id/ll"
    16. android:orientation="horizontal"
    17. android:layout_width="wrap_content"
    18. android:layout_height="wrap_content"
    19. android:layout_marginBottom="24.0dip"
    20. android:layout_alignParentBottom="true"
    21. android:layout_centerHorizontal="true">
    22.
    23. <ImageView
    24. android:layout_width="wrap_content"
    25. android:layout_height="wrap_content"
    26. android:layout_gravity="center_vertical"
    27. android:clickable="true"
    28. android:padding="15.0dip"
    29. android:src="@drawable/dot" />
    30.
    31. <ImageView
    32. android:layout_width="wrap_content"
    33. android:layout_height="wrap_content"
    34. android:layout_gravity="center_vertical"
    35. android:clickable="true"
    36. android:padding="15.0dip"
    37. android:src="@drawable/dot" />
    38.
    39. <ImageView
    40. android:layout_width="wrap_content"
    41. android:layout_height="wrap_content"
    42. android:layout_gravity="center_vertical"
    43. android:clickable="true"
    44. android:padding="15.0dip"
    45. android:src="@drawable/dot" />
    46.
    47. <ImageView
    48. android:layout_width="wrap_content"
    49. android:layout_height="wrap_content"
    50. android:layout_gravity="center_vertical"
    51. android:clickable="true"
    52. android:padding="15.0dip"
    53. android:src="@drawable/dot" />
    54.
    55. </LinearLayout>
    56.
    57. </RelativeLayout>

    其中小點的圖片用一個selector來控制顏色(設置item的enable為true或者false)
    dot.xml:
    [html] view plaincopy
    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <selector
    3. xmlns:android="http://schemas.android.com/apk/res/android">
    4. <item android:state_enabled="true" android:drawable="@drawable/dark_dot" />
    5. <item android:state_enabled="false" android:drawable="@drawable/white_dot" />
    6. </selector>

    下面就是寫Activity了。
    [java] view plaincopy
    1. package com.notice.viewpagerd;
    2.
    3. import java.util.ArrayList;
    4. import java.util.List;
    5.
    6. import android.app.Activity;
    7. import android.os.Bundle;
    8. import android.support.v4.view.ViewPager;
    9. import android.support.v4.view.ViewPager.OnPageChangeListener;
    10. import android.view.View;
    11. import android.view.View.OnClickListener;
    12. import android.widget.ImageView;
    13. import android.widget.LinearLayout;
    14.
    15. public class ViewPagerDemoActivity extends Activity implements OnClickListener, OnPageChangeListener{
    16.
    17. private ViewPager vp;
    18. private ViewPagerAdapter vpAdapter;
    19. private List<View> views;
    20.
    21. //引導圖片資源
    22. private static final int[] pics = { R.drawable.whatsnew_00,
    23. R.drawable.whatsnew_01, R.drawable.whatsnew_02,
    24. R.drawable.whatsnew_03 };
    25.
    26. //底部小店圖片
    27. private ImageView[] dots ;
    28.
    29. //記錄當前選中位置
    30. private int currentIndex;
    31.
    32. /** Called when the activity is first created. */
    33. @Override
    34. public void onCreate(Bundle savedInstanceState) {
    35. super.onCreate(savedInstanceState);
    36. setContentView(R.layout.main);
    37.
    38. views = new ArrayList<View>();
    39.
    40. LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
    41. LinearLayout.LayoutParams.WRAP_CONTENT);
    42.
    43. //初始化引導圖片列表
    44. for(int i=0; i<pics.length; i++) {
    45. ImageView iv = new ImageView(this);
    46. iv.setLayoutParams(mParams);
    47. iv.setImageResource(pics[i]);
    48. views.add(iv);
    49. }
    50. vp = (ViewPager) findViewById(R.id.viewpager);
    51. //初始化Adapter
    52. vpAdapter = new ViewPagerAdapter(views);
    53. vp.setAdapter(vpAdapter);
    54. //綁定回調
    55. vp.setOnPageChangeListener(this);
    56.
    57. //初始化底部小點
    58. initDots();
    59.
    60. }
    61.
    62. private void initDots() {
    63. LinearLayout ll = (LinearLayout) findViewById(R.id.ll);
    64.
    65. dots = new ImageView[pics.length];
    66.
    67. //循環取得小點圖片
    68. for (int i = 0; i < pics.length; i++) {
    69. dots[i] = (ImageView) ll.getChildAt(i);
    70. dots[i].setEnabled(true);//都設為灰色
    71. dots[i].setOnClickListener(this);
    72. dots[i].setTag(i);//設置位置tag,方便取出與當前位置對應
    73. }
    74.
    75. currentIndex = 0;
    76. dots[currentIndex].setEnabled(false);//設置為白色,即選中狀態
    77. }
    78.
    79. /**
    80. *設置當前的引導頁
    81. */
    82. private void setCurView(int position)
    83. {
    84. if (position < 0 || position >= pics.length) {
    85. return;
    86. }
    87.
    88. vp.setCurrentItem(position);
    89. }
    90.
    91. /**
    92. *這只當前引導小點的選中
    93. */
    94. private void setCurDot(int positon)
    95. {
    96. if (positon < 0 || positon > pics.length - 1 || currentIndex == positon) {
    97. return;
    98. }
    99.
    100. dots[positon].setEnabled(false);
    101. dots[currentIndex].setEnabled(true);
    102.
    103. currentIndex = positon;
    104. }
    105.
    106. //當滑動狀態改變時調用
    107. @Override
    108. public void onPageScrollStateChanged(int arg0) {
    109. // TODO Auto-generated method stub
    110.
    111. }
    112.
    113. //當當前頁面被滑動時調用
    114. @Override
    115. public void onPageScrolled(int arg0, float arg1, int arg2) {
    116. // TODO Auto-generated method stub
    117.
    118. }
    119.
    120. //當新的頁面被選中時調用
    121. @Override
    122. public void onPageSelected(int arg0) {
    123. //設置底部小點選中狀態
    124. setCurDot(arg0);
    125. }
    126.
    127. @Override
    128. public void onClick(View v) {
    129. int position = (Integer)v.getTag();
    130. setCurView(position);
    131. setCurDot(position);
    132. }
    133. }

    注意實現OnClickListener, OnPageChangeListener接口,監聽小點的點擊事件以及viewPager的滑動,在相應的回調方法中設置小點的enable狀態,我相信這個部分代碼比我講的清楚,就是判斷當前選中的位置對相應的小點進行設置~
    可以看到ViewPager還是一個非常簡單,也非常實用的一個控件。

    資源下載

    ?