首页 > 评测 > Android Things之九——GUI交互

Android Things之九——GUI交互

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

 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原创，未经许可禁止转载!
 点赞()

网友评论

立 即 购 买 查看产品细节
更多相似方案
  • 联系人:巧克力娃娃
  • 邮箱:board@21ic.com
  • 我要投稿

  • 欢迎入驻，开放投稿

行业新闻
热门标签

应用

品牌

论坛活动 more+
公开课 more+
项目外包 more+