android 開發零起步學習筆記（十一）:介面切換+幾種常用介面切換效果
兩種方法實現介面的切換：
方法1、layout切換（通過setContentView切換layout）
方法2、Activity切換
方法3、Android之fragment點選切換和滑動切換
方法1、layout切換（通過setContentView切換layout）
有以下步驟：
①新建一個介面的layout的xml檔案
②觸發某一控制元件（如Button），該控制元件已經載入監聽器，監聽器通過setContentView函式切換layout
這樣的實現整個過程都是在一個Activity上面實現，所有變數都在同一狀態，因此所有變數都可以在這個Activity狀態中獲得。
程式碼如下：
[java]
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button button = (Button) this.findViewById(R.id.button1);
//給按鈕設定監聽器
button.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//通過呼叫setContentView函式切換layout
setContentView(R.layout.login);
}
});
}
另一篇《多個layout介面之間的切換》 http://www.cnblogs.com/tt_mc/archive/2010/06/22/1762794.html
方法2、Activity切換 及切換效果
通過轉換到另一個Activity，步驟如下
①建一個Activity類
②把該類註冊到AndroidManifest.xml，如下
<activity android:name=".LoginActivity"></activity>
③在原來的Activity上面通過建立Intent類來進行Activity的切換，程式碼如下
[java]
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button button_activity = (Button) this.findViewById(R.id.button2);
button_activity.setOnClickListener(new OnClickListener()){
@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, LoginActivity.class);
startActivity(intent);
}
});
}
--------------Activity切換的幾種方法-----------------------------
1.無引數Activity跳轉
Intent it = new Intent(Activity.Main.this, Activity2.class);
startActivity(it);
2.向下一個Activity傳遞資料（使用Bundle和Intent.putExtras）
Intent it = new Intent(Activity.Main.this, Activity2.class);
Bundle bundle=new Bundle();
bundle.putString("name", "This is from MainActivity!");
it.putExtras(bundle); // it.putExtra(“test”, "shuju”);
startActivity(it); // startActivityForResult(it,REQUEST_CODE);
對於資料的獲取可以採用：
Bundle bundle=getIntent().getExtras();
String name=bundle.getString("name");
3.向上一個Activity返回結果（使用setResult，針對startActivityForResult(it,REQUEST_CODE)啟動的Activity）
Intent intent=getIntent();
Bundle bundle2=new Bundle();
bundle2.putString("name", "This is from ShowMsg!");
intent.putExtras(bundle2);
setResult(RESULT_OK, intent);
4.回撥上一個Activity的結果處理函式（onActivityResult）
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
// TODO Auto-generated method stub
super.onActivityResult(requestCode, resultCode, data);
if (requestCode==REQUEST_CODE){
if(resultCode==RESULT_CANCELED)
setTitle("cancle");
else if (resultCode==RESULT_OK) {
String temp=null;
Bundle bundle=data.getExtras();
if(bundle!=null) temp=bundle.getString("name");
setTitle(temp);
}
}
}
---------------切換動畫--------------------------
Activity的切換動畫指的是從一個activity跳轉到另外一個activity時的動畫。
{它包括兩個部分：
一部分是第一個activity退出時的動畫；
另外一部分時第二個activity進入時的動畫；
在Android的2.0版本之後，有了一個函式來幫我們實現這個動畫。這個函式就是overridePendingTransition
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.SplashScreen);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
Intent mainIntent = new Intent(SplashScreen.this, AndroidNews.class);
SplashScreen.this.startActivity(mainIntent);
SplashScreen.this.finish();
overridePendingTransition(R.anim.mainfadein,
R.anim.splashfadeout);
}
}, 3000);
}
上面的程式碼只是閃屏的一部分。
getWindow (). setWindowAnimations ( int );getWindow (). setWindowAnimations ( int );
這可沒有上個好但是也可以 。
實現淡入淡出的效果1
overridePendingTransition(R.anim.splash_screen_fade, R.anim.splash_screen_hold);
實現淡入淡出的效果2
overridePendingTransition(android.R.anim.fade_in,android.R.anim.fade_out);由左向右滑入的效果
overridePendingTransition(Android.R.anim.slide_in_left,android.R.anim.slide_out_right);實現zoomin和zoomout,即類似iphone的進入和退出時的效果
overridePendingTransition(R.anim.zoomin, R.anim.zoomout);overridePendingTransition(R.anim.zoomin, R.anim.zoomout);
新建zoomin.xml檔案
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.android.com/apk/res/android"
Android:interpolator="@android:anim/decelerate_interpolator">
<scale Android:fromXScale="2.0" android:toXScale="1.0"
Android:fromYScale="2.0" android:toYScale="1.0"
Android:pivotX="50%p" android:pivotY="50%p"
Android:duration="@android:integer/config_mediumAnimTime" />
</set>
新建zoomout.xml檔案
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.android.com/apk/res/android"
Android:interpolator="@android:anim/decelerate_interpolator"
Android:zAdjustment="top">
<scale Android:fromXScale="1.0" android:toXScale=".5"
Android:fromYScale="1.0" android:toYScale=".5"
Android:pivotX="50%p" android:pivotY="50%p"
Android:duration="@android:integer/config_mediumAnimTime" />
<alpha Android:fromAlpha="1.0" android:toAlpha="0"
Android:duration="@android:integer/config_mediumAnimTime"/>
</set>
方法3、Android之fragment點選切換和滑動切換
學了一小段時間的Android,主要接觸的是UI設計，打交道最多莫過於fragment了吧。在Android3.0引入了fragment的概念後，幾乎在所以的Android的應用中都可以看見其身影，已經有很多前輩高人都已經詳細介紹過fragmrnt，我這裡就不多說什麼了。
這裡本來是想模仿一下微信的切換效果，怎奈水平不足，這裡就獻醜貼出半成品的程式碼，希望有大神能指點一下。廢話不多說，上程式碼。先從簡單的開始吧，這裡是我一共用了3個fragment，這裡就只貼出第一個的fragment的佈局，別的兩個基本一樣,比較簡樸。
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal|center_vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This the first fragment"
/>
</LinearLayout>
接下來的是使用fragment片段，這裡也只貼出第一個的。
package com.example.fragments;
import com.example.viewfragtext.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragmentone extends Fragment
{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.fragment1, container, false);
}
}
接下來便要開始實現切換的功能，這裡是底部切換元件(tabfoot)的佈局。
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="44dp"
android:orientation="horizontal"
android:background="@drawable/tabfootbg"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:id="@+id/lay1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
style="@style/Linearlayout_Style"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/fratext1"
android:text="@string/chat"
android:textColor="@color/black"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/lay2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
style="@style/Linearlayout_Style">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/fratext2"
android:text="@string/find"
android:textColor="@color/black"/>
</LinearLayout>
<LinearLayout
android:id="@+id/lay3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
style="@style/Linearlayout_Style">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/fratext3"
android:text="@string/tongxunlu"
android:textColor="@color/black"/>
</LinearLayout>
</LinearLayout>
這裡分別是自定義的style和color的程式碼。
<style name="Linearlayout_Style">
<item name="android:orientation">vertical</item>
<item name="android:gravity">center</item>
<item name="android:clickable">true</item>
<item name="android:onClick">LayoutOnclick</item>
</style>
<?xml version="1.0" encoding="UTF-8"?>
<resources >
<color name="lightseagreen">#20b2aa</color><!--亮海藍色 -->
<color name="black">#000000</color><!-- 黑色 -->
</resources>
別的設計都完成了，馬上對應的是MainActivity的設計，這是其佈局
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<fragment
android:name="com.example.fragments.Fragmentone"
android:id="@+id/fragment1"
android:layout_height="0dp"
android:layout_weight="1.0"
android:layout_width="fill_parent"
/>
<fragment
android:name="com.example.fragments.Fragmenttwo"
android:id="@+id/fragment2"
android:layout_height="0dp"
android:layout_weight="1.0"
android:layout_width="fill_parent"
/>
<fragment
android:name="com.example.fragments.Fragmentthree"
android:id="@+id/fragment3"
android:layout_height="0dp"
android:layout_weight="1.0"
android:layout_width="fill_parent"
/>
<include layout="@layout/tabfoot"/>
</LinearLayout>
最後遍是實現在主活動中實現點選底部切換和滑動的換的功能。這裡滑動功能我是採用手勢（Gesture）實現的。
1 package com.example.viewfragtext; 2 3 import android.os.Bundle; 4 import android.support.v4.app.Fragment; 5 import android.support.v4.app.FragmentActivity; 6 import android.view.GestureDetector; 7 import android.view.GestureDetector.OnGestureListener; 8 import android.view.Menu; 9 import android.view.MotionEvent; 10 import android.view.View; 11 import android.widget.LinearLayout; 12 import android.widget.TextView; 13 14 public class MainActivity extends FragmentActivity implements OnGestureListener 15 { 16 public static Fragment[] fragments; 17 public static LinearLayout[] linearLayouts; 18 public static TextView[] textViews; 19 /**定義手勢檢測例項*/ 20 public static GestureDetector detector; 21 /**做標籤，記錄當前是哪個fragment*/ 22 public int MARK=0; 23 /**定義手勢兩點之間的最小距離*/ 24 final int DISTANT=50; 25 26 27 @Override 28 protected void onCreate(Bundle savedInstanceState) { 29 super.onCreate(savedInstanceState); 30 setContentView(R.layout.activity_main); 31 //分別例項化和初始化fragement、lineatlayout、textview 32 setfragment(); 33 setlinearLayouts(); 34 settextview(); 35 //建立手勢檢測器 36 detector=new GestureDetector(this); 37 38 } 39 40 @Override 41 public boolean onCreateOptionsMenu(Menu menu) { 42 // Inflate the menu; this adds items to the action bar if it is present. 43 getMenuInflater().inflate(R.menu.main, menu); 44 return true; 45 } 46 /**初始化fragment*/ 47 public void setfragment() 48 { 49 fragments=new Fragment[3]; 50 fragments[0]=getSupportFragmentManager().findFragmentById(R.id.fragment1); 51 fragments[1]=getSupportFragmentManager().findFragmentById(R.id.fragment2); 52 fragments[2]=getSupportFragmentManager().findFragmentById(R.id.fragment3); 53 getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2]) 54 .show(fragments[0]).commit(); 55 56 } 57 /**初始化linerlayout*/ 58 public void setlinearLayouts() 59 { 60 linearLayouts=new LinearLayout[3]; 61 linearLayouts[0]=(LinearLayout)findViewById(R.id.lay1); 62 linearLayouts[1]=(LinearLayout)findViewById(R.id.lay2); 63 linearLayouts[2]=(LinearLayout)findViewById(R.id.lay3); 64 linearLayouts[0].setBackgroundResource(R.drawable.lay_select_bg); 65 } 66 /**初始化textview*/ 67 public void settextview() 68 { 69 textViews=new TextView[3]; 70 textViews[0]=(TextView)findViewById(R.id.fratext1); 71 textViews[1]=(TextView)findViewById(R.id.fratext2); 72 textViews[2]=(TextView)findViewById(R.id.fratext3); 73 textViews[0].setTextColor(getResources().getColor(R.color.lightseagreen)); 74 } 75 /**點選底部linerlayout實現切換fragment的效果*/ 76 public void LayoutOnclick(View v) 77 { 78 resetlaybg();//每次點選都重置linearLayouts的背景、textViews字型顏色 79 switch (v.getId()) { 80 case R.id.lay1: 81 getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2]) 82 .show(fragments[0]).commit(); 83 linearLayouts[0].setBackgroundResource(R.drawable.lay_select_bg); 84 textViews[0].setTextColor(getResources().getColor(R.color.lightseagreen)); 85 MARK=0; 86 break; 87 88 case R.id.lay2: 89 getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2]) 90 .show(fragments[1]).commit(); 91 linearLayouts[1].setBackgroundResource(R.drawable.lay_select_bg); 92 textViews[1].setTextColor(getResources().getColor(R.color.lightseagreen)); 93 MARK=1; 94 break; 95 case R.id.lay3: 96 getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2]) 97 .show(fragments[2]).commit(); 98 linearLayouts[2].setBackgroundResource(R.drawable.lay_select_bg); 99 textViews[2].setTextColor(getResources().getColor(R.color.lightseagreen)); 100 MARK=2; 101 break; 102 default: 103 break; 104 } 105 } 106 /**重置linearLayouts、textViews*/ 107 public void resetlaybg() 108 { 109 for(int i=0;i<3;i++) 110 { 111 linearLayouts[i].setBackgroundResource(R.drawable.tabfootbg); 112 textViews[i].setTextColor(getResources().getColor(R.color.black)); 113 } 114 115 } 116 117 @Override 118 public boolean onTouchEvent(MotionEvent event) { 119 // TODO Auto-generated method stub 120 //將該Activity上觸碰事件交給GestureDetector處理 121 return detector.onTouchEvent(event); 122 } 123 @Override 124 public boolean onDown(MotionEvent arg0) { 125 // TODO Auto-generated method stub 126 return false; 127 } 128 129 /**滑動切換效果的實現*/ 130 @Override 131 public boolean onFling(MotionEvent arg0, MotionEvent arg1, float arg2, 132 float arg3) { 133 // TODO Auto-generated method stub 134 resetlaybg(); 135 //當是Fragment0的時候 136 if(MARK==0) 137 { 138 if(arg1.getX()>arg0.getX()+DISTANT) 139 { 140 getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2]) 141 .show(fragments[1]).commit(); 142 linearLayouts[1].setBackgroundResource(R.drawable.lay_select_bg); 143 textViews[1].setTextColor(getResources().getColor(R.color.lightseagreen)); 144 MARK=1; 145 } 146 else 147 { 148 linearLayouts[0].setBackgroundResource(R.drawable.lay_select_bg); 149 textViews[0].setTextColor(getResources().getColor(R.color.black)); 150 } 151 152 } 153 //當是Fragment1的時候 154 else if (MARK==1) 155 { 156 if(arg1.getX()>arg0.getX()+DISTANT) 157 { 158 getSupportFragme