生活随笔
收集整理的這篇文章主要介紹了
引导界面（四）仿人人网V5.9.2最新版引导界面
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?? 這一篇我將會(huì)以人人網(wǎng)的引導(dǎo)界面為實(shí)例來(lái)展開(kāi)詳細(xì)的講解，人人網(wǎng)的引導(dǎo)界面比較的新穎，不同于其他應(yīng)用程序千篇一律的靠滑動(dòng)來(lái)引導(dǎo)用戶(hù)，而是以一個(gè)一個(gè)比較生動(dòng)形象的動(dòng)畫(huà)效果展示在用戶(hù)們的面前，有一種給人眼前一亮的感覺(jué)，話(huà)不多說(shuō)，進(jìn)入正題。
一、實(shí)現(xiàn)的效果圖
歡迎界面：
引導(dǎo)界面1
引導(dǎo)界面 2
引導(dǎo)界面 3
二 、項(xiàng)目的目錄結(jié)構(gòu)
三、具體的編碼實(shí)現(xiàn)
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、引導(dǎo)界面的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="注??冊(cè)"?? ????????????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="看看我認(rèn)識(shí)的人"?? ????????????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、在這里還要?jiǎng)?chuàng)建兩個(gè)xml資源文件文件來(lái)實(shí)現(xiàn)自定義按鈕的效果，關(guān)于自定義按鈕的效果實(shí)現(xiàn)我會(huì)在后面的UI專(zhuān)題詳細(xì)介紹，這里就不在贅述，
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、然后是動(dòng)畫(huà)效果的xml資源文件，關(guān)于自定義動(dòng)畫(huà)效果的實(shí)現(xiàn)我也會(huì)在后面的UI專(zhuān)題中詳細(xì)介紹，這里也就不再贅述
漸入動(dòng)畫(huà)資源文件，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>??
漸隱動(dòng)畫(huà)資源文件，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>??
放大動(dòng)畫(huà)資源文件,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、
開(kāi)始啟動(dòng)的歡迎界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、引導(dǎo)界面，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,?"點(diǎn)擊了注冊(cè)按鈕",?Toast.LENGTH_SHORT).show();?? ????????????????break;???? ????????????case?R.id.btn_look_at_the_people_i_know:?? ????????????????Toast.makeText(this,?"點(diǎn)擊了我認(rèn)識(shí)的人按鈕",?Toast.LENGTH_SHORT).show();?? ????????????????break;???? ????????????case?R.id.btn_login:???????? ????????????????Toast.makeText(this,?"點(diǎn)擊了登錄按鈕",?Toast.LENGTH_SHORT).show();?? ????????????????break;???? ????????????default:???? ????????????????break;???? ????????????}???? ????}?? }??
? ? ? ? ? ?
下一篇將會(huì)對(duì)整個(gè)引導(dǎo)界面的開(kāi)發(fā)專(zhuān)題做一個(gè)完結(jié)篇，敬請(qǐng)期待。
總結(jié)
以上是生活随笔為你收集整理的引导界面（四）仿人人网V5.9.2最新版引导界面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
