我爱编程

ViewPager实现页面滑动

2018-05-27  本文已影响0人  W_Nicotine

效果图

这里写图片描述

首先,我们先来认识一下控件 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

上一篇下一篇

猜你喜欢

热点阅读