Android开发系列之UI开发

　　在app开发的过程中，我们会使用到大量的控件，了解各种控件的特性，熟练的使用它们是非常重要的，本篇会详细介绍几种常见控件的使用方法,废话不多说，直接上代码。

　　一、TextView

　　它主要用于在界面上显示一段文本信息。

1 <TextView
2         android:id="@+id/textView01"
3         android:layout_width="match_parent"
4         android:layout_height="wrap_content"
5         android:gravity="center"
6         android:textSize="24sp"
7         android:textColor="#00ff00"
8         android:text="This is TextView"
9         />

　　二、EditText

　　它是程序用于和用户进行交互的控件，它允许用户在控件里输入和编辑内容，并可以在程序中对这些内容进行处理。

 1 <EditText
 2         android:id="@+id/editText01"
 3         android:layout_width="match_parent"
 4         android:layout_height="wrap_content"
 5         android:hint="请输入…"
 6         android:maxLines="2"
 7 
 8         />
 9 
10 
11     //通过点击按钮获取EditText中输入的内容
12     public void btn1Action(View view){
13         EditText editText = (EditText)findViewById(R.id.editText01);
14         //EditText的getText()方法获取到输入的内容，再调用toString()方法转换成字符串
15         String inputText = editText.getText().toString();
16         Toast.makeText(MainActivity.this, inputText, Toast.LENGTH_SHORT).show();
17     }

　　三、ImageView

 1 <ImageView
 2         android:id="@+id/img01"
 3         android:layout_width="wrap_content"
 4         android:layout_height="wrap_content"
 5         android:src="@drawable/chat_pressed"
 6         android:layout_gravity="center"
 7         />
 8 
 9     //通过点击按钮动态改变ImageView的图片
10     public void btn1Action(View view){
11         ImageView imgView = (ImageView)findViewById(R.id.img01);
12         imgView.setImageResource(R.drawable.friends_pressed);
13     }

　　四、ProgressBar

 1 <ProgressBar
 2         android:id="@+id/progressBar01"
 3         android:layout_width="200px"
 4         android:layout_height="50px"
 5         android:layout_gravity="center"
 6         />
 7 
 8 
 9     /*
10     * 通过点击按钮动态改变ProgressBar的状态
11     * android:visible   表示控件是可见的，默认
12     * android:invisible 表示控件不可见，但是仍占据原来的位置和大小
13     * android:gone      表示控件不仅不可见，而且不占据原来的位置和大小
14     * */
15     public void btn1Action(View view){
16         ProgressBar progressBar = (ProgressBar)findViewById(R.id.progressBar01);
17         if (progressBar.getVisibility() == View.GONE){
18             progressBar.setVisibility(View.VISIBLE);
19         }else {
20             progressBar.setVisibility(View.GONE);
21         }
22     }

　　此外，我们还可以给ProgressBar指定不同的样式，上面是圆形进度条，通过style属性可以将它指定成水平进度条。

 1 <ProgressBar
 2         android:id="@+id/progressBar01"
 3         android:layout_width="200px"
 4         android:layout_height="50px"
 5         android:layout_gravity="center"
 6         style="?android:attr/progressBarStyleHorizontal"
 7         android:max="100"
 8         />
 9 
10 
11     //通过点击按钮动态改变ProgressBar的进度
12     public void btn1Action(View view){
13         ProgressBar progressBar = (ProgressBar)findViewById(R.id.progressBar01);
14         int progress = progressBar.getProgress();
15         progress = progress + 10;
16         progressBar.setProgress(progress);
17     }

　　五、AlertDialog

　 AlertDialog可以在当前的界面弹出一个对话框，这个对话框是置顶于所有界面元素之上的，能够屏蔽掉其他控件的交互能力，因此一般AlertDialog都是用于提示一些非常重要的内容或者警告信息。

    /*
    * 通过AlertDialog.Builder创建一个AlertDialog实例，然后可以为这个对话框设置标题、内容、等属性，接下来
    * 调用setPositiveButton()方法为对话框设置确定按钮点击事件，调用setNegativeButton()设置取消按钮点击
    * 事件，最后调用show()方法将对话框显示出来
    * */
    public void btn1Action(View view) {
        AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
        dialog.setTitle("This is Dialog");
        dialog.setMessage("android");
        dialog.setCancelable(false);
        dialog.setPositiveButton("Ok", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                Toast.makeText(MainActivity.this, "OK", Toast.LENGTH_SHORT).show();
            }
        });
        dialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                Toast.makeText(MainActivity.this, "Cancel", Toast.LENGTH_SHORT).show();
            }
        });
        dialog.show();
    }

　　六、ProgressDialog

　　ProgressDialog与AlertDialog类似，不同的是它在对话框中显示一个进度条，一般用于表示当前操作比较耗时，让用户耐心地等待。注意，如果在setCancelable()中传入了false，表示ProgressDialog是不能通过Back键取消掉的，这时你就一定要在代码中做好控制，当数据加载完成后必须要调用ProgressDialog的dismiss()方法来关闭对话框，否则ProgressDialog将会一直存在。

1 public void btn1Action(View view) {
2         ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);
3         progressDialog.setTitle("This is ProgressDialog");
4         progressDialog.setMessage("Loading…");
5         progressDialog.setCancelable(true);
6         progressDialog.show();
7     }

　　七、详解四种基本布局

　　一个丰富的界面不仅需要有多个控件组成，更要选择合适的布局使各个控件有条不絮地摆放在界面上，让界面看起来更佳美观。android开发过程中主要有四种基本布局：LinearLayout、RelativeLayout、FrameLayout和TableLayout。

　（1）LinearLayout

　 LinearLayout是一种线性布局，这种布局会将它所包含的控件在线性方向上依次排列。需要注意的是，如果LinearLayout的排列方向是horizontal，内部的控件就绝对不能将宽度指定为match_parent,因为这样的话单独一个控件就会将整个水平方向占满，其它的控件就没有可放置的位置了。同样的道理，如果LinearLayout的排列方向是vertical，内部的控件就不能将高度指定为match_parent。下面介绍两个属性:

　　 android:layout_gravity 当LinearLayout的排列方向是horizontal时，只有垂直方向上的对齐方式才会生效，因为此时水平方向上的长度是不固定的。同样的道理，当LinearLayout的排列方向是vertical时，只有水平方向上的对齐方式才会生效。

　　　 android:layout_weight 这个属性允许我们使用比例的方式来指定控件的大小，它在手机屏幕的适配性方面可以起到非常重要的作用。

　（2）RelativeLayout

　 RelativeLayout又称相对布局，它和LinearLayout的排列规则不同，RelativeLayout显得更加随意一些，它可以通过相对定位的方式让控件出现在布局的任何位置。使用相对布局需要理解下面属性的使用：

        android:layout_centerInParent="true"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"    


        android:layout_below="@+id/btn02"
        android:layout_toLeftOf="@+id/btn02"
        android:layout_above="@+id/btn02"
        android:layout_toRightOf="@+id/btn02"

　（3）FrameLayout

　 FrameLayout的应用场景很少，这种布局没有任何的定位方式，所有的控件都会摆放在布局的左上角。

　（4）TableLayout

　 TableLayout允许我们使用表格的方式来排列控件。它的应用场景也很少，既然是表格，那就一定会有行和列，在设计表格时我们尽量应该让每一行都拥有相同的列数，这样的表格也是最简单的，但是如果表格的某行一定要有不相等的列数时，就需要通过合并单元格的方式来应对。

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent"
 6     android:stretchColumns="1"
 7     tools:context="com.example.whs.newandroid01.SecondActivity">
 8 
 9     <TableRow>
10         <TextView
11             android:layout_height="wrap_content"
12             android:text="name"
13             />
14         <EditText
15             android:layout_height="wrap_content"
16             android:hint="input your account"
17             />
18     </TableRow>
19 
20     <TableRow>
21         <Button
22             android:layout_height="wrap_content"
23             android:text="Login"
24             android:layout_span="2"
25             />
26 
27     </TableRow>
28 
29 </TableLayout>

　　在TableLayout中每加入一个TableRow就表示在表格中添加了一行，然后每个TableRow中每加入一个控件，就表示在该行中加入一列，TableLayout中的控件不能指定宽度，这里将表格设计成两行两列，但是第二行只有一列，这时使用android:layout_span="2"让按钮占据两列的空间，这样就可以保证表格结构的合理性了。还有就是如果表格不能完全沾满屏幕宽度，就将第二列进行拉伸android:stretchColumns="1"，指定成0，表示拉伸第一列。

　　八、使用代码创建布局

 1 package com.example.whs.myapplication;
 2 
 3 import android.support.v7.app.AppCompatActivity;
 4 import android.os.Bundle;
 5 import android.text.Layout;
 6 import android.view.ViewGroup;
 7 import android.widget.Button;
 8 import android.widget.LinearLayout;
 9 
10 public class Main2Activity extends AppCompatActivity {
11 
12     @Override
13     protected void onCreate(Bundle savedInstanceState) {
14         super.onCreate(savedInstanceState);
15         //setContentView(R.layout.activity_main2);
16         LinearLayout layout = new LinearLayout(this);
17         layout.setOrientation(LinearLayout.VERTICAL);
18         Button button = new Button(this);
19         button.setText("Button");
20         button.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT));
21         layout.addView(button);
22 
23         setContentView(layout);
24 
25         //MyApplication application = (MyApplication)this.getApplication();
26         //System.out.println("第二页" + application.getScore());
27 
28     }
29 }

posted @ 2017-04-20 09:09 hongsheng 阅读(525) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部