转化屏幕•ViewFlipper 的使用
文章分类:移动开发
res/layout/main.xml
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="#ffffff"
- >
- <ViewFlipper android:id="@+id/details"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <LinearLayout
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="#ffffff">
- <TextView android:id="@+id/tv_country"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:textColor="#000000"
- android:textStyle="bold"
- android:textSize="18px"
- android:text="Country" >
- </TextView>
- <Spinner android:text=""
- android:id="@+id/spinner_country"
- android:layout_width="200px"
- android:layout_height="55px">
- </Spinner>
- <Button android:text="Next"
- android:id="@+id/Button_next"
- android:layout_width="250px"
- android:textSize="18px"
- android:layout_height="55px">
- </Button>
- </LinearLayout>
- <LinearLayout
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="#ffffff">
- <TextView android:id="@+id/tv_income"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:textColor="#000000"
- android:textStyle="bold"
- android:textSize="18px"
- android:text="Income" >
- </TextView>
- <EditText android:text=""
- android:id="@+id/et_income"
- android:layout_width="200px"
- android:layout_height="55px">
- </EditText>
- <Button android:text="Previous"
- android:id="@+id/Button_previous"
- android:layout_width="250px"
- android:textSize="18px"
- android:layout_height="55px">
- </Button>
- </LinearLayout>
- </ViewFlipper>
- </LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
>
<ViewFlipper android:id="@+id/details"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff">
<TextView android:id="@+id/tv_country"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textStyle="bold"
android:textSize="18px"
android:text="Country" >
</TextView>
<Spinner android:text=""
android:id="@+id/spinner_country"
android:layout_width="200px"
android:layout_height="55px">
</Spinner>
<Button android:text="Next"
android:id="@+id/Button_next"
android:layout_width="250px"
android:textSize="18px"
android:layout_height="55px">
</Button>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff">
<TextView android:id="@+id/tv_income"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textStyle="bold"
android:textSize="18px"
android:text="Income" >
</TextView>
<EditText android:text=""
android:id="@+id/et_income"
android:layout_width="200px"
android:layout_height="55px">
</EditText>
<Button android:text="Previous"
android:id="@+id/Button_previous"
android:layout_width="250px"
android:textSize="18px"
android:layout_height="55px">
</Button>
</LinearLayout>
</ViewFlipper>
</LinearLayout>
这里唯一需要注意的就是ViewFlipper标签内包含两个LinearLayout标签,每一个LinearLayout标签代表一屏。
- public class Activity1 extends Activity {
- /** Called when the activity is first created. */
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- // Set main.XML as the layout for this Activity
- setContentView(R.layout.main);
- // Add a few countries to the spinner
- Spinner spinnerCountries = (Spinner) findViewById(R.id.spinner_country);
- ArrayAdapter countryArrayAdapter = new ArrayAdapter(this,
- android.R.layout.simple_spinner_dropdown_item,
- new String[] { "Canada", "USA" });
- spinnerCountries.setAdapter(countryArrayAdapter);
- // Set the listener for Button_Next, a quick and dirty way to create a listener
- Button buttonNext = (Button) findViewById(R.id.Button_next);
- buttonNext.setOnClickListener(new View.OnClickListener() {
- public void onClick(View view) {
- // Get the ViewFlipper from the layout
- ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
- // Set an animation from res/anim: I pick push left in
- vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_in));
- vf.showNext();
- }
- });
- // Set the listener for Button_Previous, a quick and dirty way to create a listener
- Button buttonPrevious = (Button) findViewById(R.id.Button_previous);
- buttonPrevious.setOnClickListener(new View.OnClickListener() {
- public void onClick(View view) {
- // Get the ViewFlipper from the layout
- ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
- // Set an animation from res/anim: I pick push left out
- vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_out));
- vf.showPrevious();
- }
- });
- }
public class Activity1 extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Set main.XML as the layout for this Activity
setContentView(R.layout.main);
// Add a few countries to the spinner
Spinner spinnerCountries = (Spinner) findViewById(R.id.spinner_country);
ArrayAdapter countryArrayAdapter = new ArrayAdapter(this,
android.R.layout.simple_spinner_dropdown_item,
new String[] { "Canada", "USA" });
spinnerCountries.setAdapter(countryArrayAdapter);
// Set the listener for Button_Next, a quick and dirty way to create a listener
Button buttonNext = (Button) findViewById(R.id.Button_next);
buttonNext.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
// Get the ViewFlipper from the layout
ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
// Set an animation from res/anim: I pick push left in
vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_in));
vf.showNext();
}
});
// Set the listener for Button_Previous, a quick and dirty way to create a listener
Button buttonPrevious = (Button) findViewById(R.id.Button_previous);
buttonPrevious.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
// Get the ViewFlipper from the layout
ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
// Set an animation from res/anim: I pick push left out
vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_out));
vf.showPrevious();
}
});
}
slide_right 代替push_left_out效果更好 一些,这些代码都是api里面自带的。
上面的方法实现的是通过按钮进行屏幕转化,可是我想通过手指实现如何呢?
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="#ffffff"
- android:id="@+id/layout_main"
- >
- <ViewFlipper android:id="@+id/details"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <LinearLayout
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="#ffffff">
- <TextView android:id="@+id/tv_country"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:textColor="#000000"
- android:textStyle="bold"
- android:textSize="18px"
- android:text="Country" >
- </TextView>
- <Spinner android:text=""
- android:id="@+id/spinner_country"
- android:layout_width="200px"
- android:layout_height="55px">
- </Spinner>
- </LinearLayout>
- <LinearLayout
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="#ffffff">
- <TextView android:id="@+id/tv_income"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:textColor="#000000"
- android:textStyle="bold"
- android:textSize="18px"
- android:text="Income" >
- </TextView>
- <EditText android:text=""
- android:id="@+id/et_income"
- android:layout_width="200px"
- android:layout_height="55px">
- </EditText>
- </LinearLayout>
- </ViewFlipper>
- </LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:id="@+id/layout_main"
>
<ViewFlipper android:id="@+id/details"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff">
<TextView android:id="@+id/tv_country"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textStyle="bold"
android:textSize="18px"
android:text="Country" >
</TextView>
<Spinner android:text=""
android:id="@+id/spinner_country"
android:layout_width="200px"
android:layout_height="55px">
</Spinner>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff">
<TextView android:id="@+id/tv_income"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textStyle="bold"
android:textSize="18px"
android:text="Income" >
</TextView>
<EditText android:text=""
android:id="@+id/et_income"
android:layout_width="200px"
android:layout_height="55px">
</EditText>
</LinearLayout>
</ViewFlipper>
</LinearLayout>
这个代码只是去掉了两个button,另外要注意的是加了一句android:id="@+id/layout_main"
因为我们要在这个层次上进行动作设置:
- public class Activity1 extends Activity implements OnTouchListener{
- float downXValue;
- /** Called when the activity is first created. */
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- // Set main.XML as the layout for this Activity
- setContentView(R.layout.main);
- // Add these two lines
- LinearLayout layMain = (LinearLayout) findViewById(R.id.layout_main);
- layMain.setOnTouchListener((OnTouchListener) this);
- // Add a few countries to the spinner
- Spinner spinnerCountries = (Spinner) findViewById(R.id.spinner_country);
- ArrayAdapter countryArrayAdapter = new ArrayAdapter(this,
- android.R.layout.simple_spinner_dropdown_item,
- new String[] { "Canada", "USA" });
- spinnerCountries.setAdapter(countryArrayAdapter);
- }
- public boolean onTouch(View arg0, MotionEvent arg1) {
- // Get the action that was done on this touch event
- switch (arg1.getAction())
- {
- case MotionEvent.ACTION_DOWN:
- {
- // store the X value when the user's finger was pressed down
- downXValue = arg1.getX();
- break;
- }
- case MotionEvent.ACTION_UP:
- {
- // Get the X value when the user released his/her finger
- float currentX = arg1.getX();
- // going backwards: pushing stuff to the right
- if (downXValue < currentX)
- {
- // Get a reference to the ViewFlipper
- ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
- // Set the animation
- vf.setAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
- // Flip!
- vf.showPrevious();
- }
- // going forwards: pushing stuff to the left
- if (downXValue > currentX)
- {
- // Get a reference to the ViewFlipper
- ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
- // Set the animation
- vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
- // Flip!
- vf.showNext();
- }
- break;
- }
- }
- // if you return false, these actions will not be recorded
- return true;
- }
public class Activity1 extends Activity implements OnTouchListener{
float downXValue;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Set main.XML as the layout for this Activity
setContentView(R.layout.main);
// Add these two lines
LinearLayout layMain = (LinearLayout) findViewById(R.id.layout_main);
layMain.setOnTouchListener((OnTouchListener) this);
// Add a few countries to the spinner
Spinner spinnerCountries = (Spinner) findViewById(R.id.spinner_country);
ArrayAdapter countryArrayAdapter = new ArrayAdapter(this,
android.R.layout.simple_spinner_dropdown_item,
new String[] { "Canada", "USA" });
spinnerCountries.setAdapter(countryArrayAdapter);
}
public boolean onTouch(View arg0, MotionEvent arg1) {
// Get the action that was done on this touch event
switch (arg1.getAction())
{
case MotionEvent.ACTION_DOWN:
{
// store the X value when the user's finger was pressed down
downXValue = arg1.getX();
break;
}
case MotionEvent.ACTION_UP:
{
// Get the X value when the user released his/her finger
float currentX = arg1.getX();
// going backwards: pushing stuff to the right
if (downXValue < currentX)
{
// Get a reference to the ViewFlipper
ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
// Set the animation
vf.setAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));
// Flip!
vf.showPrevious();
}
// going forwards: pushing stuff to the left
if (downXValue > currentX)
{
// Get a reference to the ViewFlipper
ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);
// Set the animation
vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));
// Flip!
vf.showNext();
}
break;
}
}
// if you return false, these actions will not be recorded
return true;
}
上面的代码实现的是通过ontouchListener方法,通过该方法我们判断鼠标的摁下和松开之后的变化来实现动画。
那么如何通过手势事件呢?
- public class Main extends Activity {
- private static final int SWIPE_MIN_DISTANCE = 120;
- private static final int SWIPE_MAX_OFF_PATH = 250;
- private static final int SWIPE_THRESHOLD_VELOCITY = 200;
- private GestureDetector gestureDetector;
- View.OnTouchListener gestureListener;
- private Animation slideLeftIn;
- private Animation slideLeftOut;
- private Animation slideRightIn;
- private Animation slideRightOut;
- private ViewFlipper viewFlipper;
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.main);
- viewFlipper = (ViewFlipper)findViewById(R.id.layout_main);
- slideLeftIn = AnimationUtils.loadAnimation(this, R.anim.slide_left_in);
- slideLeftOut = AnimationUtils.loadAnimation(this, R.anim.slide_left_out);
- slideRightIn = AnimationUtils.loadAnimation(this, R.anim.slide_right_in);
- slideRightOut = AnimationUtils.loadAnimation(this, R.anim.slide_right_out);
- gestureDetector = new GestureDetector(new MyGestureDetector());
- gestureListener = new View.OnTouchListener() {
- public boolean onTouch(View v, MotionEvent event) {
- if (gestureDetector.onTouchEvent(event)) {
- return true;
- }
- return false;
- }
- };
- }
- class MyGestureDetector extends SimpleOnGestureListener {
- @Override
- public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
- try {
- if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
- return false;
- // right to left swipe
- if(e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
- viewFlipper.setInAnimation(slideLeftIn);
- viewFlipper.setOutAnimation(slideLeftOut);
- viewFlipper.showNext();
- } else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
- viewFlipper.setInAnimation(slideRightIn);
- viewFlipper.setOutAnimation(slideRightOut);
- viewFlipper.showPrevious();
- }
- } catch (Exception e) {
- // nothing
- }
- return false;
- }
- }
- @Override
- public boolean onTouchEvent(MotionEvent event) {
- if (gestureDetector.onTouchEvent(event))
- return true;
- else
- return false;
- }
public class Main extends Activity {
private static final int SWIPE_MIN_DISTANCE = 120;
private static final int SWIPE_MAX_OFF_PATH = 250;
private static final int SWIPE_THRESHOLD_VELOCITY = 200;
private GestureDetector gestureDetector;
View.OnTouchListener gestureListener;
private Animation slideLeftIn;
private Animation slideLeftOut;
private Animation slideRightIn;
private Animation slideRightOut;
private ViewFlipper viewFlipper;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
viewFlipper = (ViewFlipper)findViewById(R.id.layout_main);
slideLeftIn = AnimationUtils.loadAnimation(this, R.anim.slide_left_in);
slideLeftOut = AnimationUtils.loadAnimation(this, R.anim.slide_left_out);
slideRightIn = AnimationUtils.loadAnimation(this, R.anim.slide_right_in);
slideRightOut = AnimationUtils.loadAnimation(this, R.anim.slide_right_out);
gestureDetector = new GestureDetector(new MyGestureDetector());
gestureListener = new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
if (gestureDetector.onTouchEvent(event)) {
return true;
}
return false;
}
};
}
class MyGestureDetector extends SimpleOnGestureListener {
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
try {
if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
return false;
// right to left swipe
if(e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
viewFlipper.setInAnimation(slideLeftIn);
viewFlipper.setOutAnimation(slideLeftOut);
viewFlipper.showNext();
} else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
viewFlipper.setInAnimation(slideRightIn);
viewFlipper.setOutAnimation(slideRightOut);
viewFlipper.showPrevious();
}
} catch (Exception e) {
// nothing
}
return false;
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (gestureDetector.onTouchEvent(event))
return true;
else
return false;
}
该方法通过SimpleOnGestureListener 来实现,主要通过获得坐标饿方法实现