zoukankan      html  css  js  c++  java

  • ViewPager的简单使用

    1、布局文件


    a、主布局文件

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:tools="http://schemas.android.com/tools"
    4.     android:layout_width="match_parent"
    5.     android:layout_height="match_parent"
    6.     android:orientation="vertical"
    7.     tools:context="lpc.com.animation2demo.MainActivity">
    9.     <LinearLayout
    10.         android:layout_width="match_parent"
    11.         android:layout_height="48dp">
    13.         <TextView
    14.             android:id="@+id/tv1"
    15.             android:text="苹果"
    16.             android:gravity="center"
    17.             android:layout_weight="1"
    18.             android:layout_width="match_parent"
    19.             android:layout_height="match_parent" />
    22.         <TextView
    23.             android:id="@+id/tv2"
    24.             android:text="香蕉"
    25.             android:gravity="center"
    26.             android:layout_weight="1"
    27.             android:layout_width="match_parent"
    28.             android:layout_height="match_parent" />
    31.         <TextView
    32.             android:text="梨"
    33.             android:id="@+id/tv3"
    34.             android:gravity="center"
    35.             android:layout_weight="1"
    36.             android:layout_width="match_parent"
    37.             android:layout_height="match_parent" />
    38.     </LinearLayout>
    41.     <ImageView
    42.         android:id="@+id/iv"
    43.         android:src="@mipmap/line"
    44.         android:scaleType="matrix"
    45.         android:layout_width="match_parent"
    46.         android:layout_height="wrap_content" />
    48.     <android.support.v4.view.ViewPager
    49.         android:id="@+id/viewPager1"
    50.         android:layout_weight="1"
    51.         android:layout_width="match_parent"
    52.         android:flipInterval="30"
    53.         android:layout_gravity="center"
    54.         android:persistentDrawingCache="animation"
    55.         android:layout_height="0dp">
    57.     </android.support.v4.view.ViewPager>
    59. </LinearLayout>


    b、子布局

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     android:orientation="vertical" android:layout_width="match_parent"
    4.     android:layout_height="match_parent">
    6.     <ImageView
    7.         android:background="@drawable/a1"
    8.         android:layout_width="match_parent"
    9.         android:layout_height="match_parent" />
    10. </LinearLayout>

    另外两子布局类似，只是图片和id不一样

    2、主Java文件


    1. package lpc.com.animation2demo;
    3. import android.graphics.BitmapFactory;
    4. import android.graphics.Matrix;
    5. import android.os.Bundle;
    6. import android.support.v4.view.ViewPager;
    7. import android.support.v7.app.AppCompatActivity;
    8. import android.util.DisplayMetrics;
    9. import android.view.LayoutInflater;
    10. import android.view.View;
    11. import android.view.animation.Animation;
    12. import android.view.animation.TranslateAnimation;
    13. import android.widget.ImageView;
    14. import android.widget.TextView;
    16. import java.util.ArrayList;
    18. public class MainActivity extends AppCompatActivity implements View.OnClickListener,ViewPager.OnPageChangeListener{
    20.     private TextView tv1; //文本对象1
    21.     private TextView tv2; //文本对象2
    22.     private TextView tv3; //文本对象3
    23.     private ImageView iv; //图片对象（用于移动条）
    24.     private ViewPager vp; //Viewpager对象
    26.     private ArrayList<View> viewArrayList; //创建一个View储存数组
    27.     private int offset = 0; //移动条图片的偏移量
    28.     private int currentIndex = 0; //当前页面
    29.     private int bmpWidth ; //图片宽度
    30.     private int one = 0; //移动条滑动一页的距离
    31.     private int two = 0; //滑动条移动两页的距离
    34.     @Override
    35.     protected void onCreate(Bundle savedInstanceState) {
    36.         super.onCreate(savedInstanceState);
    37.         setContentView(R.layout.activity_main);
    39.         initView();
    40.     }
    42.     private void initView() {
    44.        tv1 = (TextView) findViewById(R.id.tv1);
    45.        tv2 = (TextView) findViewById(R.id.tv2);
    46.        tv3 = (TextView) findViewById(R.id.tv3);
    47.         iv = (ImageView) findViewById(R.id.iv);
    48.         vp = (ViewPager) findViewById(R.id.viewPager1);
    50.         //下划线动画的相关设置：
    51.         bmpWidth = BitmapFactory.decodeResource(getResources(), R.mipmap.line).getWidth();// 获取图片宽度
    52.         DisplayMetrics dm = new DisplayMetrics();
    53.         getWindowManager().getDefaultDisplay().getMetrics(dm);
    54.         int screenW = dm.widthPixels;// 获取分辨率宽度
    55.         offset = (screenW / 3 - bmpWidth) / 2;// 计算偏移量
    56.         Matrix matrix = new Matrix();
    57.         matrix.postTranslate(offset, 0);
    58.         iv.setImageMatrix(matrix);// 设置动画初始位置
    59.         //移动的距离
    60.         one = offset * 2 + bmpWidth;// 移动一页的偏移量,比如1->2,或者2->3
    61.         two = one * 2;// 移动两页的偏移量,比如1直接跳3
    64.         //往ViewPager填充View，同时设置点击事件与页面切换事件
    66.         viewArrayList = new ArrayList<View>();
    67.         LayoutInflater inflater = getLayoutInflater();
    68.         viewArrayList.add(inflater.inflate(R.layout.view1,null,false));
    69.         viewArrayList.add(inflater.inflate(R.layout.view2,null,false));
    70.         viewArrayList.add(inflater.inflate(R.layout.view3,null,false));
    72.         vp.setAdapter(new MyAdapter(viewArrayList));
    73.         vp.setCurrentItem(0); //设置ViewPager当前页，从0开始算
    75.         tv1.setOnClickListener(this);
    76.         tv2.setOnClickListener(this);
    77.         tv3.setOnClickListener(this);
    79.         vp.addOnPageChangeListener(this);
    81.     }
    83.     @Override
    84.     public void onClick(View view) {
    85.         switch (view.getId()){
    86.             case R.id.tv1:
    87.                 vp.setCurrentItem(0);
    88.                 break;
    89.             case R.id.tv2:
    90.                 vp.setCurrentItem(1);
    91.                 break;
    92.             case R.id.tv3:
    93.                 vp.setCurrentItem(2);
    94.                 break;
    95.         }
    96.     }
    98.     @Override
    99.     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    101.     }
    103.     @Override
    104.     public void onPageSelected(int position) {
    106.         Animation animation = null;
    107.         switch (position){
    108.             case 0:
    109.                 if (currentIndex == 1){
    110.                     animation = new TranslateAnimation(one,0,0,0);
    111.                 }else if (currentIndex == 2){
    112.                     animation = new TranslateAnimation(two,0,0,0);
    113.                 }
    114.                 break;
    115.             case 1:
    116.                 if (currentIndex == 0){
    117.                     animation = new TranslateAnimation(offset,one,0,0);
    118.                 }else if (currentIndex == 2){
    119.                     animation = new TranslateAnimation(two,one,0,0);
    120.                 }
    121.                 break;
    122.             case 2:
    123.                 if (currentIndex == 0){
    124.                     animation = new TranslateAnimation(offset,two,0,0);
    125.                 }else if (currentIndex == 1){
    126.                     animation = new TranslateAnimation(one,two,0,0);
    127.                 }
    128.                 break;
    129.         }
    130.         currentIndex = position;
    131.         animation.setFillAfter(true);// true表示图片停在动画结束位置
    132.         animation.setDuration(300); //设置动画时间为300毫秒
    133.         iv.startAnimation(animation);//开始动画
    135.     }
    137.     @Override
    138.     public void onPageScrollStateChanged(int state) {
    140.     }
    141. }

    3、适配器文件


    1. package lpc.com.animation2demo;
    3. import android.support.v4.view.PagerAdapter;
    4. import android.view.View;
    5. import android.view.ViewGroup;
    7. import java.util.ArrayList;
    9. /**
    10.  * Created by Administrator on 2016/3/16.
    11.  * 适配器
    12.  */
    13. public class MyAdapter extends PagerAdapter {
    15.     //创建一个对象数组 存储View
    16.     private ArrayList<View> viewArrayList;
    18.     //空构造函数
    19.     public MyAdapter() {
    20.     }
    22.     //初始化对象数组
    23.     public MyAdapter(ArrayList<View> viewArrayList) {
    24.         this.viewArrayList = viewArrayList;
    25.     }
    27.     //获取对象数组的大小
    28.     @Override
    29.     public int getCount() {
    30.         return viewArrayList.size();
    31.     }
    32.     //将视图转化成对象
    33.     @Override
    34.     public boolean isViewFromObject(View view, Object object) {
    35.         return view == object;
    36.     }
    38.     //获取选定 对象数组并将其添加到viewpager中
    39.     @Override
    40.     public Object instantiateItem(ViewGroup container, int position) {
    41.         container.addView(viewArrayList.get(position));
    42.         return viewArrayList.get(position);
    43.     }
    45.     //移除选定的对象数组对象
    46.     @Override
    47.     public void destroyItem(ViewGroup container, int position, Object object) {
    48.         container.removeView(viewArrayList.get(position));
    49.     }
    50. }

    4、manifest文件

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    3.     package="lpc.com.animation2demo">
    5.     <application
    6.         android:allowBackup="true"
    7.         android:icon="@mipmap/ic_launcher"
    8.         android:label="@string/app_name"
    9.         android:supportsRtl="true"
    10.         android:theme="@style/AppTheme">
    11.         <activity android:name=".MainActivity">
    12.             <intent-filter>
    13.                 <action android:name="android.intent.action.MAIN" />
    15.                 <category android:name="android.intent.category.LAUNCHER" />
    16.             </intent-filter>
    17.         </activity>
    18.     </application>
    20. </manifest>

    5、实现效果
  • 相关阅读:
    推荐：俞敏洪的一分钟励志演讲
    信息系统开发平台OpenExpressApp － 内置支持的列表编辑方式
    WPF － 资源收集
    开源 － 开源协议
    信息系统开发平台OpenExpressApp － 总体架构的由来
    WPF － DataGrid 相关收集
    报表引擎 －架构描述
    推荐：图标编辑器
    Scrum之 回顾会议
    从买房来看软件有哪几个主要关注点
  • 原文地址：https://www.cnblogs.com/liupengcheng/p/5286486.html
Copyright © 2011-2022 走看看