首頁 > 評測 > Android Things之九——GUI交互
Android Things之九——GUI交互
- [導(dǎo)讀]
- 接下來我們要開始一個簡單的GUI交互程序，通過GUI界面設(shè)定要在LCD上顯示的參數(shù)，然后點(diǎn)擊按鈕來完成LCD內(nèi)容顯示的調(diào)整。這個程序雖然結(jié)構(gòu)上并不復(fù)雜，但是卻與現(xiàn)代廣告行業(yè)上常用的電子顯示屏卻有著非常密切的聯(lián)系，可以說就是Android Things在現(xiàn)在電子廣告屏上的真實應(yīng)用。
GUI除了界面的直觀之外，另外一個吸引人的地方在于其交互特性，通過屏幕、鍵盤及鼠標(biāo)與Android Things設(shè)備進(jìn)行交互，操作變得更人性化了!
歡迎加入Android Things交流群：452863046
接下來我們要開始一個簡單的GUI交互程序，通過GUI界面設(shè)定要在LCD上顯示的參數(shù)，然后點(diǎn)擊按鈕來完成LCD內(nèi)容顯示的調(diào)整。這個程序雖然結(jié)構(gòu)上并不復(fù)雜，但是卻與現(xiàn)代廣告行業(yè)上常用的電子顯示屏卻有著非常密切的聯(lián)系，可以說就是Android Things在現(xiàn)在電子廣告屏上的真實應(yīng)用。
最終的效果如下
GUI交互效果圖
LCD顯示的效果圖
這個實例使用前面的LCD1602類來進(jìn)行操作，與前面實例不同的是，這里使用的顯示參數(shù)如背景、文字都是在GUI界面動態(tài)獲取得到的。
先來看界面設(shè)計，Android Studio提供了圖形化的界面設(shè)計工具，通過簡單的拖放就可以制作出GUI界面，非常直觀。
對于LCD1602來說，一個是設(shè)置其背光顏色，另外一個就是設(shè)置顯示文字。通過RadioButton來選擇背景顏色，通過EditText來設(shè)置要顯示的文字。整個GUI界面只提供了這兩個參數(shù)的選擇，用戶設(shè)置好相關(guān)的參數(shù)后，點(diǎn)擊COMMIT按鈕來提交設(shè)置參數(shù)，立即可以在LCD上看到設(shè)置的效果。
Layout對應(yīng)的代碼如下
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="Lcd Demo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
android:id="@+id/linearLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Background" />
android:id="@+id/radioGroup"
android:layout_width="match_parent"
android:layout_height="match_parent">
android:id="@+id/redButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Red" />
android:id="@+id/greenButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Green" />
android:id="@+id/blueButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Blue" />
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="Message"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/linearLayout" />
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="commit"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/line2" />
android:id="@+id/line1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:ems="10"
android:hint="first line"
android:inputType="text"
android:maxLength="16"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView2" />
android:id="@+id/line2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:ems="10"
android:hint="second line"
android:inputType="text"
android:maxLength="16"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/line1" />
將3個設(shè)置顏色值的RadioButton放到一個RadioGroup里，可以實現(xiàn)排它性選擇操作，如果選擇紅色，原來選擇的其它按鈕自動失效。
另外將EditText的最大長度設(shè)定為16，這樣用戶就只能最多輸入16個字符。
主要的代碼，除了前面介紹的Lcd1602.java類之外，參考如下
public class MainActivity extends Activity {
private Lcd1602 mLcd1602;
private Button mButton;
private RadioGroup mRadioGroup;
private EditText mLine1;
private EditText mLine2;
private enum BackColor {
RED, GREEN, BLUE
};
BackColor mBackColor = BackColor.RED;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mButton = findViewById(R.id.button);
mRadioGroup = findViewById(R.id.radioGroup);
mLine1 = findViewById(R.id.line1);
mLine2 = findViewById(R.id.line2);
mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup radioGroup, int i) {
switch (radioGroup.getCheckedRadioButtonId()) {
case R.id.redButton:
mBackColor = BackColor.RED;
break;
case R.id.greenButton:
mBackColor = BackColor.GREEN;
break;
case R.id.blueButton:
mBackColor = BackColor.BLUE;
break;
default:
}
}
});
mButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if(mBackColor == BackColor.RED) {
try {
mLcd1602.setColor(255, 0, 0);
} catch (IOException e) {
e.printStackTrace();
}
} else if(mBackColor == BackColor.GREEN) {
try {
mLcd1602.setColor(0, 255, 0);
} catch (IOException e) {
e.printStackTrace();
}
} else {
try {
mLcd1602.setColor(0, 0, 255);
} catch (IOException e) {
e.printStackTrace();
}
}
try {
mLcd1602.setText(0, 0, mLine1.getText().toString().getBytes());
mLcd1602.setText(1, 0, mLine2.getText().toString().getBytes());
} catch (IOException e) {
e.printStackTrace();
}
}
});
mLcd1602 = new Lcd1602();
mLcd1602.setup();
}
}
首先，通過findViewById來獲取相關(guān)控件的實例，后面的代碼需要引用相關(guān)的控制實例，所以先要找到這些實例。
接下來設(shè)置控件的事件監(jiān)聽。
對RadioGroup來說，監(jiān)聽的是setOnCheckedChangeListener事件，當(dāng)用戶點(diǎn)擊其中包含的RadioButton時，就會觸發(fā)該事件，通過檢查選中的控件來記錄用戶選擇的背景顏色。
在COMMIT按鈕中，監(jiān)聽的是點(diǎn)擊事件，一旦用戶點(diǎn)擊了提交按鈕，從EditText中提取需要顯示的文字，然后調(diào)用Lcd1602的setText方法來設(shè)置顯示文字。
關(guān)于硬件連接，LCD使用的是I2C接口，RPI參考引腳如下
即使用的是BCM2及BCM3來連接，還有LCD是5V工作電壓，不過在RPI3的3.3V下實測能正常工作。
Android Things的基本介紹到此告一段落了。
本系列文章介紹并使用了兩個硬件平臺：i.MX7D及RPI3，硬件差異極大，不過在Google的努力下，借助Android Things平臺，在軟件開發(fā)上并無差異，這也正是Android Things追求的目標(biāo)：硬件差異交給Google，做為工程師的你，只需要設(shè)計好用戶需求并將之付諸實現(xiàn)即可!
-
- 本文系21ic原創(chuàng)，未經(jīng)許可禁止轉(zhuǎn)載!
網(wǎng)友評論
- 聯(lián)系人:巧克力娃娃
- 郵箱:board@21ic.com
- 我要投稿
-
歡迎入駐，開放投稿
-
人均百萬？英偉達(dá)中國員工收入曝光！ 2024-08-29
-
《黑神話：悟空》玩家硬盤升級攻略：提升游戲體驗，暢享3A大作 2024-08-29
-
數(shù)睿數(shù)據(jù)參加《系統(tǒng)與軟件工程 低代碼開發(fā)平臺通用技術(shù)要求》國家標(biāo)準(zhǔn)編制 2024-08-29
- NRF52810藍(lán)牙數(shù)字耳機(jī)找人定制
預(yù)算：￥30005天前
- 125KW模塊式PCS軟硬件外包開發(fā)
預(yù)算：￥1100000015小時前
- 12V汽車啟動電源項目BMS設(shè)計
預(yù)算：￥50000023小時前
- 數(shù)據(jù)可視化軟件 開發(fā)
預(yù)算：￥5000023小時前
- PLC項目調(diào)試修改
預(yù)算：￥100001天前
- 起動電機(jī)控制器開發(fā)
預(yù)算：￥1100001天前
