第七章 android-UI组件

一、本章目录

二、用户界面概述

1,用户界面简介

（1）系统和用户之间进行信息交换的媒介

2，设计手机用户界面应解决的问题

（1）需要界面设计和逻辑代码完全分离（布局和逻辑代码分开放）

（2）根据不同型号手机的屏幕解析度，尺寸，纵横比各不相同，自动调增界面上部分的位置和尺寸，避免因为屏幕信息的变化出现显示错误

（3）能合理的利用较小的屏幕显示空间，构造符合人机交互规律的用户界面，避免出现凌乱，拥挤的用户界面

（4）Android已经解决了前两个问题，是用xml文件描述用户界面：资源文件独立保存在资源文件夹中；对界面用户的描述非常灵活，允许不明确定义界面元素的位置和尺寸，仅声明界面元素的相对位置和粗略的尺寸

3，Android用户界面框架

（1）Android用户界面框架采用了MVC模式

　　1）提供处理用户输入的控制器（Controller）

　　2）显示用户界面和图像的视图（View），以及保存数据和代码的模型（Model）

　　_

　　M层：业务逻辑处理（例：数据库的存取操作，网络操作，复杂的算法，好耗时的任务都在M层处理）

　　V层：布局可以视为V层，显示Model层的数据结果

　　C层：在哪Android中，Activity处理用户交互问题，因此可以认为Activity是控制层，Activity读取V层的数据，控制用户输入，并向Model层发送数据请求

　　分析：

　　在MVC模式中我们发现，其实控制器Activity主要是起到解耦作用，将View视图和Model模型分离，虽然Activity起到交互作用，但是找Activity中有很多关于视图UI的显示代码，因此View视图和Activity控制器并不是完全分离的，也就是说一部分View视图和Contronller控制器Activity是绑定在一个类中的。

　　MVC的优点：

　　(1)耦合性低。所谓耦合性就是模块代码之间的关联程度。利用MVC框架使得View（视图）层和Model（模型）层可以很好的分离，这样就达到了解耦的目的，所以耦合性低，减少模块代码之间的相互影响。

　　(2)可扩展性好。由于耦合性低，添加需求，扩展代码就可以减少修改之前的代码，降低bug的出现率。

　　(3)模块职责划分明确。主要划分层M,V,C三个模块，利于代码的维护。

三、基本界面控件

1，界面控件简介

　　（1）Android中的界面控件分为定制控件和系统控件

　　　　1）定制控件：用户独立开发的控件，或通过继承并修改系统控件后所产生的心得控件。能够头为用户提供特殊的功能或与众不同的显示需求方式

　　　　2）系统控件：系统控件是Android系统提供给用户已经封装的用户界面，提供在应用程序开发过程中常见功能控件。系统控件更有利于帮助用户进行快速的开发，同时能够使Android系统中应用程序的界面保持一致性

　　（2）常见的系统控件：TextView，EditText，Button，ImagButton，checkbox，RadioButton，Spinner，ListView

2，TextView和EditText

TextView是一种用于显示字符串的控件

EditText则是用来输入和编辑字符串的控件

public class MainActivity extends AppCompatActivity {
    private TextView tv;
    private EditText et;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tv=(TextView)findViewById(R.id.tv);
        et=(EditText)findViewById(R.id.et);
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*"
    android:id="@+id/Tablelayout01">
<TextView
    android:id="@+id/tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="40dp"
    android:text="hello:"/>
<EditText
    android:id="@+id/et"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
</LinearLayout>

3，Button和ImageView

 

Button是一种按钮控件，用户能够在该控件上点击，并后引发相应的事件处理函数

 

ImageButton用以实现能够显示图像功能的控件按钮

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*"
    android:id="@+id/Tablelayout01">
<Button
    android:text="btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/plane"/>
</LinearLayout>

 

4，CheckBox和RadioButton

（1）CheckBox是一个同时可以选择多个选项的控件

（2）RadioButton则是仅可以选择一个选项的控件

（3）RadioGroup是RadioButton的承载体，程序运行时不可见，应用程序中可能包含一个或多个RadioGroup

（4）一个RadioGroup包含多个RadioButton，在每个RadioGroup中，用户仅能够选择其中一个RadioButton

***RadioButton必须配合RadioGroup使用***

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*"
    android:id="@+id/Tablelayout01">
<RadioGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="男"/>
    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="女"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:orientation="horizontal"
        android:layout_height="wrap_content">
        <CheckBox
            android:id="@+id/cb1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="唱歌"/>
        <CheckBox
            android:id="@+id/cb2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="跳舞"/>
        <CheckBox
            android:id="@+id/cb3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="打游戏"/>
    </LinearLayout>
</RadioGroup>
</LinearLayout>

 

 

 

 

 

5，ToggleButton（状态开关按钮）

（1）  ToggleButton有两种状态，开和关，通常用于切换程序中的某种状态。

（2） 常用属性：

　　　　1）android:checked 设置该按钮是否被选中

　　　　2）android:textOff 当按钮没被选中时显示的文本

　　　　3）android:textOn 当按钮被选中时显示的文本

关键代码：

 这三行代码必须设置：

checked：默认的选中状态

textoff：关闭状态的文本信息

texton：开启状态的文本信息

android:checked="true"
android:textOff="横向排列"
android:textOn="纵向排列"

 

完整代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*"
    android:id="@+id/Tablelayout01">
<ToggleButton
    android:id="@+id/tb1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:checked="true"
    android:textOff="横向排列"
    android:textOn="纵向排列"/>
    <LinearLayout
        android:id="@+id/ll"
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/bgtn1"
            android:text="1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/bgtn2"
            android:text="2"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/bgtn3"
            android:text="3"/>
    </LinearLayout>
</LinearLayout>

package com.example.administrator.hello;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.LinearLayout;
import android.widget.ToggleButton;

public class MainActivity extends AppCompatActivity {
    private ToggleButton tb;
    private LinearLayout ll;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.table);
        tb=(ToggleButton)findViewById(R.id.tb1);
        ll=(LinearLayout)findViewById(R.id.ll);
       tb.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                if(isChecked)
                {
                    //1表示垂直布局
                    ll.setOrientation(LinearLayout.VERTICAL);
                    tb.setChecked(true);
                }
                else
                {
                    ll.setOrientation(LinearLayout.HORIZONTAL);
                    tb.setChecked(false);
                }
            }
        });

    }
}

 

 

 

5，Spinner

6，ListView

（1）  ListView是一种用于垂直显示的列表控件，如果显示内容过多，则会出现垂直滚动条 

（2）ListView能够通过适配器将数据和自身绑定，在有限的屏幕上提供大量内容供用户选择,所以是经常使用的用户界面控件

（3）ListView支持点击事件处理，用户可以用少量的代码实现复杂的选择功能

 （4）学会使用两种适配器：ArrayAdapter、SimpleAdapter

　　　　　　监听器：OnItemClickLister

（5）作用：Android系统中显示列表的控件，每一个ListView都可以包含多个列表项

（6）数据适配器：连接数据源和视图界面的桥梁

（7）实现步骤：新建数据源---新建适配器---添加数据源到适配器

　　　　1）新建数组适配器

　　　　　　arrayAdapter= new ArrayAdapter（Context，Resource，List）；

　　　　　　参数信息（上下文信息，样式，数据源）

　　　　2）

A：ArrayAdapter

逻辑

package com.example.administrator.app1;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private ListView lv;
    private List<String> list;
    private ArrayAdapter aa;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lv=(ListView) findViewById(R.id.lv);
        //新建数据源
        list=new ArrayList<String>();
        for(int i=0;i<=20;i++)
        {
            list.add("listview子项"+i);
        }
        //新建适配器，将数据绑定到适配器
        aa=new ArrayAdapter(MainActivity.this, android.R.layout.simple_list_item_1,list);
        //试图加载适配器
        lv.setAdapter(aa);

    }
    }

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="*"
    android:layout_gravity="center"
    android:id="@+id/Tablelayout01">

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

 

布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:orientation="vertical"
    android:layout_height="wrap_content"
    >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/image"/>

</LinearLayout>

 

　　　　

<?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="com.example.administrator.app2.MainActivity">
  <GridView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/gv"
      android:horizontalSpacing="4dp"
      android:verticalSpacing="4dp"
      android:numColumns="4"
      >

  </GridView>
  <ImageView
      android:layout_width="150dp"
      android:layout_height="150dp"
      android:id="@+id/iv"

      />
</LinearLayout>

 

　　　

 

 

 

package com.example.administrator.app2;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Adapter;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.SimpleAdapter;

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

public class MainActivity extends AppCompatActivity {
private GridView gv;
    private ImageView iv;
    private int[] imgs={R.drawable.e1,R.drawable.e2,R.drawable.e3,R.drawable.e4,R.drawable.e5,R.drawable.e6,R.drawable.e7,R.drawable.e8};
    private List<Map<String,Object>> list;
   private SimpleAdapter simpleAdapter;
    private String[] str={"pics"};
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        gv=(GridView)findViewById(R.id.gv);
        iv=(ImageView)findViewById(R.id.iv);
        //定义事件源
        list=new ArrayList<>();

        for(int i=0;i<imgs.length;i++)
        {
            Map map= new HashMap<>();
            map.put("pics",imgs[i]);
            list.add(map);
        }
        //定义监听
        simpleAdapter=new SimpleAdapter(MainActivity.this,list,R.layout.i,str,new int[]{R.id.image});
        gv.setAdapter(simpleAdapter);
        gv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                iv.setImageResource(imgs[position]);
            }
        });
        //定义监听器
    }
}