Android(五)——控制UI界面的方法

原创 于 2020-12-17 16:30:56 发布 · 968 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文详细介绍了Android中控制UI界面的四种方法：推荐使用XML布局文件，纯Java代码实现，XML与Java混合控制，以及开发自定义View。通过实例展示了XML布局的创建与显示、Java代码动态构建界面、混合方式实现QQ相册照片列表，以及自定义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 {

    @Override
    protected 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(){

            @Override
            public void onClick(View v) {
                new AlertDialog.Builder(MainActivity.this).setTitle("系统提示")
                        .setMessage("游戏有风险，进入需谨慎，真的要进入吗？")
                        .setPositiveButton("确定",
                                new DialogInterface.OnClickListener(){

                                    @Override
                                    public void onClick(DialogInterface dialog, int which) {
                                        Log.i("桌面台球","进入游戏");
                                    }
                                }).setNegativeButton("退出",new DialogInterface.OnClickListener(){
                    @Override
                    public 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
    };   //要访问的图片资源

    @Override
    protected 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(覆盖方法)-->直接输入就可查找
    //根据小兔子的图片来绘制小兔子
    @Override
    protected 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 {

    @Override
    protected 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(){
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                rabbit.bitmapX = motionEvent.getX();
                rabbit.bitmapY = motionEvent.getY();
                //重绘这只兔子
                rabbit.invalidate();
                return true;
            }
        });
        frameLayout.addView(rabbit);
    }
}

（5）运行结果

在这里插入图片描述
在这里插入图片描述
可以看到兔子图片随着鼠标位置的移动而移动

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值