生活随笔
收集整理的這篇文章主要介紹了
ViewPager之引导界面---实现欢迎引导页面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近在看ViewPager，于是乎弄個引導界面來玩玩.....
引導界面，采用現在比較主流的方式：左右滑動加載；小圓點提示；在最后一個頁面，點擊button，進入功能界面
第一種： ViewFlipper + GestureDetector
第二種： ActivityGroup +?? GestureDetector
第三種： ViewPager? (Android3.0+)
第四種： ViewFlow (開源項目)
這里弄的是第三種，
一、先看的效果圖
二、編碼前準備
? ?? ? ViewPager是Android3.0之后提供的新特性，所以要想讓你的應用向下兼容就必須要android-support-v4.jar這個包的支持，這是一個來自google提供的一個附加包。
項目結構圖:
1、??布局界面,加入ViewPager組件，以及底部的引導小點，guide_layout.xml:
[html] view plaincopy
<RelativeLayout?xmlns:android="http://schemas.android.com/apk/res/android"??????xmlns:tools="http://schemas.android.com/tools"??????android:layout_width="wrap_content"??????android:layout_height="wrap_content">????????<android.support.v4.view.ViewPager??????????android:id="@+id/viewpager"??????????android:layout_width="fill_parent"??????????android:layout_height="fill_parent"?/>????????<LinearLayout??????????android:id="@+id/point"??????????android:layout_width="wrap_content"??????????android:layout_height="wrap_content"??????????android:layout_alignParentBottom="true"??????????android:layout_centerHorizontal="true"??????????android:layout_marginBottom="24.0dip"??????????android:orientation="horizontal"??????????>?????????????<ImageView??????????????android:layout_width="wrap_content"??????????????android:layout_height="wrap_content"??????????????android:layout_gravity="center_vertical"??????????????android:clickable="true"??????????????android:padding="15.0dip"??????????????android:src="@drawable/point"/>?????????????<ImageView??????????????android:layout_width="wrap_content"??????????????android:layout_height="wrap_content"??????????????android:layout_gravity="center_vertical"??????????????android:clickable="true"??????????????android:padding="15.0dip"??????????????android:src="@drawable/point"/>?????????????<ImageView??????????????android:layout_width="wrap_content"??????????????android:layout_height="wrap_content"??????????????android:layout_gravity="center_vertical"??????????????android:clickable="true"??????????????android:padding="15.0dip"??????????????android:src="@drawable/point"/>?????????????<ImageView??????????????android:layout_width="wrap_content"??????????????android:layout_height="wrap_content"??????????????android:layout_gravity="center_vertical"??????????????android:clickable="true"??????????????android:padding="15.0dip"??????????????android:src="@drawable/point"/>??????</LinearLayout>??</RelativeLayout>??
guide_page1.xml? 注guide_page2.xml，guide_page3.xml布局一樣
[html] view plaincopy
<?xml?version="1.0"?encoding="utf-8"?>??<LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"??????android:id="@+id/guide1"??????android:layout_width="match_parent"??????android:layout_height="match_parent"??????android:background="@drawable/view_guide1"??????android:orientation="vertical"?>????</LinearLayout>??
guide_page4.xml
[html] view plaincopy
<?xml?version="1.0"?encoding="utf-8"?>??<RelativeLayout?xmlns:android="http://schemas.android.com/apk/res/android"??????android:id="@+id/guide4"??????android:layout_width="match_parent"??????android:layout_height="match_parent"??????android:orientation="vertical"?android:background="@drawable/view_guide4">????????<LinearLayout??????????android:id="@+id/layout1"??????????android:layout_width="match_parent"??????????android:layout_height="100dp"??????????android:layout_alignParentBottom="true"??????????android:orientation="vertical"?android:gravity="center_vertical">????????????<Button??????????????android:id="@+id/ok"??????????????android:layout_width="fill_parent"??????????????android:layout_height="wrap_content"??????????????android:layout_marginLeft="5dp"??????????????android:layout_marginRight="5dp"??????????????android:layout_marginTop="5dp"??????????????android:gravity="center"??????????????android:layout_gravity="center_vertical|center_horizontal"??????????????android:text="馬上體驗"??????????????android:background="@drawable/start_btn"?/>????????</LinearLayout>????</RelativeLayout>??
point.xml：控制小點的圖片，用一個selector來控制顏色
[html] view plaincopy
<?xml?version="1.0"?encoding="UTF-8"?>??<selector????xmlns:android="http://schemas.android.com/apk/res/android">??????<item?android:state_enabled="true"?android:drawable="@drawable/point_normal"?/>??????<item?android:state_enabled="false"?android:drawable="@drawable/point_select"?/>??</selector>??
三、主程序入口類，
MainActivity.java：
[html] view plaincopy
public?class?MainActivity?extends?Activity?implements?OnClickListener,OnPageChangeListener?{??????//定義ViewPager對象??????private?ViewPager?viewPager;????????????//定義ViewPager適配器??????private?ViewPagerAdapter?vpAdapter;????????????//定義一個ArrayList來存放View??????private?ArrayList<View>?views;????????//?定義各個界面View對象??????private?View?view1,?view2,?view3,?view4;????????????????//底部小點的圖片??????private?ImageView[]?points;????????????//記錄當前選中位置??????private?int?currentIndex;??????????????????????@Override??????protected?void?onCreate(Bundle?savedInstanceState)?{??????????super.onCreate(savedInstanceState);????????????????????setContentView(R.layout.guide_layout);????????????????????initView();??????????initData();???????}????????/**???????*?初始化組件???????*/??????private?void?initView()?{??????????//實例化各個界面的布局對象???????????LayoutInflater?mLi?=?LayoutInflater.from(this);??????????view1?=?mLi.inflate(R.layout.guide_page1,?null);??????????view2?=?mLi.inflate(R.layout.guide_page2,?null);??????????view3?=?mLi.inflate(R.layout.guide_page3,?null);??????????view4?=?mLi.inflate(R.layout.guide_page4,?null);????????????????//?實例化ViewPager??????????viewPager?=?(ViewPager)?findViewById(R.id.viewpager);??????????//?實例化ArrayList對象??????????views?=?new?ArrayList<View>();??????????//?實例化ViewPager適配器??????????vpAdapter?=?new?ViewPagerAdapter(views);??????????//實例化開始按鈕??????????//startBt?=?(Button)?view4.findViewById(R.id.startBtn);??????}??????/**???????*?初始化數據???????*/??????private?void?initData()?{??????????//?設置監聽??????????viewPager.setOnPageChangeListener(this);??????????//?設置適配器數據??????????viewPager.setAdapter(vpAdapter);????????????//將要分頁顯示的View裝入數組中????????????????views.add(view1);??????????views.add(view2);??????????views.add(view3);??????????views.add(view4);???????????????????????????????//初始化底部小點??????????initPoint(views.size());??????}??????/**???????*?初始化底部小點???????*/??????private?void?initPoint(int?views){??????????LinearLayout?linearLayout?=?(LinearLayout)?findViewById(R.id.point);???????????????????????????points?=?new?ImageView[views];????????????//循環取得小點圖片??????????for?(int?i?=?0;?i?<?views;?i++)?{??????????????//得到一個LinearLayout下面的每一個子元素??????????????points[i]?=?(ImageView)?linearLayout.getChildAt(i);??????????????//默認都設為灰色??????????????points[i].setEnabled(true);??????????????//給每個小點設置監聽??????????????points[i].setOnClickListener(this);??????????????//設置位置tag，方便取出與當前位置對應??????????????points[i].setTag(i);??????????}????????????????????//設置當面默認的位置??????????currentIndex?=?0;??????????//設置為白色，即選中狀態??????????points[currentIndex].setEnabled(false);??????}????????????/**???????*?當滑動狀態改變時調用???????*/??????@Override??????public?void?onPageScrollStateChanged(int?arg0)?{????????}????????????/**???????*?當當前頁面被滑動時調用???????*/????????@Override??????public?void?onPageScrolled(int?arg0,?float?arg1,?int?arg2)?{????????}????????????/**???????*?當新的頁面被選中時調用???????*/????????@Override??????public?void?onPageSelected(int?position)?{??????????//設置底部小點選中狀態??????????setCurDot(position);??????}????????/**???????*?通過點擊事件來切換當前的頁面???????*/??????@Override??????public?void?onClick(View?v)?{???????????int?position?=?(Integer)v.getTag();???????????setCurView(position);???????????setCurDot(position);?????????????}????????/**???????*?設置當前頁面的位置???????*/??????private?void?setCurView(int?position){???????????if?(position?<?0?||?position?>=?4)?{???????????????return;???????????}???????????viewPager.setCurrentItem(position);???????}?????????/**???????*?設置當前的小點的位置???????*/??????private?void?setCurDot(int?positon){???????????if?(positon?<?0?||?positon?>?3?||?currentIndex?==?positon)?{???????????????return;???????????}???????????points[positon].setEnabled(false);???????????points[currentIndex].setEnabled(true);?????????????currentIndex?=?positon;???????}????????
ViewPager適配器代碼，
ViewPagerAdapter.java：
[java] view plaincopy
public?class?ViewPagerAdapter?extends?PagerAdapter?{??????????????????private?ArrayList<View>?views;????????????public?ViewPagerAdapter?(ArrayList<View>?views){??????????this.views?=?views;??????}???????????????????????@Override??????public?int?getCount()?{???????????if?(views?!=?null)?{???????????????return?views.size();???????????}?????????????????return?0;??????}????????????????@Override??????public?Object?instantiateItem(View?view,?int?position)?{???????????????????((ViewPager)?view).addView(views.get(position),?0);???????????????????return?views.get(position);??????}????????????????????@Override??????public?boolean?isViewFromObject(View?view,?Object?arg1)?{??????????return?(view?==?arg1);??????}????????????????@Override??????public?void?destroyItem(View?view,?int?position,?Object?arg2)?{??????????((ViewPager)?view).removeView(views.get(position));?????????????}??
參考：
http://www.apkbus.com/portal.php?mod=view&aid=4206
源碼可以自己到我的資源庫下載http://download.csdn.net/detail/h378588270/8291497
總結
以上是生活随笔為你收集整理的ViewPager之引导界面---实现欢迎引导页面的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
