ViewPager(一):帶指示圖示的滑動頁面的實現
阿新 • • 發佈:2019-02-13
ViewPager是可滑動的控制元件,在v4包中,在UI中使用該控制元件必須用全類名android.support.v4.view.ViewPager
下面實現帶小圓點圖示的圖片頁面滑動的效果,先來效果圖吧:
<android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" /> <LinearLayout android:id="@+id/layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="350dp" android:orientation="horizontal"> <ImageView android:layout_width="25dp" android:layout_height="25dp" android:layout_marginLeft="30dp" android:layout_marginRight="20dp" android:src="@drawable/dot"/> <ImageView android:layout_width="25dp" android:layout_height="25dp" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:src="@drawable/dot"/> <ImageView android:layout_width="25dp" android:layout_height="25dp" android:layout_marginLeft="20dp" android:layout_marginRight="20dp" android:src="@drawable/dot"/> <ImageView android:layout_width="25dp" android:layout_height="25dp" android:layout_marginLeft="20dp" android:layout_marginRight="30dp" android:src="@drawable/dot"/> </LinearLayout>
以上是activity_main.xml的程式碼,四個ImageView就是那四個小圓點
在res中的drawable-hdpi中新建一個xml檔案
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 定義選中和未選中時的圖片 --> <item android:state_enabled="true" android:drawable="@drawable/icon01"></item> <item android:state_enabled="false" android:drawable="@drawable/icon02"></item> </selector> <!-- 控制元件狀態: android:state_selected 選中/未選中 android:state_focused 獲得焦點/未獲得焦點 android:state_enabled 可用/不可用-->
MainActivity.java程式碼:
package com.example.viewpager_demo01; import java.util.ArrayList; import java.util.List; import android.os.Bundle; import android.app.Activity; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.LinearLayout; public class MainActivity extends Activity { private ViewPager viewPager; private List<ImageView> data; //儲存ViewPager每一頁顯示的ImageView private ImageView[] icons; // 儲存小圓點的集合 private int[] imgs={R.drawable.ic_01,R.drawable.ic_02,R.drawable.ic_03,R.drawable.ic_04}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewPager=(ViewPager)findViewById(R.id.viewpager); data=new ArrayList<ImageView>(); for (int i = 0; i < imgs.length; i++) { //建立ImageView物件 ImageView iView=new ImageView(this); //使用圖片的資源,給ImageView新增圖片 iView.setImageResource(imgs[i]); //ImageView儲存到list集合 data.add(iView); } MyPagerAdapter adapter=new MyPagerAdapter(); viewPager.setAdapter(adapter); //初始化小圓點 initDot(); //新增頁面切換(滾動)的事件 viewPager.setOnPageChangeListener(new OnPageChangeListener() { //頁面選中呼叫該方法 @Override public void onPageSelected(int position) { // TODO Auto-generated method stub for (int i = 0; i < icons.length; i++) { icons[i].setEnabled(true); } icons[position].setEnabled(false); } //頁面滾動呼叫該方法 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { // TODO Auto-generated method stub } //頁面滾動過程中的狀態 @Override public void onPageScrollStateChanged(int state) { // TODO Auto-generated method stub } }); } //初始化指示性圖示 private void initDot() { //獲得父控制元件->線性佈局 LinearLayout layout = (LinearLayout)findViewById(R.id.layout); //建立儲存小圓點的陣列物件 icons=new ImageView[imgs.length]; //迴圈獲得小圓點,並初始化圖片 for (int i = 0; i < icons.length; i++) { //從線性佈局中獲得每一個子控制元件 icons[i]=(ImageView) layout.getChildAt(i); //設定狀態為true,與dot.xml中的選擇器相關聯,並使用對應的圖片載入到ImageView中 icons[i].setEnabled(true); //每個ImageView儲存當前的索引值,0、1、2、3 icons[i].setTag(i); //設定小圓點的單擊事件 icons[i].setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // 設定ViewPager當前顯示的頁面,獲得與icon[i]相同索引的item(pager頁面) viewPager.setCurrentItem((Integer)v.getTag()); } }); } //設定第一個為預設選中 icons[0].setEnabled(false); } //建立自定義介面卡 class MyPagerAdapter extends PagerAdapter{ //載入到介面卡中的pager的個數(有幾頁) @Override public int getCount() { // TODO Auto-generated method stub return data.size(); } //判斷當前的View物件與instantiateItem方法的返回值是否一致 //(arg1就是instantiateItem的返回值) @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0==arg1; } //建立一個新的Pager頁面 //引數一:container 容器,指ViewPager //引數二:position 位置,當前頁的索引 @Override public Object instantiateItem(ViewGroup container, int position) { // 從ImageView的集合中取出一個元素新增到ViewPager中 container.addView(data.get(position)); //返回每一個頁面新增的內容 return data.get(position); } //移除滑出螢幕的頁面 @Override public void destroyItem(ViewGroup container, int position, Object object) { // TODO Auto-generated method stub container.removeView(data.get(position)); } } }