[안드로이드] 한 화면에 여러개의 뷰를 ! ViewFlipper 사용하기

주소 : http://muzesong.tistory.com/64

한 화면에 여러개의 뷰를 놓고 싶을 때가 있습니다. 예를 들어 자동차 설명이라면

포르테쿱 이란 모델을 선택 했을 시 나오는 가격, 승차감, 평점 이런 병렬적인 내용을 

굳이 depth를 주어 층으로 표현하기보단 한 화면에 뷰 전환으로 나타내면 깔끔해 질것 같습니다.

아래는 간단한 flipper 소스입니다. 

처음 터치한 x좌표와 손을 뗀 좌표를 받아서 두 값의 크기를 비교하여 좌로 슬라이드인지 

우로 슬라이드 인지 판별한 다음 해당 방향으로 슬라이드 되는 애니메이션이 동작하며 

다른 뷰로 전환하게 됩니다. 

01	/*************** Flipper *****************/

02	if (v != flipper)

03

return

04

05	if (event.getAction() == MotionEvent.ACTION_DOWN) {

06	xEnd = event.getX();

07	} else if (event.getAction() == MotionEvent.ACTION_UP) {

08	xStart = event.getX();

09

10	// 시작, 끝점의 차가 50 이상이면 슬라이드로 인지하고 flipper가 동작함

11	if (xStart < xEnd) {

12	float difVal = xEnd- xStart;

13	if(difVal > 50){

14	flipper.setInAnimation(AnimationUtils.loadAnimation(this,

15	R.anim.push_left_in));

16	flipper.setOutAnimation(AnimationUtils.loadAnimation(this,

17	R.anim.push_left_out));

18	flipper.showNext();

19	flipperIndex = flipper.getDisplayedChild();//flipper의 현재 위치 인덱스를 가져옴

20	FlipperIndex(flipperIndex);//flipper의 현재 위치를 들고 페이지 표시 매소드 호출

21

}

22	} else if (xStart > xEnd) {

23	float difVal = xStart- xEnd;

24	if(difVal > 50){

25	flipper.setInAnimation(AnimationUtils.loadAnimation(this,

26	R.anim.push_right_in));

27	flipper.setOutAnimation(AnimationUtils.loadAnimation(this,

28	R.anim.push_right_out));

29	flipper.showPrevious();

30	flipperIndex = flipper.getDisplayedChild();//flipper의 현재 위치 인덱스를 가져옴

31	FlipperIndex(flipperIndex);//flipper의 현재 위치를 들고 페이지 표시 매소드 호출

32

}

33

}

34

}

35	return true;

36	/**************** Flipper ***************/

아래는 풀 소스 입니다

001	public class MyViewFlipper extends Activity implementsView.OnTouchListener,

002	CompoundButton.OnCheckedChangeListener {

003	CheckBox checkBox;

004	ViewFlipper flipper;

005	int flipperIndex;

006	ImageView view1, view2, view3, view4, view5, view6,

007	view7, view8, view9, viewb1, viewb2,viewb3;

008	float xStart;

009	float xEnd;

010

011	/** Called when the activity is first created. */

012

@Override

013	public void onCreate(Bundle savedInstanceState) {

014	super.onCreate(savedInstanceState);

015	setContentView(R.layout.main);

016

017	viewb1 = (ImageView) findViewById(R.id.viewb1);

018	viewb2 = (ImageView) findViewById(R.id.viewb2);

019	viewb3 = (ImageView) findViewById(R.id.viewb3);

020	view1 = (ImageView) findViewById(R.id.view1);

021	view2 = (ImageView) findViewById(R.id.view2);

022	view3 = (ImageView) findViewById(R.id.view3);

023	view4 = (ImageView) findViewById(R.id.view4);

024	view5 = (ImageView) findViewById(R.id.view5);

025	view6 = (ImageView) findViewById(R.id.view6);

026	view7 = (ImageView) findViewById(R.id.view7);

027	view8 = (ImageView) findViewById(R.id.view8);

028	view9 = (ImageView) findViewById(R.id.view9);

029	view1.setOnTouchListener(this);

030	view2.setOnTouchListener(this);

031	view3.setOnTouchListener(this);

032	view4.setOnTouchListener(this);

033	view5.setOnTouchListener(this);

034	view6.setOnTouchListener(this);

035	view7.setOnTouchListener(this);

036	view8.setOnTouchListener(this);

037	view9.setOnTouchListener(this);

038	checkBox = (CheckBox) findViewById(R.id.chkAuto);

039	checkBox.setOnCheckedChangeListener(this);

040	//flipper  등록

041	flipper = (ViewFlipper) findViewById(R.id.viewFlipper);

042	flipper.setOnTouchListener(this);

043	// flipper의 첫화면은 0 번쨰 화면

044	flipper.setDisplayedChild(0);

045	FlipperIndex(flipperIndex);

046

}

047

048

/**

049	* Flipper의 현재 페이지 수를 알려주는 매소드

050	* @param index : 현재 페이지 인덱스 값

051

*/

052	private void FlipperIndex(int index){

053	// 페이지 나타내는 이미지뷰 초기화

054	viewb1.setImageResource(R.drawable.b2);

055	viewb2.setImageResource(R.drawable.b2);

056	viewb3.setImageResource(R.drawable.b2);

057

058	// 인덱스의 값에 따라 해당 이미지뷰에 표시

059	switch(index){

060

case 0:

061	viewb1.setImageResource(R.drawable.b1);

062

break;

063

case 1:

064	viewb2.setImageResource(R.drawable.b1);

065

break;

066

case 2:

067	viewb3.setImageResource(R.drawable.b1);

068

break;

069

}

070

}

071

072

/**

073	* 체크박스 체크시 자동으로 Flipping이 되는 부분

074

*/

075

@Override

076	public void onCheckedChanged(CompoundButton view, boolean isChecked) {

077

078	// 체크박스 선택시 자동으로 flopping 됨

079	if (isChecked == true) {

080	//좌우 슬라이드 애니메이션

081	flipper.setInAnimation(AnimationUtils.loadAnimation(this,

082	R.anim.push_left_in));

083	flipper.setOutAnimation(AnimationUtils.loadAnimation(this,

084	R.anim.push_left_out));

085	// 화면은 3000 밀리세컨 마다 넘어감

086	flipper.setFlipInterval(3000);

087	flipper.startFlipping();

088

} else {

089	// 자동 Flipping 해지

090	flipper.stopFlipping();

091

}

092

}

093

094

@Override

095	public boolean onTouch(View v, MotionEvent event) {

096	// 터치의 시작점과 끝점의 차를 구하여 절대 값을 씌운다

097	// 이 값은 사용자가 터치를 한건지 슬라이드를 한건지 알아내기 위해 사용

098

099	float temp_differenceVal = xEnd- xStart;

100	float differenceVal = Math.abs(temp_differenceVal);

101	// 값이 20 미만이면 터치로 인지하고 flipper내의 오브젝트에 터치에 반응

102	if(differenceVal < 20){

103	// TODO Auto-generated method stub

104	switch (v.getId()) {

105

106	case R.id.view1:

107	Toast.makeText(getApplicationContext(), "1", Toast.LENGTH_SHORT)

108

.show();

109

break;

110	case R.id.view2:

111	Toast.makeText(getApplicationContext(), "2", Toast.LENGTH_SHORT)

112

.show();

113

break;

114	case R.id.view3:

115	Toast.makeText(getApplicationContext(), "3", Toast.LENGTH_SHORT)

116

.show();

117

break;

118	case R.id.view4:

119	Toast.makeText(getApplicationContext(), "4", Toast.LENGTH_SHORT)

120

.show();

121

break;

122	case R.id.view5:

123	Toast.makeText(getApplicationContext(), "5", Toast.LENGTH_SHORT)

124

.show();

125

break;

126	case R.id.view6:

127	Toast.makeText(getApplicationContext(), "6", Toast.LENGTH_SHORT)

128

.show();

129

break;

130	case R.id.view7:

131	Toast.makeText(getApplicationContext(), "7", Toast.LENGTH_SHORT)

132

.show();

133

break;

134	case R.id.view8:

135	Toast.makeText(getApplicationContext(), "8", Toast.LENGTH_SHORT)

136

.show();

137

break;

138	case R.id.view9:

139	Toast.makeText(getApplicationContext(), "9", Toast.LENGTH_SHORT)

140

.show();

141

break;

142

}

143

}

144

145	/*********** Flipper *************/

146	if (v != flipper)

147	return false;

148	if (event.getAction() == MotionEvent.ACTION_DOWN) {

149	xEnd = event.getX();

150	} else if (event.getAction() == MotionEvent.ACTION_UP) {

151	xStart = event.getX();

152

153	// 시작, 끝점의 차가 50 이상이면 슬라이드로 인지하고 flipper가 동작함

154	if (xStart < xEnd) {

155	float difVal = xEnd- xStart;

156	if(difVal > 50){

157	flipper.setInAnimation(AnimationUtils.loadAnimation(this,

158	R.anim.push_left_in));

159	flipper.setOutAnimation(AnimationUtils.loadAnimation(this,

160	R.anim.push_left_out));

161

162	flipper.showNext();

163	flipperIndex = flipper.getDisplayedChild();//flipper의 현재 위치 인덱스를 가져옴

164	FlipperIndex(flipperIndex);//flipper의 현재 위치를 들고 페이지 표시 매소드 호출

165

}

166	} else if (xStart > xEnd) {

167	float difVal = xStart- xEnd;

168	if(difVal > 50){

169	flipper.setInAnimation(AnimationUtils.loadAnimation(this,

170	R.anim.push_right_in));

171	flipper.setOutAnimation(AnimationUtils.loadAnimation(this,

172	R.anim.push_right_out));

173	flipper.showPrevious();

174	flipperIndex = flipper.getDisplayedChild();//flipper의 현재 위치 인덱스를 가져옴

175	FlipperIndex(flipperIndex);//flipper의 현재 위치를 들고 페이지 표시 매소드 호출

176

}

177

}

178

}

179	return true;

180	/********** Flipper ****************/

181

}

182

}

슬라이드를 할 때마다 해당 뷰의 인덱스를 받아서 들고있고 그 값을 세개의 페이지 표시 이미지뷰를 컨트롤하는 매소드로 보내어 해당 페이지를 표시할 수 있게 했습니다. 그리고 터치 점과 뗏을때 점의 차를 절대 값으로 구한 뒤 그 값이 20 미만이면 터치로 인식하여 안의 오브젝트가 터치되게 만들고 , 20이상이면 슬라이드로 인식하게하여 뷰 전환이 이루어지도록 하였습니다. 결과물을 이렇게 나옵니다.