物联网实战教程3.3,LinearLayout与基本控件

物联网实战教程3.3,LinearLayout与基本控件物联网系列教程一个很好的物联网(IoT)开发实战入门教程,图、文详细。供计算机、电子工程相关专业的在校生以及相关领域初学者、爱好者参考学习。涉及

大家好,欢迎来到IT知识分享网。

物联网系列教程

一个很好的物联网(IoT)开发实战入门教程,图、文详细。供计算机、电子工程相关专业的在校生以及相关领域初学者、爱好者参考学习。涉及单片机、上位机、移动应用、服务器后台开发的知识,以及蓝牙4.0、以太网模块的使用实例。

物联网实战教程3.3,LinearLayout与基本控件

从本章开始,将要进入移动开发的世界——安卓开发。安卓程序需要基于面向对象的Java语言进行开发,读者需要了解XML的使用,最好有过面向对象的基础,并且最好了解一下Java语言。另外,由于安卓是Google出品,请准备好梯子。

目录

第一部分:基础入门

第1项:单片机开发——Arduino

  • 1.1 Arduino开发环境搭建(往期文章)
  • 1.2 点亮一个Led(往期文章)
  • 1.3 PWM操作(往期文章)
  • 1.4 UART的使用(往期文章)
  • 第2项:上位机开发——.Net

  • 2.1 winform快速入门(往期文章)
  • 2.2 serialport控件使用(往期文章)
  • 第3项:移动开发——Android

  • 3.1 安卓开发环境搭建(往期文章)
  • 3.2 HelloActivity分析(上期文章)
  • 3.3 LinearLayout与基本控件(本期文章
  • 3.4 Intent与Activity的生命周期(下期文章更新,两天更新一期)
  • 3.5 ListView与BaseAdapter
  • 3.6 Service学习
  • 3.7 Android权限机制
  • 3.8 BroadCastReciever学习
  • 第4项:后端开发——Golang

  • 4.1 go语言开发环境搭建
  • 4.2 go语言基础快速入门
  • 4.3 用go语言显示一个网页
  • 4.4 go语言web框架——gin
  • 4.5 部署go语言项目
  • 第二部分:案例学习

    第5项:蓝牙4.0案例——手机控制RGB灯颜色

  • 5.1 用串口控制RGB灯颜色
  • 5.2 用上位机控制RGB灯颜色
  • 5.3 蓝牙4.0简单介绍
  • 5.4 蓝牙4.0安卓例程源码阅读
  • 5.5 用安卓手机控制RGB灯颜色
  • 第6项:网络模块案例——温度采集系统开发

  • 6.1 Arduino温度传感器的使用
  • 6.2 ENC28J60模块的使用
  • 6.3 在网页上显示温度

  • 3.3 LinearLayout与基本控件

    在这一小节中,我将介绍一下LinearLayout和几个常用的控件:TextView、Button还有一个Toast的提示框。

    LinearLayout

    在Android中,布局是处理控件与控件之间摆放顺序和位置的一个集合。比如登录的时候,密码输入框放哪儿、登录按钮放哪块,都是用布局来实现的。

    由于Android平台百花齐放,什么尺寸的安卓设备都有,所以谷歌设计了使用xml来编写布局的方式。(当然,也可以直接在代码里编写布局,也可以像些winform那样手动拖拽进行布局。)

    LinearLayout是Android布局中最基本的一种,它叫做线性布局。它最主要有一个属性,叫做orientation,也就是方向,分为vertical和horizontal,垂直和水平。

    正常摆放

    下面,我们首先看看正常的摆放三个Textview控件,通过background来把这三个控件设置为不同的颜色,这样显得鲜明一些。然后,我们通过layout_width、layout_height来设置控件的宽度和高度。对于长度和宽度,我们可以给一个具体的度量值,如100dp(注:dp是安卓中布局中常用的度量单位,sp是安卓字体大小常用的单位);也可以使用match_parent和父容器一样;或者使用wrap_content刚好包裹住内容。

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:orientation="vertical" android:layout_height="match_parent"> <TextView android:layout_width="100dp" android:layout_height="40dp" android:text="红色TextView" android:background="#ff0000"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="绿色TextView" android:background="#00ff00"/> <TextView android:layout_width="match_parent" android:layout_height="80dp" android:text="蓝色TextView" android:background="#0000ff"/> </LinearLayout> 

    复制以上代码到activity_second.xml内,我们选择左下角的Design,可以看到当前的页面布局。

    物联网实战教程3.3,LinearLayout与基本控件

    平分

    还有一种情况,我们如果想要平分,我们可以通过设置layout_weight来实现。比如说,垂直平分,可以把layout_height设置为0dp,表示不关系它的宽度,把layout_weight按比例设置。比如说以下代码,把红绿蓝设置为:1:1:1。

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:orientation="vertical" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_weight="1" android:layout_height="0dp" android:text="红色TextView" android:background="#ff0000"/> <TextView android:layout_width="match_parent" android:layout_weight="1" android:layout_height="0dp" android:text="绿色TextView" android:background="#00ff00"/> <TextView android:layout_width="match_parent" android:layout_weight="1" android:layout_height="0dp" android:text="蓝色TextView" android:background="#0000ff"/> </LinearLayout>

    效果如下:

    物联网实战教程3.3,LinearLayout与基本控件

    读者可以试试把LinearLayout的方向设置为horizontal, 然后在水平方向上进行平分。另外也可以调整一下layout_weight的比例试试。

    多个LinearLayout嵌套

    在后面的章节中,我们要完成蓝牙的通信,要实现下面这样的布局。

    物联网实战教程3.3,LinearLayout与基本控件

    可以看到整体上是个垂直方向的LinearLayout,上方有一个TextView,下方有一个EditText(输入控件)和Button。而EditText和Button又可以组成一个水平方向的LinearLayout。

    另外对于TextView的高度是由下方的LinearLayout来决定的,我们可以把它的高度设为0dp,然后把layout_weight设置为1,这样就会自动填充。同理,EditText的宽度是由Button的宽度决定的,可以把它的width设为0dp,layout_weight设置为1。

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:orientation="vertical" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="#ff0000"/> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="40dp"> <EditText android:layout_weight="1" android:layout_width="0dp" android:layout_height="match_parent" /> <Button android:text="点击" android:layout_width="wrap_content" android:layout_height="match_parent" /> </LinearLayout> </LinearLayout>

    这样就得到了类似的效果。

    物联网实战教程3.3,LinearLayout与基本控件

    关于页面的布局就讲到这里,安卓里面还有几种layout,大家可以自行学习。

    基本控件的使用

    了解了如何编写页面布局后,我们来看看如何在代码里操作这些控件,首先以TextView为例。

    TextView控件

    在上一节中,我们在看Activity的代码的时候,还记不记得R.layout.activity_second这个像地址一样的东西?像得到xml的布局,我们想要得到控件,也需要一个这样的指针,我们在xml中给控件添加一个id就可以了。如下,我们给TextView、EditText、Button分别设置了一个id,名为:text_view、edit_text、button。

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:orientation="vertical" android:layout_height="match_parent"> <TextView android:id="@+id/text_view" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="#ff0000"/> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="40dp"> <EditText android:id="@+id/edit_text" android:layout_weight="1" android:layout_width="0dp" android:layout_height="match_parent" /> <Button android:id="@+id/button" android:text="点击" android:layout_width="wrap_content" android:layout_height="match_parent" /> </LinearLayout> </LinearLayout>

    设置了id后,就可以通过安卓系统提供给我们的findViewById方法来找到我们的TextView了。由于findViewById方法返回的是一个View对象,是TextView的一个父类,需要强制转换一下(如果读者没学过面向对象不理解,可以了解一下运行时多态)。拿到TextView对象之后,就可以通过TextView的方法来修改TextView的文字。

     protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_second); TextView textView = (TextView) findViewById(R.id.text_view); textView.setText("代码里修改的TextView"); }

    运行后,就可以看到TextView的文字已经改变了。

    物联网实战教程3.3,LinearLayout与基本控件

    Button控件

    和TextView一样,通过findViewById把代码和布局里的button对应上。对于Button,我们需要监听button的点击事件,可以通过setOnClickListener来实现。

     protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_second); final TextView textView = (TextView) findViewById(R.id.text_view); textView.setText("代码里修改的TextView"); Button button = (Button) findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { textView.setText("点击了Button"); } }); }

    这里使用了一个匿名内部类,当然也可以让Activity实现OnClickListener接口,然后在其中处理。

    public class SecondActivity extends AppCompatActivity implements View.OnClickListener{ TextView textView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_second); textView = (TextView) findViewById(R.id.text_view); textView.setText("代码里修改的TextView"); Button button = (Button) findViewById(R.id.button); button.setOnClickListener(this); } @Override public void onClick(View v) { if (v.getId() == R.id.button) { textView.setText("点击了Button"); } } }

    下面的方法更适用于有多个button的情况。运行代码后,点击button,可以看到textView的文字的变化。

    物联网实战教程3.3,LinearLayout与基本控件

    EditText控件

    对于EditText,我们主要使用它的getText方法来获取用户输入的文本,把它配合Button使用,使用TextView来显示用户输入的内容。

    public void onClick(View v) { if (v.getId() == R.id.button) { String text = textView.getText() + editText.getText().toString(); textView.setText(text); } }

    这里当点击button时,把用户的输入的内容追加到TextView上。不过这样我们运行之后,发现输入法无法隐藏,我们给textview设置一个监听事件,当点击的时候就隐藏输入法,完整代码如下:

    package com.example.kalen.helloactivity; import android.content.Context; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.view.inputmethod.InputMethodManager; import android.widget.Button; import android.widget.EditText; import android.widget.TextView; public class SecondActivity extends AppCompatActivity implements View.OnClickListener{ TextView textView; EditText editText; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_second); textView = (TextView) findViewById(R.id.text_view); textView.setText("代码里修改的TextView"); Button button = (Button) findViewById(R.id.button); button.setOnClickListener(this); textView.setOnClickListener(this); editText = (EditText) findViewById(R.id.edit_text); } @Override public void onClick(View v) { if (v.getId() == R.id.button) { String text = textView.getText() + editText.getText().toString(); textView.setText(text); } else if (v.getId() == R.id.text_view) { InputMethodManager imm = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE); imm.hideSoftInputFromWindow(editText.getWindowToken(),0); } } }

    运行后,在EditText输入一段文字后,就可以看到追加到TextView上了。

    物联网实战教程3.3,LinearLayout与基本控件

    Toast的使用

    最后,我们来说一下Toast。Toast不是安卓的控件,它是用来显示显示信息的一种机制。它的用法很简单,需要传三个参数即可。

    物联网实战教程3.3,LinearLayout与基本控件

    第一个参数是一个Context对象,就是在哪儿显示,我们在当前Activity显示,传入this即可。第二个参数可以是R.string.xxx,或者是一个字符串。第三个就是显示的时间长或者短。

    我们在onClick方法中添加它。

    public void onClick(View v) { if (v.getId() == R.id.button) { String text = textView.getText() + editText.getText().toString(); textView.setText(text); } else if (v.getId() == R.id.text_view) { InputMethodManager imm = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE); imm.hideSoftInputFromWindow(editText.getWindowToken(),0); Toast.makeText(this, "点击了TextView", Toast.LENGTH_SHORT).show(); } }

    运行代码后,点击TextView的时候就可以看到显示信息了。

    物联网实战教程3.3,LinearLayout与基本控件


    下期更新预告:

    第1部分:单片机开发——Arduino

  • 1.1 Arduino开发环境搭建(往期文章,点击前往查看)
  • 1.2 点亮一个Led(往期文章,点击前往查看)
  • 1.3 PWM操作(往期文章,点击前往查看)
  • 1.4 UART的使用(往期文章,点击前往查看)
  • 第2项:上位机开发——.Net

  • 2.1 winform快速入门(往期文章,点击前往查看)
  • 2.2 serialport控件使用(往期文章,点击前往查看)
  • 第3项:移动开发——Android

  • 3.1 安卓开发环境搭建(往期文章,点击前往查看)
  • 3.2 HelloActivity分析(上期文章,点击前往查看)
  • 3.3 LinearLayout与基本控件(本期文章
  • 3.4 Intent与Activity的生命周期(下期更新这部分内容
  • 三连加关注,往后不迷路

    往期哪里搞,上面找一找

    免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/47954.html

    (0)

    相关推荐

    发表回复

    您的电子邮箱地址不会被公开。 必填项已用 * 标注

    关注微信