Android程式設計-畫面的切換(2) 「切換部份內容」

-
上一篇 使用setContentView來切換畫面，這樣的切換法可以把整個畫面切換到另一個畫面。實務上，我有另一種想法， 可否只切換 畫面的某一個部份內容 呢？

本篇 演示了以Layout來 切換Layout裏的內容 畫面元件。
程式準備一個主畫面(activity_main.xml)，此畫面 分成上下二個部份(二個LinearLayout)，上半部放置四個按鈕，下半部做為畫面 移入移出的 版面。


切換畫面的過程如下：


上面 有四個按鈕，各會叫出四個 內容畫面(main1, main2, main3, main4)。

此方 法不使用setContentView來切換整個 畫面，而是使用LinearLaout的removeAllViews與addView將內容元件畫面移出與移入LinearLayout中。這種做 法就像教室裏的佈告欄，我們會把 公告、海報什麼的貼到這個佈告欄 上，佈告欄本身就是一個Layout元件，而公告、海 報什麼的也 還是一 個一個的Layout元件， 程式切換畫面的 做法就是將這些Layout元件自由地轉移 。

注意：
1．四個子畫面LinearLayout本身沒有父佈局畫面，若搬移的畫面是在某一個佈局畫面下(因為Layout可以巢狀)，搬移的Layout過程要先從原本所在位置處的父佈局畫面LinearLayout移出，才能移入其他佈局畫面(LinearLayout)。
2．並不一定一定是LinearLayout才能搬移，其他的Layout也可以搬。
3．可以把下式中的LinearLayout換成LinearLayout的父類別Layout，這樣不管是LinearLayout還是RelativeLayout等都一式適用(多形的使用)
final LinearLayout View1 = (LinearLayout) main1.findViewById(R.id.view1);

程式 碼：
Button button1, button2, button3, button4;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        LayoutInflater inflater =  getLayoutInflater();
        final View activity_main = inflater.inflate(R.layout.activity_main, null);//展開主視窗
        final LinearLayout masterView = (LinearLayout) activity_main.findViewById(R.id.mView); //取得主視窗中下方的空白LinearLayout
        
        final View main1 = inflater.inflate(R.layout.main1, null);//展開第1個子畫面視窗
        final View main2 = inflater.inflate(R.layout.main2, null);//展開第2個子畫面視窗
        final View main3 = inflater.inflate(R.layout.main3, null);//展開第3個子畫面視窗
        final View main4 = inflater.inflate(R.layout.main4, null);//展開第4個子畫面視窗

        final LinearLayout View1 = (LinearLayout) main1.findViewById(R.id.view1);//找出第1個視窗中的內容版面
        final LinearLayout View2 = (LinearLayout) main2.findViewById(R.id.view2);//找出第2個視窗中的內容版面
        final LinearLayout View3 = (LinearLayout) main3.findViewById(R.id.view3);//找出第3個視窗中的內容版面
        final LinearLayout View4 = (LinearLayout) main4.findViewById(R.id.view4);//找出第4個視窗中的內容版面
        
        setContentView(activity_main); 
        final LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(     
                LinearLayout.LayoutParams.FILL_PARENT,  
                LinearLayout.LayoutParams.FILL_PARENT 
        ); 
        
        button1 = (Button) activity_main.findViewById(R.id.button1); //找出主視窗中第1個及設定按鈕動作
        button1.setOnClickListener(new OnClickListener()
        { 
            @Override
            public void onClick(View v)
            {
                masterView.removeAllViews();//要加入內容版面前前移除掉所有已存在的版面
                masterView.addView(View1,p);//加入第1個視窗中的內容版面
            }
        });        
       
        button2 = (Button) activity_main.findViewById(R.id.button2); //找出主視窗中第個及設定按鈕動作
        button2.setOnClickListener(new OnClickListener()
        { 
            @Override
            public void onClick(View v)
            {
                //TextView tv = (TextView) main2.findViewById(R.id.textView22);
                //tv.setText("HelloWorld");
                //上面二行示範了動 態改變內容 的方 式， 這意謂 你可以自由地顯示畫面的 內容。
                masterView.removeAllViews();
                masterView.addView(View2);//加入第2個視窗中的內容版面 
            }
        });        
        
        button3 = (Button) activity_main.findViewById(R.id.button3); //找出主視窗中第3個及設定按鈕動作
        button3.setOnClickListener(new OnClickListener()
        { 
            @Override
            public void onClick(View v)
            {
               masterView.removeAllViews();
               masterView.addView(View3);//加入第3個視窗中的內容版面  
            }
        });    
        
        button4 = (Button) activity_main.findViewById(R.id.button4); //找出主視窗中第4個及設定按鈕動作
        button4.setOnClickListener(new OnClickListener()
        { 
            @Override
            public void onClick(View v)
            {
               masterView.removeAllViews();
               masterView.addView(View4);//加入第4個視窗中的內容版面  
            }
        });    
        
    }




主畫面與四個內容畫面的xml檔分別是：
[activity_main.xml]
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/btn1Text" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/btn2Text" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/btn3Text" />

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/btn4Text" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/mView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
    </LinearLayout>

</LinearLayout>


[main1.xml]
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/view1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="其疾如風"
        android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>


[main2.xml]
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/view2"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/TextView21"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="其徐如林"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="72dp" />

    <TextView
        android:id="@+id/textView22"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.58"
        android:background="@android:color/darker_gray"
        android:height="500dp"
        android:text="其徐如林"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="72dp" />

</LinearLayout>


[main3.xml]
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/view3"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView31"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="侵掠如火"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>


[main4.xml]
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/view4"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView41"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="不動如山"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>





Comments

Post a Comment

Popular posts from this blog

Android-使用webview在V3版的Google地圖GPS定位

-
Image
目的：透過GPS或網路定位來決定裝置目前的位置 程式執行動態畫面錄影： https://www.youtube.com/watch?v=_Bw2YP39WOw 畫面中可看到經緯度的資料約每隔一秒更新一次。 測試時必須要用GPS的模擬器播放預存的GPS記錄檔(KML)來模擬實際GPS抓到定位的資料，如下畫面： 程式要能接收GPS或網路的定位資料必須實作LocationListener介面，其中有幾個介面方法可以用在實際上的程式撰寫，像是定位資料的變化的相關方法「public void onLocationChanged(Location location」，其他像是偵測GPS裝置是否啟動或不啟動的方法。 主程式： package wells.example.googlemapexample; import android.app.Activity; import android.content.Context; import android.location.Criteria; import android.location.Location; import android.location.LocationListener; import android.location.LocationManager; import android.os.Bundle; import android.view.View; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.Button; import android.widget.EditText; public class MainActivity extends Activity implements LocationListener {  private static final String MAP_URL = "file:///android_asset/googleMap.html";  private WebView webView;  private EditText LatText
Read more