android开发之界面设计---基本组件与布局管理器

尊重计算机软件著作权，转载复制源码请注明出处

开发环境：

1. 系统开发平 Android Studio
2. 系统开发平台：Android
3. 运行平台：Windows XP及以上
4. 运行环境：Microsoft.NET Framework SDK XX.X

学习目标：

1）掌握常用组件在布局文件中的设置
2）掌握在Java程序中获取组件值
3）掌握对组件的验证
4）掌握基本组件常用的监听器，和时间处理
5）掌握将组件值提交到下一个Activity活动的方法
6）了解四种布局管理器的区别和各自特有的属性
7）掌握四种布局管理器的应用场合和用法
8）灵活使用四种布局管理器的嵌套实现各种复杂布局
9）掌握复用XML布局文件的方法
10）掌握代码控制UI界面的方法

程序截图：

源代码：

Main_Activity.xml

copyright vivi_and_qiao liwei all rights reserved
<?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: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"
    android:orientation="vertical"
    tools:context="com.david.www.interface_design.MainActivity">

    <ImageView
        android:src="@drawable/logo"
        android:layout_width="720px"
        android:layout_height="281px" />

    <LinearLayout
        android:layout_width="match_parent"
       android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp">
        <ImageView
            android:src="@drawable/head"
            android:layout_marginEnd="50px"
            android:layout_width="104dp"
            android:layout_height="98dp" />
        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >
            <TableRow android:layout_width="match_parent"
                android:layout_weight="1">
                <TextView android:text="账号："
                    android:layout_gravity="center_vertical"/>
                <EditText android:id="@+id/userName"
                    android:layout_gravity="center_vertical"
                    android:layout_width="match_parent"
                    android:layout_weight="1"
                    />
            </TableRow>
            <TableRow android:layout_width="match_parent"
                android:layout_weight="1">
                <TextView android:text="密码："
                    android:layout_gravity="center_vertical"/>
                <EditText android:id="@+id/userPass"
                    android:layout_gravity="center_vertical"
                    android:layout_width="match_parent"
                    android:layout_weight="1"/>
            </TableRow>
        </TableLayout>
    </LinearLayout>

    <Button
        android:text="登 录"
        android:onClick="login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"/>
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="记住密码"/>
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="自动登录"/>
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="接收产品推广"/>
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="忘记密码"
            android:onClick="forgetPass"
            android:visibility="visible" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="注册账号"
            android:layout_gravity="right"
            android:onClick="register"/>
    </FrameLayout>
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="?android:attr/progressBarStyleSmall"
            android:layout_below="@+id/loading"
            android:layout_marginLeft="340px"
            android:id="@+id/pb" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="338px"
            android:id="@+id/loading"
            android:text="loading"
            android:layout_alignParentTop="true" />
    </RelativeLayout>

</LinearLayout>

Buju.xml:

 <?xml version="1.0" encoding="utf-8"?>
<ScrollView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RelativeLayout
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/buju"
        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="com.david.www.interface_design.buju">

       <!-- tools:context="com.david.www.buju.MainActivity"-->

        <TextView
            android:text="密码"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/ET1"
            android:layout_alignParentStart="true"
            android:id="@+id/password" />

        <CheckBox
            android:text="旅游"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/trip"
            android:layout_alignBaseline="@+id/movie"
            android:layout_alignBottom="@+id/movie"
            android:layout_toEndOf="@+id/movie" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:text="Name"
            android:ems="10"
            android:id="@+id/ET2"
            android:singleLine="true"
            android:selectAllOnFocus="true"
            android:layout_below="@+id/password"
            android:layout_alignParentStart="true" />


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="用户名"
            android:id="@+id/username"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:text="Name"
            android:ems="10"
            android:id="@+id/ET1"
            android:singleLine="true"
            android:layout_below="@+id/username"
            android:layout_toStartOf="@+id/trip" />

        <CheckBox
            android:text="电影"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/movie"
            android:layout_below="@+id/textView5"
            android:layout_alignParentStart="true"
            android:layout_marginTop="13dp" />

        <CheckBox
            android:text="书籍"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/book"
            android:layout_alignBaseline="@+id/trip"
            android:layout_alignBottom="@+id/trip"
            android:layout_toEndOf="@+id/trip" />

        <CheckBox
            android:text="运动"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/sports"
            android:layout_alignBaseline="@+id/book"
            android:layout_alignBottom="@+id/book"
            android:layout_toEndOf="@+id/book" />

        <Spinner
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/grade"
            android:entries="@array/gradeArray"
            android:layout_weight="1"
            android:layout_below="@+id/GN"
            android:layout_alignParentStart="true" />


        <RadioButton
            android:text="男"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/man"
            android:layout_below="@+id/sex"
            android:layout_alignParentStart="true"
            android:layout_marginTop="16dp" />

        <RadioButton
            android:text="女"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/woman"
            android:layout_alignBaseline="@+id/man"
            android:layout_alignBottom="@+id/man"
            android:layout_toEndOf="@+id/man" />
        <TextView
            android:text="年级"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/GN"
            android:layout_below="@+id/ET3"
            android:layout_alignParentStart="true" />

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="phone"

            android:id="@+id/ET3"
            style="@style/Widget.AppCompat.AutoCompleteTextView"
            android:layout_marginTop="17dp"
            android:layout_below="@+id/man"
            android:layout_alignParentStart="true" />

        <TextView
            android:text="联系电话"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout="@+id/man"
            android:id="@+id/phone"
            android:layout_weight="1"
            android:layout_below="@+id/man"
            android:layout_alignParentStart="true" />

        <TextView
            android:text="爱好"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:id="@+id/textView5"
            android:layout_below="@+id/grade"
            android:layout_alignParentStart="true" />

        <TextView
            android:text="性别"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/sex"
            android:layout_below="@+id/ET2"
            android:layout_alignParentStart="true" />

        <CheckBox
            android:text="音乐"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/music"
            android:layout_alignBaseline="@+id/sports"
            android:layout_alignBottom="@+id/sports"
            android:layout_toEndOf="@+id/sports" />

        <Button
            android:text="确定"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/sure"
            android:onClick="myclick"
            android:layout_below="@+id/trip"
            android:layout_toEndOf="@+id/grade" />
        />

    </RelativeLayout>

</ScrollView>

Result.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="1">

    <TextView
        android:text="姓名：李伟 性别：男 爱好：电影 年级：大一"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:id="@+id/textView" />

    <Button
        android:text="返回主界面"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        android:layout_marginLeft="326px"
        android:onClick="go_back"/>
</LinearLayout>

Grade.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="1">

    <TextView
        android:text="姓名：李伟 性别：男 爱好：电影 年级：大一"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:id="@+id/textView" />

    <Button
        android:text="返回主界面"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        android:layout_marginLeft="326px"
        android:onClick="go_back"/>
</LinearLayout>

Main_activity.java:

package com.david.www.interface_design;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.ProgressBar;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;
class ResultActivity
{
    public TextView textView;
}
public class MainActivity extends AppCompatActivity {
    private ArrayList<CheckBox> favs;
    private EditText ET1,ET2,ET3;
    private TextView username,password,phone,sex,GN;
    private RadioButton man,woman;
    private RadioGroup se;
    private CheckBox book,sports,music,movie,trip;
    private Spinner grade;
    private Button sure;
    StringBuilder sb=new StringBuilder();
    private TextView loading;
    private ProgressBar pb;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //requestWindowFeature(Window.FEATURE_NO_TITLE);
        //requestWindowFeature(Window.FEATURE_NO_TITLE);  //隐藏标题栏
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
        loading=(TextView)findViewById(R.id.loading);
        pb=(ProgressBar)findViewById(R.id.pb);
        loading.setCursorVisible(false);
        username=(TextView) findViewById(R.id.username);
        password=(TextView) findViewById(R.id.password);
        phone=(TextView) findViewById(R.id.phone);
        sex=(TextView) findViewById(R.id.sex);
        man=(RadioButton) findViewById(R.id.man);
        woman=(RadioButton) findViewById(R.id.woman);
       // se=(RadioGroup) findViewById(R.id.se);
        book=(CheckBox) findViewById(R.id.book);
        sports=(CheckBox) findViewById(R.id.sports);
        music=(CheckBox) findViewById(R.id.music);
        movie=(CheckBox) findViewById(R.id.movie);
        trip=(CheckBox) findViewById(R.id.trip);
        grade=(Spinner)findViewById(R.id.grade);
        GN=(TextView)findViewById(R.id.GN);
        sure=(Button)findViewById(R.id.sure);
        ET1=(EditText)findViewById(R.id.ET1);
        ET2=(EditText)findViewById(R.id.ET2);
        ET3=(EditText)findViewById(R.id.ET3);
        TextView result=(TextView) findViewById(R.id.textView);
        favs=new ArrayList<CheckBox>();
        favs.add(book);
        favs.add(sports);
        favs.add(music) ;
        favs.add(trip);
        favs.add(movie);
       /* sure.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                myclick(v);
            }
        });*/

        //result.setText(this.getIntent().getStringExtra("info"));
    }
    public String get()
    {
        RadioButton rd=(RadioButton)findViewById(se.getCheckedRadioButtonId());
        return rd.getText().toString();
    }
    public String getf()
    {
        String fav= "";
        for(CheckBox cb:favs)
        {
           if(cb.isChecked())
           {
               fav+=cb.getText().toString();
               fav+=",";
           }
        }
        if(!"".equals(fav))
        {
            fav=fav.substring(0,fav.length()-1);
        }
        else
            fav="";
        return fav;
    }
    public void go_back()
    {
        setContentView(R.layout.activity_main);
    }
    public void myclick(View view)
    {
       setContentView(R.layout.result_activity);
       /* sb.append("用户名："+ET1.getText().toString()+"\n");
        //sb.append("性别："+get().toString()+"\n");
        sb.append("电话："+ET2.getText().toString()+"\n");
        sb.append("爱好："+getf().toString()+"\n");
        Toast.makeText(this,sb.toString(),Toast.LENGTH_LONG).show();
        Intent intent=new Intent();
        intent.setClass(this,ResultActivity.class);
        //intent.putExtra("info",sb.toString());
       // this.startActivity(intent);
       */
  }
    public void login(View view)
    {
        loading.setCursorVisible(true);
        Toast.makeText(this,"此部分功能正在完善，敬请期待！".toString(),Toast.LENGTH_LONG).show();
    }
    public void  forgetPass(View view)
    {
        loading.setCursorVisible(true);
        Toast.makeText(this,"此部分功能正在完善，敬请期待！".toString(),Toast.LENGTH_LONG).show();
    }
    public void register(View view)
    {
        setContentView(R.layout.buju);
    }
}

总结：

(1)在进行apk安装后打开会出现程序异常终止并且不报告任何错误，这使得难以发现错误，使用调试后可以准确判断出在哪一行发生异常从而更改
(2)在布局中发现其他组件会贴在屏幕最右侧并无法拖动，原因：在布局方式中默认为水平布局，从而加上语句改为垂直布局，组件就会从上而下的排列。
(3)本实验由于是将两个工程合成一个，所以应注意更改主布局文件xml，更改xml：tools这一行。
(4)尽量不要用手拖动的方式进行布局，这要的布局有很多瑕疵，应该熟悉这种属性设置它的左右上下边距或者是左右上下的相对组件
(5)一个界面往往是多种的布局方式的嵌套，所以应该在合适的地方使用正确的布局方式从而减少工作量。