Android使用ViewPager實現(xiàn)啟動引導頁
我們在安裝某個APP的時候,基本都會有一個引導頁的提示,他們可以打廣告,或者介紹新功能的加入和使用說明等。
一般都支持滑動并且下面有幾個點,顯示共有多少頁和當前圖片的位置,在IOS上這個實現(xiàn)起來比較簡單,但在安卓上如何實現(xiàn)呢。
今天就和大家一起來學習用官方v4支持包下的ViewPager來實現(xiàn)這個效果。/p>
先上圖:
下面是我的實現(xiàn),一個xml布局,一個GuideActivity和一個GuidePageAdapter.
先上XML.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.nanchen.guidepagedemo.GuideActivity"> <android.support.v4.view.ViewPager android:id="@+id/guide_vp" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager> <LinearLayout android:id="@+id/guide_ll_point" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_alignParentBottom="true" android:layout_marginBottom="40dp" android:gravity="center_horizontal"> </LinearLayout> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/guide_ib_start" android:src="@mipmap/btn_start" android:layout_centerHorizontal="true" android:layout_above="@+id/guide_ll_point" android:background="@null" android:visibility="gone"/> </RelativeLayout>
在準備一個Adapter,這個沒什么好說的。
package com.example.nanchen.guidepagedemo; import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup; import java.util.List; /** * Created by 南塵 on 2016/7/10. */ public class GuidePageAdapter extends PagerAdapter { private List<View> viewList; public GuidePageAdapter(List<View> viewList) { this.viewList = viewList; } /** * @return 返回頁面的個數(shù) */ @Override public int getCount() { if (viewList != null){ return viewList.size(); } return 0; } /** * 判斷對象是否生成界面 * @param view * @param object * @return */ @Override public boolean isViewFromObject(View view, Object object) { return view == object; } /** * 初始化position位置的界面 * @param container * @param position * @return */ @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(viewList.get(position)); return viewList.get(position); } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(viewList.get(position)); } }
最后就是我們的Activity了
package com.example.nanchen.guidepagedemo; import android.content.Intent; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.view.ViewGroup; import android.view.Window; import android.widget.ImageButton; import android.widget.ImageView; import android.widget.LinearLayout; import java.util.ArrayList; import java.util.List; /** * 實現(xiàn)首次啟動的引導頁面 */ public class GuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{ private ViewPager vp; private int []imageIdArray;//圖片資源的數(shù)組 private List<View> viewList;//圖片資源的集合 private ViewGroup vg;//放置圓點 //實例化原點View private ImageView iv_point; private ImageView []ivPointArray; //最后一頁的按鈕 private ImageButton ib_start; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); supportRequestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_guide); ib_start = (ImageButton) findViewById(R.id.guide_ib_start); ib_start.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { startActivity(new Intent(GuideActivity.this,MainActivity.class)); finish(); } }); //加載ViewPager initViewPager(); //加載底部圓點 initPoint(); } /** * 加載底部圓點 */ private void initPoint() { //這里實例化LinearLayout vg = (ViewGroup) findViewById(R.id.guide_ll_point); //根據(jù)ViewPager的item數(shù)量實例化數(shù)組 ivPointArray = new ImageView[viewList.size()]; //循環(huán)新建底部圓點ImageView,將生成的ImageView保存到數(shù)組中 int size = viewList.size(); for (int i = 0;i<size;i++){ iv_point = new ImageView(this); iv_point.setLayoutParams(new ViewGroup.LayoutParams(20,20)); iv_point.setPadding(30,0,30,0);//left,top,right,bottom ivPointArray[i] = iv_point; //第一個頁面需要設置為選中狀態(tài),這里采用兩張不同的圖片 if (i == 0){ iv_point.setBackgroundResource(R.mipmap.full_holo); }else{ iv_point.setBackgroundResource(R.mipmap.empty_holo); } //將數(shù)組中的ImageView加入到ViewGroup vg.addView(ivPointArray[i]); } } /** * 加載圖片ViewPager */ private void initViewPager() { vp = (ViewPager) findViewById(R.id.guide_vp); //實例化圖片資源 imageIdArray = new int[]{R.mipmap.guide1,R.mipmap.guide2,R.mipmap.guide3}; viewList = new ArrayList<>(); //獲取一個Layout參數(shù),設置為全屏 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT); //循環(huán)創(chuàng)建View并加入到集合中 int len = imageIdArray.length; for (int i = 0;i<len;i++){ //new ImageView并設置全屏和圖片資源 ImageView imageView = new ImageView(this); imageView.setLayoutParams(params); imageView.setBackgroundResource(imageIdArray[i]); //將ImageView加入到集合中 viewList.add(imageView); } //View集合初始化好后,設置Adapter vp.setAdapter(new GuidePageAdapter(viewList)); //設置滑動監(jiān)聽 vp.setOnPageChangeListener(this); } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } /** * 滑動后的監(jiān)聽 * @param position */ @Override public void onPageSelected(int position) { //循環(huán)設置當前頁的標記圖 int length = imageIdArray.length; for (int i = 0;i<length;i++){ ivPointArray[position].setBackgroundResource(R.mipmap.full_holo); if (position != i){ ivPointArray[i].setBackgroundResource(R.mipmap.empty_holo); } } //判斷是否是最后一頁,若是則顯示按鈕 if (position == imageIdArray.length - 1){ ib_start.setVisibility(View.VISIBLE); }else { ib_start.setVisibility(View.GONE); } } @Override public void onPageScrollStateChanged(int state) { } }
總的來說實現(xiàn)流程比較簡單。
1)先加載ViewPager,新建ImageView并添加到View集合中,然后設置Adapter并顯示。
2)然后加載LinearLayout,放置原點圖片,同樣新建ImageView設置背景后放在圓點圖集合中。
3)最后設置ViewPager的滑動監(jiān)聽事件,在滑動完成的監(jiān)聽OnPageSelected方法中,設置對應的圓點為選中,如果是最后一頁,則顯示按鈕。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- Android自定義引導玩轉ViewPager的方法詳解
- Android開發(fā)實戰(zhàn)之漂亮的ViewPager引導頁
- Android開發(fā)實現(xiàn)的ViewPager引導頁功能(動態(tài)加載指示器)詳解
- ViewPager實現(xiàn)漂亮的引導頁
- Android控件ViewPager實現(xiàn)帶有動畫的引導頁
- ViewPager實現(xiàn)帶引導小圓點與自動跳轉的引導界面
- Android利用ViewPager實現(xiàn)用戶引導界面效果的方法
- ViewPager打造輪播圖Banner/引導頁Guide
- Android使用ViewPager完成app引導頁
- ViewPager實現(xiàn)輪播圖引導頁
相關文章
Android 通過httppost上傳文本文件到服務器的實例代碼
這篇文章主要介紹了Android 通過httppost上傳文本文件到服務器的實例代碼,非常簡單易懂,非常實用,需要的朋友可以參考下2016-08-08Android利用Chronometer實現(xiàn)倒計時功能
這篇文章主要為大家詳細介紹了Android利用Chronometer實現(xiàn)倒計時功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11Kotlin如何優(yōu)雅地判斷EditText數(shù)據(jù)是否為空詳解
這篇文章主要給大家介紹了關于Kotlin如何優(yōu)雅地判斷EditText數(shù)據(jù)是否為空的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用kotlin具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2018-08-08Android開發(fā)ThreadPoolExecutor與自定義線程池詳解
這篇文章主要為大家介紹了Android開發(fā)ThreadPoolExecutor與自定義線程池詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11Android開發(fā)技巧之ViewStub控件惰性裝載
布局文件中的控件并不一定在程序啟動時全都用到,有一些控件只在特定的情況下才會被使用到;我們急需一種機制來改變<include>標簽的這種行為,只在需要時裝載控件。這種機制就是本節(jié)要介紹的ViewStub控件2013-01-01Android Intent傳遞數(shù)據(jù)底層分析詳細介紹
這篇文章主要介紹了Android Intent傳遞數(shù)據(jù)底層分析詳細介紹的相關資料,需要的朋友可以參考下2017-02-02Android使用WebView實現(xiàn)文件下載功能
這篇文章主要為大家詳細介紹了Android使用WebView實現(xiàn)文件下載功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-05-05