快捷導(dǎo)航

Android實(shí)現(xiàn)界面左右滑動(dòng)切換功能

更新時(shí)間：2016年12月30日 16:22:13 作者：Black__Lotus

相信大家一定都使用過(guò)手機(jī)QQ和微信之類(lèi)的軟件，當(dāng)我們使用時(shí)不難發(fā)現(xiàn)其界面的切換不僅可以通過(guò)點(diǎn)擊頁(yè)標(biāo)簽來(lái)實(shí)現(xiàn)，還可以通過(guò)左右滑動(dòng)來(lái)實(shí)現(xiàn)的，下面小編給大家介紹下如何實(shí)現(xiàn)這個(gè)功能

相信大家一定都使用過(guò)手機(jī)QQ和微信之類(lèi)的軟件，當(dāng)我們使用時(shí)不難發(fā)現(xiàn)其界面的切換不僅可以通過(guò)點(diǎn)擊頁(yè)標(biāo)簽來(lái)實(shí)現(xiàn)，還可以通過(guò)左右滑動(dòng)來(lái)實(shí)現(xiàn)的，耗子君剛開(kāi)始學(xué)Android時(shí)就覺(jué)得這樣的滑動(dòng)十分酷炫，十分想要自己來(lái)實(shí)現(xiàn)它。相信大家也和耗子君一樣，想要迫不期待的學(xué)習(xí)怎樣實(shí)現(xiàn)了吧，OK，下面我來(lái)詳細(xì)的講一下如何實(shí)現(xiàn)這個(gè)功能。

先來(lái)欣賞一下效果圖吧：

這里寫(xiě)圖片描述

首先，我們先來(lái)認(rèn)識(shí)一下控件 ViewPager

ViewPager是Android SDk中自帶的一個(gè)附加包android-support-v4.jar中的一個(gè)類(lèi)，可以用來(lái)實(shí)現(xiàn)屏幕間的切換。android-support-v4.jar可以在網(wǎng)上搜索最新的版本，下載好它后，我們需要把它添加到項(xiàng)目中去。

XML布局

首先來(lái)看一下activity的布局，這個(gè)布局相信大家都能看得懂，第一行為只有兩個(gè)TextView的頁(yè)標(biāo)，至于名字大家就不用在意了，哈哈，第二行為滑動(dòng)界面時(shí)的滾動(dòng)條，圖片自己要選擇并添加到drawable中，長(zhǎng)度不要太長(zhǎng)哦，第三行即為我們要實(shí)現(xiàn)的界面切換用的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這個(gè)屬性為權(quán)重，讓兩個(gè)textview平分這個(gè)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="音樂(lè)"
      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屬性是我先設(shè)置好的，可以實(shí)現(xiàn)在按壓其時(shí)，可以使得其背景顏色得到變換，并在松開(kāi)時(shí)恢復(fù)顏色。方法為在drawable中新建一個(gè)selector.xml文件，寫(xiě)下如下代碼;

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>

當(dāng)然，首先要在values文件夾下新建好colors.xml文件，配置好press的顏色：

colors.xml:

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

看完了activity的布局，我們?cè)賮?lái)看看想要切換的界面的布局，這兩個(gè)布局文件只需在layout文件中新建就好，不需要新建activity，為了簡(jiǎn)單，這里就只設(shè)置了背景顏色，能夠在測(cè)試時(shí)看到效果即可：
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;
  // 滾動(dòng)條圖片
  private ImageView scrollbar;
  // 滾動(dòng)條初始偏移量
  private int offset = 0;
  // 當(dāng)前頁(yè)編號(hào)
  private int currIndex = 0;
  // 滾動(dòng)條寬度
  private int bmpW;
  //一倍滾動(dòng)量
  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);
    //數(shù)據(jù)適配器
    PagerAdapter mPagerAdapter = new PagerAdapter(){
      @Override
      //獲取當(dāng)前窗體界面數(shù)
      public int getCount() {
        // TODO Auto-generated method stub
        return pageview.size();
      }
      @Override
      //判斷是否由對(duì)象生成界面
      public boolean isViewFromObject(View arg0, Object arg1) {
        // TODO Auto-generated method stub
        return arg0==arg1;
      }
      //使從ViewGroup中移出當(dāng)前View
      public void destroyItem(View arg0, int arg1, Object arg2) {
        ((ViewPager) arg0).removeView(pageview.get(arg1));
      }
      //返回一個(gè)對(duì)象，這個(gè)對(duì)象表明了PagerAdapter適配器選擇哪個(gè)對(duì)象放在當(dāng)前的ViewPager中
      public Object instantiateItem(View arg0, int arg1){
        ((ViewPager)arg0).addView(pageview.get(arg1));
        return pageview.get(arg1);
      }
    };
    //綁定適配器
    viewPager.setAdapter(mPagerAdapter);
    //設(shè)置viewPager的初始界面為第一個(gè)界面
    viewPager.setCurrentItem(0);
    //添加切換界面的監(jiān)聽(tīng)器
    viewPager.addOnPageChangeListener(new MyOnPageChangeListener());
    // 獲取滾動(dòng)條的寬度
    bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.scrollbar).getWidth();
    //為了獲取屏幕寬度，新建一個(gè)DisplayMetrics對(duì)象
    DisplayMetrics displayMetrics = new DisplayMetrics();
    //將當(dāng)前窗口的一些信息放在DisplayMetrics類(lèi)中
    getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
    //得到屏幕的寬度
    int screenW = displayMetrics.widthPixels;
    //計(jì)算出滾動(dòng)條初始的偏移量
    offset = (screenW / 2 - bmpW) / 2;
    //計(jì)算出切換一個(gè)界面時(shí)，滾動(dòng)條的位移量
    one = offset * 2 + bmpW;
    Matrix matrix = new Matrix();
    matrix.postTranslate(offset, 0);
    //將滾動(dòng)條的初始位置設(shè)置成與左邊界間隔一個(gè)offset
    scrollbar.setImageMatrix(matrix);
  }
  public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
    @Override
    public void onPageSelected(int arg0) {
      Animation animation = null;
      switch (arg0) {
        case 0:
            /**
             * TranslateAnimation的四個(gè)屬性分別為
             * float fromXDelta 動(dòng)畫(huà)開(kāi)始的點(diǎn)離當(dāng)前View X坐標(biāo)上的差值 
             * float toXDelta 動(dòng)畫(huà)結(jié)束的點(diǎn)離當(dāng)前View X坐標(biāo)上的差值 
             * float fromYDelta 動(dòng)畫(huà)開(kāi)始的點(diǎn)離當(dāng)前View Y坐標(biāo)上的差值 
             * float toYDelta 動(dòng)畫(huà)開(kāi)始的點(diǎn)離當(dāng)前View Y坐標(biāo)上的差值
            **/
            animation = new TranslateAnimation(one, 0, 0, 0);
          break;
        case 1:
            animation = new TranslateAnimation(offset, one, 0, 0);
          break;
      }
      //arg0為切換到的頁(yè)的編碼
      currIndex = arg0;
      // 將此屬性設(shè)置為true可以使得圖片停在動(dòng)畫(huà)結(jié)束時(shí)的位置
      animation.setFillAfter(true);
      //動(dòng)畫(huà)持續(xù)時(shí)間，單位為毫秒
      animation.setDuration(200);
      //滾動(dòng)條開(kāi)始動(dòng)畫(huà)
      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:
         //點(diǎn)擊"視頻“時(shí)切換到第一頁(yè)
         viewPager.setCurrentItem(0);
         break;
       case R.id.musicLayout:
         //點(diǎn)擊“音樂(lè)”時(shí)切換的第二頁(yè)
         viewPager.setCurrentItem(1);
         break;
     }
  }
}

OK，以上便是所有的代碼，耗子君已經(jīng)在代碼中注釋的非常詳細(xì)了，相信大家都能夠理解，是不是覺(jué)得很簡(jiǎn)單呢，這么“酷炫”的效果就這樣實(shí)現(xiàn)出來(lái)了，哈哈。大家要是想要多建幾個(gè)頁(yè)也可以，不過(guò)要把滑動(dòng)距離什么處理好。若大家還有疑問(wèn)，可以隨時(shí)問(wèn)耗子君；以上若有錯(cuò)誤的地方，還請(qǐng)指正，大家一起學(xué)習(xí)進(jìn)步！

您可能感興趣的文章: