第七章 android-UI組件

1、本章目錄

2、用戶界面概述

1,用戶界面簡介

(1)系統和用戶之間進行信息交換的媒介java

2,設計手機用戶界面應解決的問題

(1)須要界面設計和邏輯代碼徹底分離(佈局和邏輯代碼分開放)android

(2)根據不一樣型號手機的屏幕解析度,尺寸,縱橫比各不相同,自動調增界面上部分的位置和尺寸,避免由於屏幕信息的變化出現顯示錯誤算法

(3)能合理的利用較小的屏幕顯示空間,構造符合人機交互規律的用戶界面,避免出現凌亂,擁擠的用戶界面數據庫

(4)Android已經解決了前兩個問題,是用xml文件描述用戶界面:資源文件獨立保存在資源文件夾中;對界面用戶的描述很是靈活,容許不明肯定義界面元素的位置和尺寸,僅聲明界面元素的相對位置和粗略的尺寸數組

3,Android用戶界面框架

1)Android用戶界面框架採用了MVC模式網絡

  1)提供處理用戶輸入的控制器(Controller)app

  2)顯示用戶界面和圖像的視圖(View),以及保存數據和代碼的模型(Model)框架

  _ide

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