UI界面设计

UI控件的使用

TextView

<TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="This is a TextView"
        android:textColor="#00ff00"
        android:textSize="24sp" />

要想使得文字居中，需要添加属性android:gravity="center"，可选择的选项还有top、bottom、left、right、center等，center相当于center_vertical|center_horizontal。
使用android:textSize="24sp"指定文字大小，android:textColor="#00ff00"指定文字颜色。

Button

<Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:textAllCaps="false"/>

在Android中，Button上面的文字默认英文全部大写，可以通过设置android:textAllCaps="false"改变

EditText

<EditText
        android:id="@+id/edittext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="HelloWorld"
        android:maxLength="20"
        android:maxLines="1" />

通过设置hint属性可以得到提示文字，设置maxLines使得输入框中最大输入行数。

ImageView

<ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img_2"
         />

图片文件放入drawable目录中，通过src指定位置。

ProgressBar

这是一种显示进度条的UI，用法如下：

<ProgressBar
        android:id="@+id/progressBar"

        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

这里可以得到一个一直旋转的圆形进度条，要使得进度条消失，就必须使用代码来控制其可见性。
Android中的控件的可见属性有三种：visible、invisible、gone，分别代表可见的、不可见但占据原来的位置、不可见也不占用屏幕控件，可用android:visibility进行指定。使用代码进行设置的时候使用的是setVisibility()方法，可以传入View.VISIBLE，View.INVISIBLE，View.GONE这三个值。
进行如下的测试：

public void onClick(View v) {

            switch (v.getId()){
                case R.id.button:

                if(progressBar.getVisibility()==View.GONE){

                    progressBar.setVisibility(View.VISIBLE);

                }else{
                    progressBar.setVisibility(View.GONE);
                }

                default:
                    break;

            }

        }

同时，可以通过style属性将进度条改为直线型：style="?android:attr/progressBarStyleHorizontal"，并且利用max属性将进度条的最大值设置为100。
再次使用代码，可以将进度条动态显示。

public void onClick(View v) {

            switch (v.getId()){
                case R.id.button:
                    int progress = progressBar.getProgress();
                    progress = progress+10;
                    progressBar.setProgress(progress);
                    break;
                default:
                    break;
            }
        }

AlertDialog

此控件会弹出一个对话框，置顶于所有元素之上，会屏蔽掉其它控件。通过代码来实现。

public void onClick(View v) {

            switch (v.getId()){
                case R.id.button:
                    AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);

                    dialog.setTitle("This is a Dialog");
                    dialog.setMessage("hunimabi");
                    dialog.setCancelable(false); //设置为false，按返回键不能退出

                    dialog.setPositiveButton("ok",new DialogInterface.OnClickListener(){


                        @Override
                        public void onClick(DialogInterface dialog, int which) {



                        }
                    });

                    dialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {

                        }
                    });

                    dialog.show();
                    break;
                default:
                    break;
            }

        }

ProgressDialog

此控件与AlertDialog类似，但是其会显示一个进度条，用代码实现：

 public void onClick(View v) {

            switch (v.getId()){
                case R.id.button:
                    ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);
                    progressDialog.setTitle("Hi");
                    progressDialog.setMessage("sb");
                    progressDialog.show();
                    break;

                default:
                    break;
            }
        }

UI布局

LinerLayout线性布局

此布局通过指定orientation属性指定控件排列方向，可选值为horizontal和vertical。
android:gravity属性可以指定控件在布局中的位置，但是若是垂直布局的话那么只能指定水平相对位置才能生效，同理，水平布局只有指定竖直相对位置才能生效。
android:layout_weight属性指定控件的相对大小，比如一个button为这个属性为3，一个为2，那么第一个button就占据3/5大小。

RelativeLayout相对布局

可以使得控件根据与父布局的相对位置进行定位。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:id="@+id/button2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button2"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="Button2" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"

        android:text="Button3" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:text="Button4" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="Button5" />

</RelativeLayout>

效果图如下所示：

image.png

也可以根据别的控件进行定位：

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        android:layout_above="@id/button4"
        android:layout_toLeftOf="@id/button4"
        android:id="@+id/button2" />

image.png

FrameLayout帧布局

这一种布局方式默认将控件放在左上角，基本上不怎么用到。

PercentFrameLayout、PercentRelativeLayout百分比布局

百分比布局属于新增的布局，其在support库中，在app/build.gradle中添加依赖

自定义组件

自定义标题栏

写一个简单的xml页面，在主布局中将其引入：

<include layout="@layout/test"/>

再在代码中将原来标题栏隐去，要放置在OnCreate方法中。

ActionBar actionBar = getSupportActionBar();
        if (actionBar!=null){
            actionBar.hide();
        }

like this：

自定义标题