首页 > 评测 > 评测列表 > MCU

Android Things之九——GUI交互

  • 作者:SATURN
  • 来源:21ic
  • [导读]
  • 接下来我们要开始一个简单的GUI交互程序,通过GUI界面设定要在LCD上显示的参数,然后点击按钮来完成LCD内容显示的调整。这个程序虽然结构上并不复杂,但是却与现代广告行业上常用的电子显示屏却有着非常密切的联系,可以说就是Android Things在现在电子广告屏上的真实应用。
  • iMX233-OlinuXino-MICRO
  • MY-iMX6UL开发套件
  • CY3280-CapSense-MBR3
  • PocketBeagle
  • CC3220SF LaunchPad (CC3220SF-LAUNCHXL)
  • Esquilo Air
  • A10-OlinuXino-LIME
  • CY8CKIT-040 PSoC 4000先锋开发套件

 GUI除了界面的直观之外,另外一个吸引人的地方在于其交互特性,通过屏幕、键盘及鼠标与Android Things设备进行交互,操作变得更人性化了!

欢迎加入Android Things交流群:452863046

接下来我们要开始一个简单的GUI交互程序,通过GUI界面设定要在LCD上显示的参数,然后点击按钮来完成LCD内容显示的调整。这个程序虽然结构上并不复杂,但是却与现代广告行业上常用的电子显示屏却有着非常密切的联系,可以说就是Android Things在现在电子广告屏上的真实应用。

最终的效果如下

rId21.png

GUI交互效果图

rId22.jpg

LCD显示的效果图

这个实例使用前面的LCD1602类来进行操作,与前面实例不同的是,这里使用的显示参数如背景、文字都是在GUI界面动态获取得到的。

先来看界面设计,Android Studio提供了图形化的界面设计工具,通过简单的拖放就可以制作出GUI界面,非常直观。

rId23.png

对于LCD1602来说,一个是设置其背光颜色,另外一个就是设置显示文字。通过RadioButton来选择背景颜色,通过EditText来设置要显示的文字。整个GUI界面只提供了这两个参数的选择,用户设置好相关的参数后,点击COMMIT按钮来提交设置参数,立即可以在LCD上看到设置的效果。

Layout对应的代码如下

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个设置颜色值的RadioButton放到一个RadioGroup里,可以实现排它性选择操作,如果选择红色,原来选择的其它按钮自动失效。

另外将EditText的最大长度设定为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来获取相关控件的实例,后面的代码需要引用相关的控制实例,所以先要找到这些实例。

接下来设置控件的事件监听。

对RadioGroup来说,监听的是setOnCheckedChangeListener事件,当用户点击其中包含的RadioButton时,就会触发该事件,通过检查选中的控件来记录用户选择的背景颜色。

在COMMIT按钮中,监听的是点击事件,一旦用户点击了提交按钮,从EditText中提取需要显示的文字,然后调用Lcd1602的setText方法来设置显示文字。

关于硬件连接,LCD使用的是I2C接口,RPI参考引脚如下

rId24.png

即使用的是BCM2及BCM3来连接,还有LCD是5V工作电压,不过在RPI3的3.3V下实测能正常工作。

Android Things的基本介绍到此告一段落了。

本系列文章介绍并使用了两个硬件平台:i.MX7D及RPI3,硬件差异极大,不过在Google的努力下,借助Android Things平台,在软件开发上并无差异,这也正是Android Things追求的目标:硬件差异交给Google,做为工程师的你,只需要设计好用户需求并将之付诸实现即可!

  • 本文系21ic原创,未经许可禁止转载!

网友评论