android studio设计组件,Android Studio开发-day3 UI界面设计

UI界面设计

UI控件的使用

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

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

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

android:id="@+id/imageView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/img_2"

/>

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

ProgressBar

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

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相对布局

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

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

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" />

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" />

android:id="@+id/button4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:text="Button3" />

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" />

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" />

效果图如下所示：

image.png

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

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页面，在主布局中将其引入：

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

ActionBar actionBar = getSupportActionBar();

if (actionBar!=null){

actionBar.hide();

}

like this：

自定义标题