實用的viewpager 做一個引導動畫(強調方法沒有美化)

思路:
1.利用viewpager控件自帶的水平滾動特性,將想要展現的內容用xml佈局文件一張張寫出來
2.用一個linearlayout包裹張數個imageview,src是一個小圓點,另外準備一個大圓點,給imageview定義一個索引值
3.首先進入動畫時第一個原點是大的,進入第二張是將第一張的還原,第二章變大,這裏我是用style樣式setenabled方法來實現的

這個頁面在應用還在加載時調用,負責判斷是去引導頁面還是直接去主頁,如果首次進入或重新安裝了此應用都將去往引導頁面

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:orientation="vertical" >

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="等待加載中!!!!"
        android:textColor="#f0f0f0"/>
</LinearLayout>

linearlayout裏面包裹着四個imageview,src裏面的dot是一個xml文件,下面會有給出

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="50dp"
        android:layout_gravity="bottom|center_horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:src="@drawable/dot" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:src="@drawable/dot" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:src="@drawable/dot" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:src="@drawable/dot" />
    </LinearLayout>

</FrameLayout>

將想要呈現的幻燈片以這樣的方式存儲,這是其中的一張,其他的這要把background改一下就行了

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:background="@drawable/img1">
</LinearLayout>

判斷是否是第一次加載進來的具體實現

public class SplashActivity extends Activity {

    boolean isFirstIn = false;
    private SharedPreferences preferences;
    private static final int GO_HOME = 1000;
    private static final int GO_GUIDE = 1001;
    // 延遲3秒
    private static final long SPLASH_DELAY_MILLIS = 3000;

    private static final String SHAREDPREFERENCES_NAME = "first_pref";

    /**
     * Handler:跳轉到不同界面
     */
    private boolean isInstalled(Context context, String packageName) {
        boolean hasInstalled = false;
        PackageManager pm = context.getPackageManager();
        List<PackageInfo> list = pm
                .getInstalledPackages(PackageManager.PERMISSION_GRANTED);
        for (PackageInfo p : list) {
            if (packageName != null && packageName.equals(p.packageName)) {
                hasInstalled = true;
                break;
            }
        }
        return hasInstalled;
    }

    private Handler mHandler = new Handler() {

        @Override
        public void handleMessage(Message msg) {
            switch (msg.what) {
            case GO_HOME:
                goHome();
                break;
            case GO_GUIDE:
                goGuide();
                break;
            }
            super.handleMessage(msg);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.splash);

        init();
        if (isInstalled(getApplicationContext(),
                "com.example.viewpagerfragment")) {
            isFirstIn = true;
        }

        // 判斷程序與第幾次運行,如果是第一次運行則跳轉到引導界面,否則跳轉到主界面
        if (!isFirstIn) {
            // 使用Handler的postDelayed方法,3秒後執行跳轉到MainActivity
            mHandler.sendEmptyMessageDelayed(GO_HOME, SPLASH_DELAY_MILLIS);
        } else {
            mHandler.sendEmptyMessageDelayed(GO_GUIDE, SPLASH_DELAY_MILLIS);
        }

    }

    private void init() {
        // 讀取SharedPreferences中需要的數據
        // 使用SharedPreferences來記錄程序的使用次數
        preferences = getSharedPreferences(SHAREDPREFERENCES_NAME, MODE_PRIVATE);

        // 取得相應的值,如果沒有該值,說明還未寫入,用true作爲默認值
        isFirstIn = preferences.getBoolean("isFirstIn", true);

    }

    private void goHome() {
        Intent intent = new Intent(SplashActivity.this, MainActivity.class);
        SplashActivity.this.startActivity(intent);
        SplashActivity.this.finish();
    }

    private void goGuide() {
        Intent intent = new Intent(SplashActivity.this, GuideActivity.class);
        SplashActivity.this.startActivity(intent);
        SplashActivity.this.finish();
    }

}

正式開始引導

public class GuideActivity extends Activity implements OnPageChangeListener{

     private ViewPager vp;  
        private ViewPagerAdapter vpAdapter;  
        private List<View> views;  

        // 底部小點圖片  
        private ImageView[] dots;  

        // 記錄當前選中位置  
        private int currentIndex;  

        @Override  
        protected void onCreate(Bundle savedInstanceState) {  
            super.onCreate(savedInstanceState);  
            setContentView(R.layout.guide);  

            // 初始化頁面  
            initViews();  

            // 初始化底部小點  
            initDots();  
        }  

        private void initViews() {  
            LayoutInflater inflater = LayoutInflater.from(this);  

            views = new ArrayList<View>();  
            // 初始化引導圖片列表  
            views.add(inflater.inflate(R.layout.first_guide, null));  
            views.add(inflater.inflate(R.layout.second_guide, null));  
            views.add(inflater.inflate(R.layout.third_guide, null));  
            views.add(inflater.inflate(R.layout.fouth_guide, null));  

            // 初始化Adapter  
            vpAdapter = new ViewPagerAdapter(views, this);  

            vp = (ViewPager) findViewById(R.id.viewpager);  
            vp.setAdapter(vpAdapter);  
            // 綁定回調  
            vp.setOnPageChangeListener(this);  
        }  

        private void initDots() {  
            LinearLayout ll = (LinearLayout) findViewById(R.id.ll);  

            dots = new ImageView[views.size()];  

            // 循環取得小點圖片  
            for (int i = 0; i < views.size(); i++) {  
                dots[i] = (ImageView) ll.getChildAt(i);  
                dots[i].setEnabled(true);// 都設爲灰色  
            }  

            currentIndex = 0;  
            dots[currentIndex].setEnabled(false);// 設置爲白色,即選中狀態  
        }  

        private void setCurrentDot(int position) {  
            if (position < 0 || position > views.size() - 1  
                    || currentIndex == position) {  
                return;  
            }  

            dots[position].setEnabled(false);  
            dots[currentIndex].setEnabled(true);  

            currentIndex = position;  
        }  

        // 當滑動狀態改變時調用  
        @Override  
        public void onPageScrollStateChanged(int arg0) {  
        }  

        // 噹噹前頁面被滑動時調用  
        @Override  
        public void onPageScrolled(int arg0, float arg1, int arg2) {  
        }  

        // 當新的頁面被選中時調用  
        @Override  
        public void onPageSelected(int arg0) {  
            // 設置底部小點選中狀態  
            setCurrentDot(arg0);  
        }  
}

viewpager自定義適配器

public class ViewPagerAdapter extends PagerAdapter {

    // 界面列表
    private List<View> views;
    private Activity activity;
    private static final String SHAREDPREFERENCES_NAME = "first_pref";

    public ViewPagerAdapter(List<View> views, Activity activity) {
        this.views = views;
        this.activity = activity;
    }

    // 銷燬arg1位置的界面
    @Override
    public void destroyItem(View arg0, int arg1, Object arg2) {
        ((ViewPager) arg0).removeView(views.get(arg1));
    }

    @Override
    public void finishUpdate(View arg0) {
    }

    // 獲得當前界面數
    @Override
    public int getCount() {
        if (views != null) {
            return views.size();
        }
        return 0;
    }

    // 初始化arg1位置的界面
    @Override
    public Object instantiateItem(View arg0, int arg1) {
        ((ViewPager) arg0).addView(views.get(arg1), 0);
        if (arg1 == views.size() - 1) {
            Button mStartWeiboImageButton = (Button) arg0
                    .findViewById(R.id.btn_begin);
            mStartWeiboImageButton.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    // 設置已經引導
                    setGuided();
                    goHome();
                }

            });
        }
        return views.get(arg1);
    }

    private void goHome() {
        // 跳轉
        Intent intent = new Intent(activity, MainActivity.class);
        activity.startActivity(intent);
        activity.finish();
    }

    /**
     * 
     * method desc:設置已經引導過了,下次啓動不用再次引導
     */
    private void setGuided() {
        SharedPreferences preferences = activity.getSharedPreferences(
                SHAREDPREFERENCES_NAME, Context.MODE_PRIVATE);
        Editor editor = preferences.edit();
        // 存入數據
        editor.putBoolean("isFirstIn", false);
        // 提交修改
        editor.commit();
    }

    // 判斷是否由對象生成界面
    @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) {
    }

}
發佈了50 篇原創文章 · 獲贊 2 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章