Android：UI界面設計基礎知識總結（一）

大年初一，這里有我。

寒假過的很快，轉眼間已經荒廢了兩周的學習時間，現在想來仍然是慚愧不已。但時間已經流逝，我能做的就是抓緊當下，真正地投入到學習，投入到Android的學習中去。

現在學習主要是跟着視頻教程邊看邊學，現將學習到的零星知識點總結如下：

Android 系統中的所有 UI 類都是建立在 View 和 ViewGroup 兩個類的基礎之上的，所有 View 的子類稱為 Widget，所有 ViewGroup 的子類稱為 Layout。其中 ViewGroup 是 View 的子類。

View 是所有 UI 組件的基類，基本上所有的高級 UI 組件都是繼承 View 類實現的，如 TextView（文本框）、Button、List、EditText（編輯框）、Checkbox 等。一個 View 在屏幕占據一塊矩形區域，負責渲染這塊矩形區域，也可以處理這塊矩形區域發生的事件，並可以設置該區域是否可見以及獲取焦點等。

ViewGroup 是容納這些組件的容器，其本身也是從 View 中派生出來的，它繼承於 Android.view.View，功能就是裝載和管理下一層的 View 對象或 ViewGroup 對象，也就是說它是一個容納其他元素的容器，負責對添加進來的 View 和 ViewGroup 進行管理和布局。

Android常用的UI組件：參見鏈接

首先有一些屬性是通用的：

id=”@+id/name”創建一個id，系統會在R.java文件里生成對應的int型變量（R.java用來定義所有類型資源的索引）。 引用時：”@id/name”

orientation  水平方向或垂直方向

margin：外邊距

padding：內邊距

gravity：位置管理

 

 一、布局管理

Android SDK 定義了多種布局方式以方便用戶設計 UI。各種布局方式均為 ViewGroup 類的子類。

 

主要學習的是兩種最常用的布局，是線性布局（LinearLayout）和相對布局（RelativeLayout）。

1、線性布局（LinearLayout）

gravity與layout_gravity的區別

關於layput_margin和Padding屬性：

 

LinearLayout 又稱線性布局，該布局應該是 Android 視圖設計中最經常使用的布局。該布局可以使放入其中的組件以水平方式或者垂直方式整齊排列，通過 android:orientation 屬性指定具體的排列方式，通過 weight 屬性設置每個組件在布局中所占的比重。

其中weight屬性需要特別注意：weight代表的是權值，但此權值的分配是指剩余的空間（未被元素使用的空間按照權值比例分配），需要理解掌握。

2、相對布局（RelativeLayout）

RelativeLayout 又稱相對布局。從名稱上可以看出，這種布局方式是以一種讓組件以相對於容器或者相對於容器中的另一個組件的相對位置進行放置的布局方式。

父子之間：

 

兄弟之間：

 

設置文本框的最大行數（當然還有其他設置最大）：android:maxLines="1"二、TextView（文本框）

設置文本顯示方式：
end表示顯示不完省略號：android:ellipsize="end"
marquee表示顯示不完播放：android:ellipsize="marquee"
再加上這樣幾行可以循環播放
android:marqueeRepeatLimit="marquee_forever"
android:focusable="true"
android:focusableInTouchMode="true"
添加圖片，調整圖片邊距等
android:drawableRight="@drawable/name"//表示在文本右邊添加圖片
android:drawablePadding="5dp"

三、Button（按鈕）

按鈕學習的重點在改變按鈕的樣式和添加點擊事件。

改變樣式主要是將按鈕改為圓角，更加美觀。

可在drawable目錄下新建xml文件修改。

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#FF9900"/>
    <corners
        android:radius="5dp"/>
</shape>

再在要設置的按鈕添加背景屬性，設置為此xml文件即可。

同樣可以設置很多效果，比如未點擊和點擊的不同顏色區分。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#CC7A00"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
    <item android:state_pressed="false">
        <shape>

            <solid android:color="#FF9900"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
</selector>

再就是添加點擊事件，為普通按鈕添加單擊事件監聽器。兩種方式：

1、匿名內部類作為單擊事件監聽器，這里添加內容為顯示被點擊的按鈕內容。

        //按鈕3的點擊事件
        mBtn3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(ButtonActivity.this,"btn3我被點擊了",Toast.LENGTH_SHORT).show();
            }
        });

2、通過onClick屬性實現

① 在Activity中編寫一個包含View類型參數的方法。　　public void myClick(View view){}

② 將android:onClick屬性指定為 ① 內的方法名。　　　android:onClick="myClick"

擴展 ：ImageButton圖片按鈕

通過src屬性指定

四、EditText（編輯框）

 屬性

android:hint="請輸入用戶名"   ：輸入框提示信息

android:inputType="number"：規定輸入格式。

android:inputType="none"//輸入普通字符
android:inputType="text"//輸入普通字符
android:inputType="textCapCharacters"//輸入普通字符
android:inputType="textCapWords"//單詞首字母大小
android:inputType="textCapSentences"//僅第一個字母大小
android:inputType="textAutoCorrect"//前兩個自動完成
android:inputType="textAutoComplete"//前兩個自動完成
android:inputType="textMultiLine"//多行輸入
android:inputType="textImeMultiLine"//輸入法多行（不一定支持）
android:inputType="textNoSuggestions"//不提示
android:inputType="textUri"//URI格式
android:inputType="textEmailAddress"//電子郵件地址格式
android:inputType="textEmailSubject"//郵件主題格式
android:inputType="textShortMessage"//短消息格式
android:inputType="textLongMessage"//長消息格式
android:inputType="textPersonName"//人名格式
android:inputType="textPostalAddress"//郵政格式
android:inputType="textPassword"//密碼格式
android:inputType="textVisiblePassword"//密碼可見格式
android:inputType="textWebEditText"//作為網頁表單的文本格式
android:inputType="textFilter"//文本篩選格式
android:inputType="textPhonetic"//拼音輸入格式


//數值類型
android:inputType="number"//數字格式
android:inputType="numberSigned"//有符號數字格式
android:inputType="numberDecimal"//可以帶小數點的浮點格式
android:inputType="phone"//撥號鍵盤
android:inputType="datetime"//日期+時間格式
android:inputType="date"//日期鍵盤
android:inputType="time"//時間鍵盤

轉自CSDN：原文鏈接：https://blog.csdn.net/zhangphil/article/details/79970667

同樣也可在編輯框里添加圖片等操作，android:drawableLeft="@drawable/name"   。（與android:drawableStart相同）

同理：android:drawableBottom,android:drawableRight(android:drawableEnd)

android:drawablePadding:內邊距

android:lines：限制行數，超出時向上滾動。

getText():獲取編輯框內容

五、RadioButton（單選框）

RadioGroup 為單項選擇按鈕組，其中可以包含多個 RadioButton，即單選按鈕，它們共同為用戶提供一種多選一的選擇方式。在多個 RadioButton 被同一個 RadioGroup 包含的情況下，多個 RadioButton 之間自動形成互斥關系，僅有一個可以被選擇。

基本格式：

<RadioGroup>
　　<RadioButton/>
　　<RadioButton/>
　　.....
</RadioGroup>

RadioGroup中也有orientation屬性，即選擇水平或豎直方向排列RadioButton。

RadioButton中的屬性：

按鈕名稱：android:text="name"

表示被默認選中的選項：android:checked="true"
設置按鈕形狀：android:button="@null"（表示不設置）

可以自定義按鈕選中時的樣式：

同樣在drawable目錄下新建xml文件修改。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape>
            <solid android:color="#CC7A00"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
    <item android:state_checked="false">
        <shape>
            <stroke
                android:width="1dp"
                android:color="#CC7A00"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
</selector>

其中state_checked表示是否選中的狀態。

 

 效果：

這種效果時通過背景實現不同的狀態表示。

添加選中事件獲取選中的內容。

        //獲取單選按鈕組RadioGroup mRg1，設置選中監聽事件
        mRg1.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                //根據選中的checkedId值獲取內容
                RadioButton radioButton = group.findViewById(checkedId);
                //輸出
                Toast.makeText(RadioButtonActivity.this,radioButton.getText(),Toast.LENGTH_SHORT).show();
            }
        });

 

六、CheckBox（多選框）

大致與單選相同，介紹另一種通過自定義改變按鈕形狀實現按鈕樣式。

這里將   android:button="@drawable/bg_checkbox" 設置為自定義的。bg_checkbox同樣新建的xml文件。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_checked="false"
        android:drawable="@drawable/face"/>
    <item
        android:state_checked="true"
        android:drawable="@drawable/selection"/>
</selector>

七、ImageView（圖片視圖）

1、介紹屬性

background為背景，src為內容。

scaleType：覆蓋方式，常見屬性值有：

　　fixXY：撐滿控件，寬高比可能發生改變。

　　fitCenter：保持寬高比縮放，直至能夠完全顯示。

　　centerCrop：保持寬高比縮放，直至能夠完全覆蓋控件，剪裁顯示。

2、加載網絡圖片

首先使用第三方的庫，這里選擇的是Github上的glide庫

 https://github.com/bumptech/glide

將其添加到Android Studio中的build.gradle目錄下。

 

 同步好后在activity的Java代碼部分添加代碼

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_image_view);
        mIv2 = findViewById(R.id.iv_2);
        //加載一張網絡圖片
        Glide.with(this).load("http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg").into(mIv2);
    }

同時需要在AndroidManifest.xml中聲明使用網絡權限。

添加一行代碼：  <uses-permission android:name="android.permission.INTERNET"/>  即可。

 八、日期選擇器，時間選擇器，計時器

1、DatePicker（日期選擇器）

即可顯示日期，可以添加事件接收選擇的日期。

    int year,month,day;
    DatePicker datePicker;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_date_pcker);
        //日期選擇器的id為datepicker
        datePicker = findViewById(R.id.datepicker);
        Calendar calendar = Calendar.getInstance();
        //初始化
        year = calendar.get(calendar.YEAR);
        month = calendar.get(calendar.MONTH);
        day = calendar.get(calendar.DAY_OF_MONTH);
        //添加選擇事件
        datePicker.init(year, month, day, new DatePicker.OnDateChangedListener() {
            @Override
            public void onDateChanged(DatePicker view, int year, int monthOfYear, int dayOfMonth) {
                DatePickerActivity.this.year = year;
                DatePickerActivity.this.month = monthOfYear;
                DatePickerActivity.this.day = dayOfMonth;
                show(year,month,day);
            }
        });
    }

    private void show(int year,int month,int day) {
        String str = year+"年"+(month+1)+"月"+day+"日";
        Toast.makeText(DatePickerActivity.this,str,Toast.LENGTH_SHORT).show();
    }

2、TimePicker（時間選擇器）

顯示時間，添加一個監聽器。

        //timepicker為時間選擇器的id
        TimePicker tp = findViewById(R.id.timepicker);
        tp.setIs24HourView(true);//采用24小時支持
        //時間改變的監聽器
        tp.setOnTimeChangedListener(new TimePicker.OnTimeChangedListener() {
            @Override
            public void onTimeChanged(TimePicker view, int hourOfDay, int minute) {
                String str = hourOfDay+"時"+minute+"分";
                Toast.makeText(TimePickerActivity.this,str,Toast.LENGTH_SHORT).show();
            }
        });

3、Chronometer（計時器）

屬性通常設置 android:format="已用時間：%s" 表示用時分秒的格式計時。

並通常需要為計時器設定四個方法。

① setBase()：設置計時器的起始時間

② setFormat()：設置顯示時間的格式

③ start()：指定開始計時

④ stop()：指定結束計時

    Chronometer ch ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_chronometer);
        ch = findViewById(R.id.chromometer);
        //獲取當前的系統時間
        ch.setBase(SystemClock.elapsedRealtime());
        //設置時間格式
        ch.setFormat("%s");
        //開啟計時器
        ch.start();
        //添加監聽器，計時器改變時觸發
        ch.setOnChronometerTickListener(new Chronometer.OnChronometerTickListener() {
            @Override
            public void onChronometerTick(Chronometer chronometer) {
                if(SystemClock.elapsedRealtime()-ch.getBase()>=60000){//如果大於60s，停止計時
                    ch.stop();
                }
            }
        });
    }

綜上，第一部分總結。