Android实现界面左右滑动切换功能_网络技术_宿州市腾雀网络科技有限公司

Android实现界面左右滑动切换功能

发布时间 - 2026-01-10 22:13:53 点击率：次

相信大家一定都使用过手机QQ和微信之类的软件，当我们使用时不难发现其界面的切换不仅可以通过点击页标签来实现，还可以通过左右滑动来实现的，耗子君刚开始学Android时就觉得这样的滑动十分酷炫，十分想要自己来实现它。相信大家也和耗子君一样，想要迫不期待的学习怎样实现了吧，OK，下面我来详细的讲一下如何实现这个功能。

先来欣赏一下效果图吧：

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

OK，以上便是所有的代码，耗子君已经在代码中注释的非常详细了，相信大家都能够理解，是不是觉得很简单呢，这么“酷炫”的效果就这样实现出来了，哈哈。大家要是想要多建几个页也可以，不过要把滑动距离什么处理好。若大家还有疑问，可以随时问耗子君；以上若有错误的地方，还请指正，大家一起学习进步！

# android滑动切换界面 # android # 界面滑动切换 # Android如何使用ViewPager2实现页面滑动切换效果 # Android HorizontalScrollView滑动与ViewPager切换案例详解 # Android使用TabLayou+fragment+viewpager实现滑动切换页面效果 # Android ViewPager撤消左右滑动切换功能实现代码 # Android开发之使用ViewPager实现图片左右滑动切换效果 # Android中的ViewPager视图滑动切换类的入门实例教程 # Android App中使用ViewPager+Fragment实现滑动切换效果 # Android应用中利用ViewPager实现多页面滑动切换效果示例 # Android编程实现ViewPager多页面滑动切换及动画效果的方法 # Android开发之ViewPager实现滑动切换页面 # 标上 # 滚动条 # 来实现 # 放在 # 先来 # 切换到 # 计算出 # 新建一个 # 酷炫 # 几个 # 偏移量 # 还可以 # 第一个 # 大家都 # 不需要 # 都能 # 我来 # 就好 # 可以用 # 只需

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：哈尔滨专门制作网站的公司,哈尔滨医保缴费网站？

下一篇：阿里云建站指南：域名注册与模板选择一站式解析

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：哈尔滨专门制作网站的公司,哈尔滨医保缴费网站？

下一篇：阿里云建站指南：域名注册与模板选择一站式解析