Android開發-自定義View-AndroidStudio(六)ViewPager再體驗
覺得博文有用,請點贊,請留言,請關注,謝謝!~
直接看GIF效果和程式碼(相對於ViewPager初體驗,添加了當前頁面的點點選中變色效果,以及對應文字的設定):
注意一下,point_selector.xml、point_normal.xml、point_press.xml需要放在drawable下面:
MainActivity.java:
activity_main.xml:package com.iwanghang.viewpager; 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 android.widget.TextView; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { private ViewPager viewpager; private TextView tv_title; private LinearLayout ll_point_group; // 因為大家都瞭解ListView,先說一下ListView的使用,然後我們對比著,看一下ViewPager的使用 // ListView的使用 // 1、在佈局檔案中定義ListView // 2、在程式碼中例項化ListView // 3、準備資料 // 4、設定介面卡(BaseAdapter)-item佈局-繫結資料 // ArrayList不安全但是效率高 // 這裡是用於準備資料,這個就是圖片資料的集合 private ArrayList<ImageView> imageViews; // 圖片資源ID集合 private final int[] imageIds = {R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e}; // 圖片標題集合 private final String[] imageDescriptions = {"元旦好","新年好","大家好","哈哈哈","嘻嘻嘻"}; int prePosition = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); viewpager = (ViewPager) findViewById(R.id.viewpager); tv_title = (TextView) findViewById(R.id.tv_title); ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group); // ViewPager的使用 // 1、在佈局檔案中定義ViewPager // 2、在程式碼中例項化ViewPager // 3、準備資料 // 4、設定介面卡(PagerAdapter)-item佈局-繫結資料 imageViews = new ArrayList<>(); for (int i = 0; i < imageIds.length;i++) { ImageView imageView = new ImageView(this); // 設定src會按比例填充,但是設定background會拉伸填充 // 我們要的效果是拉伸填充,所以這裡使用setBackgroundResource imageView.setBackgroundResource(imageIds[i]); // 新增到集合中 imageViews.add(imageView); // 新增點點 ImageView point = new ImageView(this); point.setBackgroundResource(R.drawable.point_selector); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(8,8); if (i==0){ point.setEnabled(true); // 顯示紅色 }else { point.setEnabled(false); // 顯示灰色 params.leftMargin = 8; } point.setLayoutParams(params); ll_point_group.addView(point); } viewpager.setAdapter(new MyPagerAdapter()); viewpager.addOnPageChangeListener(new MyOnPageChangeListener()); tv_title.setText(imageDescriptions[0]); } class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{ /** * 當頁面滾動了的時候回撥這個方法 * @param position 當前頁面的位置 * @param positionOffset 滑動頁面的百分比 * @param positionOffsetPixels 在螢幕上滑動的畫素 */ @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } /** * 當某個頁面被選中 * @param position 被選中的頁面的位置 */ @Override public void onPageSelected(int position) { // 設定對應頁面的文字資訊 tv_title.setText(imageDescriptions[position]); // 設定點點的顏色 ll_point_group.getChildAt(prePosition).setEnabled(false); // 上一頁頁面對應點點設定為灰色 ll_point_group.getChildAt(position).setEnabled(true); // 當前頁面對應點點設定為紅色 prePosition = position; // 記錄當前點點 } /** * 當頁面滾動 狀態的變化 回撥這個方法 * 靜止 -> 滑動 * 滑動 -> 靜止 * 靜止 -> 拖拽 * @param state */ @Override public void onPageScrollStateChanged(int state) { } } class MyPagerAdapter extends PagerAdapter{ /** * @return 圖片的總數 */ @Override public int getCount() { return imageViews.size(); } /** * 相當於getView方法 * @param container ViewPager自身 * @param position 當前例項化頁面的位置 * @return */ @Override public Object instantiateItem(ViewGroup container, int position) { ImageView imageView = imageViews.get(position); container.addView(imageView); // 把圖片新增到ViewPager容器中 return imageView; } /** * 比較view和object是否是同一個實力 * @param view 頁面 * @param object instantiateItem返回的結果 * @return */ @Override public boolean isViewFromObject(View view, Object object) { if (view == object) { return true; }else { return false; } } /** * 釋放資源 * @param container viewpager * @param position 要釋放的位置 * @param object 要釋放的頁面 */ @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } } }
point_selector.xml:<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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" tools:context="com.iwanghang.viewpager.MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="200dp"/> <LinearLayout android:background="#44000000" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_alignBottom="@+id/viewpager" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:id="@+id/linearLayout"> <TextView android:id="@+id/tv_title" android:padding="2dp" android:text="iwanghang" android:textStyle="bold" android:textColor="#ffffff" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" /> </LinearLayout> <LinearLayout android:id="@+id/ll_point_group" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:gravity="center" android:layout_above="@+id/linearLayout" android:layout_alignParentLeft="true" android:layout_alignParentStart="true"> </LinearLayout> </RelativeLayout>
point_normal.xml<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_enabled="false" android:drawable="@drawable/point_normal"/> <item android:state_enabled="true" android:drawable="@drawable/point_press"/> </selector>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<size android:width="8dp"
android:height="8dp"/>
<solid android:color="#44000000"/>
</shape>
point_press.xml<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
<size
android:width="8dp"
android:height="8dp"/>
<solid android:color="#ff0000"/>
</shape>
--------------------分割線--------------------
實現無限迴圈,直接看GIF效果和程式碼(程式碼只修改了MainActivity):
MainActivity.java:
package com.iwanghang.viewpager;
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 android.widget.TextView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private ViewPager viewpager;
private TextView tv_title;
private LinearLayout ll_point_group;
// 因為大家都瞭解ListView,先說一下ListView的使用,然後我們對比著,看一下ViewPager的使用
// ListView的使用
// 1、在佈局檔案中定義ListView
// 2、在程式碼中例項化ListView
// 3、準備資料
// 4、設定介面卡(BaseAdapter)-item佈局-繫結資料
// ArrayList不安全但是效率高
// 這裡是用於準備資料,這個就是圖片資料的集合
private ArrayList<ImageView> imageViews;
// 圖片資源ID集合
private final int[] imageIds = {R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e};
// 圖片標題集合
private final String[] imageDescriptions = {"元旦好","新年好","大家好","哈哈哈","嘻嘻嘻"};
int prePosition = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewpager = (ViewPager) findViewById(R.id.viewpager);
tv_title = (TextView) findViewById(R.id.tv_title);
ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group);
// ViewPager的使用
// 1、在佈局檔案中定義ViewPager
// 2、在程式碼中例項化ViewPager
// 3、準備資料
// 4、設定介面卡(PagerAdapter)-item佈局-繫結資料
imageViews = new ArrayList<>();
for (int i = 0; i < imageIds.length;i++) {
ImageView imageView = new ImageView(this);
// 設定src會按比例填充,但是設定background會拉伸填充
// 我們要的效果是拉伸填充,所以這裡使用setBackgroundResource
imageView.setBackgroundResource(imageIds[i]);
// 新增到集合中
imageViews.add(imageView);
// 新增點點
ImageView point = new ImageView(this);
point.setBackgroundResource(R.drawable.point_selector);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(8,8);
if (i==0){
point.setEnabled(true); // 顯示紅色
}else {
point.setEnabled(false); // 顯示灰色
params.leftMargin = 8;
}
point.setLayoutParams(params);
ll_point_group.addView(point);
}
viewpager.setAdapter(new MyPagerAdapter());
viewpager.addOnPageChangeListener(new MyOnPageChangeListener());
/**
* 設定中間位置 向左向右都可以滑動1073741820次
* 簡單的說 這裡設定一個很大的上限 讓輪播圖片看起來好像是無限迴圈
* 實際沒有使用者會向左或者向右滑動1073741820次 所以就是無限迴圈的效果
* 同時,要在MyPagerAdapter和MyOnPageChangeListener中做對應修改
*/
// 保證imageViews的整數倍 Integer.MAX_VALUE=2147483647
int item = Integer.MAX_VALUE/2 - Integer.MAX_VALUE/2%imageViews.size();
//System.out.println(item); // 1073741820
/**
* setCurrentItem
* 設定當前選定的頁面。如果ViewPager已經通過它的第一
* 佈局與當前介面卡將有一個平穩的動畫之間的過渡
* 當前專案和指定專案。
*/
viewpager.setCurrentItem(item); // 設定當前選定的頁面。即,中間位置。
// 設定標題
tv_title.setText(imageDescriptions[0]);
}
class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{
/**
* 當頁面滾動了的時候回撥這個方法
* @param position 當前頁面的位置
* @param positionOffset 滑動頁面的百分比
* @param positionOffsetPixels 在螢幕上滑動的畫素
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
/**
* 當某個頁面被選中
* @param position 被選中的頁面的位置
*/
@Override
public void onPageSelected(int position) {
int realPosition = position%imageViews.size();
// 設定對應頁面的文字資訊
//tv_title.setText(imageDescriptions[position]);
tv_title.setText(imageDescriptions[realPosition]);
// 設定點點的顏色
ll_point_group.getChildAt(prePosition).setEnabled(false); // 上一頁頁面對應點點設定為灰色
//ll_point_group.getChildAt(position).setEnabled(true); // 當前頁面對應點點設定為紅色
ll_point_group.getChildAt(realPosition).setEnabled(true); // 當前頁面對應點點設定為紅色
//prePosition = position; // 記錄當前點點
prePosition = realPosition; // 記錄當前點點
}
/**
* 當頁面滾動 狀態的變化 回撥這個方法
* 靜止 -> 滑動
* 滑動 -> 靜止
* 靜止 -> 拖拽
* @param state
*/
@Override
public void onPageScrollStateChanged(int state) {
}
}
class MyPagerAdapter extends PagerAdapter{
/**
* @return 圖片的總數
*/
@Override
public int getCount() {
// return imageViews.size();
return Integer.MAX_VALUE;
}
/**
* 相當於getView方法
* @param container ViewPager自身
* @param position 當前例項化頁面的位置
* @return
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
int realPosition = position%imageViews.size();
// ImageView imageView = imageViews.get(position);
ImageView imageView = imageViews.get(realPosition);
container.addView(imageView); // 把圖片新增到ViewPager容器中
return imageView;
}
/**
* 比較view和object是否是同一個實力
* @param view 頁面
* @param object instantiateItem返回的結果
* @return
*/
@Override
public boolean isViewFromObject(View view, Object object) {
if (view == object) {
return true;
}else {
return false;
}
}
/**
* 釋放資源
* @param container viewpager
* @param position 要釋放的位置
* @param object 要釋放的頁面
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
--------------------分割線--------------------實現自動播放,直接看GIF效果和程式碼(程式碼只修改了MainActivity,例項化了一個Handler):
MainActivity.java:
package com.iwanghang.viewpager;
import android.os.Handler;
import android.os.Message;
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 android.widget.TextView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private ViewPager viewpager;
private TextView tv_title;
private LinearLayout ll_point_group;
// 因為大家都瞭解ListView,先說一下ListView的使用,然後我們對比著,看一下ViewPager的使用
// ListView的使用
// 1、在佈局檔案中定義ListView
// 2、在程式碼中例項化ListView
// 3、準備資料
// 4、設定介面卡(BaseAdapter)-item佈局-繫結資料
// ArrayList不安全但是效率高
// 這裡是用於準備資料,這個就是圖片資料的集合
private ArrayList<ImageView> imageViews;
// 圖片資源ID集合
private final int[] imageIds = {R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e};
// 圖片標題集合
private final String[] imageDescriptions = {"元旦好","新年好","大家好","哈哈哈","嘻嘻嘻"};
int prePosition = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewpager = (ViewPager) findViewById(R.id.viewpager);
tv_title = (TextView) findViewById(R.id.tv_title);
ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group);
// ViewPager的使用
// 1、在佈局檔案中定義ViewPager
// 2、在程式碼中例項化ViewPager
// 3、準備資料
// 4、設定介面卡(PagerAdapter)-item佈局-繫結資料
imageViews = new ArrayList<>();
for (int i = 0; i < imageIds.length;i++) {
ImageView imageView = new ImageView(this);
// 設定src會按比例填充,但是設定background會拉伸填充
// 我們要的效果是拉伸填充,所以這裡使用setBackgroundResource
imageView.setBackgroundResource(imageIds[i]);
// 新增到集合中
imageViews.add(imageView);
// 新增點點
ImageView point = new ImageView(this);
point.setBackgroundResource(R.drawable.point_selector);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(8,8);
if (i==0){
point.setEnabled(true); // 顯示紅色
}else {
point.setEnabled(false); // 顯示灰色
params.leftMargin = 8;
}
point.setLayoutParams(params);
ll_point_group.addView(point);
}
viewpager.setAdapter(new MyPagerAdapter());
viewpager.addOnPageChangeListener(new MyOnPageChangeListener());
/**
* 設定中間位置 向左向右都可以滑動1073741820次
* 簡單的說 這裡設定一個很大的上限 讓輪播圖片看起來好像是無限迴圈
* 實際沒有使用者會向左或者向右滑動1073741820次 所以就是無限迴圈的效果
* 同時,要在MyPagerAdapter和MyOnPageChangeListener中做對應修改
*/
// 保證imageViews的整數倍 Integer.MAX_VALUE=2147483647
int item = Integer.MAX_VALUE/2 - Integer.MAX_VALUE/2%imageViews.size();
//System.out.println(item); // 1073741820
/**
* setCurrentItem
* 設定當前選定的頁面。如果ViewPager已經通過它的第一
* 佈局與當前介面卡將有一個平穩的動畫之間的過渡
* 當前專案和指定專案。
*/
viewpager.setCurrentItem(item); // 設定當前選定的頁面。即,中間位置。
// 設定標題
tv_title.setText(imageDescriptions[0]);
// 發訊息
handler.sendEmptyMessageDelayed(0,500);
}
/**
* 例項化一個Handler 讓輪播自動迴圈
*/
private Handler handler = new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
int item = viewpager.getCurrentItem()+1;
viewpager.setCurrentItem(item);
// 延遲發訊息
handler.sendEmptyMessageDelayed(0,500);
}
};
class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{
/**
* 當頁面滾動了的時候回撥這個方法
* @param position 當前頁面的位置
* @param positionOffset 滑動頁面的百分比
* @param positionOffsetPixels 在螢幕上滑動的畫素
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
/**
* 當某個頁面被選中
* @param position 被選中的頁面的位置
*/
@Override
public void onPageSelected(int position) {
int realPosition = position%imageViews.size();
// 設定對應頁面的文字資訊
//tv_title.setText(imageDescriptions[position]);
tv_title.setText(imageDescriptions[realPosition]);
// 設定點點的顏色
ll_point_group.getChildAt(prePosition).setEnabled(false); // 上一頁頁面對應點點設定為灰色
//ll_point_group.getChildAt(position).setEnabled(true); // 當前頁面對應點點設定為紅色
ll_point_group.getChildAt(realPosition).setEnabled(true); // 當前頁面對應點點設定為紅色
//prePosition = position; // 記錄當前點點
prePosition = realPosition; // 記錄當前點點
}
/**
* 當頁面滾動 狀態的變化 回撥這個方法
* 靜止 -> 滑動
* 滑動 -> 靜止
* 靜止 -> 拖拽
* @param state
*/
@Override
public void onPageScrollStateChanged(int state) {
}
}
class MyPagerAdapter extends PagerAdapter{
/**
* @return 圖片的總數
*/
@Override
public int getCount() {
// return imageViews.size();
return Integer.MAX_VALUE;
}
/**
* 相當於getView方法
* @param container ViewPager自身
* @param position 當前例項化頁面的位置
* @return
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
int realPosition = position%imageViews.size();
// ImageView imageView = imageViews.get(position);
ImageView imageView = imageViews.get(realPosition);
container.addView(imageView); // 把圖片新增到ViewPager容器中
return imageView;
}
/**
* 比較view和object是否是同一個實力
* @param view 頁面
* @param object instantiateItem返回的結果
* @return
*/
@Override
public boolean isViewFromObject(View view, Object object) {
if (view == object) {
return true;
}else {
return false;
}
}
/**
* 釋放資源
* @param container viewpager
* @param position 要釋放的位置
* @param object 要釋放的頁面
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
--------------------分割線--------------------實現自動播放,直接看GIF效果和程式碼(寫到上面為止,使用者觸控滾動圖片時的體驗非常不好,下面我們來解決這個問題):
MainActivity.java:
package com.iwanghang.viewpager;
import android.os.Handler;
import android.os.Message;
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.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private ViewPager viewpager;
private TextView tv_title;
private LinearLayout ll_point_group;
// 因為大家都瞭解ListView,先說一下ListView的使用,然後我們對比著,看一下ViewPager的使用
// ListView的使用
// 1、在佈局檔案中定義ListView
// 2、在程式碼中例項化ListView
// 3、準備資料
// 4、設定介面卡(BaseAdapter)-item佈局-繫結資料
// ArrayList不安全但是效率高
// 這裡是用於準備資料,這個就是圖片資料的集合
private ArrayList<ImageView> imageViews;
// 圖片資源ID集合
private final int[] imageIds = {R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e};
// 圖片標題集合
private final String[] imageDescriptions = {"元旦好","新年好","大家好","哈哈哈","嘻嘻嘻"};
int prePosition = 0;
// 拖動是否為真,輔助判斷圖片觸控事件
private boolean isDragging = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewpager = (ViewPager) findViewById(R.id.viewpager);
tv_title = (TextView) findViewById(R.id.tv_title);
ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group);
// ViewPager的使用
// 1、在佈局檔案中定義ViewPager
// 2、在程式碼中例項化ViewPager
// 3、準備資料
// 4、設定介面卡(PagerAdapter)-item佈局-繫結資料
imageViews = new ArrayList<>();
for (int i = 0; i < imageIds.length;i++) {
ImageView imageView = new ImageView(this);
// 設定src會按比例填充,但是設定background會拉伸填充
// 我們要的效果是拉伸填充,所以這裡使用setBackgroundResource
imageView.setBackgroundResource(imageIds[i]);
// 新增到集合中
imageViews.add(imageView);
// 新增點點
ImageView point = new ImageView(this);
point.setBackgroundResource(R.drawable.point_selector);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(8,8);
if (i==0){
point.setEnabled(true); // 顯示紅色
}else {
point.setEnabled(false); // 顯示灰色
params.leftMargin = 8;
}
point.setLayoutParams(params);
ll_point_group.addView(point);
}
viewpager.setAdapter(new MyPagerAdapter());
viewpager.addOnPageChangeListener(new MyOnPageChangeListener());
/**
* 設定中間位置 向左向右都可以滑動1073741820次
* 簡單的說 這裡設定一個很大的上限 讓輪播圖片看起來好像是無限迴圈
* 實際沒有使用者會向左或者向右滑動1073741820次 所以就是無限迴圈的效果
* 同時,要在MyPagerAdapter和MyOnPageChangeListener中做對應修改
*/
// 保證imageViews的整數倍 Integer.MAX_VALUE=2147483647
int item = Integer.MAX_VALUE/2 - Integer.MAX_VALUE/2%imageViews.size();
//System.out.println(item); // 1073741820
/**
* setCurrentItem
* 設定當前選定的頁面。如果ViewPager已經通過它的第一
* 佈局與當前介面卡將有一個平穩的動畫之間的過渡
* 當前專案和指定專案。
*/
viewpager.setCurrentItem(item); // 設定當前選定的頁面。即,中間位置。
// 設定標題
tv_title.setText(imageDescriptions[0]);
// 發訊息
handler.sendEmptyMessageDelayed(0,500);
}
/**
* 例項化一個Handler 讓輪播自動迴圈
*/
private Handler handler = new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
int item = viewpager.getCurrentItem()+1;
viewpager.setCurrentItem(item);
// 延遲發訊息
handler.sendEmptyMessageDelayed(0,500);
}
};
class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{
/**
* 當頁面滾動了的時候回撥這個方法
* @param position 當前頁面的位置
* @param positionOffset 滑動頁面的百分比
* @param positionOffsetPixels 在螢幕上滑動的畫素
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
/**
* 當某個頁面被選中
* @param position 被選中的頁面的位置
*/
@Override
public void onPageSelected(int position) {
int realPosition = position%imageViews.size();
// 設定對應頁面的文字資訊
//tv_title.setText(imageDescriptions[position]);
tv_title.setText(imageDescriptions[realPosition]);
// 設定點點的顏色
ll_point_group.getChildAt(prePosition).setEnabled(false); // 上一頁頁面對應點點設定為灰色
//ll_point_group.getChildAt(position).setEnabled(true); // 當前頁面對應點點設定為紅色
ll_point_group.getChildAt(realPosition).setEnabled(true); // 當前頁面對應點點設定為紅色
//prePosition = position; // 記錄當前點點
prePosition = realPosition; // 記錄當前點點
}
/**
* 當頁面滾動 狀態的變化 回撥這個方法
* 靜止 -> 滑動
* 滑動 -> 靜止
* 靜止 -> 拖拽
* @param state
*/
@Override
public void onPageScrollStateChanged(int state) {
if (state == ViewPager.SCROLL_STATE_DRAGGING){ // 拖動
System.out.println("拖動為真");
isDragging = true; // 拖動為真
}else if (state == ViewPager.SCROLL_STATE_SETTLING){ // 持續(滾動)
}else if (state == ViewPager.SCROLL_STATE_IDLE&&isDragging){ // 閒置(靜止)
System.out.println("拖動為假");
isDragging = false; // 拖動為假
handler.removeCallbacksAndMessages(null);
handler.sendEmptyMessageDelayed(0,500);
}
}
}
class MyPagerAdapter extends PagerAdapter{
/**
* @return 圖片的總數
*/
@Override
public int getCount() {
// return imageViews.size();
return Integer.MAX_VALUE;
}
/**
* 相當於getView方法
* @param container ViewPager自身
* @param position 當前例項化頁面的位置
* @return
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
int realPosition = position%imageViews.size();
// ImageView imageView = imageViews.get(position);
ImageView imageView = imageViews.get(realPosition);
container.addView(imageView); // 把圖片新增到ViewPager容器中
/**
* 新增觸控事件,當圖片被觸控,停止自動播放,當觸控停止,繼續自動播放
* 像Demo這樣,0.5秒時間間隔,可能有按不住的情況,動得太快了,這邊是為了演示
* 時間使用,建議輪播時間時間3-4
* 但是,只在這裡判斷是不夠,當用戶開始滑動圖片,優先呼叫ACTION_CANCEL,不會
* 呼叫到ACTION_MOVE,這裡需要詳細瞭解可以Log一下這幾個觸控事件看一下,系統是
* 如何接受使用者觸控事件的
* 所以還需要在MyOnPageChangeListener的onPageScrollStateChanged
* 的方法裡,新增判斷
*/
imageView.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
switch (motionEvent.getAction()){
case MotionEvent.ACTION_DOWN: // 按下
handler.removeCallbacksAndMessages(null);
break;
case MotionEvent.ACTION_UP: // 擡起
handler.removeCallbacksAndMessages(null);
handler.sendEmptyMessageDelayed(0,500);
break;
case MotionEvent.ACTION_CANCEL: // 取消
break;
case MotionEvent.ACTION_MOVE: // 移動
break;
}
return true;
}
});
return imageView;
}
/**
* 比較view和object是否是同一個實力
* @param view 頁面
* @param object instantiateItem返回的結果
* @return
*/
@Override
public boolean isViewFromObject(View view, Object object) {
if (view == object) {
return true;
}else {
return false;
}
}
/**
* 釋放資源
* @param container viewpager
* @param position 要釋放的位置
* @param object 要釋放的頁面
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
--------------------分割線--------------------實現自動播放,直接看GIF效果和程式碼(新增圖片點選監聽):
MainActivity.java:
package com.iwanghang.viewpager;
import android.os.Handler;
import android.os.Message;
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.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private ViewPager viewpager;
private TextView tv_title;
private LinearLayout ll_point_group;
// 因為大家都瞭解ListView,先說一下ListView的使用,然後我們對比著,看一下ViewPager的使用
// ListView的使用
// 1、在佈局檔案中定義ListView
// 2、在程式碼中例項化ListView
// 3、準備資料
// 4、設定介面卡(BaseAdapter)-item佈局-繫結資料
// ArrayList不安全但是效率高
// 這裡是用於準備資料,這個就是圖片資料的集合
private ArrayList<ImageView> imageViews;
// 圖片資源ID集合
private final int[] imageIds = {R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e};
// 圖片標題集合
private final String[] imageDescriptions = {"元旦好","新年好","大家好","哈哈哈","嘻嘻嘻"};
int prePosition = 0;
// 拖動是否為真,輔助判斷圖片觸控事件
private boolean isDragging = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewpager = (ViewPager) findViewById(R.id.viewpager);
tv_title = (TextView) findViewById(R.id.tv_title);
ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group);
// ViewPager的使用
// 1、在佈局檔案中定義ViewPager
// 2、在程式碼中例項化ViewPager
// 3、準備資料
// 4、設定介面卡(PagerAdapter)-item佈局-繫結資料
imageViews = new ArrayList<>();
for (int i = 0; i < imageIds.length;i++) {
ImageView imageView = new ImageView(this);
// 設定src會按比例填充,但是設定background會拉伸填充
// 我們要的效果是拉伸填充,所以這裡使用setBackgroundResource
imageView.setBackgroundResource(imageIds[i]);
// 新增到集合中
imageViews.add(imageView);
// 新增點點
ImageView point = new ImageView(this);
point.setBackgroundResource(R.drawable.point_selector);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(8,8);
if (i==0){
point.setEnabled(true); // 顯示紅色
}else {
point.setEnabled(false); // 顯示灰色
params.leftMargin = 8;
}
point.setLayoutParams(params);
ll_point_group.addView(point);
}
viewpager.setAdapter(new MyPagerAdapter());
viewpager.addOnPageChangeListener(new MyOnPageChangeListener());
/**
* 設定中間位置 向左向右都可以滑動1073741820次
* 簡單的說 這裡設定一個很大的上限 讓輪播圖片看起來好像是無限迴圈
* 實際沒有使用者會向左或者向右滑動1073741820次 所以就是無限迴圈的效果
* 同時,要在MyPagerAdapter和MyOnPageChangeListener中做對應修改
*/
// 保證imageViews的整數倍 Integer.MAX_VALUE=2147483647
int item = Integer.MAX_VALUE/2 - Integer.MAX_VALUE/2%imageViews.size();
//System.out.println(item); // 1073741820
/**
* setCurrentItem
* 設定當前選定的頁面。如果ViewPager已經通過它的第一
* 佈局與當前介面卡將有一個平穩的動畫之間的過渡
* 當前專案和指定專案。
*/
viewpager.setCurrentItem(item); // 設定當前選定的頁面。即,中間位置。
// 設定標題
tv_title.setText(imageDescriptions[0]);
// 發訊息
handler.sendEmptyMessageDelayed(0,2000);
}
/**
* 例項化一個Handler 讓輪播自動迴圈
*/
private Handler handler = new Handler(){
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
int item = viewpager.getCurrentItem()+1;
viewpager.setCurrentItem(item);
// 延遲發訊息
handler.sendEmptyMessageDelayed(0,2000);
}
};
class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{
/**
* 當頁面滾動了的時候回撥這個方法
* @param position 當前頁面的位置
* @param positionOffset 滑動頁面的百分比
* @param positionOffsetPixels 在螢幕上滑動的畫素
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
/**
* 當某個頁面被選中
* @param position 被選中的頁面的位置
*/
@Override
public void onPageSelected(int position) {
int realPosition = position%imageViews.size();
// 設定對應頁面的文字資訊
//tv_title.setText(imageDescriptions[position]);
tv_title.setText(imageDescriptions[realPosition]);
// 設定點點的顏色
ll_point_group.getChildAt(prePosition).setEnabled(false); // 上一頁頁面對應點點設定為灰色
//ll_point_group.getChildAt(position).setEnabled(true); // 當前頁面對應點點設定為紅色
ll_point_group.getChildAt(realPosition).setEnabled(true); // 當前頁面對應點點設定為紅色
//prePosition = position; // 記錄當前點點
prePosition = realPosition; // 記錄當前點點
}
/**
* 當頁面滾動 狀態的變化 回撥這個方法
* 靜止 -> 滑動
* 滑動 -> 靜止
* 靜止 -> 拖拽
* @param state
*/
@Override
public void onPageScrollStateChanged(int state) {
if (state == ViewPager.SCROLL_STATE_DRAGGING){ // 拖動
System.out.println("拖動為真");
isDragging = true; // 拖動為真
}else if (state == ViewPager.SCROLL_STATE_SETTLING){ // 持續(滾動)
}else if (state == ViewPager.SCROLL_STATE_IDLE&&isDragging){ // 閒置(靜止)
System.out.println("拖動為假");
isDragging = false; // 拖動為假
handler.removeCallbacksAndMessages(null);
handler.sendEmptyMessageDelayed(0,2000);
}
}
}
class MyPagerAdapter extends PagerAdapter{
/**
* @return 圖片的總數
*/
@Override
public int getCount() {
// return imageViews.size();
return Integer.MAX_VALUE;
}
/**
* 相當於getView方法
* @param container ViewPager自身
* @param position 當前例項化頁面的位置
* @return
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
int realPosition = position%imageViews.size();
// ImageView imageView = imageViews.get(position);
ImageView imageView = imageViews.get(realPosition);
container.addView(imageView); // 把圖片新增到ViewPager容器中
/**
* 新增觸控事件,當圖片被觸控,停止自動播放,當觸控停止,繼續自動播放
* 像Demo這樣,0.5秒時間間隔,可能有按不住的情況,動得太快了,這邊是為了演示
* 時間使用,建議輪播時間時間3-4
* 但是,只在這裡判斷是不夠,當用戶開始滑動圖片,優先呼叫ACTION_CANCEL,不會
* 呼叫到ACTION_MOVE,這裡需要詳細瞭解可以Log一下這幾個觸控事件看一下,系統是
* 如何接受使用者觸控事件的
* 所以還需要在MyOnPageChangeListener的onPageScrollStateChanged
* 的方法裡,新增判斷
*/
imageView.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
switch (motionEvent.getAction()){
case MotionEvent.ACTION_DOWN: // 按下
handler.removeCallbacksAndMessages(null);
break;
case MotionEvent.ACTION_UP: // 擡起
handler.removeCallbacksAndMessages(null);
handler.sendEmptyMessageDelayed(0,2000);
break;
case MotionEvent.ACTION_CANCEL: // 取消
break;
case MotionEvent.ACTION_MOVE: // 移動
break;
}
return false; // 返回為false事件繼續,返回true事件銷燬,因為要監聽圖片點選,所以不能銷燬
}
});
/**
* 圖片點選監聽
*/
imageView.setTag(realPosition);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
int realPosition = (int) view.getTag();
String text = imageDescriptions[realPosition];
Toast.makeText(MainActivity.this, "text = " + text, Toast.LENGTH_SHORT).show();
}
});
return imageView;
}
/**
* 比較view和object是否是同一個實力
* @param view 頁面
* @param object instantiateItem返回的結果
* @return
*/
@Override
public boolean isViewFromObject(View view, Object object) {
if (view == object) {
return true;
}else {
return false;
}
}
/**
* 釋放資源
* @param container viewpager
* @param position 要釋放的位置
* @param object 要釋放的頁面
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
轉載請註明出處:http://blog.csdn.net/iwanghang/article/details/53742814
歡迎移動開發愛好者交流
瀋陽或周邊城市公司有意開發Android,請與我聯絡
聯絡方式
微信:iwanghang
QQ:413711276
郵箱:[email protected]
專案下載:http://download.csdn.net/detail/iwanghang/9716416
覺得博文有用,請點贊,請留言,請關注,謝謝!~
相關推薦
Android開發-自定義View-AndroidStudio(六)ViewPager再體驗
轉載請註明出處:http://blog.csdn.net/iwanghang/article/details/53742814覺得博文有用,請點贊,請留言,請關注,謝謝!~直接看GIF效果和程式碼(相對於ViewPager初體驗,添加了當前頁面的點點選中變色效果,以及對應文字
Android開發-自定義View-AndroidStudio(五)ViewPager初體驗
轉載請註明出處:http://blog.csdn.net/iwanghang/絕對博文有用,請點贊,請留言,謝謝!~直接看GIF效果和程式碼:MainActivity.java:package com.iwanghang.viewpager; import android.
Android開發-自定義View-AndroidStudio(二十六)數獨(3)Dialog監聽
轉載請註明出處:http://blog.csdn.net/iwanghang/article/details/54290001覺得博文有用,請點贊,請評論,請關注,謝謝!~老規矩,先上GIF動態圖,看個效果,如果符合你的專案或者確定你要了解的內容,再往下看吧:看一下程式碼裡面
Android開發-自定義View-AndroidStudio(八)自定義View初體驗
轉載請註明出處:http://blog.csdn.net/iwanghang/article/details/53783417覺得博文有用,請點贊,請評論,請關注,謝謝!~老規矩,先上效果圖,看個效果,如果符合你的專案或者確定你要了解的內容,再往下看吧:MainActivit
[Android開發]自定義View之TextView區域性操作View-SpanTextView
一、功能效果圖 Android TextView的區域性操作Span封裝View,支援縮略顯示、區域性點選、區域性格式設定、圖片插入替換等等 二、簡單使用 TextView需要區域性操作:點選某些區域性文字的事件、顏色、大小、下劃線、指定位置插入圖片、
[Android開發] 自定義View之重寫View非常簡單實現開關按鈕SwitchView
一、 效果圖 二、 實現原理 一個View,畫一個圓角矩形,再畫一個圓點就可以了,100行程式碼左右就可以了,不需要圖片。 三、 實現程式碼 為了程式碼不臃腫,只添加了一個設定預設開關的方法,就沒新增設定顏色的方法,如果需要的話自己根據專案在
Android自定義View之六位密碼框
今天是我第一次寫技術部落格,本人也是小菜鳥一枚,工作不滿一年,部落格內容也比較簡單,對專業知識瞭解不夠深入,寫部落格的原因一來是為了分享,而來也是激勵自己,如果內容有什麼錯誤問題,請大家指教糾正。 今天要講的是六位密碼輸入框。先上程式碼。首先是layout.xml檔案 &
Android開發-自定義Dialog
下面是效果圖 定義一個MyDialog.java工具類繼承Dialog類 具體程式碼如下: /** * Created by WW on 2018/9/12. */ public abstract class MyDialog extends Dialog{ pr
Android之自定義View
在Android開發中,系統本身為我們提供了許多可供選擇的UI控制元件,但是在有些情況下也是需要自定義一些控制元件的。比如UI中的柱狀圖、餅圖等。而自定義View就需要明白它的原理了。 大體上分為三步onMeasure、onLayout、onDraw。大部分情況下我們只需要重寫兩個函式:onMe
移動開發-----自定義View(圓環)
import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.grap
android基礎--自定義View
1.自定義view繪製字串 import android.app.Activity; import android.content.Context; import android.graphics.Canvas; import android.graph
Android應用自定義View繪製方法手冊
背景 這篇遲遲難產的文章算是對2015前半年的一個交代吧,那時候有一哥們要求來一發Android Canvas相關總結,這哥們還打賞了,實在不好意思,可是這事一放就給放忘了,最近群裡小夥伴催著說沒更新部落格,坐等更新啥的,隨先有這麼一篇Android應用開發超
【自定義View】4.ViewPager卡片滑動效果
【難度★☆☆☆☆】前面我們學過了ViewPager的原理,那麼接下來我們實現一個帶縮放卡片式的ViewPager,它可以用來展示圖片,展示卡片式的UI。 許多時候我們閒原生的ViewPager的效果太過單調,於是我們想做一些更好的UI效果,比如下面
android給自定義view新增XML屬性
1.在value下新建檔案(檔名隨便),把需要的名稱和型別放進去 <?xml version="1.0" encoding="utf-8"?> <resources>
Android:自定義View實現水波進度效果
首先上效果圖: 簡介: 1.自動適應螢幕大小; 2.水波自動橫向滾動; 3.各種繪製引數可通過修改常量進行控制。 程式碼不多,註釋也比較詳細,全部貼上: (一)自定義元件: /** * 水波進度效果. */ public class WaterWaveView e
Android中自定義View的研究 -- 在XML中引用自定義View
如果在一直使用SetContentView(new HellwView(this)覺得總是少了一點東西,少了什麼了,失去了Android中使用XML定義元件的便攜性,這種感覺讓人很不爽,呵呵,在這節裡我們會看到一個自定義View報錯的解決方法,讓我們來看看在XML中定義Vi
android 開發-自定義相機
一,呼叫系統相機 1,用最簡單的方式拍到一張照片返回到當前頁面 a,在佈局裡新增一個按鈕和imageview,可以通過設定按鈕的onclick 屬性繫結一個方法 b,在按鈕的繫結方法裡寫如下內容:Intent intent = new Int
android中自定義View設定屬性
記錄一下,以方便以後用到,再次出錯 1.首先需要在values/下面新建一個attrs.xml檔案,將一些需要的一些屬性填寫進去,比如: <?xml version="1.0" encoding="utf-8"?> <resources>
Android開發-自定義application對activity的管理與控制
自定義AppManager,在需要呼叫的地方例項化呼叫。 程式碼如下: /********************************************** * @類名: AppManager * * @描述: 應用程式Activity管理類:用於Acti
Android面試自定義View
通過學習慕課網的自定義view視訊總結如下: 一、為什麼要自定義控制元件: 1、特定的顯示風格 (App的特定效果) 2、處理特有的使用者互動(textview 不能滑動) 3