Android實戰簡易教程-第四十八槍（App引導頁面效果實現），androidapp

Android實戰簡易教程-第四十八槍（App引導頁面效果實現），androidapp

經常使用APP的童鞋會發現，第一次進入APP會有引導頁面，裡面可以放一些APP的使用介紹或其他資訊等等，下面我們研究一下如何?這個功能，增加APP的體驗。

一、自訂控制項繼承ViewGroup:

package com.genius.scroll;import android.content.Context;import android.content.Intent;import android.content.SharedPreferences;import android.util.AttributeSet;import android.util.Log;import android.view.MotionEvent;import android.view.VelocityTracker;import android.view.View;import android.view.ViewGroup;import android.widget.Scroller;import com.genius.demo.MainActivity;public class MyScrollLayout extends ViewGroup {private static final String TAG = "MyScrollLayout";/** 用於判斷甩動手勢 **/private VelocityTracker mVelocityTracker;private static final int SNAP_VELOCITY = 600;/** 滑動控制器 **/private Scroller mScroller;private int mCurScreen;private int mDefaultScreen = 0;private float mLastMotionX;/** 當前頁碼 **/private int currentPage;/** 總頁碼 **/private int pagesize;private Context mContext;// 內容物件private OnViewChangeListener mOnViewChangeListener;// View滾動監聽器/** 標註是否跳轉到主介面了 **/private boolean go_main = false;private SharedPreferences preferences;public MyScrollLayout(Context context) {super(context);this.mContext = context;init(context);}public MyScrollLayout(Context context, AttributeSet attrs) {super(context, attrs);this.mContext = context;init(context);}public MyScrollLayout(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);this.mContext = context;init(context);}/** * 擷取當前頁碼 *  * @param page */public void setPosition(int page) {if (page > 0) {currentPage = page;}}/** * 擷取總頁數 *  * @param size */public void setPageSize(int size) {pagesize = size;}private void init(Context context) {mCurScreen = mDefaultScreen;mScroller = new Scroller(context);}/** * 調用情境：在view給其孩子設定尺寸和位置時被調用 參數說明： 參數一：view有新的尺寸或位置； 參數二：相對於父view的Left位置； * 參數三：相對於父view的Top位置； 參數四：相對於父view的Right位置； 參數五：相對於父view的Bottom位置. */@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {if (changed) {// 如果有新的尺寸或位置int childLeft = 0;final int childCount = getChildCount();// 返回子View的總數for (int i = 0; i < childCount; i++) {// 遍曆子Viewfinal View childView = getChildAt(i);if (childView.getVisibility() != View.GONE) {// childView.getMeasuredWidth()對View上的內容進行測量後得到的View內容佔據的寬度，前提是你必須在父佈局的// onLayout()方法或者此View的onDraw()方法裡調用measure(0,0);(measure// 參數的值你可以自己定義)，否則你得到的結果和getWidth()得到的結果一樣final int childWidth = childView.getMeasuredWidth();// 參數(相對於父布局的左、上、右、下的位置)childView.layout(childLeft, 0, childLeft + childWidth,childView.getMeasuredHeight());childLeft += childWidth;}}}}/** * 指明控制項可獲得的空間以及關於這個空間描述的中繼資料. */@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);// MeasureSpec封裝了父布局傳遞給子布局的布局要求，每個MeasureSpec代表了一組寬度和高度的要求。一個MeasureSpec由大小和模式組成final int width = MeasureSpec.getSize(widthMeasureSpec);// 根據提供的測量值提取大小值final int widthMode = MeasureSpec.getMode(widthMeasureSpec);// 根據提供的測量值(格式)提模數式(有三種模式)Log.d(TAG, "onMeasure width:" + width + " widthMode:" + widthMode);final int count = getChildCount();// 擷取子視圖總數for (int i = 0; i < count; i++) {// 調用子視圖getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);}scrollTo(mCurScreen * width, 0);}public void snapToDestination() {final int screenWidth = getWidth();final int destScreen = (getScrollX() + screenWidth / 2) / screenWidth;snapToScreen(destScreen);}public void snapToScreen(int whichScreen) {// 得到有效頁面配置whichScreen = Math.max(0, Math.min(whichScreen, getChildCount() - 1));if (getScrollX() != (whichScreen * getWidth())) {final int delta = whichScreen * getWidth() - getScrollX();mScroller.startScroll(getScrollX(), 0, delta, 0,Math.abs(delta) * 2);mCurScreen = whichScreen;invalidate(); // 重繪布局if (mOnViewChangeListener != null) {mOnViewChangeListener.OnViewChange(mCurScreen);}}}/** * View繪製流程draw()中會調用 */@Overridepublic void computeScroll() {if (mScroller.computeScrollOffset()) {// 如果返回true，表示動畫還沒有結束scrollTo(mScroller.getCurrX(), mScroller.getCurrY());// 產生平滑的動畫效果，根據當前位移量，每次滾動一點postInvalidate();// 此時同樣也需要重新整理View ，否則效果可能有誤差} else {// 如果返回false，表示startScroll完成Log.i(TAG, "scoller has finished");}}@Overridepublic boolean onTouchEvent(MotionEvent event) {final int action = event.getAction();final float x = event.getX();final float y = event.getY();Log.d(TAG, "X:" + x + " Y:" + y);float oldx = 0;switch (action) {case MotionEvent.ACTION_DOWN:oldx = event.getRawX();Log.i("", "onTouchEvent  ACTION_DOWN");if (mVelocityTracker == null) {mVelocityTracker = VelocityTracker.obtain();mVelocityTracker.addMovement(event);}if (!mScroller.isFinished()) {mScroller.abortAnimation();}mLastMotionX = x;break;case MotionEvent.ACTION_MOVE:int deltaX = (int) (mLastMotionX - x);float newX = event.getRawX();/** * 最後一頁跳轉  */if (newX - oldx > 3) {if (currentPage == pagesize - 1 && !go_main) {go_main = true;preferences = mContext.getSharedPreferences("setting", 0);SharedPreferences.Editor editor = preferences.edit();editor.putBoolean("isOpen", true);editor.commit();Intent intent = new Intent();intent.setClass(mContext, MainActivity.class);//跳轉到第一個頁面；mContext.startActivity(intent);}}if (IsCanMove(deltaX)) {if (mVelocityTracker != null) {mVelocityTracker.addMovement(event);}mLastMotionX = x;scrollBy(deltaX, 0);}break;case MotionEvent.ACTION_UP:int velocityX = 0;if (mVelocityTracker != null) {mVelocityTracker.addMovement(event);mVelocityTracker.computeCurrentVelocity(1000);velocityX = (int) mVelocityTracker.getXVelocity();}if (velocityX > SNAP_VELOCITY && mCurScreen > 0) {// 向左移動Log.e(TAG, "snap left");snapToScreen(mCurScreen - 1);} else if (velocityX < -SNAP_VELOCITY&& mCurScreen < getChildCount() - 1) {// 向右移動Log.e(TAG, "snap right");snapToScreen(mCurScreen + 1);} else {snapToDestination();}if (mVelocityTracker != null) {mVelocityTracker.recycle();mVelocityTracker = null;}break;}return true;}private boolean IsCanMove(int deltaX) {if (getScrollX() <= 0 && deltaX < 0) {return false;}if (getScrollX() >= (getChildCount() - 1) * getWidth() && deltaX > 0) {return false;}return true;}public void SetOnViewChangeListener(OnViewChangeListener listener) {mOnViewChangeListener = listener;}///**// * 判斷是否開啟索引// * @return// *///private boolean isOpean(){////}}

二、定義介面

package com.genius.scroll;public interface OnViewChangeListener {public void OnViewChange(int view);}

三、建立執行個體1.建立ViewPagerAdapter.java:

package com.genius.demo;import java.util.List;import android.os.Parcelable;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;/** * ViewPgageAdapter適配器 * @author yayun  * */public class ViewPageAdapter extends PagerAdapter {List<View> mViewList;public ViewPageAdapter(List<View> viewList) {mViewList = viewList;}@Overridepublic int getCount() {if (mViewList != null) {return mViewList.size();}return 0;}@Overridepublic Object instantiateItem(View view, int index) {((ViewPager) view).addView(mViewList.get(index), 0);return mViewList.get(index);}@Overridepublic void destroyItem(View view, int position, Object arg2) {((ViewPager) view).removeView(mViewList.get(position));}@Overridepublic void finishUpdate(View arg0) {}@Overridepublic boolean isViewFromObject(View view, Object obj) {return (view == obj);}@Overridepublic void restoreState(Parcelable arg0, ClassLoader arg1) {}@Overridepublic Parcelable saveState() {return null;}@Overridepublic void startUpdate(View arg0) {}}

2.建立SwitchViewDemoActivity.java:

package com.genius.demo;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.ImageView;import android.widget.LinearLayout;import com.genius.scroll.MyScrollLayout;import com.genius.scroll.OnViewChangeListener;public class SwitchViewDemoActivity extends Activity implementsOnViewChangeListener, OnClickListener {private MyScrollLayout mScrollLayout;private ImageView[] mImageViews;private int mViewCount;private int mCurSel;/** Activity對象 **/public static Activity MY_ACTIVITY;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);MY_ACTIVITY = this;init();}private void init() {mScrollLayout = (MyScrollLayout) findViewById(R.id.ScrollLayout);LinearLayout linearLayout = (LinearLayout) findViewById(R.id.llayout);mViewCount = mScrollLayout.getChildCount();mImageViews = new ImageView[mViewCount];for (int i = 0; i < mViewCount; i++) {mImageViews[i] = (ImageView) linearLayout.getChildAt(i);mImageViews[i].setEnabled(true);mImageViews[i].setOnClickListener(this);mImageViews[i].setTag(i);}mScrollLayout.setPageSize(mImageViews.length);mCurSel = 0;mImageViews[mCurSel].setEnabled(false);mScrollLayout.SetOnViewChangeListener(this);}private void setCurPoint(int index) {if (index < 0 || index > mViewCount - 1 || mCurSel == index) {return;}mImageViews[mCurSel].setEnabled(true);mImageViews[index].setEnabled(false);mScrollLayout.setPosition(index);mCurSel = index;}@Overridepublic void OnViewChange(int view) {setCurPoint(view);}@Overridepublic void onClick(View v) {int pos = (Integer) (v.getTag());setCurPoint(pos);mScrollLayout.snapToScreen(pos);}}

3.布局檔案：

<?xml version="1.0" encoding="utf-8"?>    <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent"android:id="@+id/touch"    xmlns:android="http://schemas.android.com/apk/res/android">            <com.genius.scroll.MyScrollLayout      xmlns:android="http://schemas.android.com/apk/res/android"      android:id="@+id/ScrollLayout"      android:layout_width="fill_parent"      android:layout_height="fill_parent">         <FrameLayout      android:background="@drawable/guide01"      android:layout_width="fill_parent"      android:layout_height="fill_parent">  </FrameLayout>           <FrameLayout      android:background="@drawable/guide02"      android:layout_width="fill_parent"      android:layout_height="fill_parent">  </FrameLayout>            <FrameLayout       android:background="@drawable/guide03"       android:layout_width="fill_parent"      android:layout_height="fill_parent">          </FrameLayout>        <FrameLayout      android:background="@drawable/guide04"      android:layout_width="fill_parent"      android:layout_height="fill_parent">      </FrameLayout>        <FrameLayout      android:background="@drawable/guide05"      android:layout_width="fill_parent"      android:layout_height="fill_parent">      </FrameLayout>           </com.genius.scroll.MyScrollLayout>     <LinearLayout     android:orientation="horizontal"     android:id="@+id/llayout"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_marginBottom="24.0dip"     android:layout_alignParentBottom="true"     android:layout_centerHorizontal="true">            <ImageView android:clickable="true"  android:padding="15.0dip" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/guide_round" />        <ImageView android:clickable="true"  android:padding="15.0dip"  android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/guide_round" />        <ImageView android:clickable="true"  android:padding="15.0dip"  android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/guide_round" />        <ImageView android:clickable="true"  android:padding="15.0dip"  android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/guide_round" />        <ImageView android:clickable="true"  android:padding="15.0dip"  android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/guide_round" />    </LinearLayout>    </RelativeLayout>

四、運行執行個體：


喜歡的朋友請關注我！ 源碼下載

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。