Android UI 디자인 및 개발 의 ViewPager 모방 위 챗 안내 인터페이스 및 애니메이션 효과

앞의 두 편의 비교적 간단 한 사례 를 바탕 으로 깔개 를 한 후에 이 편 은 우리 가 약간 복잡 한 안내 인터페이스의 효 과 를 실현 한다.물론 조금 복잡 할 뿐 회의 하 는 사람 에 게 는 당연히 so easy!이른바 회 자 는 어렵 지 않 고,어 려 운 사람 은 할 수 없다 는 것 은 아마도 이런 뜻 일 것 이다.네,긴 말 하지 않 고 본론 으로 돌아 가 겠 습 니 다.
이 편 지 는 위 챗 을 모방 한 애니메이션 효과 입 니 다.비록 이런 효과 의 실현 은 인터넷 곳곳에 있 지만 저 는 중 저급 개발 자의 입장 에서 여러분 에 게 어떻게 실현 되 었 는 지 알려 드 리 고 싶 습 니 다.물론 실현 하 는 방식 이 많 습 니 다.저 는 제 가 실현 하기에 비교적 편리 하 다 고 생각 하 는 방법 을 제 시 했 을 뿐 입 니 다.여러분 들 이 사용 하 시기 바 랍 니 다.  
1.실현 효과 도
그림 이 있어 야 진실 이 있다.위의 그림 에서 먼저:


단 추 를 누 르 면 애니메이션 효과 가 나타 나 고 다른 화면 으로 들 어 갑 니 다.

2.프로그램의 디 렉 터 리 구조

3.구체 적 인 코딩 실현
1、  주 레이아웃 인터페이스 에 ViewPager 구성 요소 와 아래쪽 의 작은 점,activity 를 추가 합 니 다.main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 xmlns:tools="http://schemas.android.com/tools" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" > 
 
 <android.support.v4.view.ViewPager 
 android:id="@+id/viewpager" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" /> 
 
 <LinearLayout 
 android:id="@+id/ll" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:layout_alignParentBottom="true" 
 android:layout_centerHorizontal="true" 
 android:layout_marginBottom="24.0dip" 
 android:orientation="horizontal" > 
 
 <ImageView 
  android:id="@+id/page0" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:layout_gravity="center_vertical" 
  android:clickable="true" 
  android:padding="5dip" 
  android:src="@drawable/page_indicator_focused" /> 
 
 <ImageView 
  android:id="@+id/page1" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:layout_gravity="center_vertical" 
  android:clickable="true" 
  android:padding="5dip" 
  android:src="@drawable/page_indicator_unfocused" /> 
 
 <ImageView 
  android:id="@+id/page2" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:layout_gravity="center_vertical" 
  android:clickable="true" 
  android:padding="5dip" 
  android:src="@drawable/page_indicator_unfocused" /> 
 
 <ImageView 
  android:id="@+id/page3" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:layout_gravity="center_vertical" 
  android:clickable="true" 
  android:padding="5dip" 
  android:src="@drawable/page_indicator_unfocused" /> 
 
 <ImageView 
  android:id="@+id/page4" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:layout_gravity="center_vertical" 
  android:clickable="true" 
  android:padding="5dip" 
  android:src="@drawable/page_indicator_unfocused" /> 
 
 <ImageView 
  android:id="@+id/page5" 
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content" 
  android:layout_gravity="center_vertical" 
  android:clickable="true" 
  android:padding="5dip" 
  android:src="@drawable/page_indicator_unfocused" /> 
 </LinearLayout> 
</RelativeLayout> 

2、이어서 guideview 01.xml 등 몇 개의 레이아웃 페이지 에 안내 인터페이스 에 표시 할 그림 과 컨트롤 을 추가 합 니 다.이 몇 개의 레이아웃 인터페이스 가 모두 대동소이 하기 때문에 여기 서 일일이 붙 이지 않 겠 습 니 다.필요 한 학생 이 있 으 면 원본 코드 를 직접 다운로드 할 수 있 습 니 다.guideview01.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:background="@drawable/w01" 
 android:orientation="vertical" > 
 
 <TextView 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:layout_alignParentTop="true" 
 android:layout_marginTop="35dp" 
 android:gravity="center" 
 android:text="@string/guide_text01" 
 android:textColor="@color/TextColor" 
 android:textSize="22sp" /> 
</RelativeLayout> 

3.그 다음 에 애니메이션 효 과 를 실현 하 는 레이아웃 인터페이스,guidedoor.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" > 
 
 <ImageView 
 android:id="@+id/imageLeft" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:layout_alignParentLeft="true" 
 android:scaleType="fitXY" 
 android:src="@drawable/w_left" /> 
 
 <ImageView 
 android:id="@+id/imageRight" 
 android:layout_width="fill_parent" 
 android:layout_height="fill_parent" 
 android:layout_alignParentRight="true" 
 android:scaleType="fitXY" 
 android:src="@drawable/w_right" 
 android:visibility="visible" /> 
 
 <TextView 
 android:id="@+id/anim_text" 
 android:layout_width="fill_parent" 
 android:layout_height="wrap_content" 
 android:layout_alignParentTop="true" 
 android:layout_marginTop="35dp" 
 android:gravity="center" 
 android:text=" 
 
  ，       
 
 " 
 android:textColor="#fff" 
 android:textSize="22sp" /> 
</RelativeLayout>

 4.마지막 으로 애니메이션 효 과 를 완성 한 후에 들 어 가 는 레이아웃 인터페이스,activityother.xml：

<?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:orientation="vertical" > 
 
 <TextView 
 android:id="@+id/textView1" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content" 
 android:text=" ，           !" /> 
</LinearLayout>

 5.여기 서 xml 파일 을 만들어 서 사용자 정의 단추 의 효 과 를 실현 해 야 합 니 다.사용자 정의 단추 의 효과 실현 에 대해 저 는 뒤의 글 에서 자세히 소개 하 겠 습 니 다.여 기 는 군말 이 아 닙 니 다.startweixin_btn.xml：

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
 <item android:state_enabled="true" android:state_pressed="true" 
 android:drawable="@drawable/whatsnew_btn_pressed" /> <!--      -->  
  
 <item android:state_enabled="true" android:drawable="@drawable/whatsnew_btn_nor" /> <!--       --> 
</selector> 

6.레이아웃 인터페이스 에 대한 설명 이 끝 났 습 니 다.다음 에 상세 한 코드 설명 을 하 겠 습 니 다.ViewPager 어댑터 코드,ViewPager Adapter.java:

package com.yangyu.myguideview02; 
 
import java.util.ArrayList; 
 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.view.View; 
 
/** 
 * @author yangyu 
 *     ：ViewPager   ，       view 
 */ 
public class ViewPagerAdapter extends PagerAdapter { 
 
 //     
 private ArrayList<View> views; 
 
 public ViewPagerAdapter (ArrayList<View> views){ 
 this.views = views; 
 } 
  
 /** 
 *         
 */ 
 @Override 
 public int getCount() { 
  if (views != null) { 
  return views.size(); 
  } 
  return 0; 
 } 
 
 /** 
 *    position      
 */ 
 @Override 
 public Object instantiateItem(View view, int position) { 
  
 ((ViewPager) view).addView(views.get(position), 0); 
  
 return views.get(position); 
 } 
 
 /** 
 *             
 */ 
 @Override 
 public boolean isViewFromObject(View view, Object arg1) { 
 return (view == arg1); 
 } 
 
 /** 
 *   position      
 */ 
 @Override 
 public void destroyItem(View view, int position, Object arg2) { 
 ((ViewPager) view).removeView(views.get(position));  
 } 
} 

7.주 프로그램 입구 activity 클래스,MainActivity.java:

package com.yangyu.myguideview02; 
 
import java.util.ArrayList; 
 
import android.app.Activity; 
import android.content.Intent; 
import android.os.Bundle; 
import android.support.v4.view.ViewPager; 
import android.support.v4.view.ViewPager.OnPageChangeListener; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.View.OnClickListener; 
import android.widget.Button; 
import android.widget.ImageView; 
 
/** 
 * @author yangyu 
 *     ：     activity 
 */ 
public class MainActivity extends Activity { 
 //   ViewPager   
 private ViewPager viewPager; 
 
 //   ViewPager    
 private ViewPagerAdapter vpAdapter; 
 
 //     ArrayList   View 
 private ArrayList<View> views; 
 
 //      View   
 private View view1,view2,view3,view4,view5,view6; 
 
 //          
 private ImageView pointImage0, pointImage1, pointImage2, pointImage3,pointImage4, pointImage5; 
 
 //         
 private Button startBt; 
 
 //          
 private int currIndex = 0; 
 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
 super.onCreate(savedInstanceState); 
 setContentView(R.layout.activity_main); 
 
 initView(); 
 
 initData(); 
 } 
 
 /** 
 *       
 */ 
 private void initView() { 
 //             
 LayoutInflater mLi = LayoutInflater.from(this); 
 view1 = mLi.inflate(R.layout.guide_view01, null); 
 view2 = mLi.inflate(R.layout.guide_view02, null); 
 view3 = mLi.inflate(R.layout.guide_view03, null); 
 view4 = mLi.inflate(R.layout.guide_view04, null); 
 view5 = mLi.inflate(R.layout.guide_view05, null); 
 view6 = mLi.inflate(R.layout.guide_view06, null); 
   
 //    ViewPager 
 viewPager = (ViewPager) findViewById(R.id.viewpager); 
 
 //    ArrayList   
 views = new ArrayList<View>(); 
 
 //    ViewPager    
 vpAdapter = new ViewPagerAdapter(views); 
 
 //             
 pointImage0 = (ImageView) findViewById(R.id.page0); 
 pointImage1 = (ImageView) findViewById(R.id.page1); 
 pointImage2 = (ImageView) findViewById(R.id.page2); 
 pointImage3 = (ImageView) findViewById(R.id.page3); 
 pointImage4 = (ImageView) findViewById(R.id.page4); 
 pointImage5 = (ImageView) findViewById(R.id.page5); 
  
 //        
 startBt = (Button) view6.findViewById(R.id.startBtn); 
 } 
 
 /** 
 *       
 */ 
 private void initData() { 
 //      
 viewPager.setOnPageChangeListener(new MyOnPageChangeListener()); 
 //         
 viewPager.setAdapter(vpAdapter); 
 
 //       View      
 views.add(view1); 
 views.add(view2); 
 views.add(view3); 
 views.add(view4); 
 views.add(view5); 
 views.add(view6); 
  
    
 //           
 startBt.setOnClickListener(new OnClickListener() { 
  @Override 
  public void onClick(View v) { 
   startbutton(); 
  } 
 }); 
 } 
 
 public class MyOnPageChangeListener implements OnPageChangeListener { 
 @Override 
 public void onPageSelected(int position) { 
  switch (position) { 
  case 0: 
  pointImage0.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); 
  pointImage1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
  break; 
  case 1: 
  pointImage1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); 
  pointImage0.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
  pointImage2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
  break; 
  case 2: 
  pointImage2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); 
  pointImage1.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
  pointImage3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
  break; 
  case 3: 
  pointImage3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); 
  pointImage4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
  pointImage2.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
  break; 
  case 4: 
  pointImage4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); 
  pointImage3.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
  pointImage5.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
  break; 
  case 5: 
  pointImage5.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_focused)); 
  pointImage4.setImageDrawable(getResources().getDrawable(R.drawable.page_indicator_unfocused)); 
  break; 
  } 
  currIndex = position; 
  // animation.setFillAfter(true);// True:           
  // animation.setDuration(300); 
  // mPageImg.startAnimation(animation); 
 } 
 
 @Override 
 public void onPageScrollStateChanged(int arg0) { 
 
 } 
 
 @Override 
 public void onPageScrolled(int arg0, float arg1, int arg2) { 
 
 } 
 } 
 
 /** 
 *          
 */ 
 private void startbutton() { 
 Intent intent = new Intent(); 
 intent.setClass(MainActivity.this,GuideViewDoor.class); 
 startActivity(intent); 
 this.finish(); 
 } 
 
} 

PS:이 코드 에서 주의해 야 할 부분 이 있 습 니 다.비록 우리 가 코드 를 쓸 때 항상 조 심 스 러 웠 지만 저급한 오 류 를 범 하 는 것 을 피 할 수 없어 서 디 버 깅 에 시간 이 지체 되 었 습 니 다.

//        
startBt = (Button) view6.findViewById(R.id.startBtn); 

이것 은 마지막 레이아웃 인터페이스의 시작 단추 입 니 다.findviewById()방법 앞에서 view 6 를 사용 하여 이 방법 을 호출 하 는 것 을 잊 어 버 려 서 시 뮬 레이 터 가 빈 포인터 이상 을 알 렸 습 니 다.
8.애니메이션 효 과 를 실현 하 는 입구 activity 류 는 이런 유형 에서 시작 단 추 를 클릭 한 후에 하나의 애니메이션 효 과 를 실현 하여 다른 화면 에 들 어 가 는 목적 을 달성 했다.이런 유형 에서 주로 애니메이션 류 를 사용 했다.저 는 뒤의 장 에서 주제 의 형식 으로 애니메이션 이라는 유형 을 소개 할 것 입 니 다.그래서 여기 서도 더 이상 군말 하지 않 겠 습 니 다.
GuideViewDoor.Java：

package com.yangyu.myguideview02; 
 
import android.app.Activity; 
import android.content.Intent; 
import android.os.Bundle; 
import android.os.Handler; 
import android.view.animation.AlphaAnimation; 
import android.view.animation.Animation; 
import android.view.animation.AnimationSet; 
import android.view.animation.ScaleAnimation; 
import android.view.animation.TranslateAnimation; 
import android.widget.ImageView; 
import android.widget.TextView; 
 
/** 
 * @author yangyu 
 *     ：         activity 
 */ 
public class GuideViewDoor extends Activity { 
 
 //           
 private ImageView mLeft,mRight; 
 
 //         
 private TextView mText; 
 
 @Override 
 public void onCreate(Bundle savedInstanceState) { 
 super.onCreate(savedInstanceState); 
 setContentView(R.layout.guide_door); 
  
 //      
 mLeft = (ImageView)findViewById(R.id.imageLeft); 
 mRight = (ImageView)findViewById(R.id.imageRight); 
 mText = (TextView)findViewById(R.id.anim_text); 
  
 //        
 AnimationSet anim = new AnimationSet(true); 
 //          
 TranslateAnimation mytranslateanim = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,-1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f); 
 //         
 mytranslateanim.setDuration(2000); 
 //       
 anim.setStartOffset(800); 
 //              
 anim.addAnimation(mytranslateanim); 
 //     ，       
 anim.setFillAfter(true); 
 //           
 mLeft.startAnimation(anim); 
  
 AnimationSet anim1 = new AnimationSet(true); 
 TranslateAnimation mytranslateanim1 = new TranslateAnimation(Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,+1f,Animation.RELATIVE_TO_SELF,0f,Animation.RELATIVE_TO_SELF,0f); 
 mytranslateanim1.setDuration(1500); 
 anim1.addAnimation(mytranslateanim1); 
 anim1.setStartOffset(800); 
 anim1.setFillAfter(true); 
 mRight.startAnimation(anim1); 
  
 AnimationSet anim2 = new AnimationSet(true); 
 ScaleAnimation myscaleanim = new ScaleAnimation(1f,3f,1f,3f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f); 
 myscaleanim.setDuration(1000); 
 AlphaAnimation myalphaanim = new AlphaAnimation(1,0.0001f); 
 myalphaanim.setDuration(1500); 
 anim2.addAnimation(myscaleanim); 
 anim2.addAnimation(myalphaanim); 
 anim2.setFillAfter(true); 
 mText.startAnimation(anim2); 
  
 new Handler().postDelayed(new Runnable(){ 
  @Override 
  public void run(){ 
  Intent intent = new Intent (GuideViewDoor.this,OtherActivity.class);  
  startActivity(intent);  
  GuideViewDoor.this.finish(); 
  } 
 }, 2300); 
 } 
} 

9.마지막 으로 다른 activity 클래스 입 니 다.저 는 다른 인터페이스 에 들 어 가 는 이런 효 과 를 얻 기 위해 코드 가 비교적 간단 합 니 다.바로 layot 레이아웃 페이지,OtherActivity.java 를 호출 한 것 입 니 다.

package com.yangyu.myguideview02; 
 
import android.app.Activity; 
import android.os.Bundle; 
 
/** 
 * @author yangyu 
 *     ：   activity 
 */ 
public class OtherActivity extends Activity { 
 
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
 super.onCreate(savedInstanceState); 
 setContentView(R.layout.activity_other); 
 } 
} 

10.마지막 으로 AndroidManifest.xml 목록 파일 에 GuideView Door,Other Activity 라 는 두 개의 activity 를 추가 하 는 것 을 잊 지 마 세 요.그렇지 않 으 면 이상 이 발생 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.