美文网首页我爱编程
ViewPager实现页面滑动

ViewPager实现页面滑动

作者: W_Nicotine | 来源:发表于2018-05-27 19:50 被阅读0次

    效果图

    这里写图片描述

    首先,我们先来认识一下控件 ViewPager

    ViewPager是Android SDk中自带的一个附加包android-support-v4.jar中的一个类,可以用来实现屏幕间的切换。android-support-v4.jar可以在网上搜索最新的版本,下载好它后,我们需要把它添加到项目中去。

    XML布局

    首先来看一下activity的布局,这个布局相信大家都能看得懂,第一行为只有两个TextView的页标,至于名字大家就不用在意了,哈哈,第二行为滑动界面时的滚动条,图片自己要选择并添加到drawable中,长度不要太长哦,第三行即为我们要实现的界面切换用的ViewPager:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
        android:layout_height="match_parent"  tools:context=".MediaPlayerActivity">
    
        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="match_parent"
            android:layout_height="50.0dip"
            android:background="#FFFFFF"
            >
    
            <!--layout_weight这个属性为权重,让两个textview平分这个linearLayout-->
            <TextView
                android:id="@+id/videoLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1.0"
                android:gravity="center"
                android:text="视频"
                android:textColor="#000000"
                android:textSize="20dip"
                android:background="@drawable/selector"/>
    
            <TextView
                android:id="@+id/musicLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1.0"
                android:gravity="center"
                android:text="音乐"
                android:textColor="#000000"
                android:textSize="20dip"
                android:background="@drawable/selector"/>
    
        </LinearLayout>
    
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="10dp"
            android:layout_below="@id/linearLayout"
            android:id="@+id/scrollbar"
            android:scaleType="matrix"
            android:src="@drawable/scrollbar"/>
    
        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/scrollbar">
        </android.support.v4.view.ViewPager>
    
    </RelativeLayout>
    

    布局中TextView的background属性是我先设置好的,可以实现在按压其时,可以使得其背景颜色得到变换,并在松开时恢复颜色。方法为在drawable中新建一个selector.xml文件,写下如下代码;
    selector.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:state_pressed="true"
            android:drawable="@color/press" />
    </selector>
    

    当然,首先要在values文件夹下新建好colors.xml文件,配置好press的颜色:
    colors.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="press">#25fa55</color>
    </resources>
    

    看完了activity的布局,我们再来看看想要切换的界面的布局,这两个布局文件只需在layout文件中新建就好,不需要新建activity,为了简单,这里就只设置了背景颜色,能够在测试时看到效果即可:
    video_player.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ad2929">
    </RelativeLayout>
    

    media_player.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#acbbcf">
    </RelativeLayout>
    

    Java代码

    package com.example.blacklotus.multimedia;
    
    import android.app.Activity;
    import android.graphics.BitmapFactory;
    import android.graphics.Matrix;
    import android.os.Bundle;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    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 android.widget.VideoView;
    import java.util.ArrayList;
    
    public class MediaPlayerActivity extends Activity implements View.OnClickListener{
    
        private ViewPager viewPager;
        private ArrayList<View> pageview;
        private TextView videoLayout;
        private TextView musicLayout;
        // 滚动条图片
        private ImageView scrollbar;
        // 滚动条初始偏移量
        private int offset = 0;
        // 当前页编号
        private int currIndex = 0;
        // 滚动条宽度
        private int bmpW;
        //一倍滚动量
        private int one;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_media_player);
            viewPager = (ViewPager) findViewById(R.id.viewPager);
            //查找布局文件用LayoutInflater.inflate
            LayoutInflater inflater =getLayoutInflater();
            View view1 = inflater.inflate(R.layout.video_player, null);
            View view2 = inflater.inflate(R.layout.media_player, null);
            videoLayout = (TextView)findViewById(R.id.videoLayout);
            musicLayout = (TextView)findViewById(R.id.musicLayout);
            scrollbar = (ImageView)findViewById(R.id.scrollbar);
            videoLayout.setOnClickListener(this);
            musicLayout.setOnClickListener(this);
            pageview =new ArrayList<View>();
            //添加想要切换的界面
            pageview.add(view1);
            pageview.add(view2);
            //数据适配器
            PagerAdapter mPagerAdapter = new PagerAdapter(){
    
                @Override
                //获取当前窗体界面数
                public int getCount() {
                    // TODO Auto-generated method stub
                    return pageview.size();
                }
    
                @Override
                //判断是否由对象生成界面
                public boolean isViewFromObject(View arg0, Object arg1) {
                    // TODO Auto-generated method stub
                    return arg0==arg1;
                }
                //使从ViewGroup中移出当前View
                public void destroyItem(View arg0, int arg1, Object arg2) {
                    ((ViewPager) arg0).removeView(pageview.get(arg1));
                }
    
                //返回一个对象,这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中
                public Object instantiateItem(View arg0, int arg1){
                    ((ViewPager)arg0).addView(pageview.get(arg1));
                    return pageview.get(arg1);
                }
            };
            //绑定适配器
            viewPager.setAdapter(mPagerAdapter);
            //设置viewPager的初始界面为第一个界面
            viewPager.setCurrentItem(0);
            //添加切换界面的监听器
            viewPager.addOnPageChangeListener(new MyOnPageChangeListener());
            // 获取滚动条的宽度
            bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.scrollbar).getWidth();
            //为了获取屏幕宽度,新建一个DisplayMetrics对象
            DisplayMetrics displayMetrics = new DisplayMetrics();
            //将当前窗口的一些信息放在DisplayMetrics类中
            getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
            //得到屏幕的宽度
            int screenW = displayMetrics.widthPixels;
            //计算出滚动条初始的偏移量
            offset = (screenW / 2 - bmpW) / 2;
            //计算出切换一个界面时,滚动条的位移量
            one = offset * 2 + bmpW;
            Matrix matrix = new Matrix();
            matrix.postTranslate(offset, 0);
            //将滚动条的初始位置设置成与左边界间隔一个offset
            scrollbar.setImageMatrix(matrix);
        }
    
        public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
    
            @Override
            public void onPageSelected(int arg0) {
                Animation animation = null;
                switch (arg0) {
                    case 0:
                            /**
                             * TranslateAnimation的四个属性分别为
                             * float fromXDelta 动画开始的点离当前View X坐标上的差值 
                             * float toXDelta 动画结束的点离当前View X坐标上的差值 
                             * float fromYDelta 动画开始的点离当前View Y坐标上的差值 
                             * float toYDelta 动画开始的点离当前View Y坐标上的差值
                            **/
                            animation = new TranslateAnimation(one, 0, 0, 0);
                        break;
                    case 1:
                            animation = new TranslateAnimation(offset, one, 0, 0);
                        break;
                }
                //arg0为切换到的页的编码
                currIndex = arg0;
                // 将此属性设置为true可以使得图片停在动画结束时的位置
                animation.setFillAfter(true);
                //动画持续时间,单位为毫秒
                animation.setDuration(200);
                //滚动条开始动画
                scrollbar.startAnimation(animation);
            }
    
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }
    
            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        }
    
        @Override
        public void onClick(View view){
             switch (view.getId()){
                 case R.id.videoLayout:
                     //点击"视频“时切换到第一页
                     viewPager.setCurrentItem(0);
                     break;
                 case R.id.musicLayout:
                     //点击“音乐”时切换的第二页
                     viewPager.setCurrentItem(1);
                     break;
             }
        }
    }
    

    这样的功能对于我现在做的项目非常有帮助!转载自:https://blog.csdn.net/black__lotus/article/details/50805389

    相关文章

      网友评论

        本文标题:ViewPager实现页面滑动

        本文链接:https://www.haomeiwen.com/subject/vqlijftx.html