手机开发--中山大学智慧健康服务平台UI设计

实现效果

实验要求

• 该界面为应用启动后看到的第一个界面。
• 各控件的要求
  • 标题字体大小20sp，与顶部距离20dp，居中；
  • 图片与上下控件的间距均为20dp，居中；
  • 输入框整体距左右屏幕各间距20dp，内容（包括提示内容）如图所示，内容字体大小18sp；
  • 按钮与输入框间距10dp，文字大小18sp。按钮背景框左右边框与文字间距10dp，上下边框与文字间距5dp，圆角半径180dp，背景色为**#3F51B5**；
  • 四个单选按钮整体居中，与输入框间距10dp，字体大小18sp，各个单选按钮之间间距10dp，默认选中的按钮为第一个。

具体实现

主要是利用constraint实现布局，要实现细节布局就需要margin。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="中山大学智慧健康服务平台"
        android:textSize="20sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="250dp"
        android:layout_height="50dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="112dp"
        android:layout_marginTop="20dp"
        android:ems="10"
        android:gravity="center"
        android:inputType="textPersonName"
        android:text="请输入搜索内容"
        android:textSize="18sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button"
        android:text="搜索"
        android:textColor="#FFFFFF"
        android:textSize="18sp"
        app:layout_constraintLeft_toRightOf="@+id/editText"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="20dp"/>


    <RadioGroup
        app:layout_constraintTop_toBottomOf="@+id/editText"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="340dp"
        android:layout_height="50dp">
        <LinearLayout>
            <RadioButton
                android:id="@+id/radioButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:checked="true"
                android:textSize="18sp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:text="图片" />

            <RadioButton
                android:id="@+id/radioButton2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:textSize="18sp"
                android:layout_marginRight="10dp"
                android:text="视频" />

            <RadioButton
                android:id="@+id/radioButton3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:textSize="18sp"
                android:layout_marginRight="10dp"
                android:text="问答" />

            <RadioButton
                android:id="@+id/radioButton4"
                android:layout_width="79dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:textSize="18sp"
                android:text="资讯" />
        </LinearLayout>
    </RadioGroup>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/sysu"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        android:layout_marginTop="20dp"/>

</android.support.constraint.ConstraintLayout>

button.xml（放在drawable目录下）

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <corners android:radius="180dp"/>
        <padding
            android:top="5dp"
            android:bottom="5dp"
            android:left="10dp"
            android:right="10dp"/>
        <solid android:color="#3F51B5"/>
    </shape>

有可能的问题

• 有可能出现不能渲染的问题，把style.xml文件里面的<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">改成<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">就可以了。
• 在编辑模式下的界面并不和手机里看到的界面一致，所以直接拖拽的方式是行不通的，需要constraint才可以保证预览和手机里面结果一样。