第七章 android-UI組件

1、本章目錄

2、用戶界面概述

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三個模塊，利於代碼的維護。

3、基本界面控件

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]);
            }
        });
        //定義監聽器
    }
}