Android,인터페이스 좌우 슬라이딩 전환 기능 구현

모두 가 핸드폰 QQ 와 위 챗 같은 소프트웨어 를 사용 한 적 이 있 을 것 이 라 고 믿 습 니 다.우리 가 사용 할 때 그 인터페이스의 전환 은 페이지 라벨 을 클릭 해서 이 루어 질 수 있 을 뿐만 아니 라 좌우 미끄럼 을 통 해 이 루어 질 수 있 습 니 다.쥐 군 은 안 드 로 이 드 를 처음 배 웠 을 때 이런 미끄럼 이 매우 멋 져 서 스스로 이 루어 지고 싶 었 습 니 다.여러분 도 쥐 군 과 마찬가지 로 기대 하지 않 는 공 부 를 어떻게 이 루 었 는 지,OK,이 기능 을 어떻게 실현 하 는 지 자세히 말씀 드 리 겠 습 니 다.
먼저 효과 도 를 감상 해 보 자.

우선 컨트롤 뷰 퍼 거 를 알 아 보 겠 습 니 다.
ViewPager 는 Android SDK 에서 자체 적 으로 가지 고 있 는 추가 패키지 인 android-support-v4.jar 의 클래스 로 화면 간 전환 을 실현 할 수 있 습 니 다.안 드 로 이 드-슈퍼 포트-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 의 레이아웃 을 보고 전환 하고 자 하 는 인터페이스의 레이아웃 을 살 펴 보 겠 습 니 다.이 두 레이아웃 파일 은 layot 파일 에서 만 새로 만 들 면 됩 니 다.새 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>

자바 코드

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,이상 은 모든 코드 입 니 다.쥐 군 은 이미 코드 에 매우 상세 하 게 주석 을 달 았 습 니 다.모두 가 이해 할 수 있 을 거 라 고 믿 습 니 다.아주 간단 하 다 고 생각 하지 않 습 니까?이렇게'쿨 현'의 효 과 는 이렇게 실현 되 었 습 니 다.하하.여러분 이 몇 페이지 를 더 만 들 려 고 한다 면 괜 찮 지만,미끄럼 거 리 를 잘 처리 해 야 합 니 다.만약 여러분 이 아직도 의문 이 있다 면 언제든지 쥐 군 에 게 물 어 봐 도 됩 니 다.이상 에 잘못된 점 이 있 으 면 지적 해 주 십시오.모두 함께 진 보 를 배 웁 시다!