Android實(shí)現(xiàn)繞球心旋轉(zhuǎn)的引導(dǎo)頁(yè)效果
現(xiàn)在很多APP都會(huì)出現(xiàn)Android實(shí)現(xiàn)繞球心旋轉(zhuǎn)的引導(dǎo)頁(yè)效果,一個(gè)類似小車一直在往前開的旋轉(zhuǎn)式動(dòng)畫效果。
先看一下預(yù)覽效果:

嗯,整體效果還算理想,基本實(shí)現(xiàn)了頁(yè)面繞屏幕底部中心旋轉(zhuǎn)。
這里我們用到了Android系統(tǒng)的一個(gè)組件ViewFlipper,該控件的主要作用是為其中的View切換提供動(dòng)畫效果,主要的方法如下:
- setInAnimation:設(shè)置View進(jìn)入屏幕時(shí)的動(dòng)畫。
- setOutAnimation:設(shè)置View退出屏幕時(shí)的動(dòng)畫。
- showNext:調(diào)用該方法可以顯示下一個(gè)View。
- showPrevious:調(diào)用該方法可以來(lái)顯示上一個(gè)View。
- setFilpInterval:設(shè)置View切換的時(shí)間間隔。參數(shù)為毫秒。
- startFlipping:開始進(jìn)行View的切換。
- stopFlipping:停止View切換。
- setAutoStart:設(shè)置是否自動(dòng)開始。如果設(shè)置為“true”,當(dāng)ViewFlipper顯示的時(shí)候View的切換會(huì)自動(dòng)開始。
首先看一下布局代碼:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#440000ff">
<ImageView
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_alignParentBottom="true"
android:background="@mipmap/guide_bg" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ViewFlipper
android:id="@+id/vf"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
class="com.example.dell.guide.GuideOneFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<fragment
class="com.example.dell.guide.GuideTwoFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<fragment
class="com.example.dell.guide.GuideThreeFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</ViewFlipper>
</RelativeLayout>
</RelativeLayout>
主要就是一張?jiān)陧?yè)面底部的白色半球圖片,以及ViewFlipper內(nèi)部的三個(gè)View,當(dāng)然可以不用fragment,使用一般的Layout也行。
接下來(lái)就是對(duì)應(yīng)的Activity:
public class MainActivity extends AppCompatActivity {
//處理手勢(shì)監(jiān)聽(tīng)
private GestureDetector detector;
private ViewFlipper flipper;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
flipper = (ViewFlipper) findViewById(R.id.vf);
detector = new GestureDetector(this, new GestureDetector.SimpleOnGestureListener() {
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
if (e1.getX() - e2.getX() > 120.0F) { //從右向左滑動(dòng)
flipper.setInAnimation(MainActivity.this, R.anim.tip_left_in);
flipper.setOutAnimation(MainActivity.this, R.anim.tip_left_out);
if (flipper.getDisplayedChild() < 2) {
flipper.showNext();
}
} else if (e1.getX() - e2.getX() < -120.0F) { //從左向右滑動(dòng)
flipper.setInAnimation(MainActivity.this, R.anim.tip_right_in);
flipper.setOutAnimation(MainActivity.this, R.anim.tip_right_out);
if (flipper.getDisplayedChild() > 0) {
flipper.showPrevious();
}
}
return false;
}
});
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (detector != null) {
return detector.onTouchEvent(event);
}
return super.onTouchEvent(event);
}
}
因?yàn)橐獙?shí)現(xiàn)手勢(shì)滑動(dòng)來(lái)切換頁(yè)面,所以要?jiǎng)?chuàng)建一個(gè)GestureDetector對(duì)象:
detector = new GestureDetector(this, new GestureDetector.SimpleOnGestureListener() {
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
//省略......
return false;
}
});
由于我們只關(guān)心,手指的左右滑動(dòng),所以重寫SimpleOnGestureListener的onFling()即可,然后在onTouchEvent()進(jìn)行手勢(shì)監(jiān)聽(tīng)的綁定。到此我們的Activity就可以相應(yīng)滑動(dòng)的手勢(shì)了。
在onFling()方法中,當(dāng)從右向左滑動(dòng)時(shí),通過(guò)setInAnimation()、setOutAnimation()設(shè)置flipper中view從右側(cè)進(jìn)入的動(dòng)畫和從左側(cè)退出的動(dòng)畫,然后調(diào)用showNext()方法開始切換到下一頁(yè),這樣就可以看到對(duì)應(yīng)的動(dòng)畫效果。從左向右滑動(dòng)時(shí)情況類似,同樣需要設(shè)置view進(jìn)入和退出的動(dòng)畫,然后通過(guò)showPrevious()方法切換到上一頁(yè)。
具體的動(dòng)畫文件可以參考源代碼,這里就不貼了。源碼下載
到此整個(gè)實(shí)現(xiàn)流程就介紹完了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android實(shí)現(xiàn)過(guò)渡動(dòng)畫、引導(dǎo)頁(yè) Android判斷是否第一次啟動(dòng)App
- Android使用ViewPager實(shí)現(xiàn)啟動(dòng)引導(dǎo)頁(yè)
- Android開發(fā)實(shí)戰(zhàn)之漂亮的ViewPager引導(dǎo)頁(yè)
- Android開發(fā)實(shí)現(xiàn)的ViewPager引導(dǎo)頁(yè)功能(動(dòng)態(tài)加載指示器)詳解
- Android控件ViewPager實(shí)現(xiàn)帶有動(dòng)畫的引導(dǎo)頁(yè)
- Android引導(dǎo)頁(yè)面的簡(jiǎn)單實(shí)現(xiàn)
- Android實(shí)現(xiàn)漸變啟動(dòng)頁(yè)和帶有指示器的引導(dǎo)頁(yè)
- RxJava兩步打造華麗的Android引導(dǎo)頁(yè)
- Android自定義控件打造絢麗平行空間引導(dǎo)頁(yè)
- Android簡(jiǎn)單實(shí)現(xiàn)引導(dǎo)頁(yè)
相關(guān)文章
Android開發(fā)實(shí)現(xiàn)跟隨手指的小球效果示例
這篇文章主要介紹了Android開發(fā)實(shí)現(xiàn)跟隨手指的小球效果,涉及Android圖形繪制、事件響應(yīng)、界面布局等相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
Android編程動(dòng)態(tài)按鈕實(shí)現(xiàn)方法
這篇文章主要介紹了Android編程動(dòng)態(tài)按鈕實(shí)現(xiàn)方法,分享了onTouch方法及xml調(diào)用兩種實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-10-10
android 實(shí)現(xiàn)APP中改變頭像圖片的實(shí)例代碼
這篇文章主要介紹了android 實(shí)現(xiàn)APP中改變頭像圖片的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
詳解Android App卸載后跳轉(zhuǎn)到指定的反饋?lái)?yè)面的方法
這篇文章主要介紹了Android App卸載后跳轉(zhuǎn)到指定的反饋?lái)?yè)面的方法,關(guān)鍵點(diǎn)是相關(guān)線程要判斷在目錄被消除以前作出響應(yīng),需要的朋友可以參考下2016-04-04
Android編程解析XML文件的方法詳解【基于XmlPullParser】
這篇文章主要介紹了Android編程解析XML文件的方法,結(jié)合實(shí)例形式分析了Android基于XmlPullParser解析xml文件的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2017-07-07
Android自定義控件實(shí)現(xiàn)九宮格解鎖功能
這篇文章主要為大家詳細(xì)介紹了Android自定義控件實(shí)現(xiàn)九宮格解鎖功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
Android設(shè)置桌面背景圖片的實(shí)現(xiàn)方法
有時(shí)候我們需要用android設(shè)置桌面背景圖片,這里簡(jiǎn)單分享下,方便需要的朋友2013-06-06
Android實(shí)現(xiàn)相冊(cè)中圖片上傳或下載
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)相冊(cè)中圖片上傳或下載,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05

