相信大家一定都使用過手機(jī)QQ和微信之類的軟件，當(dāng)我們使用時(shí)不難發(fā)現(xiàn)其界面的切換不僅可以通過點(diǎn)擊頁標(biāo)簽來實(shí)現(xiàn)，還可以通過左右滑動來實(shí)現(xiàn)的，耗子君剛開始學(xué)Android時(shí)就覺得這樣的滑動十分酷炫，十分想要自己來實(shí)現(xiàn)它。相信大家也和耗子君一樣，想要迫不期待的學(xué)習(xí)怎樣實(shí)現(xiàn)了吧，OK，下面我來詳細(xì)的講一下如何實(shí)現(xiàn)這個(gè)功能。
先來欣賞一下效果圖吧：
首先，我們先來認(rèn)識一下控件 ViewPager
ViewPager是Android SDk中自帶的一個(gè)附加包android-support-v4.jar中的一個(gè)類，可以用來實(shí)現(xiàn)屏幕間的切換。android-support-v4.jar可以在網(wǎng)上搜索最新的版本，下載好它后，我們需要把它添加到項(xiàng)目中去。
XML布局
首先來看一下activity的布局，這個(gè)布局相信大家都能看得懂，第一行為只有兩個(gè)TextView的頁標(biāo)，至于名字大家就不用在意了，哈哈，第二行為滑動界面時(shí)的滾動條，圖片自己要選擇并添加到drawable中，長度不要太長哦，第三行即為我們要實(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="音樂" 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í)，可以使得其背景顏色得到變換，并在松開時(shí)恢復(fù)顏色。方法為在drawable中新建一個(gè)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>
當(dāng)然，首先要在values文件夾下新建好colors.xml文件，配置好press的顏色：
colors.xml:
<?xml version="1.0" encoding="utf-8"?><resources> <color name="press">#25fa55</color></resources>
看完了activity的布局，我們再來看看想要切換的界面的布局，這兩個(gè)布局文件只需在layout文件中新建就好，不需要新建activity，為了簡單，這里就只設(shè)置了背景顏色，能夠在測試時(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; // 滾動條圖片 private ImageView scrollbar; // 滾動條初始偏移量 private int offset = 0; // 當(dāng)前頁編號 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); //數(shù)據(jù)適配器 PagerAdapter mPagerAdapter = new PagerAdapter(){ @Override //獲取當(dāng)前窗體界面數(shù) 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中移出當(dāng)前View public void destroyItem(View arg0, int arg1, Object arg2) { ((ViewPager) arg0).removeView(pageview.get(arg1)); } //返回一個(gè)對象，這個(gè)對象表明了PagerAdapter適配器選擇哪個(gè)對象放在當(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)聽器 viewPager.addOnPageChangeListener(new MyOnPageChangeListener()); // 獲取滾動條的寬度 bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.scrollbar).getWidth(); //為了獲取屏幕寬度，新建一個(gè)DisplayMetrics對象 DisplayMetrics displayMetrics = new DisplayMetrics(); //將當(dāng)前窗口的一些信息放在DisplayMetrics類中 getWindowManager().getDefaultDisplay().getMetrics(displayMetrics); //得到屏幕的寬度 int screenW = displayMetrics.widthPixels; //計(jì)算出滾動條初始的偏移量 offset = (screenW / 2 - bmpW) / 2; //計(jì)算出切換一個(gè)界面時(shí)，滾動條的位移量 one = offset * 2 + bmpW; Matrix matrix = new Matrix(); matrix.postTranslate(offset, 0); //將滾動條的初始位置設(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 動畫開始的點(diǎn)離當(dāng)前View X坐標(biāo)上的差值 * float toXDelta 動畫結(jié)束的點(diǎn)離當(dāng)前View X坐標(biāo)上的差值 * float fromYDelta 動畫開始的點(diǎn)離當(dāng)前View Y坐標(biāo)上的差值 * float toYDelta 動畫開始的點(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為切換到的頁的編碼 currIndex = arg0; // 將此屬性設(shè)置為true可以使得圖片停在動畫結(jié)束時(shí)的位置 animation.setFillAfter(true); //動畫持續(xù)時(shí)間，單位為毫秒 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: //點(diǎn)擊"視頻“時(shí)切換到第一頁 viewPager.setCurrentItem(0); break; case R.id.musicLayout: //點(diǎn)擊“音樂”時(shí)切換的第二頁 viewPager.setCurrentItem(1); break; } }}OK，以上便是所有的代碼，耗子君已經(jīng)在代碼中注釋的非常詳細(xì)了，相信大家都能夠理解，是不是覺得很簡單呢，這么“酷炫”的效果就這樣實(shí)現(xiàn)出來了，哈哈。大家要是想要多建幾個(gè)頁也可以，不過要把滑動距離什么處理好。若大家還有疑問，可以隨時(shí)問耗子君；以上若有錯(cuò)誤的地方，還請指正，大家一起學(xué)習(xí)進(jìn)步！
新聞熱點(diǎn)
疑難解答
圖片精選
