Android利用ViewPager實現(xiàn)用戶引導(dǎo)界面效果的方法
本文實例講述了Android利用ViewPager實現(xiàn)用戶引導(dǎo)界面效果。分享給大家供大家參考,具體如下:
我相信有很多朋友在裝完軟件首次打開時,有很多軟件都有一個軟件功能介紹,
例如剛裝完微信打開它,有很多介紹微信功能的圖片,并且在屏幕下方有很多小圓點提示你當(dāng)前圖片的位置。
今天我就來實現(xiàn)這么個功能
所實現(xiàn)的功能:
1.可以左右滑動功能圖片。
2.圖片的索引 看出當(dāng)前圖片所在的位置。
3.可循環(huán)滑動。
4.圖片的索引帶有動畫效果。
本次學(xué)習(xí)主要是利用ViewPager實現(xiàn)用戶引導(dǎo)界面
在這里,我們需要用到google提到的一個支持包——Android-support-v4.jar,這個包包含了一些非常有用的類,其中就是ViewPager類來實現(xiàn)頁面之間的切換操作,可以去官網(wǎng)下載這個包 使用谷歌提供的支持庫(Android)
關(guān)于android-support-v4.jar的詳細(xì)信息,大家可以訪問google官方網(wǎng)站:http://developer.android.com/sdk/compatibility-library.html
下面是我的實現(xiàn)
GuideActivity.Java
/** * @author manymore13 */ public class GuideActivity extends Activity { // 到達(dá)最后一張 private static final int TO_THE_END = 0; // 離開最后一張 private static final int LEAVE_FROM_END = 1; // 如果想直接應(yīng)用到你的項目中,只需在這里添加刪除圖片id即可 private int[] ids = { R.drawable.guide_1, R.drawable.guide_3, R.drawable.guide_5, R.drawable.guide_6,R.drawable.guide_7 }; private List<View> guides = new ArrayList<View>(); private ViewPager pager; private ImageView start; // 點擊體驗 private ImageView curDot; private LinearLayout dotContain; // 存儲點的容器 private int offset; // 位移量 private int curPos = 0; // 記錄當(dāng)前的位置 /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.main); init(); } private ImageView buildImageView(int id) { ImageView iv = new ImageView(this); iv.setImageResource(id); ViewGroup.LayoutParams params = new ViewGroup.LayoutParams( ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT); iv.setLayoutParams(params); iv.setScaleType(ScaleType.FIT_XY); return iv; } // 功能介紹界面的初始化 private void init() { this.getView(); initDot(); ImageView iv = null; guides.clear(); for (int i = 0; i < ids.length; i++) { iv = buildImageView(ids[i]); guides.add(iv); } System.out.println("guild_size="+guides.size()); // 當(dāng)curDot的所在的樹形層次將要被繪出時此方法被調(diào)用 curDot.getViewTreeObserver().addOnPreDrawListener( new OnPreDrawListener() { public boolean onPreDraw() { // 獲取ImageView的寬度也就是點圖片的寬度 offset = curDot.getWidth(); return true; } }); final GuidePagerAdapter adapter = new GuidePagerAdapter(guides); // ViewPager設(shè)置數(shù)據(jù)適配器,這個類似于使用ListView時用的adapter pager.setAdapter(adapter); pager.clearAnimation(); // 為Viewpager添加事件監(jiān)聽器 OnPageChangeListener pager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener(){ @Override public void onPageSelected(int position) { int pos = position % ids.length; moveCursorTo(pos); if (pos == ids.length-1) {// 到最后一張了 handler.sendEmptyMessageDelayed(TO_THE_END, 500); } else if (curPos == ids.length - 1) { handler.sendEmptyMessageDelayed(LEAVE_FROM_END, 100); } curPos = pos; super.onPageSelected(position); } }); } /** * 在layout中實例化一些View */ private void getView() { dotContain = (LinearLayout)this.findViewById(R.id.dot_contain); pager = (ViewPager) findViewById(R.id.contentPager); curDot = (ImageView) findViewById(R.id.cur_dot); start = (ImageView) findViewById(R.id.open); start.setOnClickListener(new OnClickListener() { public void onClick(View v) { // 點擊體驗 } }); } /** * 初始化點 ImageVIew * @return 返回true說明初始化點成功,否則實例化失敗 */ private boolean initDot() { if(ids.length > 0){ ImageView dotView ; for(int i=0; i<ids.length; i++) { dotView = new ImageView(this); dotView.setImageResource(R.drawable.dot1_w); dotView.setLayoutParams(new LinearLayout.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT,1.0f)); dotContain.addView(dotView); } return true; }else{ return false; } } /** * 移動指針到相鄰的位置 動畫 * @param position * 指針的索引值 * */ private void moveCursorTo(int position) { AnimationSet animationSet = new AnimationSet(true); TranslateAnimation tAnim = new TranslateAnimation(offset*curPos, offset*position, 0, 0); animationSet.addAnimation(tAnim); animationSet.setDuration(300); animationSet.setFillAfter(true); curDot.startAnimation(animationSet); } Handler handler = new Handler() { @Override public void handleMessage(Message msg) { if (msg.what == TO_THE_END) start.setVisibility(View.VISIBLE); else if (msg.what == LEAVE_FROM_END) start.setVisibility(View.GONE); } }; // ViewPager 適配器 class GuidePagerAdapter extends PagerAdapter{ private List<View> views; public GuidePagerAdapter(List<View> views){ this.views=views; } @Override public void destroyItem(View arg0, int arg1, Object arg2) { ((ViewPager) arg0).removeView(views.get(arg1 % views.size())); } @Override public void finishUpdate(View arg0) { } @Override public int getCount() { // 注意這里一定要返回一個稍微大點值,不然滑到頂就滑不動了 return views.size()*20; } @Override public Object instantiateItem(View arg0, int arg1) { Log.e("tag", "instantiateItem = "+arg1); ((ViewPager) arg0).addView(views.get(arg1 % views.size()),0); return views.get(arg1 % views.size()); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == (arg1); } @Override public void restoreState(Parcelable arg0, ClassLoader arg1) { } @Override public Parcelable saveState() { return null; } @Override public void startUpdate(View arg0) { } } }
下面是布局main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <android.support.v4.view.ViewPager android:id="@+id/contentPager" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_gravity="center" android:flipInterval="30" android:persistentDrawingCache="animation" /> <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:gravity="center" android:layout_marginBottom="22.0dip"> <LinearLayout android:id="@+id/dot_contain" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal" > </LinearLayout> <ImageView android:id="@+id/cur_dot" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/dot2_w" /> </FrameLayout> <ImageView android:id="@+id/open" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentRight="true" android:clickable="true" android:src="@drawable/ic_open" android:visibility="gone" /> </RelativeLayout>
運行效果:
更多關(guān)于Android相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《Android編程之a(chǎn)ctivity操作技巧總結(jié)》、《Android資源操作技巧匯總》、《Android文件操作技巧匯總》、《Android操作SQLite數(shù)據(jù)庫技巧總結(jié)》、《Android操作json格式數(shù)據(jù)技巧總結(jié)》、《Android數(shù)據(jù)庫操作技巧總結(jié)》、《Android編程開發(fā)之SD卡操作方法匯總》、《Android開發(fā)入門與進(jìn)階教程》、《Android視圖View技巧總結(jié)》及《Android控件用法總結(jié)》
希望本文所述對大家Android程序設(shè)計有所幫助。
- Android使用ViewPager實現(xiàn)啟動引導(dǎo)頁
- Android自定義引導(dǎo)玩轉(zhuǎn)ViewPager的方法詳解
- Android開發(fā)實戰(zhàn)之漂亮的ViewPager引導(dǎo)頁
- Android開發(fā)實現(xiàn)的ViewPager引導(dǎo)頁功能(動態(tài)加載指示器)詳解
- ViewPager實現(xiàn)漂亮的引導(dǎo)頁
- Android控件ViewPager實現(xiàn)帶有動畫的引導(dǎo)頁
- ViewPager實現(xiàn)帶引導(dǎo)小圓點與自動跳轉(zhuǎn)的引導(dǎo)界面
- ViewPager打造輪播圖Banner/引導(dǎo)頁Guide
- Android使用ViewPager完成app引導(dǎo)頁
- ViewPager實現(xiàn)輪播圖引導(dǎo)頁
相關(guān)文章
Android Camera2采集攝像頭原始數(shù)據(jù)
這篇文章主要介紹了Android Camera2采集攝像頭原始數(shù)據(jù)并進(jìn)行手工預(yù)覽的功能實現(xiàn)原理以及代碼分析,需要的朋友學(xué)習(xí)下吧。2018-02-02android開發(fā)之橫向滾動/豎向滾動的ListView(固定列頭)
由于項目需要,我們需要一個可以橫向滾動的,又可以豎向滾動的 表格;經(jīng)過幾天的研究終于搞定,感興趣的朋友可以了解下哦2013-01-01Android使用BottomNavigationBar實現(xiàn)導(dǎo)航欄功能
這篇文章主要介紹了Android使用BottomNavigationBar實現(xiàn)導(dǎo)航欄功能,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08利用HorizontalScrollView實現(xiàn)滑動頁面時的縮放效果
這篇文章主要為大家詳細(xì)介紹了利用HorizontalScrollView實現(xiàn)滑動頁面時的縮放效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-11-11