参看https://github.com/bingoogolapple/BGABanner-Android,这个实现太复杂了,看的烦躁,自己写了一个
具体代码在:http://download.csdn.net/detail/xiaomu123456/9677927
步骤:
具体代码在:http://download.csdn.net/detail/xiaomu123456/9677927
步骤:
1.使用viewpager实现图片的切换效果
2.在OnPageChangeListener中监听滑动距离,实现背景的透明效果渐变
实际效果如下:
首先创建布局activity_splash_viewpager.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="@+id/img1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/pic_01"/>
<ImageView
android:id="@+id/img2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg2"/>
<ImageView
android:id="@+id/img3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/pic_04"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<TextView
android:id="@+id/btn"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:gravity="center"
android:alpha="0.6"
android:background="#33000000"
android:text="footer view" />
</RelativeLayout>
根据图中效果可以知道,总共需要6张图片,3张作为背景(id:img1,img2,img3),3张是背景上面的文字显示效果(此处在代码中添加到viewpager中)。
主要代码如下:
package com.lj.admin.myviewpagger;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener,View.OnClickListener{
private List<ImageView> imageViewList;
private ViewPager mViewPager;
private ImageView img1;
private ImageView img2;
private ImageView img3;
private float mCurrentOffset;
private float mLastOffset;
private static final float EPSINON = 0.00001f;
// private static final int ZEROALPHA = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash_viewpager);
initView();
prepareData();
initEvent();
}
private void initView() {
img1 = (ImageView) findViewById(R.id.img1);
img2 = (ImageView) findViewById(R.id.img2);
img3 = (ImageView) findViewById(R.id.img3);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
}
private void initEvent() {
img1.setOnClickListener(this);
img2.setOnClickListener(this);
img3.setOnClickListener(this);
/**
* 刚进来,显示第一张图片
* 直接用img.setAlpha没有效果,不知道为啥?
*/
img2.getBackground().setAlpha(0);
img3.getBackground().setAlpha(0);
mViewPager.addOnPageChangeListener(this);
ViewPagerAdapter adapter = new ViewPagerAdapter();
mViewPager.setAdapter(adapter);
}
private void prepareData() {
imageViewList = new ArrayList<ImageView>();
int[] imageResIDs = getImageResIDs();
ImageView iv;
for (int i = 0; i < imageResIDs.length; i++) {
iv = new ImageView(this);
iv.setBackgroundResource(imageResIDs[i]);
imageViewList.add(iv);
}
}
/**
* 在此处填充三张viewpager要展示的图片
*/
private int[] getImageResIDs() {
return new int[]{
R.drawable.guide_foreground_1,
R.drawable.guide_foreground_2,
R.drawable.guide_foreground_3
};
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
mCurrentOffset = positionOffset;
if( !isZeroFloat(positionOffset) ){
float fraction = positionOffset;
if( position == 0){
img1.getBackground().setAlpha( (int) ( (1-fraction) * 255) );
img2.getBackground().setAlpha((int) ( fraction * 255 ) );
img3.getBackground().setAlpha(0);
}
if( position == 1){
img2.getBackground().setAlpha( (int) ( (1-fraction) * 255) );
img3.getBackground().setAlpha((int) ( fraction * 255 ) );
img1.getBackground().setAlpha(0);
}
//此处的代码直接用上面的两段替换,不用管
// if( mCurrentOffset - mLastOffset > 0){
// if( position == 0){
// img1.getBackground().setAlpha( (int) ( (1-fraction) * 255) );
// img2.getBackground().setAlpha((int) ( fraction * 255 ) );
// img3.getBackground().setAlpha(0);
// }
// if( position == 1){
// img2.getBackground().setAlpha( (int) ( (1-fraction) * 255) );
// img3.getBackground().setAlpha((int) ( fraction * 255 ) );
// img1.getBackground().setAlpha(0);
// }
// }else{
// if( position == 0){
// img1.getBackground().setAlpha( (int) ( (1-fraction) * 255) );
// img2.getBackground().setAlpha((int) ( fraction * 255 ) );
// img3.getBackground().setAlpha(0);
// }
// if( position == 1){
// img2.getBackground().setAlpha( (int) ( (1-fraction) * 255) );
// img3.getBackground().setAlpha((int) ( fraction * 255 ) );
// img1.getBackground().setAlpha(0);
// }
// }
}
mLastOffset = mCurrentOffset;
Log.d("liujie","position:" + position + "||"
+ "positionOffset:" + positionOffset + "||"
+ "positionOffsetPixels:" + positionOffsetPixels);
}
private boolean isZeroFloat(float f){
if( f < EPSINON && f > -EPSINON){
return true;
}
return false;
}
@Override
public void onPageSelected(int position) {
/**
*此处获取当前的滑动位置并不准确,它会没有滑动停止时就改变,所以不能和
*/
// mCurrentImgPos = position;
Log.d("liujie1","pageselect************: "+ position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
@Override
public void onClick(View view) {
//如果需要实现三张图片的点击事件,可以在里面实现,如:img.setClickable来控制三张图片的透传效果
}
class ViewPagerAdapter extends PagerAdapter{
@Override
public int getCount() {
return imageViewList.size();
}
//判断出去的view是否等于进来的view 如果为true直接复用
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
/**
* 销毁预加载以外的view对象, 会把需要销毁的对象的索引位置传进来就是position
*/
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(imageViewList.get(position));
}
/**
* 创建一个view
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(imageViewList.get(position));
return imageViewList.get(position);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
}
}