移動開發指南：Android Transition架構介紹(1)

移動開發指南：Android Transition架構介紹(1)

BKJIA譯文】Android Transition架構允許我們對應用程式使用者介面當中的各類外觀變化加以配置。大家可以在應用程式螢幕內實現動畫式過渡、將每個階段定義為一種情境並控制應用程式如何從一種顯示情境過渡到另一種。

在今天的文章中，我們將構建一款簡單的應用程式、並為其製作一套動畫過渡效果。為了完成這項任務，大家需要涉及的內容包括在XML當中準備布局與可繪製檔案、而後利用Java配置並應用這套過渡機制。我們將定義兩種情境，其中同樣的一組視圖項目將以不同方式排列在裝置螢幕之上。在大家使用Transition架構時，Android將自動完成兩種情境轉換過程中的動畫過渡效果。

1. 建立應用程式

第一步

作為教程的第一步，我們首先在自己選定的IDE中建立一款新的應用程式。大家至少需要使用SDK 19才能讓這些Transition類順利起效，因此如果打算讓其支援其它早期版本、我們還需要執行其它一些額外步驟。

首先為應用程式指定一個主Activity與布局檔案，並為該布局選擇start_layout.xml作為名稱。我們隨後還會添加其它布局檔案，並利用Transition機制在不同顯示布局之間進行轉換。下面幾幅顯示了這一過程在Android Studio中的具體實現流程。

第二步

下面我們在Transition中準備一些可繪製圖形以資利用。我們將準備四個圓形圖案，每一個都採用不同的漸層顏色進行填充。在這款應用程式範例的可繪製資源目錄內，首先建立一個名為shape1.xml的新檔案。通過以下代碼添加圖形：

 

  
<?xml version="1.0" encoding="utf-8"?>  
  
<shape xmlns:android="http://schemas.android.com/apk/res/android"  
  
    android:dither="true"  
  
    android:shape="oval" >  
  
   
  
    <gradient  
  
        android:endColor="#66ff0000"  
  
        android:gradientRadius="150"  
  
        android:startColor="#ffffcc00"  
  
        android:type="radial"  
  
        android:useLevel="false" />  
  
   
  
    <size  
  
        android:height="100dp"  
  
        android:width="100dp" />  
  
   
  
</shape>  
 

以上代碼構建出的是一個由漸層色填充而成的圓形圖案。而四個圖形在大小與樣式方面完全相同，僅僅在色彩上有所區別。當然，大家可能需要為不同像素密度的裝置分別準備多種不同版本的圖形。利用以下代碼建立shape2.xml：

 

  
<?xml version="1.0" encoding="utf-8"?> 
  
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
  
    android:dither="true" 
  
    android:shape="oval" > 
  
  
  
    <gradient 
  
        android:endColor="#66ffcc00" 
  
        android:gradientRadius="150" 
  
        android:startColor="#ff00ff00" 
  
        android:type="radial" 
  
        android:useLevel="false" /> 
  
  
  
    <size 
  
        android:height="100dp" 
  
        android:width="100dp" /> 
  
  
  
</shape> 
 

現在添加shape3.xml:

 

  
<?xml version="1.0" encoding="utf-8"?> 
  
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
  
    android:dither="true" 
  
    android:shape="oval" > 
  
  
  
    <gradient 
  
        android:endColor="#6600ff00" 
  
        android:gradientRadius="150" 
  
        android:startColor="#ff0000ff" 
  
        android:type="radial" 
  
        android:useLevel="false" /> 
  
  
  
    <size 
  
        android:height="100dp" 
  
        android:width="100dp" /> 
  
  
  
</shape> 
 

最後添加shape4.xml:

 

  
<?xml version="1.0" encoding="utf-8"?> 
  
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
  
    android:dither="true" 
  
    android:shape="oval" > 
  
  
  
    <gradient 
  
        android:endColor="#660000ff" 
  
        android:gradientRadius="150" 
  
        android:startColor="#ffff0000" 
  
        android:type="radial" 
  
        android:useLevel="false" /> 
  
  
  
    <size 
  
        android:height="100dp" 
  
        android:width="100dp" /> 
  
  
  
</shape> 
 

我們將把這些圖形作為ImageButtons應用在兩種布局情境之內。