Android開發三:控制UI界面的4種方法


一、使用XML布局文件控制UI界面

使用XML文件來進行界面布局,可以將布局文件控制UI界面的代碼 和邏輯控制的Java代碼分離開來。
總體步驟:

  1. 在Android應用的res/layout目錄下編寫XML布局文件,創建后,R.java會自動收錄該布局資源。
  2. 在Activity中使用以下Java代碼顯示XML文件中布局的內容。
setContentView(R.layout.man);

1.1 修改主Activity文件

在創建時選擇Empty Activity則不需要修改,保持代碼如下默認即可。

package com.example.demo;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
}

1.2 修改 activity_main.xml 文件即布局文件

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/ic_launcher"
    >
    <!-- 添加提示文字 -->
    <TextView 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/title"
        style="@style/text"
        />
    
    <!-- 添加開始按鈕 -->
    <TextView 
        android:id="@+id/startButton"
        android:layout_gravity="center_vertical|center_horizontal"
        android:text="@string/start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/text"
        />
</FrameLayout>

1.3 修改 strings.xml 文件即字符串資源

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">demo</string>
    <string name="hello_world">Hello world!</string>
    <string name="title">標題哦</string>
    <string name="start">單擊開即游戲</string>

</resources>

1.4 修改 styles.xml 文件即樣式文件

<resources>

    <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="android:Theme.Light">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
    </style>
    
    <!-- 字體顏色 -->
    <style name="text">
        <item name="android:textSize">24dp</item>
        <item name="android:textColor">#112233</item>
    </style>

</resources>

1.5 啟動項目查看效果

這里沒有添加額外的圖片,所以背景使用的是默認的應用icon,你可以在上面的代碼中更改。

1.6 XML控制界面總結

  1. 在MainActivity中調用xml布局文件setContentView(R.layout.main);
  2. xml布局文件中如果引用了@string 字符串值,則需要在 res/values/strings.xml 中創建相應值。
  3. xml布局文件中如果引用了@style 樣式值,則需要在 res/values/styles.xml 中創建相應樣式

注意:如果則創建的項目直接運行閃退,可能是沒有自行生成 MainActivity和layout文件,自己創建即可。

二、使用代碼控制UI界面

你Java Swing那樣,所有的UI組件都可以通過new關鍵字創建出來,並添加到布局管理器中。
總體步驟:

  1. 創建布局管理器,並設置其屬性
  2. 創建具體的組件,並設置其布局和屬性
  3. 將上一步創建的組件添加到布局管理器中。

2.1 創建布局管理器並添加組件

package com.example.demo;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.TypedValue;
import android.widget.FrameLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
//		setContentView(R.layout.activity_main);
		
		// 創建幀布局
		FrameLayout frameLayout = new FrameLayout(this);
		frameLayout.setBackgroundResource(R.drawable.ic_launcher);  // 使用應用圖標作為背景
		setContentView(frameLayout);  // 啟用布局
		
		// 創建一個TextView組件
		TextView title = new TextView(this);
		title.setText("使用代碼控制布局");
		title.setTextSize(TypedValue.COMPLEX_UNIT_SP, 24);
		title.setTextColor(Color.rgb(200, 0, 70));
		frameLayout.addView(title);
	}
}

2.2 啟動查看效果

三、使用XML和Java代碼混合控制UI界面

3.1 使用XML創建布局

<?xml version="1.0" encoding="utf-8" ?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/layout">
    
</LinearLayout>

3.2 使用代碼添加組件

package com.example.demo;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

	private TextView[] textView = new TextView[4];  // 聲明4個文字組件
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		LinearLayout layout = (LinearLayout)findViewById(R.id.layout);
		for (int i = 0; i < textView.length; i++) {
			textView[i] = new TextView(this);
			textView[i].setText("這是第\n" + i + "個組件\t\t");
			textView[i].setTextColor(Color.rgb(7, 0, 0));
			layout.addView(textView[i]);
		}
	}
}

3.3 啟動查看效果

四、創建自定義的View

在Android中,所有的UI界面都是由View類和ViewGroup類及其子類組成的。
其中View類是所有UI組件的基類,
ViewGroup類是容納這些UI組件的容器,其本身也是View類的子類。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM