转化屏幕•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>

这里唯一需要注意的就是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();        }        });            }

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>

这个代码只是去掉了两个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;    }

上面的代码实现的是通过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;    }

该方法通过SimpleOnGestureListener 来实现，主要通过获得坐标饿方法实现

更多相关文章

随机推荐