Android之ViewPager 第一课
想要了解Android新版本的的新特性，从头开始吧，这是Android3.0新加入的widget，以前也接触过，但是没有好好的研究过，今天写了一个小程序，研究一下ViewPager。
这个程序是支持左右滑动的View，核心是ViewPager。讲解都在注释中进行。
代码如下：
MainActivity.java：
package com.android3; import android.annotation.SuppressLint; import android.content.Intent; import android.graphics.BitmapFactory; import android.graphics.Matrix; import android.os.Bundle; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.util.DisplayMetrics; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.widget.Button; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity implements View.OnClickListener, ViewPager.OnPageChangeListener { private ViewPager viewPager; private ArrayList<View> viewList; private List<String> titleList; private MyPagerAdapter adapter; private ImageView cursor; private LinearLayout titleBar; private float cursorW= 0; private float offset = 0; private float currentIndex = 0; private float screenW = 0; private float currentX = 0; private float fScreenW; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initToolbar(); initViewPager(); } /** * ViewPager 保证 缓存中存在三个视图，即 左边 右边 和中间 隔一个的灰被destroy， */ @SuppressLint("InflateParams") private void initViewPager() { viewPager = (ViewPager) findViewById(R.id.viewpager); titleBar = (LinearLayout) findViewById(R.id.titleBar); LayoutInflater inflater = getLayoutInflater(); //创建四个View View view1 = inflater.inflate(R.layout.viewpage_01, null); View view2 = inflater.inflate(R.layout.viewpage_02, null); View view3 = inflater.inflate(R.layout.viewpage_03, null); View view4 = inflater.inflate(R.layout.viewpage_04, null); viewList = new ArrayList<>();// 将要分页显示的View装入数组中 viewList.add(view1); viewList.add(view2); viewList.add(view3); viewList.add(view4); adapter = new MyPagerAdapter(viewList); titleList = new ArrayList<>(); titleList.add("第一页面"); titleList.add("第二页面"); titleList.add("第三页面"); titleList.add("第四页面"); for (int i = 0; i < titleList.size(); i++) { TextView textView = new TextView(this); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); params.weight = 1; params.setMargins(5, 3, 5, 3); textView.setLayoutParams(params); textView.setText(titleList.get(i)); textView.setTextSize(15); textView.setGravity(Gravity.CENTER); titleBar.addView(textView); } initCursorPos(); //初始化指示器位置 viewPager.setAdapter(adapter);//绑定适配器 viewPager.addOnPageChangeListener(this); //注 ： setOnPageChangeListener 过时 } /** * 单位px */ public void initCursorPos() { // 初始化动画 cursor = (ImageView) findViewById(R.id.cursor); cursorW= BitmapFactory.decodeResource(getResources(), R.mipmap.cursor).getWidth();// 获取图片宽度 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); screenW = dm.widthPixels;// 获取分辨率宽度 fScreenW=screenW / viewList.size(); offset = (fScreenW - cursorW) / 2;// 计算偏移量 Matrix matrix = new Matrix(); matrix.postTranslate(offset, 0); cursor.setImageMatrix(matrix);// 设置动画初始位置 ###原始位置 currentX = offset; } private void initToolbar() { Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar); Button btnRight = (Button) mToolbar.findViewById(R.id.btnRight); mToolbar.setTitle(""); mToolbar.setNavigationIcon(R.mipmap.back); setSupportActionBar(mToolbar); mToolbar.setNavigationOnClickListener(this); btnRight.setOnClickListener(this); } @Override public void onClick(View view) { switch (view.getId()) { case -1: finish(); break; case R.id.btnRight: Intent intent = new Intent(MainActivity.this, SecondActivity.class); startActivity(intent); break; } } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { float X=fScreenW*position; //在此页面中，滑块位置和原始位置的距离 //currentX 当前位置和原始位置的距离 TranslateAnimation animation = new TranslateAnimation(currentX, X, 0, 0); /** * public TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) { * throw new RuntimeException("Stub!"); * } * 在X轴方向： * fromXDelta 动画从原始位置+fromXDelta开始 * * toXDelta 动画从原始位置+toXDelta结束 * * 在Y轴方向： * fromYDelta 动画从原始位置+fromYDelta开始 * * toYDelta 动画从原始位置+toYDelta结束 * * */ currentX=fScreenW*position;//更新当前位置 currentIndex = position;//保存上一个View编号 animation.setFillAfter(true);//保存动画 animation.setDuration(300);//动画持续时间 cursor.startAnimation(animation);//开始 } @Override public void onPageScrollStateChanged(int state) { } }
MyPagerAdapter.java
package com.android3; import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup; import java.util.List; /** * * Created by Administrator on 2016/10/25. */ public class MyPagerAdapter extends PagerAdapter { private List<View> list=null; //通过构造函数将装有View的集合传入适配器 MyPagerAdapter(List<View> list){ this.list=list; } /** * * @return 将要显示的View的总个数 */ @Override public int getCount() { return list.size(); } /** * * 该方法 判断Key与View是否是正确的映射关系 * * 而且在同一个容器中不能有相同的key传入，否则行为会错乱 * @param view * @param object * @return */ @Override public boolean isViewFromObject(View view, Object object) { return view==object; } /** * 因为ViewPager 容器中只保存当前位置的View和相邻的View，当在容器中的View的编号位置距离当前位置超过1， * 就对该View进行移除 * @param container 容器 * @param position 即将失去的View位置 * @param object */ @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(list.get(position)); } /** * * 首先判断当前位置的左右view是否在容器中，如果不在，则调用instantiateItem方法将相邻的view（之前不在容器中）加入容器中； * 返回此View，作为映射的Key * * @param container 容器 * @param position 位置 从0开始 * @return view对应的Key */ @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(list.get(position)); return list.get(position); } }
activity_main.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:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.android3.MainActivity"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary"> <TextView android:id="@+id/tv_toolbar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="@string/title" android:textColor="#ffffff" android:textSize="14sp" android:textStyle="bold" /> <Button android:id="@+id/btnRight" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end" android:layout_marginRight="10dp" android:text="@string/submit" android:textColor="#ffffff" android:textSize="12sp" android:textStyle="bold" /> </android.support.v7.widget.Toolbar> <LinearLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/toolbar" android:orientation="vertical"> <LinearLayout android:id="@+id/titleBar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorAccent" android:orientation="horizontal" /> <ImageView android:id="@+id/cursor" android:layout_width="match_parent" android:layout_height="5dp" android:scaleType="matrix" android:src="@mipmap/cursor" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"/> </LinearLayout> </RelativeLayout>
viewPager_01.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical">
</LinearLayout>
viewpager_02.xml,viewpager_03.xml,viewpager_04.xml （略）只是背景颜色不同.
代码下载http://download.csdn.net/detail/qq_25059501/9664066
作者： 小淘气儿
出处： http://www.cnblogs.com/xiaotaoqi/p/5996742.html/>
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出.
