androidviewpaper 실례 연구

첫째, 우선 효과도를 살펴보자. 이것은 시나닷컴 마이크로박의 탭 슬라이딩 효과이다.우리는 손짓으로 미끄러질 수도 있고, 위의 헤더를 클릭하여 전환할 수도 있다.이와 같은 방식으로 흰색 가로줄이 상응하는 페이지 카드 헤더 아래로 이동합니다.이것은 애니메이션 효과로 흰 줄이 천천히 미끄러져 지나갔다.자, 이제 우리는 그것을 실현할 것이다.둘째, 시작하기 전에 우리는 먼저 컨트롤을 알아야 한다, ViewPager.이것은 구글 SDk에서 자체적으로 가지고 있는 추가 패키지의 종류로 화면 사이의 전환을 실현할 수 있다.이 추가 패키지는android-support-v4입니다.jar, 마지막 원본 코드에서libs 폴더에 제공합니다.물론 너도 인터넷에서 최신 버전을 검색할 수 있다.그것을 찾은 후에 우리는 프로젝트에 셋을 추가해야 한다. 우리는 먼저 인터페이스를 만든다. 인터페이스 디자인은 매우 간단하다. 첫 번째 줄은 세 개의 헤더, 두 번째 줄은 애니메이션 이미지, 세 번째 줄은 카드 내용을 전시한다

 
<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns：android="http：//schemas.android.com/apk/res/android" 
xmlns：umadsdk="http：//schemas.android.com/apk/res/com.LoveBus" 
android：layout_width="fill_parent" 
android：layout_height="fill_parent" 
android：orientation="vertical" > 
<LinearLayout 
android：id="@+id/linearLayout1" 
android：layout_width="fill_parent" 
android：layout_height="100.0dip" 
android：background="#FFFFFF" > 
<TextView 
android：id="@+id/text1" 
android：layout_width="fill_parent" 
android：layout_height="fill_parent" 
android：layout_weight="1.0" 
android：gravity="center" 
android：text=" 1" 
android：textColor="#000000" 
android：textSize="22.0dip" /> 
<TextView 
android：id="@+id/text2" 
android：layout_width="fill_parent" 
android：layout_height="fill_parent" 
android：layout_weight="1.0" 
android：gravity="center" 
android：text=" 2" 
android：textColor="#000000" 
android：textSize="22.0dip" /> 
<TextView 
android：id="@+id/text3" 
android：layout_width="fill_parent" 
android：layout_height="fill_parent" 
android：layout_weight="1.0" 
android：gravity="center" 
android：text=" 3" 
android：textColor="#000000" 
android：textSize="22.0dip" /> 
</LinearLayout> 
<ImageView 
android：id="@+id/cursor" 
android：layout_width="fill_parent" 
android：layout_height="wrap_content" 
android：scaleType="matrix" 
android：src="@drawable/a" /> 
<android.support.v4.view.ViewPager 
android：id="@+id/vPager" 
android：layout_width="wrap_content" 
android：layout_height="wrap_content" 
android：layout_gravity="center" 
android：layout_weight="1.0" 
android：background="#000000" 
android：flipInterval="30" 
android：persistentDrawingCache="animation" /> 
</LinearLayout> 

우리는 세 개의 페이지 카드를 전시해야 하기 때문에 세 개의 페이지 카드 내용의 인터페이스 디자인이 필요하다. 여기서 우리는 배경색만 설정하고 구별 작용을 하면 된다

 
<?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" 
android：background="#158684" > 
</LinearLayout> 

4. 코드 부분은 초기화하는 작업을 해야 한다(1) 먼저 변수의 정의를 내린다

 
private ViewPager mPager；//  
private List<View> listViews； // Tab  
private ImageView cursor；//   
private TextView t1， t2， t3；//   
private int offset = 0；//   
private int currIndex = 0；//   
private int bmpW；//   

(2) 헤더를 초기화합니다

 
/** 
*   
*/ 
private void InitTextView（） { 
t1 = （TextView） findViewById（R.id.text1）； 
t2 = （TextView） findViewById（R.id.text2）； 
t3 = （TextView） findViewById（R.id.text3）； 
t1.setOnClickListener（new MyOnClickListener（0））； 
t2.setOnClickListener（new MyOnClickListener（1））； 
t3.setOnClickListener（new MyOnClickListener（2））； 
} 
/** 
*   
*/ 
public class MyOnClickListener implements View.OnClickListener { 
private int index = 0； 
public MyOnClickListener（int i） { 
index = i； 
} 
@Override 
public void onClick（View v） { 
mPager.setCurrentItem（index）； 
} 
}； 

(3) 카드 내용 영역을 초기화합니다

 
<font color="#008000"><font color="black">　　/** 
　　* ViewPager  
　　*/ 
　　public class MyPagerAdapter extends PagerAdapter { 
　　public List<View> mListViews； 
　　public MyPagerAdapter（List<View> mListViews） { 
　　this.mListViews = mListViews； 
　　} 
　　@Override 
　　public void destroyItem（View arg0， int arg1， Object arg2） { 
　　（（ViewPager） arg0）.removeView（mListViews.get（arg1））； 
　　} 
　　@Override 
　　public void finishUpdate（View arg0） { 
　　} 
　　@Override 
　　public int getCount（） { 
　　return mListViews.size（）； 
　　} 
　　@Override 
　　public Object instantiateItem（View arg0， int arg1） { 
　　（（ViewPager） arg0）.addView（mListViews.get（arg1）， 0）； 
　　return mListViews.get（arg1）； 
　　} 
　　@Override 
　　public boolean isViewFromObject（View arg0， Object arg1） { 
　　return arg0 == （arg1）； 
　　} 
　　@Override 
　　public void restoreState（Parcelable arg0， ClassLoader arg1） { 
　　} 
　　@Override 
　　public Parcelable saveState（） { 
　　return null； 
　　} 
　　@Override 
　　public void startUpdate（View arg0） { 
　　} 
　　} 
</font></font> 
  (4)   
/** 
*   
*/ 
private void InitImageView（） { 
cursor = （ImageView） findViewById（R.id.cursor）； 
bmpW = BitmapFactory.decodeResource（getResources（）， R.drawable.a） 
.getWidth（）；//   
DisplayMetrics dm = new DisplayMetrics（）； 
getWindowManager（）.getDefaultDisplay（）.getMetrics（dm）； 
int screenW = dm.widthPixels；//   
offset = （screenW / 3 - bmpW） / 2；//   
Matrix matrix = new Matrix（）； 
matrix.postTranslate（offset， 0）； 
cursor.setImageMatrix（matrix）；//   
} 

화면의 해상도와 그림의 너비에 따라 애니메이션 이동의 편이량을 계산한다

 
/** 　　*   　　*/ 　　 
public class MyOnPageChangeListener implements OnPageChangeListener { 　　 
int one = offset * 2 + bmpW；//  1 ->  2   　　 
int two = one * 2；//  1 ->  3   　　 
@Override 　　 
public void onPageSelected（int arg0） { 　　 
Animation animation = null； 　　 
switch （arg0） { 　　 
case 0： 　　 
if （currIndex == 1） { 　　 
animation = new TranslateAnimation（one， 0， 0， 0）； 　　} 
else if （currIndex == 2） { 　　 
animation = new TranslateAnimation（two， 0， 0， 0）； 　　} 　　 
break； 　　case 1： 　　if （currIndex == 0） { 　　 
animation = new TranslateAnimation（offset， one， 0， 0）； 　　 
} else if （currIndex == 2） { 　　 
animation = new TranslateAnimation（two， one， 0， 0）； 　　} 　　 
break； 　　case 2： 　　if （currIndex == 0） { 　　 
animation = new TranslateAnimation（offset， two， 0， 0）； 　　} 
else if （currIndex == 1） { 　　animation = new TranslateAnimation（one， two， 0， 0）； 　　} 　　 
break； 　　} 　　 
currIndex = arg0； 　　 
animation.setFillAfter（true）；// True：  　　 
animation.setDuration（300）； 　　 
cursor.startAnimation（animation）； 　　} 　　 
@Override 　　 
public void onPageScrolled（int arg0， float arg1， int arg2） { 　　} 　　 
@Override 　　 
public void onPageScrollStateChanged（int arg0） { 　　} 　　} 

5. 일을 마치고 빨리 자신의 노동 성과를 봅시다