Android開發之使用ViewPager做引導頁面
阿新 • • 發佈：2019-01-31
引導頁面相信大家都不會陌生，安裝了一個新的App後第一次開啟，都會有類似下圖，相當於說明文件
實現效果
程式目錄結構
在主layout裡main.xml定義一個幀佈局，在viewPager上有多少頁就顯示多少個點
<?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:orientation="vertical" > <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" > </android.support.v4.view.ViewPager> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center_horizontal" android:orientation="horizontal" > <ImageView android:id="@+id/icon_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="30dp" android:contentDescription="@string/content_description" android:src="@drawable/page_icon" /> <ImageView android:id="@+id/icon_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="30dp" android:contentDescription="@string/content_description" android:src="@drawable/page_icon" /> <ImageView android:id="@+id/icon_3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:contentDescription="@string/content_description" android:src="@drawable/page_icon" /> </LinearLayout> </FrameLayout>
每一個View的佈局pager1.xml
其它兩個view類似<?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/image1" android:orientation="vertical" > <Button android:id="@+id/btn_in_first" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="第一頁" /> </LinearLayout>
在主Activity中
每個小圓點的改變是通過viewpager監聽器去改變的package com.example.viewpagerdemo; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.LayoutInflater; import android.view.View; import android.widget.ImageView; public class MainActivity extends Activity { private ViewPager viewPager = null; private ImageView img1, img2, img3; private ArrayList<String> titles; private int curIndex = -1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); initWidgets(); // 把要顯示的View裝入陣列 LayoutInflater li = LayoutInflater.from(this); View view1 = li.inflate(R.layout.pager1, null); View view2 = li.inflate(R.layout.pager2, null); View view3 = li.inflate(R.layout.pager3, null); // 新增頁面 final ArrayList<View> views = new ArrayList<View>(); views.add(view1); views.add(view2); views.add(view3); // 新增標題 titles = new ArrayList<String>(); titles.add("tab1"); titles.add("tab2"); titles.add("tab3"); picViewPagerAdapter pagerAdapter = new picViewPagerAdapter(views); viewPager.setAdapter(pagerAdapter); curIndex = 1; viewPager.setCurrentItem(curIndex); img2.setImageResource(R.drawable.page_icon_sel); viewPager.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int arg0) { // TODO Auto-generated method stub switch (arg0) { case 0: img1.setImageResource(R.drawable.page_icon_sel); img2.setImageResource(R.drawable.page_icon); img3.setImageResource(R.drawable.page_icon); break; case 1: img2.setImageResource(R.drawable.page_icon_sel); img1.setImageResource(R.drawable.page_icon); img3.setImageResource(R.drawable.page_icon); break; case 2: img3.setImageResource(R.drawable.page_icon_sel); img2.setImageResource(R.drawable.page_icon); img1.setImageResource(R.drawable.page_icon); break; default: break; } curIndex = arg0; System.out.println("[MainActivity->]currIndex = " + curIndex); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } }); } private void initWidgets() { viewPager = (ViewPager) findViewById(R.id.viewpager); img1 = (ImageView) findViewById(R.id.icon_1); img2 = (ImageView) findViewById(R.id.icon_2); img3 = (ImageView) findViewById(R.id.icon_3); } /** * 為ViewPager新增介面卡 * * @author Administrator * */ class picViewPagerAdapter extends PagerAdapter { private List<View> listViews; public picViewPagerAdapter(List<View> list) { listViews = list; } @Override public int getCount() { // TODO Auto-generated method stub return listViews.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0 == arg1; } @Override public void destroyItem(View container, int position, Object object) { ((ViewPager) container).removeView(listViews.get(position)); } @Override public CharSequence getPageTitle(int position) { return titles.get(position); } @Override public Object instantiateItem(View container, int position) { ((ViewPager) container).addView(listViews.get(position)); return listViews.get(position); } } }
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
switch (arg0) {
case 0:
img1.setImageResource(R.drawable.page_icon_sel);
img2.setImageResource(R.drawable.page_icon);
img3.setImageResource(R.drawable.page_icon);
break;
case 1:
img2.setImageResource(R.drawable.page_icon_sel);
img1.setImageResource(R.drawable.page_icon);
img3.setImageResource(R.drawable.page_icon);
break;
case 2:
img3.setImageResource(R.drawable.page_icon_sel);
img2.setImageResource(R.drawable.page_icon);
img1.setImageResource(R.drawable.page_icon);
break;
default:
break;
}
curIndex = arg0;
System.out.println("[MainActivity->]currIndex = " + curIndex);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});