轉化屏幕

文章分類:移動開發

 res/layout/main.xml

Java代碼 複製代碼
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     android:background="#ffffff"  
  7.     >   
  8.   
  9.     <ViewFlipper android:id="@+id/details"  
  10.         android:layout_width="fill_parent"  
  11.         android:layout_height="fill_parent">     
  12.   
  13.         <LinearLayout   
  14.                android:orientation="vertical"  
  15.             android:layout_width="fill_parent"  
  16.             android:layout_height="fill_parent"  
  17.             android:background="#ffffff">   
  18.   
  19.             <TextView android:id="@+id/tv_country"  
  20.             android:layout_width="fill_parent"  
  21.             android:layout_height="wrap_content"  
  22.             android:textColor="#000000"  
  23.             android:textStyle="bold"  
  24.             android:textSize="18px"  
  25.             android:text="Country" >   
  26.             </TextView>   
  27.             <Spinner android:text=""  
  28.             android:id="@+id/spinner_country"  
  29.             android:layout_width="200px"  
  30.             android:layout_height="55px">   
  31.             </Spinner>   
  32.             <Button android:text="Next"  
  33.             android:id="@+id/Button_next"  
  34.             android:layout_width="250px"  
  35.                 android:textSize="18px"  
  36.             android:layout_height="55px">   
  37.         </Button>   
  38.         </LinearLayout>    
  39.   
  40.         <LinearLayout   
  41.                android:orientation="vertical"  
  42.             android:layout_width="fill_parent"  
  43.             android:layout_height="fill_parent"  
  44.             android:background="#ffffff">   
  45.   
  46.             <TextView android:id="@+id/tv_income"  
  47.             android:layout_width="fill_parent"  
  48.             android:layout_height="wrap_content"  
  49.             android:textColor="#000000"  
  50.             android:textStyle="bold"  
  51.             android:textSize="18px"  
  52.             android:text="Income" >   
  53.             </TextView>   
  54.             <EditText android:text=""  
  55.             android:id="@+id/et_income"  
  56.             android:layout_width="200px"  
  57.             android:layout_height="55px">   
  58.             </EditText>   
  59.             <Button android:text="Previous"  
  60.             android:id="@+id/Button_previous"  
  61.             android:layout_width="250px"  
  62.                 android:textSize="18px"  
  63.             android:layout_height="55px">   
  64.             </Button>   
  65.         </LinearLayout>    
  66.   
  67.     </ViewFlipper>           
  68.   
  69. </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標籤代表一屏。

Java代碼 複製代碼
  1. public class Activity1 extends Activity {   
  2.     /** Called when the activity is first created. */  
  3.     @Override  
  4.     public void onCreate(Bundle savedInstanceState) {   
  5.         super.onCreate(savedInstanceState);   
  6.   
  7.         // Set main.XML as the layout for this Activity   
  8.         setContentView(R.layout.main);   
  9.   
  10.         // Add a few countries to the spinner   
  11.         Spinner spinnerCountries = (Spinner) findViewById(R.id.spinner_country);   
  12.         ArrayAdapter countryArrayAdapter = new ArrayAdapter(this,   
  13.                     android.R.layout.simple_spinner_dropdown_item,   
  14.                     new String[] { "Canada""USA" });   
  15.         spinnerCountries.setAdapter(countryArrayAdapter);   
  16.   
  17.         // Set the listener for Button_Next, a quick and dirty way to create a listener   
  18.         Button buttonNext = (Button) findViewById(R.id.Button_next);   
  19.         buttonNext.setOnClickListener(new View.OnClickListener() {   
  20.             public void onClick(View view) {   
  21.                 // Get the ViewFlipper from the layout   
  22.                 ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);   
  23.   
  24.                 // Set an animation from res/anim: I pick push left in   
  25.                 vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_in));   
  26.                 vf.showNext();   
  27.         }   
  28.         });   
  29.   
  30.         // Set the listener for Button_Previous, a quick and dirty way to create a listener   
  31.         Button buttonPrevious = (Button) findViewById(R.id.Button_previous);   
  32.         buttonPrevious.setOnClickListener(new View.OnClickListener() {   
  33.             public void onClick(View view) {   
  34.                 // Get the ViewFlipper from the layout   
  35.                 ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);   
  36.                 // Set an animation from res/anim: I pick push left out   
  37.                 vf.setAnimation(AnimationUtils.loadAnimation(view.getContext(), R.anim.push_left_out));   
  38.                 vf.showPrevious();   
  39.         }   
  40.   
  41.         });           
  42.   
  43.     }  
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裏面自帶的。

 

上面的方法實現的是通過按鈕進行屏幕轉化,可是我想通過手指實現如何呢?

Java代碼 複製代碼
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     android:background="#ffffff"  
  7.     android:id="@+id/layout_main"  
  8.     >   
  9.   
  10.     <ViewFlipper android:id="@+id/details"  
  11.         android:layout_width="fill_parent"  
  12.         android:layout_height="fill_parent">     
  13.   
  14.         <LinearLayout   
  15.                android:orientation="vertical"  
  16.             android:layout_width="fill_parent"  
  17.             android:layout_height="fill_parent"  
  18.             android:background="#ffffff">   
  19.   
  20.             <TextView android:id="@+id/tv_country"  
  21.             android:layout_width="fill_parent"  
  22.             android:layout_height="wrap_content"  
  23.             android:textColor="#000000"  
  24.             android:textStyle="bold"  
  25.             android:textSize="18px"  
  26.             android:text="Country" >   
  27.             </TextView>   
  28.             <Spinner android:text=""  
  29.             android:id="@+id/spinner_country"  
  30.             android:layout_width="200px"  
  31.             android:layout_height="55px">   
  32.             </Spinner>   
  33.         </LinearLayout>    
  34.   
  35.         <LinearLayout   
  36.                android:orientation="vertical"  
  37.             android:layout_width="fill_parent"  
  38.             android:layout_height="fill_parent"  
  39.             android:background="#ffffff">   
  40.   
  41.             <TextView android:id="@+id/tv_income"  
  42.             android:layout_width="fill_parent"  
  43.             android:layout_height="wrap_content"  
  44.             android:textColor="#000000"  
  45.             android:textStyle="bold"  
  46.             android:textSize="18px"  
  47.             android:text="Income" >   
  48.             </TextView>   
  49.             <EditText android:text=""  
  50.             android:id="@+id/et_income"  
  51.             android:layout_width="200px"  
  52.             android:layout_height="55px">   
  53.             </EditText>   
  54.         </LinearLayout>    
  55.   
  56.     </ViewFlipper>   
  57.   
  58. </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"

因爲我們要在這個層次上進行動作設置:

Java代碼 複製代碼
  1. public class Activity1 extends Activity implements OnTouchListener{   
  2.   
  3.     float downXValue;   
  4.   
  5.     /** Called when the activity is first created. */  
  6.     @Override  
  7.     public void onCreate(Bundle savedInstanceState) {   
  8.         super.onCreate(savedInstanceState);   
  9.   
  10.         // Set main.XML as the layout for this Activity   
  11.         setContentView(R.layout.main);   
  12.   
  13.         // Add these two lines   
  14.         LinearLayout layMain = (LinearLayout) findViewById(R.id.layout_main);   
  15.         layMain.setOnTouchListener((OnTouchListener) this);    
  16.   
  17.         // Add a few countries to the spinner   
  18.         Spinner spinnerCountries = (Spinner) findViewById(R.id.spinner_country);   
  19.         ArrayAdapter countryArrayAdapter = new ArrayAdapter(this,   
  20.                     android.R.layout.simple_spinner_dropdown_item,   
  21.                     new String[] { "Canada""USA" });   
  22.         spinnerCountries.setAdapter(countryArrayAdapter);   
  23.   
  24.     }   
  25.   
  26.     public boolean onTouch(View arg0, MotionEvent arg1) {   
  27.   
  28.         // Get the action that was done on this touch event   
  29.         switch (arg1.getAction())   
  30.         {   
  31.             case MotionEvent.ACTION_DOWN:   
  32.             {   
  33.                 // store the X value when the user's finger was pressed down   
  34.                 downXValue = arg1.getX();   
  35.                 break;   
  36.             }   
  37.   
  38.             case MotionEvent.ACTION_UP:   
  39.             {   
  40.                 // Get the X value when the user released his/her finger   
  41.                 float currentX = arg1.getX();               
  42.   
  43.                 // going backwards: pushing stuff to the right   
  44.                 if (downXValue < currentX)   
  45.                 {   
  46.                     // Get a reference to the ViewFlipper   
  47.                      ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);   
  48.                      // Set the animation   
  49.                       vf.setAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_out));   
  50.                       // Flip!   
  51.                       vf.showPrevious();   
  52.                 }   
  53.   
  54.                 // going forwards: pushing stuff to the left   
  55.                 if (downXValue > currentX)   
  56.                 {   
  57.                     // Get a reference to the ViewFlipper   
  58.                     ViewFlipper vf = (ViewFlipper) findViewById(R.id.details);   
  59.                      // Set the animation   
  60.                      vf.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.push_left_in));   
  61.                       // Flip!   
  62.                      vf.showNext();   
  63.                 }   
  64.                 break;   
  65.             }   
  66.         }   
  67.   
  68.         // if you return false, these actions will not be recorded   
  69.         return true;   
  70.     }  
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方法,通過該方法我們判斷鼠標的摁下和鬆開之後的變化來實現動畫。

 

那麼如何通過手勢事件呢?

Java代碼 複製代碼
  1. public class Main extends Activity {   
  2.   
  3.     private static final int SWIPE_MIN_DISTANCE = 120;   
  4.     private static final int SWIPE_MAX_OFF_PATH = 250;   
  5.     private static final int SWIPE_THRESHOLD_VELOCITY = 200;   
  6.     private GestureDetector gestureDetector;   
  7.     View.OnTouchListener gestureListener;   
  8.     private Animation slideLeftIn;   
  9.     private Animation slideLeftOut;   
  10.     private Animation slideRightIn;   
  11.     private Animation slideRightOut;   
  12.     private ViewFlipper viewFlipper;   
  13.     @Override  
  14.     public void onCreate(Bundle savedInstanceState) {   
  15.         super.onCreate(savedInstanceState);   
  16.         setContentView(R.layout.main);   
  17.         viewFlipper = (ViewFlipper)findViewById(R.id.layout_main);   
  18.         slideLeftIn = AnimationUtils.loadAnimation(this, R.anim.slide_left_in);   
  19.         slideLeftOut = AnimationUtils.loadAnimation(this, R.anim.slide_left_out);   
  20.         slideRightIn = AnimationUtils.loadAnimation(this, R.anim.slide_right_in);   
  21.         slideRightOut = AnimationUtils.loadAnimation(this, R.anim.slide_right_out);   
  22.            
  23.         gestureDetector = new GestureDetector(new MyGestureDetector());   
  24.         gestureListener = new View.OnTouchListener() {   
  25.             public boolean onTouch(View v, MotionEvent event) {   
  26.                 if (gestureDetector.onTouchEvent(event)) {   
  27.                     return true;   
  28.                 }   
  29.                 return false;   
  30.             }   
  31.         };   
  32.     }   
  33.     class MyGestureDetector extends SimpleOnGestureListener {   
  34.         @Override  
  35.         public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {   
  36.             try {   
  37.                 if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)   
  38.                     return false;   
  39.                 // right to left swipe   
  40.                 if(e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {   
  41.                     viewFlipper.setInAnimation(slideLeftIn);   
  42.                     viewFlipper.setOutAnimation(slideLeftOut);   
  43.                     viewFlipper.showNext();   
  44.                 }  else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {   
  45.                     viewFlipper.setInAnimation(slideRightIn);   
  46.                     viewFlipper.setOutAnimation(slideRightOut);   
  47.                     viewFlipper.showPrevious();   
  48.                 }   
  49.             } catch (Exception e) {   
  50.                 // nothing   
  51.             }   
  52.             return false;   
  53.         }   
  54.     }   
  55.        
  56.     @Override  
  57.     public boolean onTouchEvent(MotionEvent event) {   
  58.         if (gestureDetector.onTouchEvent(event))   
  59.             return true;   
  60.         else  
  61.             return false;   
  62.     }  
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 來實現,主要通過獲得座標餓方法實現

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章