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



點(diǎn)擊小點(diǎn)可自由切換,滑動(dòng)也可以自由切換,最后一個(gè)導(dǎo)航頁(yè)添加了點(diǎn)擊跳轉(zhuǎn)。
開(kāi)始實(shí)現(xiàn)引導(dǎo)頁(yè):
一、采集需要的圖片放入drawable文件里
二、初始化每個(gè)導(dǎo)航頁(yè)的視圖
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)航頁(yè)才進(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)前頁(yè)為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)航頁(yè)的圖片集
private List<View> views;
public ViewPagerAdapter(List<View> views)
{
this.views = views;
}
//獲得界面?zhèn)€數(shù)
@Override
public int getCount() {
//返回圖片頁(yè)數(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)航頁(yè)進(jìn)行刪除
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
}
在用戶體驗(yàn)方面,我們能發(fā)掘的東西還有很多,說(shuō)不定下次流行的視圖,就是我們某個(gè)人做出來(lái)的。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android使用ViewPager實(shí)現(xiàn)啟動(dòng)引導(dǎo)頁(yè)
- Android自定義引導(dǎo)玩轉(zhuǎn)ViewPager的方法詳解
- Android開(kāi)發(fā)實(shí)現(xiàn)的ViewPager引導(dǎo)頁(yè)功能(動(dòng)態(tài)加載指示器)詳解
- ViewPager實(shí)現(xiàn)漂亮的引導(dǎo)頁(yè)
- Android控件ViewPager實(shí)現(xiàn)帶有動(dòng)畫(huà)的引導(dǎo)頁(yè)
- 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)頁(yè)Guide
- Android使用ViewPager完成app引導(dǎo)頁(yè)
- ViewPager實(shí)現(xiàn)輪播圖引導(dǎo)頁(yè)
相關(guān)文章
Android?PickerScrollView滑動(dòng)選擇控件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Android?PickerScrollView滑動(dòng)選擇控件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
Android中Glide獲取圖片Path、Bitmap用法詳解
這篇文章主要介紹了Android中Glide獲取圖片Path、Bitmap用法以及代碼分析,需要的朋友們參考一下吧。2017-12-12
導(dǎo)致adb無(wú)法啟動(dòng)的5種情況和解決方法
這篇文章主要介紹了導(dǎo)致adb無(wú)法啟動(dòng)的5種情況和解決方法,本文列舉了最常見(jiàn)的5種情況和對(duì)應(yīng)解決方法,需要的朋友可以參考下2015-04-04
Android編程實(shí)現(xiàn)任務(wù)管理器的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)任務(wù)管理器的方法,涉及Android針對(duì)程序與進(jìn)程操作的相關(guān)技巧,需要的朋友可以參考下2015-12-12
Flutter之自定義Dialog實(shí)現(xiàn)版本更新彈窗功能的實(shí)現(xiàn)
這篇文章主要介紹了Flutter之自定義Dialog實(shí)現(xiàn)版本更新彈窗功能的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
Jetpack Compose實(shí)現(xiàn)對(duì)話框和進(jìn)度條實(shí)例解析
對(duì)話框和進(jìn)度條其實(shí)并無(wú)多大聯(lián)系,放在一起寫(xiě)是因?yàn)閮烧叩膬?nèi)容都不多,所以湊到一起,對(duì)話框是我們平時(shí)開(kāi)發(fā)使用得比較多的組件,進(jìn)度條的使用頻率也很高,比如下載文件,上傳文件,處理任務(wù)時(shí)都可以使用進(jìn)度條2023-04-04
詳解Android XML中引用自定義內(nèi)部類view的四個(gè)why
本篇文章主要介紹了詳解Android XML中引用自定義內(nèi)部類view,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。2016-12-12
Android獲取本地相冊(cè)圖片和拍照獲取圖片的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Android獲取本地相冊(cè)圖片和拍照獲取圖片的實(shí)現(xiàn)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03
Android5.0以上版本錄屏實(shí)現(xiàn)代碼(完整代碼)
這篇文章主要介紹了Android5.0以上版本錄屏實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01

