UI界面设计-Android

UI 界面设计

一、基本组件

1.文本类组件

特点是在界面中显示文本信息

1.1 TextView

参考文档docs

属性	释义	说明
textSize	文字大小属性	单位：sp
textColor	文字颜色	属性值：1.可在AS左侧预览显示2.点击预览图标，可以调整颜色显示
maxWidth	最大宽度	单位：dp
layout_marginBottom	底部外边距	应该是布局管理器的属性值
layout_width	一般为wrap_content	ViewGroup.LayoutParams属性
layout_height	一般为wrap_content

1.2 EditText（是textview组件的子类）

参考文档docs

属性	释义	说明
layout_width	宽	一般为match_parent
layout_height	高	一般为wrap_content
hint	提示信息	EditText非常常用
inputType	设置密码textPassword-数字-日期等	docs
drawableLeft	文字左侧绘制图像	docs
android:drawablePadding	绘制图像与文字的间距	搭配使用
lines	编辑框的行数，特别的：超过行数的滚动显示	docs

2.按钮类组件

2.1普通按钮组件Button（是textview组件的子类）

参考文档docs

2.1.1按钮事件——常用监听器

什么是监听器

为组件设置监听器

触发该监听器的动作（用户）

要执行的代码

AS中两种添加事件监听器的方法

匿名内部类作为单击事件监听器

通过onClick属性实现

2.1.1.1事件监听器步骤：

XML中设置组件ID
创建组件对象，findViewById（R.id.【string】）初始化
组件对象调用setOnClickListener(new View.OnClickListener(){

@override

……

})
例如添加消息提示框Toast.makeText(this, “单机了按钮”, Toast.LENGTH_SHORT).show();

2.1.1.2onClick属性步骤：

在Activity中编写一个包含View类型形式参数的方法
android：onClick=“步骤1的方法名”

2.2图片按钮ImageButton组件

相同点：

都可通过单机出发onClick事件

不同点：

ImageButton没有text属性

属性	释义	说明
src	图片资源属性	@mipmap/文件下
background	背景	设置背景值为“#0000”，背景全透明，避免灰色

2.3单选按钮RadioButton组件

参考文档docs

搭配标签嵌套使用

2.3.1添加选择更改事件

setOnCheckedChangeListener(new RadioGroup)

获取RadioGroup对象调用
对象调用setOnCheckedChangeListener方法
new一个RadioGroup.OnCheckedChangeListener listener
重写抽象方法，此处备注匿名内部类的详解连接
Toast提示框

2.4复选框CheckBox组件

参考文档docs

复选功能

方框图形

Button的子类

不需要像RaidoGroup一样利用标签包裹

3.日期时间类组件

日期选择器DatePicker——参考文档

时间选择器TimePicker——参考文档

计时器Chronometer——参考文档

二、高级组件

1.进度条类组件

1.1 ProgressBar

参考文档docs

实时精度——横向进度条(Determinate Progress)

正在加载——圆形进度条(Indeterminate Progress)

属性	释义	说明
style	进度条类型	六种Widget.ProgressBar.Horizontal；Widget.ProgressBar.Small；Widget.ProgressBar.Large；Widget.ProgressBar.Large；Widget.ProgressBar.Small.Inverse
		或者主题属性值：android：attr/progressBarStyleHorizontal
max	最大值	定义一个最大值，例如：100
progress	进度	例如：50

线程——流程图
步骤一：判断是否完成，否转步骤二，是转步骤三；
步骤二：调用setProgress()方法更新进度，返回步骤一
步骤三：调用setVisibility()方法设置进度条不显示，结束

知识点：

标签

设置加载时全屏显示，getWindow()

消息处理作为组件更新子线程

创建线程模拟进度处理程序

Layout文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@mipmap/bg"
    tools:context=".MainActivity">
    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:ignore="MissingConstraints"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:max="100"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="30dp" />

</RelativeLayout>

MainActivity.java

package com.ws.progressbardemo;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.WindowManager;
import android.widget.ProgressBar;
import android.widget.Toast;

public class MainActivity extends Activity {
    private ProgressBar progressBar;
    private int mProgress=0;
    private Handler mhandler;
    @SuppressLint("HandlerLeak")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);//设置全屏显示，手机顶端的信号等状态栏目都取消
        progressBar = findViewById(R.id.progressBar);
        mhandler = new Handler(){
            @Override
            public void handleMessage(@NonNull Message msg) {
                //处理消息操作
                if(msg.what == 0x111){
                    progressBar.setProgress(mProgress);
                }else{
                    Toast.makeText(MainActivity.this, "耗时操作已经完成", Toast.LENGTH_SHORT).show();
                    progressBar.setVisibility(View.GONE);
                }
            }
        };
        //创建一个现程模拟耗时操作
        new Thread(new Runnable() {
            @Override
            public void run() {
                while (true){
                    mProgress = doWork();
                    Message m = new Message();
                    if(mProgress<100){
                        m.what = 0x111;//自定义的消息代码,//耗时操作未完成
                        mhandler.sendMessage(m);
                    }else{
                        m.what = 0x110;//耗时操作完成
                        mhandler.sendMessage(m);
                        break;
                    }
                }
            }
            private int doWork(){
                mProgress += Math.random()*10;
                try {
                    Thread.sleep(200);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                return mProgress;
            }
        }).start();
    }
}

1.2 SeekBar拖动条

参考文档docs——是ProgressBar的子类

属性	释义	说明
android:thumb	在搜索栏上绘制拇指。	可以以“ ” 形式引用另一个资源，也可以以“ ” 形式引用主题属性。@[+][package:]type/name?[package:]type/name

1.3RatingBar等级评论条

参考文档docs——是ProgressBar的子类

属性	释义	说明
android:numStars	The number of stars (or rating items) to show.	星星个数
android:rating	The rating to set by default.
android:stepSize	The step size of the rating.	默认是0.5颗星星
android:isIndicator	只能看，不能修改

2.图像类组件

主要用于显示图片

2.1 ImageView

参考文档docs

属性	释义	说明
android:src	Sets a drawable as the content of this ImageView.	@drawable或@mipmap
android:scaleType	尺度类型	默认是等比例缩放
android:adjustViewBounds	Set this to true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable.	设置为true,调整组件包裹自身内容，此外设置maxWidth和maxHeight，则图片会不超过最大长宽的前提下完美包裹图片内容
android:tint	着色	类似蒙版

2.2图像切换器ImageSwitcher

参考文档docs

图像切换+动画效果

`setInAnimation(Animation inAnimation)`

2.3网格视图GridView

参考文档docs

1.添加图片资源,不能通过某个属性(src)

2.适配器Adapter：连接后端数据与前端显示的接口，数据与UI组件之间的重要纽带

3.其中，数据源可以是ArrayList和Cursor

四种适配器：

ArrayAdapter
SimpleAdapter
SimpleCursorAdapter：数据库内容以列表形式展现出来
BaseAdapter：可定制性强

注意：创建适配器挺复杂的

3.列表类组件

3.1下拉列表Spinner

参考文档Docs

可通过android:entries属性和XML数组资源进行指定下拉选项
指定适配器 setAdapter（）方法

3.2列表视图ListView

例如：微信朋友目录

添加ListView组件
创建一个LinearLayout布局文件，设置ImageView和TextView标签参数
Avtivity下创建适配器，传递参数
设置适配器，并状态栏输出

Main_Activity.xml

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/imageView"
        android:paddingTop="10dp"
        android:paddingBottom="10dp"
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        android:maxWidth="80dp"
        android:maxHeight="80dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:layout_gravity="center"/>

</LinearLayout>

MainActivity.java

package com.ws.listview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.ListIterator;
import java.util.Map;
import java.util.SimpleTimeZone;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        int[] imageid = new int[]{R.drawable.img01,R.drawable.img02,R.drawable.img03,R.drawable.img04,
                R.drawable.img05,R.drawable.img06,R.drawable.img07,R.drawable.img08,
                R.drawable.img09,R.drawable.img10,R.drawable.img11,R.drawable.img12};
        String[] titleid = new String[]{"汪一","汪二","汪三","汪4","汪5","汪6","汪7","汪8","汪9","汪10","汪11","汪12"};
        List<Map<String,Object>> listitem = new ArrayList<>();
        for (int i =0;i<imageid.length;i++){
            Map<String,Object> map = new HashMap<>();
            map.put("image",imageid[i]);
            map.put("title",titleid[i]);
            listitem.add(map);
        }
        SimpleAdapter simpleAdapter = new SimpleAdapter(this,listitem,R.layout.main,
                new String[]{"image","title"},new int[]{R.id.imageView,R.id.textView});
        ListView listView = findViewById(R.id.listView);
        listView.setAdapter(simpleAdapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Map<String,Object> map = (Map<String, Object>) parent.getItemAtPosition(position);
                Toast.makeText(MainActivity.this,  map.get("title").toString(), Toast.LENGTH_LONG).show();
            }
        });

    }
}

3.3滚动视图ScrollView/HorizontalScrollView——非常常用

纵向参考文档docs，横向参考文档docs，两种添加滚动视图的方法：XML中和Java代码中

组件正常添加，但是要注意不能包含多个子组件，因此可以采用布局管理器嵌套使用
Java代码中：
- 使用构造方法ScrollView创建一个滚动视图对象
- 应用addview方法添加组件到滚动视图
- 将滚动视图添加到布局管理器中

4.通用组件

4.1选项卡

参考文档docs

在布局文件中添加TabHost、TabWidget和TabContent组件
编写个标签页的XML布局文件
获取并初始化TabHost组件
weiTabHost对象添加标签页

来源：CSDN

作者：蚩尤克里里帅

链接：https://blog.csdn.net/qq_38787108/article/details/104121521

标签

界面设计

前端组件

match

Android UI界面设计——附参考文档

UI 界面设计

一、基本组件

1.文本类组件

1.1 TextView

参考文档docs

1.2 EditText（是textview组件的子类）

2.按钮类组件

2.1普通按钮组件Button（是textview组件的子类）

2.1.1按钮事件——常用监听器

2.2图片按钮ImageButton组件

2.3单选按钮RadioButton组件

2.3.1添加选择更改事件

2.4复选框CheckBox组件

3.日期时间类组件

二、高级组件

1.进度条类组件

1.1 ProgressBar

1.2 SeekBar拖动条

1.3RatingBar等级评论条

2.图像类组件

2.1 ImageView

2.2图像切换器ImageSwitcher

2.3网格视图GridView

3.列表类组件

3.1下拉列表Spinner

3.2列表视图ListView

3.3滚动视图ScrollView/HorizontalScrollView——非常常用

4.通用组件

4.1选项卡