Android 界面左右滑动切换

Android 界面左右滑动切换

1.界面布局

<LinearLayout
    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"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_weight="13"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@id/scrollbar">
    </androidx.viewpager.widget.ViewPager>

    <LinearLayout
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:background="#FFFFFF">
        <LinearLayout
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/i1"
                android:layout_weight="1"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center"
                android:src="@mipmap/photo2" />
            <TextView
                android:id="@+id/t1"
                android:layout_weight="1"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:gravity="center"
                android:text="主页"
                android:textSize="20sp"
                android:textColor="#000" />
        </LinearLayout>
        <LinearLayout
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/i2"
                android:layout_weight="1"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_gravity="center"
                android:src="@mipmap/photo3" />
            <TextView
                android:id="@+id/t2"
                android:layout_weight="1"
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:gravity="center"
                android:text="活动"
                android:textSize="20sp"/>
        </LinearLayout>

    </LinearLayout>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:id="@+id/scrollbar"
        android:scaleType="matrix"
        android:layout_marginTop="5dp"
        android:src="@mipmap/scrollbar"/>

</LinearLayout>

界面展示

2.功能实现
绑定ID

在onCreate函数中初始化滑块位置

		bmpW = BitmapFactory.decodeResource(getResources(), R.mipmap.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);

在onCreate函数中，ViewPage添加两个Fragment界面

		FragmentManager fragmentManager=getSupportFragmentManager();
        fragments=new ArrayList<Fragment>();
        fragments.add(new BlankFragment1());
        fragments.add(new BlankFragment2());

定义MyPagerAdapter类

 public class MyPagerAdapter extends FragmentPagerAdapter
    {

        public MyPagerAdapter(@NonNull FragmentManager fm) {
            super(fm);
        }

        @NonNull
        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

        @Override
        public int getCount() {
            return fragments.size();
        }
    }

定义MyOnPageChangeListener类

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);
                    t1.setTextColor(Color.rgb(0,0,0));
                    t2.setTextColor(Color.rgb(117,117,117));
                    i1.setImageResource(R.mipmap.photo2);
                    i2.setImageResource(R.mipmap.photo3);
                    break;
                case 1:
                    animation = new TranslateAnimation(offset, one, 0, 0);
                    t1.setTextColor(Color.rgb(117,117,117));
                    t2.setTextColor(Color.rgb(0,0,0));
                    i1.setImageResource(R.mipmap.photo1);
                    i2.setImageResource(R.mipmap.photo4);
                    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) {
        }
    }

使用方法

		MyPagerAdapter myPagerAdapter=new MyPagerAdapter(fragmentManager);
        viewPager.setAdapter(myPagerAdapter);
        viewPager.addOnPageChangeListener(new MyOnPageChangeListener());

3.源代码

点击下载

4.有的软件开发不需要左右滑动屏幕切换界面，只需要点击按钮切换，这时候我们只需要定义一个类，禁止滑动即可。

(1) 新建命名为CustomViewPager的类

package com.example.day_05;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;

import androidx.viewpager.widget.ViewPager;

/**
 * Created by Administrator on 2017/5/19.
 */

public class CustomViewPager extends ViewPager {

    private boolean isCanScroll = true;

    public CustomViewPager(Context context) {
        super(context);
    }

    public CustomViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    /**
     * 设置其是否能滑动换页
     * @param isCanScroll false 不能换页， true 可以滑动换页
     */
    public void setScanScroll(boolean isCanScroll) {
        this.isCanScroll = isCanScroll;
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        return isCanScroll && super.onInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        return isCanScroll && super.onTouchEvent(ev);

    }
}

这时候ViewPage全部替换成我们定义这个类的名称

替换


调用方法

 viewPager.setScanScroll(false);

这时候屏幕就禁止滑动了，可以点击按钮进行切换

源代码
点击下载