Android 中使用 ViewPager實現螢幕頁面切換和頁面輪播效果

Android 中使用 ViewPager實現螢幕頁面切換和頁面輪播效果
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

之前關於如何實現螢幕頁面切換,寫過一篇博文《Android中使用ViewFlipper實現螢幕切換》,相比ViewFlipper,ViewPager更適用複雜的檢視切換,而且Viewpager有自己的adapter,這也讓其適應複雜物件,實現資料的動態載入。

ViewPager是谷歌官方給我們提供的一個相容低版本安卓裝置的軟體包,裡面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一,利用它,我們可以做很多事情,從最簡單的導航,到頁面選單等等。

下面我們就展示下ViewPager可以實現的兩種簡單效果:

第一種:螢幕的頁面的切換(與ViewFlipper的實現效果類似)

實現效果如下(4張檢視(layout)):

第一步:在layout佈局檔案里加入主佈局檔案viewpager_layout.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:id="@ id/vp">
<android.support.v4.view.PagerTabStrip
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@ id/tap">
</android.support.v4.view.PagerTabStrip>
</android.support.v4.view.ViewPager>
</LinearLayout>

注意事項:

<1、這裡ViewPager和PagerTabStrip都要把包名寫全了,不然會ClassNotFound

<2、API中說:在佈局xml把PagerTabStrip當做ViewPager的一個子標籤來用,不能拿出來,不然還是會報錯

<3、在PagerTabStrip標籤中可以用屬性android:layout_gravity=TOP|BOTTOM來指定title的位置

<4、如果要顯示出PagerTabStrip某一頁的title,需要在ViewPager的adapter中實現getPageTitle(int)

第二步:在layout中建立要展示切換的檢視檔案(示例中共四個layout1/2/3/4.xml,這裡寫一個典型):


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@mipmap/a1"
android:scaleType="centerCrop"
android:id="@ id/iv1" />
</LinearLayout>

第三步:Java中Activity的實現程式碼ViewPagerDemo.java(這裡未設定pagerTabStrip的屬性):

在Activity裡例項化ViewPager元件,並設定它的Adapter(就是PagerAdapter,方法與ListView一樣的)

實現一個PagerAdapter,覆蓋以下方法:

instantiateItem(ViewGroup, int)//用來例項化頁卡

destroyItem(ViewGroup, int, Object)//刪除頁卡

getCount() //返回頁卡的數量

isViewFromObject(View, Object)//判斷兩個物件是否相等

getPageTitle(int position)//設定標籤顯示的標題

設定指示標籤的屬性

pagerTabStrip.setTabIndicatorColor();//指示器的顏色

pagerTabStrip.setBackgroundColor();//背影色

pagerTabStrip.setTextColor(Color.WHITE);//字型顏色


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
/**
* Created by panchengjia on 2016/12/1.
*/
public class ViewPagerDemo extends AppCompatActivity {
private ViewPager vp;
//宣告儲存ViewPager下子檢視的集合
ArrayList<View> views = new ArrayList<>();
//顯示效果中每個檢視的標題
String[] titles={"一號美女","二號美女","三號美女","四號美女"};
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewpager_layout);
vp= (ViewPager) findViewById(R.id.vp);
initView();//呼叫初始化檢視方法
vp.setAdapter(new MyAdapter());//設定介面卡
}
//初始化檢視的方法(通過佈局填充器獲取用於滑動的檢視並存入對應的的集合)
private void initView() {
View v1 = getLayoutInflater().inflate(R.layout.layout1,null);
View v2 = getLayoutInflater().inflate(R.layout.layout2,null);
View v3 = getLayoutInflater().inflate(R.layout.layout3,null);
View v4 = getLayoutInflater().inflate(R.layout.layout4,null);
views.add(v1);
views.add(v2);
views.add(v3);
views.add(v4);
}
class MyAdapter extends PagerAdapter{
@Override
public int getCount() {
return views.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
//重寫銷燬滑動檢視佈局(將子檢視移出檢視儲存集合(ViewGroup))
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
//重寫初始化滑動檢視佈局(從檢視集合中取出對應檢視,新增到ViewGroup)
@Override
public Object instantiateItem(ViewGroup container, int position) {
View v =views.get(position);
container.addView(v);
return v;
}
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
}
}

第二種:頁面輪播效果檢視(程式首次啟動的引導頁實現)

實現效果如下(3張檢視滑動引導):

開始程式碼前註釋:

1、本次未實現迴圈輪播效果;2、導航原點資源圖片註解:default_holo為未選中狀態,touched_holo為選中後實心狀態。(也可自己用Shape繪製)

第一步:在layout佈局檔案里加入主佈局檔案viewpager_layout.xml

主佈局為FrameLayout,在ViewPager(這裡因為存在導航原點,不設定PagerTabStrip)上巢狀包含3個導航原點(由滑動檢視數量決定)的linearLayout佈局(本次設定該佈局位於底部):


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@ id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.administrator.myapplication11.MainActivity">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@ id/vp">
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="@ id/point_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@mipmap/default_holo"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@mipmap/default_holo" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@mipmap/default_holo"
android:id="@ id/imageView" />
</LinearLayout>
</FrameLayout>

第二步:Layout中用於滑動切換的檢視(示例中共三個layout1/2/3.xml,這裡寫一個典型)與第一種相同


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/genie"/>
</LinearLayout>

第三步:Java中Activity的實現程式碼MainActivity.java

通過實現OnPageChangeListener介面實現在檢視切換時導航原點狀態的變化),其中關於OnPageChangeListener中方法的詳細解釋,請參考博文

ViewPager的setOnPageChangeListener方法詳解》這裡不做贅述:


import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;
/**
* Created by panchengjia on 2016/11/30.
*/
public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{
private ViewPager vp;
private LinearLayout point_layout;
ArrayList<View> views =new ArrayList<>();
//例項化儲存imageView(導航原點)的集合
ArrayList<ImageView> imageViews = new ArrayList<>();
int currImage;//記錄當前頁(導航原點)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vp= (ViewPager) findViewById(R.id.vp);
initView();//呼叫初始化檢視方法
initPoint();//呼叫初始化導航原點的方法
vp.addOnPageChangeListener(this);
vp.setAdapter(new MyAdapter());
}
/*將point_layout中包含的imageView(導航原點)新增到imageViewS集合中
*並設定layout1(第一檢視)的導航原點(對應集合0下標)的圖片
* 為touched_holo(觸控狀態的圖片)
*/
private void initPoint() {
point_layout= (LinearLayout) findViewById(R.id.point_layout);
int counnt = point_layout.getChildCount();//獲取point數量
for (int i=0;i<counnt;i  ){
imageViews.add((ImageView) point_layout.getChildAt(i));
}
imageViews.get(0).setImageResource(R.mipmap.touched_holo);
}
private void initView() {
View v1=getLayoutInflater().inflate(R.layout.layout1,null);
View v2=getLayoutInflater().inflate(R.layout.layout2,null);
View v3=getLayoutInflater().inflate(R.layout.layout3,null);
views.add(v1);
views.add(v2);
views.add(v3);
}
//OnPageChangeListener的方法,這裡不做具體實現
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//設定滑動到對應位置的檢視後,導航原點的不同狀態(圖片)
@Override
public void onPageSelected(int position) {
ImageView preView = imageViews.get(currImage);
preView.setImageResource(R.mipmap.default_holo);
ImageView currView = imageViews.get(position);
currView.setImageResource(R.mipmap.touched_holo);
currImage = position;
}
//OnPageChangeListener的方法,這裡不做具體實現
@Override
public void onPageScrollStateChanged(int state) {
}
class MyAdapter extends PagerAdapter {
@Override
public int getCount() {
return views.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View v = views.get(position);
container.addView(v);
return v;
}
}
}

至此,本次的ViewPager實現示例所需程式碼已完成,當然這只是ViewPager最簡單的功能,後續還會更新一些ViewPager的高階用法,歡迎小夥伴們繼續支援。

以上所述是小編給大家介紹的Android 中使用 ViewPager實現螢幕頁面切換和頁面輪播效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對指令碼之家網站的支援!

您可能感興趣的文章:

Android 使用ViewPager自動滾動迴圈輪播效果Android使用ViewPager載入圖片和輪播視訊Android ViewPager實現圖片輪播效果Android ViewPager實現輪播圖效果Android實現基於ViewPager的無限迴圈自動播放帶指示器的輪播圖CarouselFigureView控制元件Android使用ViewPager實現自動輪播Android viewpager無限輪播獲取網路圖片功能Android 使用ViewPager實現左右迴圈滑動及輪播效果Android實現帶指示器的自動輪播式ViewPagerAndroid Viewpager實現輪播廣告圖

相關文章

Android 開發 最新文章