自定義輪播圖效果
ViewPager的常用屬性
ViewPager.setOffscreenPageLinit(2);設(shè)置左右兩邊緩存頁面?zhèn)€數(shù)喊积。默認(rèn)緩存是1
寫布局文件
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#30000000"
android:orientation="vertical"
android:gravity="center">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="標(biāo)題"
android:textColor="@android:color/white"/>
<LinearLayout
android:id="@+id/dot_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="8dp">
<!-- <View
android:layout_width="5dp"
android:layout_height="5dp"
android:background="@drawable/dot_selected"/> -->
</LinearLayout>
</LinearLayout>
</RelativeLayout>
然后是找到ViewPaper,
創(chuàng)建PagerAdapter 對象
有兩個方法必須要自己手動寫出來，不會自動出來！Ｑ烀省Ａ嫜 隐岛！
代碼處理如下猫妙，記得要在銷毀的方法沖viewPager 中移除標(biāo)記的對象，在判斷是否ViewPager 中孩子被對象標(biāo)記返回如下代碼中聚凹，然后是在自己手動重寫方法中添加ImageView 這樣割坠，切記在添加完了要返回標(biāo)記，并在返回之前addView ( )不然不會顯示出來
private PagerAdapter mPagerAdapter = new PagerAdapter() {
/**
* 這個方法不會自己出來要單獨重寫
* @param container
* @param position
* @return
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
int i = position % Data.length;
ImageView imageView = new ImageView(MainActivity.this);
imageView.setImageResource(Data[i]);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
container.addView(imageView); //必須要添加進(jìn)去
return imageView;
}
/**
* 這個方法不會自己出來要單獨重寫
* @param container
* @param position
* @return
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public int getCount() {
// return Data.length;
return Integer.MAX_VALUE;
}
/**
*
* @param view ViewPager里的孩子
* @param object 孩子是否被標(biāo)記
* @return
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
};
動態(tài)初始化小點
獲取布局參數(shù)妒牙，然后設(shè)置間距彼哼，自己判斷那些需要間距的，然后也要記得addView 到我們剛才寫的小點的布局中湘今，當(dāng)然這個背景一般都是自己寫的shape
//動態(tài)初始化點的個數(shù)
for (int i = 0; i < Data.length; i++) {
View dot = new View(this);
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(105, 105);
dot.setLayoutParams(layoutParams);
//最后一個點不要間距
if (i != Data.length - 1) {
//配置點的間距
layoutParams.rightMargin = 8;
}
//默認(rèn)第一個點被選中
if (i == 0) {
dot.setBackgroundResource(R.drawable.dot_selected);
} else {
dot.setBackgroundResource(R.drawable.dot_normal);
}
//將點添加點的容器
mDots.addView(dot);
}
shape如下：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@android:color/white"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#ff0000"/>
</shape>
給View pager設(shè)置監(jiān)聽
在當(dāng)前選擇的時候去改變小點的顏色敢朱，這里特別說明下 ，去改變之前的顏色摩瞎，我最初的做法是遍歷數(shù)組蔫饰。然后取當(dāng)前的的position ，這樣的做法 效率很低愉豺，直接做一個全局的標(biāo)記，然后每次在這個被選中了去刷新這個標(biāo)記茫因。這樣的思想是很高效的
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
/**
*
* @param position 當(dāng)前位置
* @param positionOffset 偏移像素 除以屏幕密度（320dp）
* @param positionOffsetPixels 偏移像素
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mTitle.setText(mTitles[position%Data.length]);
View childAt = mDots.getChildAt(position%Data.length);
childAt.setBackgroundResource(R.drawable.dot_selected);
//同時要把之前的點設(shè)置恢復(fù)
View childAt1 = mDots.getChildAt(beforeDot);
childAt1.setBackgroundResource(R.drawable.dot_normal);
beforeDot = position%Data.length;
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
這樣我們的輪播效果就出來了蚪拦，但是我們?nèi)ジ淖兞艘粋€條目數(shù)量，這樣的做法后續(xù)一定要完善的冻押！
自定義控件的抽取
就貼下代碼吧驰贷，因為我們的項目中一般的項目中都要這個控件，所以我們抽取出來使用比較方便洛巢，也好擴展
package com.example.z.viewpagerdemo;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
/**
* Created by z on 2017/11/25.
*/
public class SelfViewpager extends RelativeLayout {
private ViewPager mViewPager;
private int beforeDot;//上次點的位置
private int Data[] = {R.drawable.icon_1, R.drawable.icon_2, R.drawable.icon_3, R.drawable.icon_4, R.drawable.icon_5};
//標(biāo)題數(shù)組
private String[] mTitles = {"為夢想堅持", "我相信我", "xasdasd", "sdaas", "asdasdsad+"};
private TextView mTitle;
private LinearLayout mDots;
public SelfViewpager(Context context) {
this(context,null);
}
public SelfViewpager(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
private void init() {
View view = View.inflate(getContext(),R.layout.activity_self_viewpager,this);
mViewPager = (ViewPager) view.findViewById(R.id.viewPager);
mTitle = (TextView) view.findViewById(R.id.title);
mDots = (LinearLayout) view.findViewById(R.id.dot);
initDot();
mViewPager.setAdapter(mPagerAdapter);
//調(diào)整初始位置
int initPosition = Integer.MAX_VALUE / 2;
//將位置調(diào)整到0
initPosition = initPosition - initPosition % Data.length;
mViewPager.setCurrentItem(initPosition);
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
/**
*
* @param position 當(dāng)前位置
* @param positionOffset 偏移像素 除以屏幕密度（320dp）
* @param positionOffsetPixels 偏移像素
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mTitle.setText(mTitles[position%Data.length]);
View childAt = mDots.getChildAt(position%Data.length);
childAt.setBackgroundResource(R.drawable.dot_selected);
//同時要把之前的點設(shè)置恢復(fù)
View childAt1 = mDots.getChildAt(beforeDot);
childAt1.setBackgroundResource(R.drawable.dot_normal);
beforeDot = position%Data.length;
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initDot() {
/*for (int i = 0; i < Data.length; i++) {
View view = new View(this);
RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(25, 25);
view.setPadding(10,30,10,10);
view.setLayoutParams(layoutParams);
if (i == 0) {
view.setBackgroundColor(getResources().getColor(R.color.colorAss));
}else {
view.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
}
mDots.addView(view);
}*/
//動態(tài)初始化點的個數(shù)
for (int i = 0; i < Data.length; i++) {
View dot = new View(getContext());
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(105, 105);
dot.setLayoutParams(layoutParams);
//最后一個點不要間距
if (i != Data.length - 1) {
//配置點的間距
layoutParams.rightMargin = 8;
}
//默認(rèn)第一個點被選中
if (i == 0) {
dot.setBackgroundResource(R.drawable.dot_selected);
} else {
dot.setBackgroundResource(R.drawable.dot_normal);
}
//將點添加點的容器
mDots.addView(dot);
}
}
private PagerAdapter mPagerAdapter = new PagerAdapter() {
/**
* 這個方法不會自己出來要單獨重寫
* @param container
* @param position
* @return
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
int i = position % Data.length;
ImageView imageView = new ImageView(getContext());
imageView.setImageResource(Data[i]);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
container.addView(imageView); //必須要添加進(jìn)去
return imageView;
}
/**
* 這個方法不會自己出來要單獨重寫
* @param container
* @param position
* @return
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public int getCount() {
// return Data.length;
return Integer.MAX_VALUE;
}
/**
*
* @param view ViewPager里的孩子
* @param object 孩子是否被標(biāo)記
* @return
*/
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
};
}
像素適配 dimen
看下我們剛剛才動態(tài)添加的點點點括袒，傳的參數(shù)是像素，在不同手機上效果區(qū)別很大
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(105, 105);
在我們的資源文件中的values文件下創(chuàng)建dimens.xml文件在里面添加dimen
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="dotSize">30dp</dimen>
</resources>
然后在我們代碼初始化時候調(diào)用已下方法：
int dotSize = getResources().getDimensionPixelSize(R.dimen.dotSize);
這樣就會根據(jù)不同的手機轉(zhuǎn)換成不同像素大小稿茉。比如在標(biāo)準(zhǔn)手機上1dp 對應(yīng)1像素
具體屏幕適配的知識可以在我的簡書上搜下屏幕適配的文章锹锰。非常詳細(xì)！＠炜狻Ｊ鸦邸！
添加自定義屬性
我們項目開源供別人使用渺蒿，這個點可能不同的項目痢士。需要的大小不一樣，所以我們抽一個自定義屬性：
1.創(chuàng)建一個attrs文件：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="SelfViewPagerAttrs">
<attr name="PointSizeIsMeHaHa" format="dimension"></attr>
</declare-styleable>
</resources>
獲取這個屬性茂装，更改代碼點大小的size
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SelfViewPagerAttrs);
float dimension = typedArray.getDimension(R.styleable.SelfViewPagerAttrs_PointSizeIsMeHaHa, 25);
mDotSize = (int) dimension;
這樣就可以了怠蹂。當(dāng)然你還可以嘗試抽取其他屬性善延！
添加事件沖突處理 和自動輪播
/**
* 吧這個ViewPager設(shè)置為ListView的頭部時候，需要處理滑動事件
*
*/
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
mRawX = event.getRawX();
mRawY = event.getRawY();
break;
case MotionEvent.ACTION_MOVE:
float rawX = event.getRawX();
float rawY = event.getRawY();
if(Math.abs(rawX -mRawX) >Math.abs(rawY -mRawY)){
requestDisallowInterceptTouchEvent(true); //請求父容器不要攔截我的事件
}
break;
}
return super.onTouchEvent(event);
}
/**
* 自動輪播
*
*
*/
public void startLoop(){
postDelayed(mLoop,2000);
}
private Runnable mLoop = new Runnable() {
@Override
public void run() {
int currentItem = mViewPager.getCurrentItem(); //獲取當(dāng)前item
mViewPager.setCurrentItem(++currentItem);
startLoop();
}
};
移除這個循環(huán)
/**
* 自動輪播
*
*
*/
public void startLoop(){
postDelayed(mLoop,2000);
}
public void removeLoop(){
removeCallbacks(mLoop);
}
private Runnable mLoop = new Runnable() {
@Override
public void run() {
int currentItem = mViewPager.getCurrentItem(); //獲取當(dāng)前item
mViewPager.setCurrentItem(++currentItem);
startLoop();
}
};
@Override
protected void onAttachedToWindow() {
super.onAttachedToWindow();
startLoop();
}
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
removeLoop();
}
