Android實(shí)現(xiàn)界面左右滑動(dòng)切換功能
更新時(shí)間：2016年12月30日 16:22:13 作者：Black__Lotus
相信大家一定都使用過手機(jī)QQ和微信之類的軟件，當(dāng)我們使用時(shí)不難發(fā)現(xiàn)其界面的切換不僅可以通過點(diǎn)擊頁標(biāo)簽來實(shí)現(xiàn)，還可以通過左右滑動(dòng)來實(shí)現(xiàn)的，下面小編給大家介紹下如何實(shí)現(xiàn)這個(gè)功能
相信大家一定都使用過手機(jī)QQ和微信之類的軟件，當(dāng)我們使用時(shí)不難發(fā)現(xiàn)其界面的切換不僅可以通過點(diǎn)擊頁標(biāo)簽來實(shí)現(xiàn)，還可以通過左右滑動(dòng)來實(shí)現(xiàn)的，耗子君剛開始學(xué)Android時(shí)就覺得這樣的滑動(dòng)十分酷炫，十分想要自己來實(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)，至于名字大家就不用在意了，哈哈，第二行為滑動(dòng)界面時(shí)的滾動(dòng)條，圖片自己要選擇并添加到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;
// 滾動(dòng)條圖片
private ImageView scrollbar;
// 滾動(dòng)條初始偏移量
private int offset = 0;
// 當(dāng)前頁編號
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
//判斷是否由對象生成界面
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());
// 獲取滾動(dòng)條的寬度
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ì)算出滾動(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)畫開始的點(diǎn)離當(dāng)前View X坐標(biāo)上的差值
* float toXDelta 動(dòng)畫結(jié)束的點(diǎn)離當(dāng)前View X坐標(biāo)上的差值
* float fromYDelta 動(dòng)畫開始的點(diǎn)離當(dāng)前View Y坐標(biāo)上的差值
* float toYDelta 動(dòng)畫開始的點(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可以使得圖片停在動(dòng)畫結(jié)束時(shí)的位置
animation.setFillAfter(true);
//動(dòng)畫持續(xù)時(shí)間，單位為毫秒
animation.setDuration(200);
//滾動(dòng)條開始動(dòng)畫
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è)頁也可以，不過要把滑動(dòng)距離什么處理好。若大家還有疑問，可以隨時(shí)問耗子君；以上若有錯(cuò)誤的地方，還請指正，大家一起學(xué)習(xí)進(jìn)步！
您可能感興趣的文章:
- Android如何使用ViewPager2實(shí)現(xiàn)頁面滑動(dòng)切換效果
- Android HorizontalScrollView滑動(dòng)與ViewPager切換案例詳解
- Android使用TabLayou+fragment+viewpager實(shí)現(xiàn)滑動(dòng)切換頁面效果
- Android ViewPager撤消左右滑動(dòng)切換功能實(shí)現(xiàn)代碼
- Android開發(fā)之使用ViewPager實(shí)現(xiàn)圖片左右滑動(dòng)切換效果
- Android中的ViewPager視圖滑動(dòng)切換類的入門實(shí)例教程
- Android App中使用ViewPager+Fragment實(shí)現(xiàn)滑動(dòng)切換效果
- Android應(yīng)用中利用ViewPager實(shí)現(xiàn)多頁面滑動(dòng)切換效果示例
- Android編程實(shí)現(xiàn)ViewPager多頁面滑動(dòng)切換及動(dòng)畫效果的方法
- Android開發(fā)之ViewPager實(shí)現(xiàn)滑動(dòng)切換頁面
相關(guān)文章
Android使用criteria選擇合適的地理位置服務(wù)實(shí)現(xiàn)方法
這篇文章主要介紹了Android使用criteria選擇合適的地理位置服務(wù)實(shí)現(xiàn)方法,實(shí)例分析了Criteria的具體使用技巧,需要的朋友可以參考下2016-01-01
我們在學(xué)習(xí)View的時(shí)候，不可避免會遇到事件的分發(fā)，而往往遇到的很多滑動(dòng)沖突的問題都是由于處理事件分發(fā)時(shí)不恰當(dāng)所造成的。因此，深入了解View事件分發(fā)機(jī)制的原理，對于我們來說是很有必要的。2017-12-12
Android使用PullToRefresh完成ListView下拉刷新和左滑刪除功能
ListView下刷新刷功能相信從事Android開發(fā)的猿友們并不陌生,本文就帶領(lǐng)一些剛?cè)腴Tandroid的朋友或者一起愛分享的朋友來簡單的實(shí)現(xiàn)ListView的下拉刷新和左滑刪除效果。感興趣的朋友一起看看吧2016-11-11
android通過gps獲取定位的位置數(shù)據(jù)和gps經(jīng)緯度
這篇文章主要介紹了android通過gps獲取定位的位置數(shù)據(jù)示例，大家參考使用吧2014-01-01
Android 使用ViewPager實(shí)現(xiàn)左右循環(huán)滑動(dòng)及輪播效果
ViewPager是一個(gè)常用的Android組件，不過通常我們使用ViewPager的時(shí)候不能實(shí)現(xiàn)左右無限循環(huán)滑動(dòng)，在滑到邊界的時(shí)候會看到一個(gè)不能翻頁的動(dòng)畫，可能影響用戶體驗(yàn),接下來通過本文給大家介紹Android 使用ViewPager實(shí)現(xiàn)左右循環(huán)滑動(dòng)及輪播效果，一起看看吧2017-02-02
Room 是在 SQLite 上提供了一個(gè)抽象層，以便在充分利用 SQLite 的強(qiáng)大功能的同時(shí)，能夠流暢地訪問數(shù)據(jù)庫，這篇文章主要為大家介紹了Room組件的具體使用，需要的可以參考下2023-08-08
Android響應(yīng)事件onClick方法的五種實(shí)現(xiàn)方式小結(jié)
本篇文章主要介紹了Android響應(yīng)onClick方法的五種實(shí)現(xiàn)方式小結(jié)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
Android在項(xiàng)目中接入騰訊TBS瀏覽器WebView的教程與注意的地方
今天小編就為大家分享一篇關(guān)于Android在項(xiàng)目中接入騰訊TBS瀏覽器WebView的教程與注意的地方，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2018-10-10
Android使用元數(shù)據(jù)實(shí)現(xiàn)配置信息的傳遞方法詳細(xì)介紹
這篇文章主要介紹了Android使用元數(shù)據(jù)實(shí)現(xiàn)配置信息的傳遞方法，也就是實(shí)現(xiàn)配置快捷菜單功能，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
這篇文章主要為大家介紹了MobLink?Android?快速集成指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10