生活随笔
收集整理的這篇文章主要介紹了
引导界面（四）仿人人网V5.9.2最新版引导界面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?? 這一篇我將會以人人網的引導界面為實例來展開詳細的講解，人人網的引導界面比較的新穎，不同于其他應用程序千篇一律的靠滑動來引導用戶，而是以一個一個比較生動形象的動畫效果展示在用戶們的面前，有一種給人眼前一亮的感覺，話不多說，進入正題。
一、實現的效果圖
歡迎界面：
引導界面1
引導界面 2
引導界面 3
二 、項目的目錄結構
三、具體的編碼實現
1、歡迎界面的xml布局，activity_welcome：
[html]?view plaincopy
<?xml?version="1.0"?encoding="utf-8"?>?? <LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"?? ????android:layout_width="fill_parent"?? ????android:layout_height="fill_parent"?? ????android:background="@drawable/v5_6_2_welcome"?? ????android:orientation="vertical"?/>??
2、引導界面的xml布局，activity_guide.xml：
[html]?view plaincopy
<?xml?version="1.0"?encoding="utf-8"?>?? <RelativeLayout?xmlns:android="http://schemas.android.com/apk/res/android"?? ????android:layout_width="fill_parent"?? ????android:layout_height="fill_parent"?? ????android:orientation="vertical"?>?? ?? ????<ImageView?? ????????android:id="@+id/iv_guide_picture"?? ????????android:layout_width="fill_parent"?? ????????android:layout_height="fill_parent"?? ????????android:layout_weight="1.0"?? ????????android:scaleType="fitXY"?/>?? ?? ????<LinearLayout?? ????????android:id="@+id/ll_bottom_action_bar"?? ????????android:layout_width="fill_parent"?? ????????android:layout_height="wrap_content"?? ????????android:layout_alignParentBottom="true"?? ????????android:orientation="horizontal"?? ????????android:padding="7dip"?>?? ?? ????????<Button?? ????????????android:id="@+id/btn_register"?? ????????????android:layout_width="fill_parent"?? ????????????android:layout_height="45dip"?? ????????????android:layout_weight="1.5"?? ????????????android:background="@drawable/guide_btn_blue"?? ????????????android:gravity="center"?? ????????????android:singleLine="true"?? ????????????android:text="注??冊"?? ????????????android:textColor="#FFFFFF"?? ????????????android:textSize="15.0sp"?/>?? ?? ????????<Button?? ????????????android:id="@+id/btn_look_at_the_people_i_know"?? ????????????android:layout_width="fill_parent"?? ????????????android:layout_height="45dip"?? ????????????android:layout_marginLeft="8dip"?? ????????????android:layout_marginRight="8dip"?? ????????????android:layout_weight="1.0"?? ????????????android:background="@drawable/guide_btn_white"?? ????????????android:gravity="center"?? ????????????android:singleLine="true"?? ????????????android:text="看看我認識的人"?? ????????????android:textColor="#000000"?? ????????????android:textSize="15.0sp"?/>?? ?? ????????<Button?? ????????????android:id="@+id/btn_login"?? ????????????android:layout_width="fill_parent"?? ????????????android:layout_height="45dip"?? ????????????android:layout_weight="1.5"?? ????????????android:background="@drawable/guide_btn_blue"?? ????????????android:gravity="center"?? ????????????android:singleLine="true"?? ????????????android:text="登??錄"?? ????????????android:textColor="#FFFFFF"?? ????????????android:textSize="15.0sp"?/>?? ????</LinearLayout>?? </RelativeLayout>??
3、在這里還要創建兩個xml資源文件文件來實現自定義按鈕的效果，關于自定義按鈕的效果實現我會在后面的UI專題詳細介紹，這里就不在贅述，
guide_btn_blue.xml：
[html]?view plaincopy
<?xml?version="1.0"?encoding="utf-8"?>?? <selector?xmlns:android="http://schemas.android.com/apk/res/android">?? ?? ????<item?android:drawable="@drawable/v5_0_1_guide_blue_default"?android:state_focused="true"?android:state_pressed="false"/>?? ????<item?android:drawable="@drawable/v5_0_1_guide_blue_press"?android:state_pressed="true"/>?? ????<item?android:drawable="@drawable/v5_0_1_guide_blue_default"/>?? ?? </selector>??
guide_btn_white：
[html]?view plaincopy
<?xml?version="1.0"?encoding="utf-8"?>?? <selector?xmlns:android="http://schemas.android.com/apk/res/android">?? ?? ????<item?android:drawable="@drawable/v5_0_1_guide_black_default"?android:state_focused="true"?android:state_pressed="false"/>?? ????<item?android:drawable="@drawable/v5_0_1_guide_black_press"?android:state_pressed="true"/>?? ????<item?android:drawable="@drawable/v5_0_1_guide_black_default"/>?? ?? </selector>??
4、然后是動畫效果的xml資源文件，關于自定義動畫效果的實現我也會在后面的UI專題中詳細介紹，這里也就不再贅述
漸入動畫資源文件，guide_fade_in.xml：
[html]?view plaincopy
<?xml?version="1.0"?encoding="utf-8"?>?? <set?xmlns:android="http://schemas.android.com/apk/res/android"?>?? ?????? ????<alpha?android:fromAlpha="0.0"?? ???????????android:toAlpha="1.0"?/>?? ?? </set>??
漸隱動畫資源文件，guide_fade_out.xml：
[html]?view plaincopy
<?xml?version="1.0"?encoding="utf-8"?>?? <set?xmlns:android="http://schemas.android.com/apk/res/android"?>?? ?? ????<scale?? ????????android:fillAfter="false"?? ????????android:fromXScale="1.1"?? ????????android:fromYScale="1.1"?? ????????android:interpolator="@android:anim/decelerate_interpolator"?? ????????android:pivotX="50.0%"?? ????????android:pivotY="50.0%"?? ????????android:toXScale="1.1"?? ????????android:toYScale="1.1"?/>?? ?? ????<alpha?? ????????xmlns:android="http://schemas.android.com/apk/res/android"?? ????????android:fromAlpha="1.0"?? ????????android:toAlpha="0.0"?/>?? ?? </set>??
放大動畫資源文件,guide_fade_in_scale：
[html]?view plaincopy
<?xml?version="1.0"?encoding="utf-8"?>?? <set?xmlns:android="http://schemas.android.com/apk/res/android"?>?? ?? ????<scale?? ????????android:fillAfter="false"?? ????????android:fromXScale="1.0"?? ????????android:fromYScale="1.0"?? ????????android:interpolator="@android:anim/decelerate_interpolator"?? ????????android:pivotX="50.0%"?? ????????android:pivotY="50.0%"?? ????????android:toXScale="1.1"?? ????????android:toYScale="1.1"/>?? ?? </set>??
5、
開始啟動的歡迎界WelcomeActivity.java：
[java]?view plaincopy
package?com.yangyu.myguideview03;?? ?? import?android.app.Activity;?? import?android.content.Intent;?? import?android.os.Bundle;?? import?android.os.CountDownTimer;?? ?? ? ? ? ?? public?class?WelcomeActivity?extends?Activity?{???? ???? ????@Override???? ????public?void?onCreate(Bundle?savedInstanceState)?{???? ????????super.onCreate(savedInstanceState);???? ????????setContentView(R.layout.activity_welcome);???? ???? ????????? ? ? ?? ????????new?CountDownTimer(5000,?1000)?{???? ????????????@Override???? ????????????public?void?onTick(long?millisUntilFinished)?{???? ????????????}???? ???? ????????????@Override???? ????????????public?void?onFinish()?{???? ????????????????Intent?intent?=?new?Intent(WelcomeActivity.this,?GuideActivity.class);???? ????????????????startActivity(intent);???? ????????????????WelcomeActivity.this.finish();???? ????????????}???? ????????}.start();???? ????}???? }????
6、引導界面，GuideActivity.java：
[java]?view plaincopy
package?com.yangyu.myguideview03;?? ?? import?android.app.Activity;?? import?android.graphics.drawable.Drawable;?? import?android.os.Bundle;?? import?android.view.View;?? import?android.view.View.OnClickListener;?? import?android.view.animation.Animation;?? import?android.view.animation.Animation.AnimationListener;?? import?android.view.animation.AnimationUtils;?? import?android.widget.Button;?? import?android.widget.ImageView;?? import?android.widget.Toast;?? ?? ? ? ? ? ?? public?class?GuideActivity?extends?Activity?implements?OnClickListener{?? ?????? ????private?Button?btnRegister,btnLogin,btnIKnowPeople;?? ??????? ?????? ????private?ImageView?ivGuidePicture;???? ?????? ?????? ????private?Drawable[]?pictures;??? ?????? ?????? ????private?Animation[]?animations;?? ?????? ?????? ????private?int?currentItem?=?0;???? ?????? ????@Override?? ????protected?void?onCreate(Bundle?savedInstanceState)?{?? ????????super.onCreate(savedInstanceState);?? ????????setContentView(R.layout.activity_guide);?? ?????????? ????????initView();?? ?????????? ????????initData();?? ????}?? ?? ????? ? ?? ????private?void?initView(){?? ?????????? ????????ivGuidePicture?=?(ImageView)?findViewById(R.id.iv_guide_picture);???? ?????????? ?????????? ????????btnRegister?=?(Button)?findViewById(R.id.btn_register);???? ????????btnIKnowPeople?=?(Button)?findViewById(R.id.btn_look_at_the_people_i_know);???? ????????btnLogin?=?(Button)?findViewById(R.id.btn_login);???? ???? ?????????? ????????pictures?=?new?Drawable[]?{?getResources().getDrawable(R.drawable.v5_3_0_guide_pic1),getResources().getDrawable(R.drawable.v5_3_0_guide_pic2),?? ????????????????????????????????????getResources().getDrawable(R.drawable.v5_3_0_guide_pic3)};???? ???? ?????????? ????????animations?=?new?Animation[]?{?AnimationUtils.loadAnimation(this,?R.anim.guide_fade_in),???? ???????????????????????????????????????AnimationUtils.loadAnimation(this,?R.anim.guide_fade_in_scale),???? ???????????????????????????????????????AnimationUtils.loadAnimation(this,?R.anim.guide_fade_out)?};???? ????}?? ?? ????? ? ?? ????private?void?initData(){?? ?????????? ????????btnRegister.setOnClickListener(this);???? ????????btnIKnowPeople.setOnClickListener(this);???? ????????btnLogin.setOnClickListener(this);?? ??????????????????????? ?????????? ????????animations[0].setDuration(1500);???? ????????animations[1].setDuration(3000);???? ????????animations[2].setDuration(1500);???? ???? ?????????? ????????animations[0].setAnimationListener(new?GuideAnimationListener(0));???? ????????animations[1].setAnimationListener(new?GuideAnimationListener(1));???? ????????animations[2].setAnimationListener(new?GuideAnimationListener(2));???? ?????????? ?????????? ????????ivGuidePicture.setImageDrawable(pictures[currentItem]);???? ????????ivGuidePicture.startAnimation(animations[0]);??? ????}?? ?? ????? ? ?? ????class?GuideAnimationListener?implements?AnimationListener?{????????????? ????????private?int?index;???? ???? ????????public?GuideAnimationListener(int?index)?{???? ????????????this.index?=?index;???? ????????}???? ???? ????????@Override???? ????????public?void?onAnimationStart(Animation?animation)?{???? ????????}???? ?????????? ?????????? ????????@Override???? ????????public?void?onAnimationEnd(Animation?animation)?{???? ????????????if?(index?<?(animations.length?-?1))?{???? ????????????????ivGuidePicture.startAnimation(animations[index?+?1]);???? ????????????}?else?{???? ????????????????currentItem++;???? ????????????????if?(currentItem?>?(pictures.length?-?1))?{???? ????????????????????currentItem?=?0;???? ????????????????}???? ????????????????ivGuidePicture.setImageDrawable(pictures[currentItem]);???? ????????????????ivGuidePicture.startAnimation(animations[0]);???? ????????????}???? ????????}???? ???? ????????@Override???? ????????public?void?onAnimationRepeat(Animation?animation)?{???? ???? ????????}???? ???? ????}??? ?????? ????@Override?? ????public?void?onClick(View?v)?{?? ?????????switch?(v.getId())?{???? ????????????case?R.id.btn_register:??? ????????????????Toast.makeText(this,?"點擊了注冊按鈕",?Toast.LENGTH_SHORT).show();?? ????????????????break;???? ????????????case?R.id.btn_look_at_the_people_i_know:?? ????????????????Toast.makeText(this,?"點擊了我認識的人按鈕",?Toast.LENGTH_SHORT).show();?? ????????????????break;???? ????????????case?R.id.btn_login:???????? ????????????????Toast.makeText(this,?"點擊了登錄按鈕",?Toast.LENGTH_SHORT).show();?? ????????????????break;???? ????????????default:???? ????????????????break;???? ????????????}???? ????}?? }??
? ? ? ? ? ?
下一篇將會對整個引導界面的開發專題做一個完結篇，敬請期待。
總結
以上是生活随笔為你收集整理的引导界面（四）仿人人网V5.9.2最新版引导界面的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
