通過點選按鈕實現ViewPager的切換
阿新 • • 發佈:2019-02-17
這裡我們實現的是通過點選按鈕來切換ViewPager,就是在ViewPager的底端我們定義一個
LinearLayout佈局,在其中放置4個ImageView控制元件,我們可以通過點選不同的控制元件來切換ViewPager並改變
ImageView的狀態。所以這裡我們需要用到選擇器。
首先在res資料夾下新建一個drawable資料夾,並在其中新建一個Selector型別的dot.xml檔案:
然後是在activity_main.xml佈局檔案中引用我們定義的dot.xml檔案<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 定義選中和未選中時的圖片 icon01是灰色,可以接受觸控或點選事件 icon02是白色,不可以接受觸控或點選事件 --> <item android:drawable="@drawable/icon01" android:state_enabled="true"></item> <item android:drawable="@drawable/icon02" android:state_enabled="false"></item> <!-- 控制元件狀態: android:state_selected:選中或未選中 android:state_focused:獲得焦點或未獲得焦點 android:state_enabled:能否接受觸控或者點選事件 --> </selector>
MainActivity的具體實現:<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" 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="0dp" android:layout_marginTop="10dp" android:layout_weight="5" > </android.support.v4.view.ViewPager> <LinearLayout android:id="@+id/layout" android:layout_width="match_parent" android:layout_height="0dp" android:layout_centerHorizontal="true" android:layout_weight="1" android:background="@android:color/holo_orange_light" android:orientation="horizontal" > <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:src="@drawable/dot" /> <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:src="@drawable/dot" /> <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:src="@drawable/dot" /> <ImageView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1" android:src="@drawable/dot" /> </LinearLayout> </LinearLayout>
執行結果:package com.example.text_03; 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.Menu; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.LinearLayout; public class MainActivity extends Activity { private int[] images = new int[] { R.drawable.bd_logo1, R.drawable.them01, R.drawable.them02, R.drawable.them03 }; // 存放圖片資源的集合 private List<ImageView> data; private ViewPager viewPager; // 儲存小圓點的集合 private ImageView[] icons; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewPager = (ViewPager) findViewById(R.id.viewpager); // 呼叫初始化ImageView的方法 initData(); // 初始化小圓點的方法 initDot(); MyAdapter adapter = new MyAdapter(); viewPager.setAdapter(adapter); // 給ViewPager新增頁面切換事件 viewPager.setOnPageChangeListener(new OnPageChangeListener() { // 頁面選中呼叫該方法 @Override public void onPageSelected(int arg0) { // TODO Auto-generated method stub for (int i = 0; i < images.length; i++) { icons[i].setEnabled(true); } icons[arg0].setEnabled(false); } // 頁面滾動呼叫該方法 @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 } }); } // 初始化ImageView private void initData() { data = new ArrayList<ImageView>(); for (int i = 0; i < images.length; i++) { ImageView iv = new ImageView(this); iv.setImageResource(images[i]); data.add(iv); } } // 初始化指示性圖示 private void initDot() { // 首先獲得父控制元件,線性佈局 LinearLayout layout = (LinearLayout) findViewById(R.id.layout); // 建立儲存小圓點的陣列變數 icons = new ImageView[images.length]; // 迴圈獲得小圓點並初始化圖片 for (int i = 0; i < icons.length; i++) { // 通過索引獲得線性佈局中的每一個子控制元件,就是ImageView icons[i] = (ImageView) layout.getChildAt(i); // 設定狀態為true,與dot.xml中的選擇器相關聯,並使用對應的圖片載入到ImageView中 icons[i].setEnabled(true); // 每個ImageView儲存當前的索引值,0123 icons[i].setTag(i); // 設定ImageView的點選事件 icons[i].setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // 設定ViewPager當前顯示的頁面,獲得與icons[i]相同索引item(pager頁面) viewPager.setCurrentItem((Integer) v.getTag()); } }); } // 設定第一個為預設選中 icons[0].setEnabled(false); } class MyAdapter extends PagerAdapter { @Override public int getCount() { // TODO Auto-generated method stub return data.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0 == arg1; } @Override public Object instantiateItem(ViewGroup container, int position) { // TODO Auto-generated method stub 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)); } } }
另外是兩種圖片資源:第二個是白色的