Android UI 디자인 및 개발 의 모방 네트워크 V 5.9.2 최신 버 전 안내 인터페이스

이 편 은 저 는 인터넷 의 안내 화면 을 사례 로 상세 한 설명 을 하 겠 습 니 다.인터넷 의 안내 화면 이 비교적 참신 하고 다른 응용 프로그램 이 천편일률 적 으로 미끄럼 으로 사용 자 를 유도 하 는 것 이 아니 라 비교적 생동감 있 는 이미지 의 애니메이션 효과 로 사용자 들 에 게 보 여 주 며 사람들 에 게 눈 에 띄 는 느낌 을 주 고 말 을 많이 하지 않 으 며 본론 으로 들 어 갈 것 입 니 다.
1.실현 효과 도
환영 인터페이스:

유도 인터페이스 1

유도 인터페이스 2

유도 인터페이스 3

2.프로젝트 의 디 렉 터 리 구조

3.구체 적 인 코딩 실현
1,환영 인터페이스의 xml 레이아웃,activitywelcome：

<?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 레이아웃,activityguide.xml：

<?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 에 대해 자세히 소개 하 겠 습 니 다.여 기 는 군말 이 아 닙 니 다.guidebtn_blue.xml：

<?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：

<?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：

<?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>

 점 은 애니메이션 자원 파일,guidefade_out.xml：

<?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> 

애니메이션 자원 파일 확대,guidefade_in_scale：

<?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:

package com.yangyu.myguideview03; 
 
import android.app.Activity; 
import android.content.Intent; 
import android.os.Bundle; 
import android.os.CountDownTimer; 
 
/** 
 * @author yangyu 
 *     ：    Activity（Logo） 
 */ 
public class WelcomeActivity extends Activity { 
 
 @Override 
 public void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
  setContentView(R.layout.activity_welcome); 
 
  /** 
   * millisInFuture:     start()       onFinish()          
   * countDownInterval:  onTick(long)        
   */ 
  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:

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; 
 
/** 
 * @author yangyu 
 *     ：    (            ，  、     ，           
 *         、     ,          ，      ，        ) 
 */ 
public class GuideActivity extends Activity implements OnClickListener{ 
 //    、             
 private Button btnRegister,btnLogin,btnIKnowPeople; 
  
 //     ImageView   
 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(){ 
  //   ImageView     
  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)); 
   
  //             0 
  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; 
   } 
 } 
} 

다음 편 은 전체 안내 인터페이스의 개발 주제 에 대해 완결 편 을 만 들 것 이 니 기대 해 주 십시오.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.