Android学习——5个UI界面设计

一、计算器

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="#ffffff"
    android:orientation="vertical"
    android:padding="5dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:padding="5dp"
        android:text="我的计算器"
        android:layout_weight="1"
        android:textColor="@color/colorAccent"
        android:textSize="20sp"/>

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:background="@drawable/edit_bg"
        android:gravity="end"
        android:textColor="#000000"
        android:textSize="40sp"
        android:text="1234"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="7"
            android:textSize="@dimen/key_size" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="8"
            android:textSize="@dimen/key_size"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="9"
            android:textSize="@dimen/key_size"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="/"
            android:textSize="@dimen/key_size"/>


    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:orientation="horizontal">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="4"
            android:textSize="@dimen/key_size"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="5"
            android:textSize="@dimen/key_size"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="6"
            android:textSize="@dimen/key_size"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="*"
            android:textSize="@dimen/key_size"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:orientation="horizontal">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="1"
            android:textSize="@dimen/key_size"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="2"
            android:textSize="@dimen/key_size"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="3"
            android:textSize="@dimen/key_size"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="-"
            android:textSize="@dimen/key_size"/>

    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:orientation="horizontal">

        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="0"
            android:textSize="@dimen/key_size"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="."
            android:textSize="@dimen/key_size"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="+"
            android:textSize="@dimen/key_size"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="="
            android:textSize="@dimen/key_size"/>
    </LinearLayout>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:text="Clear"
        android:textSize="@dimen/key_size"/>



</LinearLayout>

在设置按钮颜色得时候，简单得在设计中得xml文件中更改实际上并没有看到效果，因此需要在资源文件夹中得themes中找到两个主题文件，在其

二、frameLayout（框架布局）实现登录界面

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".framelayouttosignin"
    android:orientation="vertical" >
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@mipmap/background1" />
        <EditText
            android:layout_width="150dp"
            android:layout_height="50dp"
            android:background="@drawable/edit"
            android:gravity="center"
            android:hint="用户账号"
            android:textColor="#000000"
            android:textSize="25sp"
            android:layout_gravity="bottom"
            android:layout_marginLeft="45dp"
            android:layout_marginBottom="75dp"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/paly"
            android:layout_gravity="bottom|right"
            android:layout_marginBottom="50dp"
            android:layout_marginRight="50dp"
            android:id="@+id/iv_play"/>

    </FrameLayout>

</LinearLayout>

其中edit文件内容（仁至义尽了，这玩意自己根据自己需求随便写写）另外dimen文件中内容就更随便了，距离根据自己进行设置

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

    <item>

        <shape
            android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="blue"/>
            <corners
                android:radius="3dp"/>
        </shape>
    </item>
</selector>

三、RelativeLayout相对布局实现登录界面

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".relativelayouttosignin">
    
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/background3"/>

    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="60dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/user"
        android:id="@+id/iv_user"/>

    <EditText
        android:id="@+id/userName"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        android:layout_below="@+id/iv_user"
        android:layout_centerHorizontal="true"
        android:hint="用户名"
        android:gravity="center"
        android:layout_marginTop="50dp"
        android:background="@drawable/edit"/>

    <EditText
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:id="@+id/passwprd"
        android:textSize="25sp"
        android:layout_below="@+id/userName"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:gravity="center"
        android:hint="密码"
        android:background="@drawable/edit"
        android:inputType="textPassword"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/remeber"
        android:layout_below="@+id/passwprd"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="80dp"
        android:text="记住密码"
        android:textColor="#ffffff"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/passwprd"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"
        android:layout_toRightOf="@+id/remeber"
        android:text="自动登录"
        android:textColor="#ffffff"/>

    <Button
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:id="@+id/btn_login"
        android:layout_below="@+id/remeber"
        android:layout_marginTop="50dp"
        android:layout_centerHorizontal="true"
        android:text="登录"
        android:textSize="25sp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn_login"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="80dp"
        android:text="忘记密码"
        android:textColor="@color/colorAccent"
        android:textSize="20sp"
        android:id="@+id/forget"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn_login"
        android:layout_marginTop="5dp"
        android:layout_toRightOf="@+id/forget"
        android:layout_marginLeft="30dp"
        android:text="注册账号"
        android:textColor="@color/colorAccent"
        android:textSize="20sp"/>



</RelativeLayout>

四、表格布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".Tablelayout"
    android:orientation="vertical">

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorAccent"
        android:stretchColumns="0,1,2"
        android:shrinkColumns="0,1,2"><!--shrinkColumns 设置可收缩的列，(内容过多，则收缩，扩展到第二行，控件没布满TableLayout时不起作用)-->
    <Button
        android:text="独占一行"/>
        <TableRow>
            <Button
                android:text="000000000000000000000"
                android:textSize="20sp"/>
            <Button
                android:text="1110000000000000"
                android:textSize="20sp"/>
            <Button
                android:text="222222222222222222"
                android:textSize="20sp"/>
        </TableRow>
        <TableRow android:paddingTop="5dp" android:paddingBottom="5dp">
            <TextView
                android:text="用户名"
                android:gravity="center"
                android:textSize="25sp"/>
            <EditText
                android:textSize="25sp"
                android:gravity="center"
                android:layout_gravity="center_vertical"
                android:layout_span="2"
                android:background="@drawable/edit"/>
        </TableRow>


    </TableLayout>

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFCD6B"
        android:shrinkColumns="0,1">
        <TableRow>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="填充一"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="填充二"/>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="普通三"/>
        </TableRow>
    </TableLayout>
    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:shrinkColumns="0,1,2"
        android:stretchColumns="0,1,2">
        <TableRow>
            <ImageView
                android:src="@drawable/user1"/>

            <ImageView
                android:layout_height="match_parent"
                android:src="@drawable/user2" />
            <ImageView
                android:src="@drawable/user3"/>
        </TableRow>
    </TableLayout>
</LinearLayout>

五、多布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".logomenu">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@drawable/show1"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/show2"
            android:id="@+id/show2"
            android:adjustViewBounds="true"/>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_toRightOf="@+id/show2"
            android:adjustViewBounds="true"
            android:src="@drawable/show3" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:adjustViewBounds="true"
            android:src="@drawable/show4" />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:adjustViewBounds="true"
            android:src="@drawable/show5"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:adjustViewBounds="true"
            android:src="@drawable/show6"/>
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:adjustViewBounds="true"
            android:src="@drawable/show7"/>
    </LinearLayout>




</LinearLayout>

转载：https://blog.csdn.net/TBMmagic/article/details/117002575