Android
2011. 11. 28. 11:50
한 화면에 여러개의 뷰를 놓고 싶을 때가 있습니다.
아래는 간단한 flipper 소스입니다.
처음 터치한 x좌표와 손을 뗀 좌표를 받아서 두 값의 크기를 비교하여 좌로 슬라이드인지
우로 슬라이드 인지 판별한 다음 해당 방향으로 슬라이드 되는 애니메이션이 동작하며
다른 뷰로 전환하게 됩니다.
/*************** Flipper *****************/ if (v != flipper) return
if (event.getAction() == MotionEvent.ACTION_DOWN) { xEnd = event.getX(); } else if (event.getAction() == MotionEvent.ACTION_UP) { xStart = event.getX(); // 시작, 끝점의 차가 50 이상이면 슬라이드로 인지하고 flipper가 동작함 if (xStart < xEnd) { float difVal = xEnd- xStart; if(difVal > 50){ flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in)); flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out)); flipper.showNext(); flipperIndex = flipper.getDisplayedChild();//flipper의 현재 위치 인덱스를 가져옴 FlipperIndex(flipperIndex);//flipper의 현재 위치를 들고 페이지 표시 매소드 호출 } } else if (xStart > xEnd) { float difVal = xStart- xEnd; if(difVal > 50){ flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_in)); flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.push_right_out)); flipper.showPrevious(); flipperIndex = flipper.getDisplayedChild();//flipper의 현재 위치 인덱스를 가져옴 FlipperIndex(flipperIndex);//flipper의 현재 위치를 들고 페이지 표시 매소드 호출 } } } return true; /**************** Flipper ***************/
아래는 풀 소스 입니다
public class MyViewFlipper extends Activity implements View.OnTouchListener,
CompoundButton.OnCheckedChangeListener {
CheckBox checkBox;
ViewFlipper flipper;
int flipperIndex;
ImageView view1, view2, view3, view4, view5, view6,
view7, view8, view9, viewb1, viewb2,viewb3;
float xStart;
float xEnd;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
viewb1 = (ImageView) findViewById(R.id.viewb1);
viewb2 = (ImageView) findViewById(R.id.viewb2);
viewb3 = (ImageView) findViewById(R.id.viewb3);
view1 = (ImageView) findViewById(R.id.view1);
view2 = (ImageView) findViewById(R.id.view2);
view3 = (ImageView) findViewById(R.id.view3);
view4 = (ImageView) findViewById(R.id.view4);
view5 = (ImageView) findViewById(R.id.view5);
view6 = (ImageView) findViewById(R.id.view6);
view7 = (ImageView) findViewById(R.id.view7);
view8 = (ImageView) findViewById(R.id.view8);
view9 = (ImageView) findViewById(R.id.view9);
view1.setOnTouchListener(this);
view2.setOnTouchListener(this);
view3.setOnTouchListener(this);
view4.setOnTouchListener(this);
view5.setOnTouchListener(this);
view6.setOnTouchListener(this);
view7.setOnTouchListener(this);
view8.setOnTouchListener(this);
view9.setOnTouchListener(this);
checkBox = (CheckBox) findViewById(R.id.chkAuto);
checkBox.setOnCheckedChangeListener(this);
//flipper 등록
flipper = (ViewFlipper) findViewById(R.id.viewFlipper);
flipper.setOnTouchListener(this);
// flipper의 첫화면은 0 번쨰 화면
flipper.setDisplayedChild(0);
FlipperIndex(flipperIndex);
}
/**
* Flipper의 현재 페이지 수를 알려주는 매소드
* @param index : 현재 페이지 인덱스 값
*/
private void FlipperIndex(int index){
// 페이지 나타내는 이미지뷰 초기화
viewb1.setImageResource(R.drawable.b2);
viewb2.setImageResource(R.drawable.b2);
viewb3.setImageResource(R.drawable.b2);
// 인덱스의 값에 따라 해당 이미지뷰에 표시
switch(index){
case 0:
viewb1.setImageResource(R.drawable.b1);
break;
case 1:
viewb2.setImageResource(R.drawable.b1);
break;
case 2:
viewb3.setImageResource(R.drawable.b1);
break;
}
}
/**
* 체크박스 체크시 자동으로 Flipping이 되는 부분
*/
@Override
public void onCheckedChanged(CompoundButton view, boolean isChecked) {
// 체크박스 선택시 자동으로 flopping 됨
if (isChecked == true) {
//좌우 슬라이드 애니메이션
flipper.setInAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_left_in));
flipper.setOutAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_left_out));
// 화면은 3000 밀리세컨 마다 넘어감
flipper.setFlipInterval(3000);
flipper.startFlipping();
} else {
// 자동 Flipping 해지
flipper.stopFlipping();
}
}
@Override
public boolean onTouch(View v, MotionEvent event) {
// 터치의 시작점과 끝점의 차를 구하여 절대 값을 씌운다
// 이 값은 사용자가 터치를 한건지 슬라이드를 한건지 알아내기 위해 사용
float temp_differenceVal = xEnd- xStart;
float differenceVal = Math.abs(temp_differenceVal);
// 값이 20 미만이면 터치로 인지하고 flipper내의 오브젝트에 터치에 반응
if(differenceVal < 20){
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.view1:
Toast.makeText(getApplicationContext(), "1", Toast.LENGTH_SHORT)
.show();
break;
case R.id.view2:
Toast.makeText(getApplicationContext(), "2", Toast.LENGTH_SHORT)
.show();
break;
case R.id.view3:
Toast.makeText(getApplicationContext(), "3", Toast.LENGTH_SHORT)
.show();
break;
case R.id.view4:
Toast.makeText(getApplicationContext(), "4", Toast.LENGTH_SHORT)
.show();
break;
case R.id.view5:
Toast.makeText(getApplicationContext(), "5", Toast.LENGTH_SHORT)
.show();
break;
case R.id.view6:
Toast.makeText(getApplicationContext(), "6", Toast.LENGTH_SHORT)
.show();
break;
case R.id.view7:
Toast.makeText(getApplicationContext(), "7", Toast.LENGTH_SHORT)
.show();
break;
case R.id.view8:
Toast.makeText(getApplicationContext(), "8", Toast.LENGTH_SHORT)
.show();
break;
case R.id.view9:
Toast.makeText(getApplicationContext(), "9", Toast.LENGTH_SHORT)
.show();
break;
}
}
/*********** Flipper *************/
if (v != flipper)
return false;
if (event.getAction() == MotionEvent.ACTION_DOWN) {
xEnd = event.getX();
} else if (event.getAction() == MotionEvent.ACTION_UP) {
xStart = event.getX();
// 시작, 끝점의 차가 50 이상이면 슬라이드로 인지하고 flipper가 동작함
if (xStart < xEnd) {
float difVal = xEnd- xStart;
if(difVal > 50){
flipper.setInAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_left_in));
flipper.setOutAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_left_out));
flipper.showNext();
flipperIndex = flipper.getDisplayedChild();//flipper의 현재 위치 인덱스를 가져옴
FlipperIndex(flipperIndex);//flipper의 현재 위치를 들고 페이지 표시 매소드 호출
}
} else if (xStart > xEnd) {
float difVal = xStart- xEnd;
if(difVal > 50){
flipper.setInAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_right_in));
flipper.setOutAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_right_out));
flipper.showPrevious();
flipperIndex = flipper.getDisplayedChild();//flipper의 현재 위치 인덱스를 가져옴
FlipperIndex(flipperIndex);//flipper의 현재 위치를 들고 페이지 표시 매소드 호출
}
}
}
return true;
/********** Flipper ****************/
}
}
슬라이드를 할 때마다 해당 뷰의 인덱스를 받아서 들고있고 그 값을 세개의 페이지 표시 이미지뷰를 컨트롤하는
매소드로 보내어 해당 페이지를 표시할 수 있게 했습니다.
그리고 터치 점과 뗏을때 점의 차를 절대 값으로 구한 뒤 그 값이 20 미만이면 터치로 인식하여
안의 오브젝트가 터치되게 만들고 , 20이상이면 슬라이드로 인식하게하여 뷰 전환이 이루어지도록
하였습니다.
결과물을 이렇게 나옵니다.
'Android' 카테고리의 다른 글
| 안드로이드] 소프트키보드에 가려진 EditText 키보드 위로 올리기 (1) | 2011.11.30 |
|---|---|
| 안드로이드] 여러가지 인텐트 활용 (1) | 2011.11.29 |
| 안드로이드] ArrayList에서 중복 제거하기 (0) | 2011.11.22 |
| 안드로이드] 내 기기의 DPI 확인하기 (0) | 2011.11.02 |
| 안드로이드] 패키지명을 이용하여 해당 앱 삭제화면 바로가기 (0) | 2011.11.01 |