目前很多軟件安裝時(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)。
開始實(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í)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選