文章目錄

• 1. 使用XML布局文件控制UI界面(推薦)
• 2. 在Java代碼中控制UI界面
• 3. 使用XML和Java代碼混合控制UI界面
• 4. 開發自定義的View

1. 使用XML布局文件控制UI界面(推薦)

步驟：

（1）在Android應用的res/layout目錄下編寫XML布局文件

（2）在Activity中使用以下Java代碼顯示XML文件中的布局內容

setContentView(R.layout.activity_main)

實例：使用XML布局文件實現游戲的開始界面

（1）添加名為xmllayout的Module

（2）將背景圖片bg.png復制到mipmap目錄下

（3）activity_main.xml文件和strings.xml文件

（4）運行結果

出現如下錯誤：

在xmllayout對應的build.gradle文件中添加如下圖的兩行代碼

再次運行后，成功運行

2. 在Java代碼中控制UI界面

實例：實現游戲的進入界面

（1）添加名為javalayout的Module

（2）創建成功名為javalayout的Module后，刪除layout目錄下的activity_main.xml文件

（3）修改MainActivity文件如下：

package com.zz; import android.content.DialogInterface; import android.graphics.Color; import android.support.v7.app.AlertDialog; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.util.TypedValue; import android.view.Gravity; import android.view.View; import android.view.ViewGroup; import android.widget.FrameLayout; import android.widget.TextView;public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);FrameLayout frameLayout=new FrameLayout(this); //創建布局管理器對象frameLayout.setBackgroundResource(R.mipmap.bg); //設置背景setContentView(frameLayout); //添加布局管理器TextView text1 = new TextView(this); //創建文本框組件text1.setText("開始游戲"); //設置顯示文本text1.setTextSize(TypedValue.COMPLEX_UNIT_SP,18); //設置字體大小text1.setTextColor(Color.rgb(255,222,173)); //設置字體顏色FrameLayout.LayoutParams params=new FrameLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT); //設置布局參數，布局高度和布局寬度params.gravity= Gravity.CENTER; //設置居中text1.setLayoutParams(params); //為text1設置布局參數//為文本框組件設置一個單擊事件text1.setOnClickListener(new View.OnClickListener(){@Overridepublic void onClick(View v) {new AlertDialog.Builder(MainActivity.this).setTitle("系統提示").setMessage("游戲有風險，進入需謹慎，真的要進入嗎？").setPositiveButton("確定",new DialogInterface.OnClickListener(){@Overridepublic void onClick(DialogInterface dialog, int which) {Log.i("桌面臺球","進入游戲");}}).setNegativeButton("退出",new DialogInterface.OnClickListener(){@Overridepublic void onClick(DialogInterface dialog, int which) {Log.i("桌面臺球","退出游戲");finish();}}).show();}});frameLayout.addView(text1); //將文本框組件添加到布局管理器中} }

（4）運行結果：

點擊開始運行按鈕

3. 使用XML和Java代碼混合控制UI界面

實例：實現QQ相冊照片列表界面

（1）添加名為xmljavalayout的Module，并把12張圖片資源復制到mipmap目錄中

（2）修改activity_main.xml文件如下：

<?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/layout"android:orientation="horizontal"android:rowCount="3"android:columnCount="4"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="16dp"android:paddingLeft="16dp"android:paddingRight="16dp"android:paddingTop="16dp"tools:context="com.zz.MainActivity"> </GridLayout>

（3）修改MainActivity.java文件如下：

package com.zz; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.ViewGroup; import android.widget.GridLayout; import android.widget.ImageView;public class MainActivity extends AppCompatActivity {private ImageView[] img=new ImageView[12]; //創建保存圖形視圖的數組，放置12張圖片private int[] imagePath=new int[]{R.mipmap.img01,R.mipmap.img02,R.mipmap.img03,R.mipmap.img04,R.mipmap.img05,R.mipmap.img06,R.mipmap.img07,R.mipmap.img08,R.mipmap.img09,R.mipmap.img10,R.mipmap.img11,R.mipmap.img12}; //要訪問的圖片資源@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);GridLayout layout=(GridLayout) findViewById(R.id.layout); //獲取網格布局管理器對象layout，for(int i=0;i<imagePath.length;i++){img[i]=new ImageView(MainActivity.this); //創建ImageView組件img[i].setImageResource(imagePath[i]); //設置要顯示的圖片img[i].setPadding(2,2,2,2); //設置內邊距ViewGroup.LayoutParams params=new ViewGroup.LayoutParams(116,68); //設置圖片的寬度和高度img[i].setLayoutParams(params);layout.addView(img[i]); //把圖片添加到布局管理器中}} }

（4）運行結果：

4. 開發自定義的View

實例：實現跟隨手指的兔子

（1）添加名為myview的Module，并把背景圖片和兔子圖片復制到mipmap目錄中

（2）修改activity_main.xml文件：

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="16dp"android:paddingLeft="16dp"android:paddingRight="16dp"android:paddingTop="16dp"android:background="@mipmap/background"android:id="@+id/mylayout"tools:context="com.zz.MainActivity"></FrameLayout>

（3）在java/com.zz目錄下創建RabbitView類

package com.zz;import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Paint; import android.view.View;public class RabbitView extends View{//小兔子橫坐標public float bitmapX;//小兔子縱坐標public float bitmapY;//在構造方法中設置兔子初始位置public RabbitView(Context context) {super(context);bitmapX = 290;bitmapY = 130;}//重寫一個方法：鼠標右鍵-->Generate-->Override Methods(覆蓋方法)-->直接輸入就可查找//根據小兔子的圖片來繪制小兔子@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);//定義畫筆對象Paint paint = new Paint();//定義繪圖對象Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(),R.mipmap.rabbit);//需要指定四個參數：1.創建的bitmap對象 2.x坐標 3.y坐標 4.畫筆對象canvas.drawBitmap(bitmap,bitmapX,bitmapY,paint);//強制回收圖片if(bitmap.isRecycled()){bitmap.recycle();}} }

（4）修改MainActivity.java文件：

package com.zz;import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.widget.FrameLayout;public class MainActivity extends AppCompatActivity {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//獲取布局管理器FrameLayout frameLayout = (FrameLayout)findViewById(R.id.mylayout);//實例化兔子對象final RabbitView rabbit = new RabbitView(this);//為小兔子設置觸摸事件監聽器,參數用匿名內部類來指定rabbit.setOnTouchListener(new View.OnTouchListener(){@Overridepublic boolean onTouch(View view, MotionEvent motionEvent) {rabbit.bitmapX = motionEvent.getX();rabbit.bitmapY = motionEvent.getY();//重繪這只兔子rabbit.invalidate();return true;}});frameLayout.addView(rabbit);} }

（5）運行結果

可以看到兔子圖片隨著鼠標位置的移動而移動

總結

以上是生活随笔為你收集整理的Android(五)——控制UI界面的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。