安卓学习第一篇

一、实验题目

中山大学智慧健康服务平台UI设计

二、实现内容

实现一个Android应用，界面呈现如图中的效果。

三、实验结果

(1)实验截图

在这里插入图片描述

(2)实验步骤以及关键代码

activity_main.xml

整体构建约束布局

<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/head"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:text="@string/title"
        android:textColor="#0B0B0B"
        android:textSize="20sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

放置图片

<ImageView
        android:id="@+id/imag"
        android:layout_width="187dp"
        android:layout_height="173dp"
        android:layout_gravity="center"
        android:contentDescription="@string/des"
        android:src="@mipmap/sysu"
        android:layout_marginTop="20dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/head" />

在一个线性布局内部放置搜索框以及搜索按钮

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="20dp"
        app:layout_constraintTop_toBottomOf="@id/imag"
        android:orientation="horizontal">

        <EditText
            android:id="@+id/edt0"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint"
            android:inputType="text"
            android:textSize="18sp"
            android:textAlignment="center"
            android:layout_weight="3"/>

        <Button
            android:id="@+id/btn1"
            style="@style/Button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/search"
            android:layout_weight="8"/>

    </LinearLayout>

放置单选按钮

<RadioGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        android:id="@+id/radio0"
        app:layout_constraintTop_toBottomOf="@id/input"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <RadioButton
            style="@style/radioButton"
            android:id="@+id/radio1"
            android:checked="true"
            android:text="@string/image"
            android:buttonTint="#FC3679"/>

        <RadioButton
            style="@style/radioButton"
            android:id="@+id/radio2"
            android:text="@string/video" />

        <RadioButton
            style="@style/radioButton"
            android:id="@+id/radio3"
            android:text="@string/faq" />

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/radio4"
            android:textSize="18sp"
            android:text="@string/infor" />

    </RadioGroup>

styles.xml

设置APP格式

 <style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

设置按钮格式

<style name="Button">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">#F7F7FA</item>
        <item name="android:background">@drawable/shape</item>
        <item name="android:layout_marginLeft">10dp</item>
    </style>

设置单选格式

<style name="radioButton">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_marginRight">10dp</item>
        <item name="android:textSize">18sp</item>
    </style>

strings.xml

存储字符串引用对

<resources>
    <string name="app_name">ExperimentOne</string>
    <string name="title">中山大学智慧健康服务平台</string>
    <string name="hint">请输入搜索内容</string>
    <string name="des">就是一张图</string>
    <string name="search">搜索</string>
    <string name="image">图片</string>
    <string name="video">视频</string>
    <string name="faq">问答</string>
    <string name="infor">资讯</string>
</resources>

colors.xml

存储颜色引用对

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#BBBBBB</color>
</resources>

shape.xml

设置搜索按钮的背景

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="#3F51B5" />
    <corners android:radius="180dp" />
    <padding
        android:left="10dp"
        android:right="10dp"
        android:top="5dp"
        android:bottom="5dp"/>
</shape>

(3)实验遇到的困难以及解决思路

一开始完全无从下手

发现在manual里面有教程

design界面里面一片空白，无法预览

参照这篇博客解决

不知道如何让搜索框和搜索按钮同时显示

尝试了table和linear两种布局之后最终选择了后者

扫描二维码关注公众号，回复： 5530717 查看本文章

不知道如何分配搜索框和按钮的大小

使用layout_weight来调整比例

不知道如何更改图片大小

发现可以在design模式下直接拖动来更改

不知道如何改变底线颜色

参照这篇博客解决

不知道如何改变radiobutton选中时的圆圈颜色

参照这篇博客解决

四、实验思考及感想

安卓开发初看起来是件很复杂很高端的事情，但其实做起来没有那么难。它的布局逻辑很清晰，组件就在布局之下有序分布。虽然会遇到很多细小零碎的问题，但是只要善于应用搜索引擎，这些都可以很快解决。

一、实验题目

二、实现内容

三、实验结果

(1)实验截图

(2)实验步骤以及关键代码

(3)实验遇到的困难以及解决思路

四、实验思考及感想

猜你喜欢