UI布局设计

UI设计

view

view和view的子类不在同一个包中

view常用属性

1. android:id = “@+id/ 具体的id”

2. android:background="@mipmap/ 图片名称" ------图片需在mipmap文件夹下

   android:background="#FF6600" ------后面跟的是十六进制颜色

3. android:padding

android:padding=“16dp” android:padding

ViewGroup

ViewGroup.LayoutParams

控制view的位置，高度，宽度

ViewGroup.MarginLayoutParams

控制外边距

UI组件的层次结构

控制UI界面

控制UI界面的几种方法

使用XML布局文件空间UI界面

1. 在Android应用的res/layout目录下编写XML布局文件

   

2. 在Activity中使用以下Java代码显示XML文件中布局的内容

实例

设置背景照片

设置文本的格式

另一种方法引用字符串

在Java代码中控制UI界面

所有的UI组件都可以通过new关键子生成，然后将UI组件添加到布局管理器当中实现用户界面

由于Android Studio中无法调用AppCompatActivity类，也有可能是我哪里出错了，所以把视频链接放在这这，方便日后查看

https://www.bilibili.com/video/BV1jW411375J?p=15

使用XML和Java代码混合控制UI界面

设置XML布局文件

设置Java代码

package com.example.uicontrol_java_xml;

import androidx.appcompat.app.AppCompatActivity;

import android.media.Image;
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.img1,R.mipmap.img2,R.mipmap.img3,R.mipmap.img4,
            R.mipmap.img5,R.mipmap.img6,R.mipmap.img7,R.mipmap.img8,
            R.mipmap.img9,R.mipmap.img10,R.mipmap.img11,R.mipmap.img12,
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);     //调用XML布局文件
        GridLayout layout = (GridLayout) findViewById(R.id.layout); //通过id来查找GridLayout
        for(int i=0;i<imagePath.length;i++){
            img[i] = new ImageView(MainActivity.this);
            img[i].setImageResource(imagePath[i]);               //设置每个img的图片
            img[i].setPadding(2,2,2,2);   //内边距
            ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(116,68); //设置图片的大小
            img[i].setLayoutParams(params);    //将图片的参数传给img
            layout.addView(img[i]);            //将img添加到XML布局页面中
        }
    }
}

实现

开发自定义的view

XML布局文件

java代码

package com.example.self_define_ui;

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 Pikaqiu extends View {     //alt+回车快速引入包
    public float bitmapX;
    public float bitmapY;
    public Pikaqiu(Context contetxt) {
        super(contetxt);               //抽象类需实例化
        bitmapX = 290;
        bitmapY = 130;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = new Paint();
        Bitmap bitmap = BitmapFactory.decodeResource(this.getResources(),R.mipmap.img02); //将要画的图片
        canvas.drawBitmap(bitmap,bitmapX,bitmapY,paint); //这里的坐标只能用float
        if(bitmap.isRecycled()){
            bitmap.recycle();
        }
    }
}

package com.example.self_define_ui;

import androidx.appcompat.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);   //添加自定义view
        Pikaqiu pikaqiu = new Pikaqiu(this);            //实例化皮卡丘
        pikaqiu.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                pikaqiu.bitmapX = event.getX();                 //获取皮卡丘的坐标
                pikaqiu.bitmapY = event.getY();
                pikaqiu.invalidate();                           //重画皮卡丘
                return true;
            }
        });
        frameLayout.addView(pikaqiu);                         //将皮卡丘添加到自定义view中
    }
}

运行成功

布局管理器

布局管理器分类

相对布局管理器

XML文件补充

RelativeLayout.LayoutParams

实例

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/img01"
    tools:context=".MainActivity">



    <TextView
        android:id="@+id/chx"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"            
        android:text="发布有Wideget的新版本，您现在就安装吗？"
        android:layout_centerInParent="true"
        android:textColor="@color/white"
        android:textSize="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/now"
        android:layout_toLeftOf="@+id/later"
        android:layout_below="@+id/chx"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="现在更新"
        android:background="@color/white">
    </Button>

    <Button
        android:id="@+id/later"
        android:layout_below="@+id/chx"
        android:layout_alignRight="@+id/chx"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="以后再说"
        android:background="@color/black">
    </Button>

</RelativeLayout>

实现

线性管理布局器

分类

垂直线性管理布局器一页只能显示一列，当元素个数多于一页时，其他内容将不显示；同样，水平线性管理布局器一页只能显示一行，当元素个数多于一页时，其他内容将不显

orientation 和 gravity

layout_weight

实例

**登录界面 **

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@mipmap/user"
        android:hint=" QQ号/微信号/电话号码"
        android:paddingBottom="20dp"
        ></EditText>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:hint=" 密码"
        android:drawableLeft="@mipmap/pass"
        android:paddingBottom="20dp"
        ></EditText>

    <Button
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_centerHorizontal="true"
        android:text="登录"></Button>

    <TextView
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:text="登录遇到问题？"
        android:paddingTop="10dp"
        ></TextView>

</LinearLayout>

实现

帧布局管理器

分类

前景图像即永远处在最上层的图像

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="@mipmap/backgroud"
    android:foregroundGravity="bottom|right"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:background="#FF0000"
        app:layout_constraintTop_toTopOf="parent" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!Hello World!Hello World!"
        android:background="#FFFF00"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</FrameLayout>

表格布局管理器

网格布局管理器

表格布局管理器和网格布局管理器的区别

分类

GridLayout.LayoutParams

布局管理器嵌套

布局管理器的嵌套原则

实例

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:context=".MainActivity">

        <ImageView
            android:id="@+id/imag1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_margin="10dp"
            android:src="@drawable/ic_launcher_background"></ImageView>

        <TextView
            android:id="@+id/text01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_toRightOf="@+id/imag1"
            android:text="雪绒花"
            android:textColor="#00BFFF"
            android:textSize="30dp"></TextView>

        <TextView
            android:id="@+id/text02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/text01"
            android:minLines="3"
            android:layout_toRightOf="@+id/imag1"
            android:text="祝我的亲人朋友们新年快乐！"
            android:textSize="20dp"></TextView>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/text02"
            android:layout_toRightOf="@+id/imag1"
            android:text="昨天"
            android:textSize="20dp"></TextView>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/editbox_dropdown_dark_frame"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/text02"
            />

    </RelativeLayout>

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
        <ImageView
            android:id="@+id/imag2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_margin="10dp"
            android:src="@drawable/ic_launcher_background"></ImageView>

        <TextView
            android:id="@+id/text03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_toRightOf="@+id/imag2"
            android:text="淡淡的印象"
            android:textColor="#00BFFF"
            android:textSize="30dp"></TextView>

        <TextView
            android:id="@+id/text04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/text03"
            android:minLines="3"
            android:layout_toRightOf="@+id/imag2"
            android:text="“十六进制颜色代码,在RGB颜色模式中,颜色由三个值表示,表示组件的强度,红色！"
            android:textSize="20dp"></TextView>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/text04"
            android:layout_toRightOf="@+id/imag2"
            android:text="昨天"
            android:textSize="20dp"></TextView>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/editbox_dropdown_dark_frame"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/text04"
            />


    </RelativeLayout>

</LinearLayout>