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按钮事件——常用监听器

什么是监听器

1. 为组件设置监听器
2. 触发该监听器的动作（用户）
3. 要执行的代码

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

1. 匿名内部类作为单击事件监听器
2. 通过onClick属性实现

2.1.1.1事件监听器步骤：

1. XML中设置组件ID

2. 创建组件对象，findViewById（R.id.【string】）初始化

3. 组件对象调用setOnClickListener(new View.OnClickListener(){

   @override

   ……

   })

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

2.1.1.2onClick属性步骤：

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

2.2图片按钮ImageButton组件

相同点：

• 都可通过单机出发onClick事件

不同点：

• ImageButton没有text属性

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

2.3单选按钮RadioButton组件

参考文档docs

搭配标签嵌套使用

2.3.1添加选择更改事件

setOnCheckedChangeListener(new RadioGroup)

1. 获取RadioGroup对象调用
2. 对象调用setOnCheckedChangeListener方法
3. new一个RadioGroup.OnCheckedChangeListener listener
4. 重写抽象方法，此处备注匿名内部类的详解连接
5. 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()方法设置进度条不显示，结束

知识点：

1. 标签
2. 设置加载时全屏显示，getWindow()
3. 消息处理作为组件更新子线程
4. 创建线程模拟进度处理程序

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

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

3.2列表视图ListView

例如：微信朋友目录

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

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代码中

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

4.通用组件

4.1选项卡

参考文档docs

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