很经典的ViewPager使用（用美女做的背景，给你疲惫的眼睛视觉冲击），viewpager视觉冲击
投稿于 被查看 13028 次 评论：247
很经典的ViewPager使用（用美女做的背景，给你疲惫的眼睛视觉冲击），viewpager视觉冲击
ViewPager的使用
我们先爆照，来点视觉冲击，其它的ViewPager弱爆了
照片看完了，接来下我们就来实现，just do it
第一步
你的项目需要有android-support-v4.jar的包，你懂的，有了才会支持ViewPager第二步
看下项目的结构图片
activity_main.xml文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:id="@+id/textView1"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:gravity="center"
android:text="美女1"
android:textSize="15dp"
android:textStyle="bold"
android:background="#FF0000"
android:textColor="#222222"></TextView>
<TextView
android:id="@+id/textView2"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:gravity="center"
android:text="美女2"
android:textSize="15dp"
android:textStyle="bold"
android:background="#FFFFFF"
android:textColor="#222222"></TextView>
<TextView
android:id="@+id/textView3"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:gravity="center"
android:text="美女3"
android:textSize="15dp"
android:textStyle="bold"
android:background="#FFFFFF"
android:textColor="#222222"></TextView>
</LinearLayout>
<ImageView
android:id="@+id/cursor"
android:layout_width="120dp"
android:layout_height="4dp"
android:scaleType="matrix"
android:background="#000000"
/>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
></android.support.v4.view.ViewPager>
</LinearLayout>
one.xml文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@drawable/one"
>
</LinearLayout> two.xml文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@drawable/two"
>
</LinearLayout> three.xml文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@drawable/three"
>
</LinearLayout>
布局文件写好了，我么再去写ViewPager的Adapter
MyAdapter.java文件package com.example.viewpager;
import java.util.List;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
public class MyAdapter extends PagerAdapter{
List<View> viewLists;
public MyAdapter(List<View> lists){
viewLists=lists;
}
@Override
public int getCount() {
// TODO Auto-generated method stub 获取size
return viewLists.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return arg0==arg1;
}
@Override
public void destroyItem(View container, int position, Object object) {
// TODO Auto-generated method stub 销毁Item
// super.destroyItem(container, position, object);
((ViewPager)container).removeView(viewLists.get(position));
}
@Override
public Object instantiateItem(View container, int position) {
// TODO Auto-generated method stub 实例化Item
// return super.instantiateItem(container, position);
((ViewPager)container).addView(viewLists.get(position),0);
return viewLists.get(position);
}
}
mainActivity.java文件
package com.example.viewpager;
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
public class MainActivity extends Activity {
private ViewPager viewPager;
private ImageView imageView;
private List<View> lists=new ArrayList<View>();
private MyAdapter myAdapter;
private Bitmap cursor;
private int offSet;
private int currentItem;
private Matrix matrix=new Matrix();
private int bmWidth;
private Animation animation;
private TextView textView1;
private TextView textView2;
private TextView textView3;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView =(ImageView) findViewById(R.id.cursor)//随着页面滑动的图片
textView1=(TextView)findViewById(R.id.textView1);
textView2=(TextView)findViewById(R.id.textView2);
textView3=(TextView)findViewById(R.id.textView3);
lists.add(getLayoutInflater().inflate(R.layout.one, null));//将页面添加到viewPager集合
lists.add(getLayoutInflater().inflate(R.layout.two, null));
lists.add(getLayoutInflater().inflate(R.layout.three, null));
initeCursor(); //初始化滑动图片位置
myAdapter=new MyAdapter(lists);
viewPager=(ViewPager)findViewById(R.id.viewPager);
viewPager.setAdapter(myAdapter);
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { //veiwPager滑动监听
@Override
public void onPageSelected(int arg0) {//当滑动式，顶部的imageViw是通过animation缓慢滑动
// TODO Auto-generated method stub
switch (arg0) {
case 0:
if(currentItem==1){
animation=new TranslateAnimation(offSet*2+bmWidth, 0, 0, 0);
textView1.setBackgroundColor(Color.RED);
textView2.setBackgroundColor(Color.WHITE);
textView3.setBackgroundColor(Color.WHITE);
}
else if(currentItem==2){
animation=new TranslateAnimation(offSet*4+2*bmWidth, 0, 0, 0);
textView1.setBackgroundColor(Color.RED);
textView2.setBackgroundColor(Color.WHITE);
textView3.setBackgroundColor(Color.WHITE);
}
break;
case 1:
if(currentItem==0){
animation=new TranslateAnimation(0, offSet*2+bmWidth, 0, 0);
textView1.setBackgroundColor(Color.WHITE);
textView2.setBackgroundColor(Color.RED);
textView3.setBackgroundColor(Color.WHITE);
}
else if(currentItem==2){
animation=new TranslateAnimation(offSet*4+2*bmWidth, offSet*2+bmWidth, 0, 0);
textView1.setBackgroundColor(Color.WHITE);
textView2.setBackgroundColor(Color.RED);
textView3.setBackgroundColor(Color.WHITE);
}
break;
case 2:
if(currentItem==0){
animation=new TranslateAnimation(0, offSet*4+bmWidth*2, 0, 0);
textView1.setBackgroundColor(Color.WHITE);
textView2.setBackgroundColor(Color.WHITE);
textView3.setBackgroundColor(Color.RED);
}
else if(currentItem==1){
animation=new TranslateAnimation(offSet*2+bmWidth, offSet*4+2*bmWidth, 0, 0);
textView1.setBackgroundColor(Color.WHITE);
textView2.setBackgroundColor(Color.WHITE);
textView3.setBackgroundColor(Color.RED);
}
break;
default:
break;
}
currentItem=arg0;
animation.setDuration(500);
animation.setFillAfter(true);
imageView.startAnimation(animation);
}
@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
}
});
textView1.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
viewPager.setCurrentItem(0);
}
});
textView2.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
viewPager.setCurrentItem(1);
}
});
textView3.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
viewPager.setCurrentItem(2);
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
private void initeCursor(){ //计算滑动图片的位置
cursor=BitmapFactory.decodeResource(getResources(), R.drawable.dog);
bmWidth=cursor.getWidth();
DisplayMetrics dm;
dm=getResources().getDisplayMetrics();
offSet=(dm.widthPixels-3*bmWidth)/6;
matrix.setTranslate(offSet, 0);
imageView.setImageMatrix(matrix);//需要imageVie的scaleType为matrix
currentItem=0;
}
}
对了，还有几张图片资源，都给你们，我是屌丝，用的狗图片
下面分别是 dog.jpg one.jpg two.jpg three.jpg
版权声明：本文为博主原创文章，未经博主允许不得转载。
用户评论