Android開發(fā)實(shí)戰(zhàn)之漂亮的ViewPager引導(dǎo)頁
目前很多軟件安裝時(shí)都會(huì)出現(xiàn)引導(dǎo)頁面,用戶體驗(yàn)很好。
下面就來DIY下:
因?yàn)橐曨l上傳很麻煩,所以截圖了。
首先看看效果圖:



點(diǎn)擊小點(diǎn)可自由切換,滑動(dòng)也可以自由切換,最后一個(gè)導(dǎo)航頁添加了點(diǎn)擊跳轉(zhuǎn)。
開始實(shí)現(xiàn)引導(dǎo)頁:
一、采集需要的圖片放入drawable文件里
二、初始化每個(gè)導(dǎo)航頁的視圖
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.yyp.myapp.Adapter.ViewPagerAdapter;
import com.yyp.myapp.R;
import java.util.ArrayList;
import java.util.List;
public class ViewPagerActivity extends Activity implements ViewPager.OnPageChangeListener,View.OnClickListener {
private ViewPager viewPager;
private ImageView[] pots;
private List<View> views;
private TextView et_into_login;
private ViewPagerAdapter adapter;
//圖片資源
private int[] guideImages = {R.drawable.guide1,R.drawable.guide2,R.drawable.guide3};
private int index;
private LinearLayout layout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_pager);
initView();
initData();
}
//初始化ViewPager
public void initView()
{
layout = (LinearLayout) this.findViewById(R.id.ll_pots);
viewPager = (ViewPager) this.findViewById(R.id.viewpager);
et_into_login = (TextView) this.findViewById(R.id.et_into_login);
views = new ArrayList<View>();
adapter = new ViewPagerAdapter(views);
pots = new ImageView[guideImages.length];
Log.e("ll_viewpager", layout + "");
}
//初始化每一個(gè)圖片數(shù)據(jù)
public void initData()
{
//設(shè)置圖片的長(zhǎng)寬類型
android.view.ViewGroup.LayoutParams layoutParams = new android.view.ViewGroup.LayoutParams(android.view.ViewGroup.LayoutParams.MATCH_PARENT,android.view.ViewGroup.LayoutParams.MATCH_PARENT);
for(int i:guideImages)
{
ImageView imageView = new ImageView(this);
imageView.setImageResource(i); //將對(duì)應(yīng)圖片的id傳進(jìn)去,用于初始化圖片
imageView.setLayoutParams(layoutParams);
views.add(imageView);
}
initPot();
viewPager.setAdapter(adapter);
viewPager.setOnPageChangeListener(this);
}
//初始化每個(gè)點(diǎn)顏色
public void initPot()
{
//點(diǎn)的集合
for(int i=0;i<layout.getChildCount();i++)
{
//全部設(shè)置為灰色
pots[i] = (ImageView) layout.getChildAt(i);
pots[i].setImageResource(R.drawable.pot5);
//給每個(gè)點(diǎn)設(shè)置點(diǎn)擊事件
pots[i].setOnClickListener(this);
pots[i].setTag(i);
}
//第一個(gè)設(shè)置為橙色
index = 0;
pots[index].setImageResource(R.drawable.pot1);
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub
SetIndex(position);
//最后一張導(dǎo)航頁才進(jìn)行跳轉(zhuǎn)提示
if(position==2){
et_into_login.setVisibility(View.VISIBLE);
}else{
et_into_login.setVisibility(View.INVISIBLE);
}
}
public void SetIndex(int position) {
// TODO Auto-generated method stub
for(int i=0;i<layout.getChildCount();i++)
{
//全部設(shè)置為灰色
pots[i] = (ImageView) layout.getChildAt(i);
pots[i].setImageResource(R.drawable.pot5);
}
//選中的設(shè)置為橙色
pots[position].setImageResource(R.drawable.pot1);
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
int i = (Integer) v.getTag();
//設(shè)置當(dāng)前頁為i所對(duì)應(yīng)的圖片
viewPager.setCurrentItem(i);
if(i==2){
et_into_login.setVisibility(View.VISIBLE);
}
}
//跳轉(zhuǎn)到登錄界面
public void goLogin(View v){
Intent goLogin = new Intent(this,LoginActivity.class);
startActivity(goLogin);
finish();
}
}
三、初始化期間自定義ViewPager適配器
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;
/**
* Created by yyp on 2015/10/25.
*/
public class ViewPagerAdapter extends PagerAdapter {
//獲得導(dǎo)航頁的圖片集
private List<View> views;
public ViewPagerAdapter(List<View> views)
{
this.views = views;
}
//獲得界面?zhèn)€數(shù)
@Override
public int getCount() {
//返回圖片頁數(shù)
return views.size();
}
//初始化position位置的界面
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewGroup)container).addView(views.get(position));
return views.get(position);
}
//判斷是否由對(duì)象生成界面
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;
}
//對(duì)不在界面內(nèi)的導(dǎo)航頁進(jìn)行刪除
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
}
在用戶體驗(yàn)方面,我們能發(fā)掘的東西還有很多,說不定下次流行的視圖,就是我們某個(gè)人做出來的。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android使用ViewPager實(shí)現(xiàn)啟動(dòng)引導(dǎo)頁
- Android自定義引導(dǎo)玩轉(zhuǎn)ViewPager的方法詳解
- Android開發(fā)實(shí)現(xiàn)的ViewPager引導(dǎo)頁功能(動(dòng)態(tài)加載指示器)詳解
- ViewPager實(shí)現(xiàn)漂亮的引導(dǎo)頁
- Android控件ViewPager實(shí)現(xiàn)帶有動(dòng)畫的引導(dǎo)頁
- ViewPager實(shí)現(xiàn)帶引導(dǎo)小圓點(diǎn)與自動(dòng)跳轉(zhuǎn)的引導(dǎo)界面
- Android利用ViewPager實(shí)現(xiàn)用戶引導(dǎo)界面效果的方法
- ViewPager打造輪播圖Banner/引導(dǎo)頁Guide
- Android使用ViewPager完成app引導(dǎo)頁
- ViewPager實(shí)現(xiàn)輪播圖引導(dǎo)頁
相關(guān)文章
Android開發(fā)之關(guān)閉和打開Speaker(揚(yáng)聲器)的方法
這篇文章主要介紹了Android開發(fā)之關(guān)閉和打開Speaker(揚(yáng)聲器)的方法,結(jié)合實(shí)例形式簡(jiǎn)單分析了Android揚(yáng)聲器的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-03-03
Android 利用三階貝塞爾曲線繪制運(yùn)動(dòng)軌跡的示例
本篇文章主要介紹了Android 利用三階貝塞爾曲線繪制運(yùn)動(dòng)軌跡的示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
Android實(shí)現(xiàn)TextView中文字鏈接的4種方式介紹及代碼
Android實(shí)現(xiàn)TextView中文字鏈接的方式有很多種;總結(jié)起來大概有4種:用Spannable或?qū)崿F(xiàn)它的類,如SpannableString來格式,部分字符串等等,感興趣的你可以參考下2013-02-02
Android自定義View實(shí)現(xiàn)分段選擇按鈕的實(shí)現(xiàn)代碼
這篇文章主要介紹了Android自定義View實(shí)現(xiàn)分段選擇按鈕的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12
Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果(六)
這篇文章主要為大家詳細(xì)介紹了Flutter進(jìn)階之實(shí)現(xiàn)動(dòng)畫效果第六篇,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08
android Web跳轉(zhuǎn)到app指定頁面并傳遞參數(shù)實(shí)例
這篇文章主要介紹了android Web跳轉(zhuǎn)到app指定頁面并傳遞參數(shù)實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-03-03
android POST數(shù)據(jù)遇到的UTF-8編碼(亂碼)問題解決辦法
這篇文章主要介紹了android POST數(shù)據(jù)遇到的UTF-8編碼(亂碼)問題解決辦法,需要的朋友可以參考下2014-04-04
Flutter質(zhì)感設(shè)計(jì)之彈出菜單
這篇文章主要為大家詳細(xì)介紹了Flutter質(zhì)感設(shè)計(jì)之彈出菜單,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-08-08
全面解析Android系統(tǒng)指紋啟動(dòng)流程
這篇文章主要介紹了全面解析Android系統(tǒng)指紋啟動(dòng)流程,對(duì)Android啟動(dòng)原理感興趣的同學(xué)可以參考下2021-04-04
Android開發(fā)中的簡(jiǎn)單設(shè)置技巧集錦
這篇文章主要介紹了Android開發(fā)中的簡(jiǎn)單設(shè)置技巧,較為詳細(xì)的匯總了Android針對(duì)壁紙、語言、音量、錄音等多種設(shè)置的方法,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2016-06-06

