智障家居之智障烧水装备----安卓App端的布局
App预览
可以看到,在第一个选项卡中,有这次实现的智障烧水设备的操作界面,但是在第二个选项卡中,是空白界面。
布局文件和资源文件
activity_main界面
主界面的布局文件主要又两大部分组成,第一是实现集成功能的ListView,第二是点开每个ListView的Item后呈现具体布局。
activity_main.xml文件内容如下
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<!--ListView控件-->
<ListView
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:cacheColorHint="@android:color/transparent"
android:clipToPadding="false"
android:divider="@android:color/transparent"
android:dividerHeight="12dp"
android:fadeScrollbars="true"
android:listSelector="@android:color/transparent"
android:padding="12dp"
android:scrollbarStyle="outsideOverlay"
android:scrollingCache="false" >
</ListView>
<!--用于美观的View控件-->
<View
android:id="@+id/touch_interceptor_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--使用相对布局,保证include能够正确加载别的layout文件-->
<RelativeLayout
android:id="@+id/details_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:orientation="vertical">
<!--图像控件-->
<ImageView
android:id="@+id/details_image"
android:layout_width="match_parent"
android:layout_height="320dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />
<!--使用include来加载其他的layout-->
<include
android:id="@+id/one"
layout="@layout/activity_one"
android:visibility="visible" />
</RelativeLayout>
<!--foldablelayout控件-->
<com.alexvasilkov.foldablelayout.UnfoldableView
android:id="@+id/unfoldable_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</merge>
activity_one界面
由于在activity_main界面中使用到了activity_one的layout,因此在下方给出整个布局文件
activity_one.xml文件内容如下
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--占位图片,用于对标主界面-->
<ImageView
android:id="@+id/details_image"
android:layout_width="match_parent"
android:layout_height="320dp"
android:layout_marginBottom="59dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="@+id/editTextNumberSigned"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--按钮,用于发送命令-->
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="159dp"
android:layout_marginLeft="159dp"
android:layout_marginTop="573dp"
android:layout_marginEnd="159dp"
android:layout_marginRight="159dp"
android:layout_marginBottom="110dp"
android:background="#000000"
android:text="启动"
android:textColor="#FFFFFF"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--引脚输入框-->
<EditText
android:id="@+id/editTextNumberSigned"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
android:ems="10"
android:gravity="center_horizontal"
android:hint="引脚"
android:inputType="numberSigned"
android:textAlignment="center"
app:layout_constraintBottom_toTopOf="@+id/editTextNumberSigned2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="parent" />
<!--控制角度输入框 -->
<EditText
android:id="@+id/editTextNumberSigned2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="74dp"
android:ems="10"
android:gravity="center_horizontal"
android:hint="角度"
android:inputType="numberSigned"
android:textAlignment="center"
android:textColor="#000000"
app:layout_constraintBottom_toTopOf="@+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.502"
app:layout_constraintStart_toStartOf="parent" />
<!--从服务器接受信息后的显示控件-->
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="177dp"
android:layout_marginLeft="177dp"
android:layout_marginTop="34dp"
android:layout_marginEnd="176dp"
android:layout_marginRight="176dp"
android:text="Hello"
android:textColor="#000000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button2" />
</androidx.constraintlayout.widget.ConstraintLayout>
list_item界面
该界面为listView的每一个子项
list_item.xml文件内容如下
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#fff"
android:padding="4dp">
<ImageView
android:id="@+id/list_item_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#dde"
android:scaleType="centerCrop" />
<View
android:layout_width="match_parent"
android:layout_height="40sp"
android:layout_gravity="bottom"
android:background="@drawable/image_text_shadow" />
<TextView
android:id="@+id/list_item_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:padding="8dp"
android:textColor="#fff"
android:textSize="16sp" />
</FrameLayout>
由于在该布局文件中使用到了image_text_shadow这个资源,因此,需要将该资源添加到drawable文件夹中。
image_text_shadow.xml文件内容如下
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="@android:color/transparent"
android:endColor="#88000000"
android:centerColor="#33000000"
android:angle="-90"/>
</shape>
paintings资源文件
该文件用于listview进行数据的索引
paintings.xml文件内容如下
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="paintings_titles">
<item>智障烧水装备</item>
<item>待定</item>
<item>待定</item>
<item>待定</item>
<item>待定</item>
</string-array>
<array name="paintings_images">
<item>@drawable/starry_night</item>
<item>@drawable/cafe_terrace</item>
<item>@drawable/starry_night_over_the_rhone</item>
<item>@drawable/sunflowers</item>
<item>@drawable/almond_blossoms</item>
</array>
</resources>
从上述文件可以看出,使用到了drawable的多个资源文件,因此,我们需要把这些文件加入drawable文件夹。
至此,所有的布局文件都已经完成。