安卓设备的Socket网络通讯例程 (A2)-UI界面适配
本博文系JGB联合商务组的原创作品，引用请标明出处
JGB02开发板使用ESP8266芯片组的串口引脚TXD（22脚），RXD（21脚）与一个30万像素的低分辨率串口摄像头VC0706相连，因为传输的JPG单帧数据很小（64KB以下），正好可以通过廉价的共享带宽类型的云主机向本调试器推送或传输远程图像。
因此本调试器的UI界面有一个对图像宽高比例有一定要求的图片控件，当本APP要安装在不同的安卓设备上时应预先做一个界面适配工作。
例如在手机上（手机屏）的界面布局如下：
而在一台安卓工控机上（电视屏）的界面布局则应该调整为：
否则图片控件中显示的图片将严重失真。
综合上述，为适应不同安卓设备的屏宽和屏高的比例，我需要特地设计两个布局文件以适配之。
（1）手机类界面（屏宽小于或等于屏高的类型）的布局文件： activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="0dp"
android:id="@+id/buttPower"
android:text="电源"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="0dp"
android:id="@+id/buttLight"
android:text="补光"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="0dp"
android:id="@+id/buttGetTemp"
android:text="参数"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="0dp"
android:id="@+id/buttGetJPG"
android:text="拍照"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_marginRight="2dp"
android:id="@+id/buttSend"
android:text="发送"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<EditText
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="6dp"
android:layout_marginBottom="6dp"
android:cursorVisible="true"
android:textCursorDrawable="@drawable/textcursorcolor"
android:id="@+id/dataED"
android:text="GetSnap:1"
android:background="@color/accent_material_dark"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3" />
</LinearLayout>
<LinearLayout
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/textView2"
android:text="IP"
android:layout_marginRight="3dp"
android:textColor="@color/bright_foreground_material_light"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:id="@+id/ipED"
android:text="192.168.6.6"
android:background="@color/accent_material_dark"
android:layout_marginLeft="2dp"
android:layout_marginRight="15dp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="7" />
<TextView
android:id="@+id/textView3"
android:text="Port"
android:layout_marginRight="2dp"
android:textColor="@color/bright_foreground_inverse_material_dark"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:id="@+id/portED"
android:text="16000"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:background="@color/accent_material_dark"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3" />
</LinearLayout>
<LinearLayout
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:id="@+id/openBT"
android:text="打开"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:id="@+id/closeBT"
android:text="关闭"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:id="@+id/alarmBT"
android:text="警戒"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:id="@+id/refreshBT"
android:text="刷新"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ListView
android:id="@+id/infoLV"
android:textColor="@color/foreground_material_light"
android:background="@color/accent_material_dark"
android:layout_marginBottom="5dp"
android:enabled="false"
android:focusable="false"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
/>
<ImageView
android:id="@+id/imageJPG"
android:background="@color/accent_material_dark"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:src="@drawable/jgbunitall"
/>
<!-- 水平进度条 -->
<ProgressBar
android:layout_width="match_parent"
android:layout_height="10dp"
style ="@android:style/Widget.ProgressBar.Horizontal"
android:id="@+id/smallPB"
/>
</LinearLayout>
</LinearLayout>手机屏布局设计的效果图如下：
（2）电视类界面（屏宽大于屏高的类型）的布局文件： activity_main_tv.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="0dp"
android:id="@+id/buttPower"
android:text="电源"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="0dp"
android:id="@+id/buttLight"
android:text="补光"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="0dp"
android:id="@+id/buttGetTemp"
android:text="参数"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="0dp"
android:id="@+id/buttGetJPG"
android:text="拍照"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_marginRight="2dp"
android:id="@+id/buttSend"
android:text="发送"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<EditText
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="6dp"
android:layout_marginBottom="6dp"
android:cursorVisible="true"
android:textCursorDrawable="@drawable/textcursorcolor"
android:id="@+id/dataED"
android:text="GetSnap:1"
android:background="@color/accent_material_dark"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3" />
</LinearLayout>
<LinearLayout
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/textView2"
android:text="IP"
android:layout_marginRight="3dp"
android:textColor="@color/bright_foreground_material_light"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:id="@+id/ipED"
android:text="192.168.6.6"
android:background="@color/accent_material_dark"
android:layout_marginLeft="2dp"
android:layout_marginRight="15dp"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="7" />
<TextView
android:id="@+id/textView3"
android:text="Port"
android:layout_marginRight="2dp"
android:textColor="@color/bright_foreground_inverse_material_dark"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:id="@+id/portED"
android:text="16000"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:background="@color/accent_material_dark"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3" />
</LinearLayout>
<LinearLayout
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:id="@+id/openBT"
android:text="打开"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:id="@+id/closeBT"
android:text="关闭"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:id="@+id/alarmBT"
android:text="警戒"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<Button
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:id="@+id/refreshBT"
android:text="刷新"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ListView
android:id="@+id/infoLV"
android:textColor="@color/foreground_material_light"
android:background="@color/accent_material_dark"
android:layout_marginBottom="3dp"
android:enabled="false"
android:focusable="false"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="1"
/>
<LinearLayout
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="2"
android:orientation="vertical" >
<ImageView
android:id="@+id/imageJPG"
android:background="@color/accent_material_dark"
android:layout_marginBottom="2dp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:src="@drawable/jgbunitall"
/>
<!-- 水平进度条 -->
<ProgressBar
android:layout_width="match_parent"
android:layout_height="10dp"
style ="@android:style/Widget.ProgressBar.Horizontal"
android:layout_marginBottom="3dp"
android:id="@+id/smallPB"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>电视屏布局设计的效果图如下：
比较上面的两个布局设计效果图可得知： 两个布局文件的差异在于最后一个线性布局子块的布局方向一个是垂直，一个是水平，其它的基本一致。
在APP代码中调出这两个不同的布局文件的代码如下：
//屏幕的宽
private int nScreenW = 0 ;
//屏幕的高
private int nScreenH = 0 ;
//TV屏幕的标记 ： 为真表示是电视屏，为假表示手机屏
private boolean bScreenTV = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//通过Resources获取设备屏幕的宽和高
DisplayMetrics dm = getResources().getDisplayMetrics();
//屏幕的宽和高
nScreenW= dm.widthPixels;
nScreenH= dm.heightPixels;
Log.d(" MainResources : ", " 屏宽: " + nScreenW+" 屏高: "+nScreenH);
//TV屏幕的标记 ： 为真表示是电视屏，为假表示手机屏
if (nScreenW > nScreenH){
bScreenTV = true;
} else {
bScreenTV = false;
}
//根据屏幕类型载入不同的布局文件
if (bScreenTV)
setContentView(R.layout.activity_main_tv);
else
setContentView(R.layout.activity_main);
// ......
}即在onCreate(）中先检查本安卓设备的屏宽和屏高，以此判定是手机屏或电视屏并载入对应的布局文件。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
