Android开发-UI开发

目录

 

Android UI开发

1.布局的创建

2.布局类型

3.常用控件

4.布局操作

5 样式和主题

6 国际化 

 

---

Android UI开发

      UI（User Interface）界面即应用程序的界面。

1.布局的创建

      在Android程序中界面是通过布局文件设定的，在每个应用程序创建的时候都会默认包含一个主界面布局，该布局位于res/layout目录中。用于实际开发中每个应用程序都包含多个界面，而程序默认提供的一个主界面无法满足需求，因此需要在程序中添加多个布局。添加布局的过程为：选中layout文件夹并单击右键，依次选中New -> XML -> Layout XML File。在弹出的窗口中，Layout File Name代表文件的名称，Root Tag表示根元素标签，默认为LinearLayout（线性布局）。

2.布局类型

       2.1 LinearLayout（线性布局）

       主要以水平和垂直方式来显示界面中的控件。当控件水平排列时，显示顺序依次为从左到右；当控件垂直排列时，显示顺序依次为从上到下。

       在线性布局中，有一个非常重要的属性 orientation，用于控制控件的排列方向，该属性有vertical和horizontal（默认）两个值。

       vertical：线性布局垂直显示

       horizontal：线性布局水平显示

       LinearLayout还有一种属性，layout_weight，用于计算权重，权重越大，占的空间越大，在使用权重后，layout_width会失去效果，可以设置为layout_width="0dp"。

     2.2 RelativeLayout（相对布局）

      默认布局就是相对布局。相对布局就是通过相对定位的方式指定控件位置，即以其他控件或父容器为参照物，摆放位置。在设计相对布局时要遵循控件之间的依赖关系，后放入的控件的位置依赖于先放入的控件。

有五种类型的属性：

父控件中央对齐：用于设置控件位置的属性，属性值是true或false	描述
android:layout_centerHrizontal	水平居中
android:layout_centerVertical	垂直居中
android:layout_centerInparent	相对于父元素完全居中。

方向对齐：用于设置控件位置的属性，属性值是true或false,或者控件id	描述
android:layout_alignParentBottom	父控件边缘对齐：位于父元素的下边缘
android:layout_alignParentTop	父控件边缘对齐：位于父元素的上边缘
android:layout_alignParentLeft	父控件边缘对齐：位于父元素的左边缘
android:layout_alignParentRight	父控件边缘对齐：位于父元素的右边缘
android:layout_alignTop	方向对齐
android:layout_alignLeft	方向对齐
android:layout_alignBottom	方向对齐
android:layout_alignRight	方向对齐

   

内边距：设置布局内边距的属性，属性值是数值	描述
android:paddingTop	设置布局顶部内边距的距离
android:paddingBottom	设置布局顶部内边距的距离
android:paddingLeft	设置布局顶部内边距的距离
android:paddingRight	设置布局顶部内边距的距离
android:padding	设置布局顶部内边距的距离

 

方向位置：设置布局内边距的属性，属性值是某个控件的id	描述
android:layout_toRightOf	位于某个控件的左方位置
android:layout_toLeftOf	位于某个控件的右方位置
android:layout_above	位于某个控件的上方位置
android:layout_below	位于某个控件的下方位置

 

头部、尾部对齐：属性值是某个控件的id	描述
android:layout_alignStart	相对于某个控件头部对齐
android:layout_alignEnd	相对于某个控件尾部对齐
android:layout_alignParentStart	相对于父控件头部对齐
android:layout_alignParentEnd	相对于父控件尾部对齐

    2.3 FrameLayout（帧布局）

         该布局为每个加入其中的控件创建一个空白区域（称为一帧，每个控件占据一帧）。采用帧布局方式设计界面时，所有控件都默认显示在屏幕左上角，并按照先后放入的顺序重叠摆放。先放入的控件显示在最底层，后放入的控件显示在最顶层。这个布局的特点是从左上角开始，后面的会覆盖前面的控件。帧布局适用于图层设计，可以实现悬浮的效果（即控件的重叠）。例如应用图标上信息提示数量。帧布局的大小由内部最大控件决定，它有两个特殊属性，如下：

属性	描述
android:foreground	设置帧布局容器的前景图像（前景，始终在所有子控件之上）
android:foregroundGravity	设置前景图像显示位置（前景重力）
android:layout_gravity	控件重力

       

      2.4 TableLayout（表格布局）

        表格布局是以表格形式排列控件的，通过行和列将界面划分为多个单元格，每个单元格都可以添加控件。表格布局需要和TableRow配合使用，每一行都由TableRow对象组成，因此TableRow的数量觉得表格的行数。而表格的列数是由包含最多控件的TableRow决定的。例如第1个TableRow有2个控件，第2个TableRow有3个控件，则表格列数为3。

        如果直接在TableLayout中添加控件，那么控件将和父容器等宽。默认wrap_content。

       TableLayout继承自LinearLayout类，除了继承了父类的属性和方法，还包含了一些表格布局的特有属性，其属性如下：

属性
android:stretchColumns	设置该列被拉伸，列号从0开始。例如：android:strectchColumns="0" 表示第一列被拉伸
android:shrinkColumns	设置该列被收缩，列号从0开始。例如：android:shrinkColumns="1,2" 表示第2,3列可收缩
android:collapseColumns	设置该列被隐藏，列号从0开始。例如：android:collapseColumns="0" 表示第1列隐藏。

      表格布局中控件有两个常用的属性，分别用于设置控件显示位置，占据行数，如下：

属性	描述
android:layout_column	设置该单元显示位置，如android:layout_column="1" 表示在第2个位置显示
android:layout_span	设置该单元格占据几行，默认1行

           

      2.5 AbsoluteLayout（绝对布局）   

         绝对布局是通过指定x,y坐标来控制每一个控件位置的。随着智能手机种类的繁多，屏幕分辨率千变万化，使用绝对布局需要精确的计算控件大小，同时还要考虑手机屏幕尺寸和分辨率，在开发中这是非常低效的，一次不推荐使用。同时，在GoogleAPI中提示此类已提示弃用，可使用FrameLayout，RelativeLayout代替它。下面介绍设置控件位置的两个属性：

          android:layout_x                  设置x坐标

          android:layout_y                  设置y坐标

    2.6 GridLayout（网格布局）

           自定义行、列数量，重要属性如下：

属性	描述
android:rowCount	行数量
android:columnCount	列数量

    2.7 ConstraintLayout（约束布局）

           类似于RelativeLayout（相对布局），但比其更加强大，强调约束。解决布局嵌套过多问题。

app:layout_constraintBottom_toBottomOf	将当前View的底部位置约束到另一个控件或容器的底部位置 距离变为0，除非设置。
app:layout_constraintHorizontal_bias="0.5"	bias（偏移量），设置水平偏移量进行设置位置
app:layout_constraintVertical_bias="0.98"	设置垂直偏移量
app:layout_constraintTop_toBottomOf=""	将当前View控件的顶部位置约束到另一个控件或容器的底部位置
app:layout_constraintStart_toStartOf=""
app:layout_constraintEnd_toEndOf=""
Guidelines的使用	用于控件的位置摆放
app:layout_constraintGuide_percent="0.5"	设置基准线位置在50%处

   

 

3.常用控件

     控件是界面组成的要素，例如TextView（文本框），EditText（编辑框），Button（按钮）等。

控件	描述
TextView	文本框
EditText	编辑框
Button	按钮
RadioButton（单选按钮）	圆形单选按钮
RadioGroup	RadioGroup是一个包含一个或多个RadioButton的容器
ImageView	用于显示图标图片
ImageButton	图片按钮
Dialog（普通对话框）	单选对话框、多选对话框、进度条对话框 、自定义对话框
Toast（消息对话框）	消息对话框
CheckBoox（多选框）	多选框
ToggleButton	类似于开关按钮，点击不同的次数会显示不同的文本内容。
SeekBar（可拖动的进度条）	可拖动的进度条
ProgressBar	样式分为：圆形样式与水平方向直线样式。包括SeekBar、RatingBar

3.1 TextView

3.1.1 属性

android:text	设置显示文本
android:textColor	设置文本的颜色
android:textSize	设置文字大小 ,如android:textSize="15sp"
android:textStyle	设置文字样式，如bold（粗体），italic（斜体），bolditalic（粗斜体）
android:height	设置文字区域的高度，支持单位：px/dp（推荐）/sp/in/mm
android:width	设置文字区域的宽度，支持单位：px/dp（推荐）/sp/in/mm
android:maxLength	设置文本长度，超出不显示，如android:maxLength="10"
android:layout_height	设置TextView控件的高度
android:gravity	设置文本位置，如设置"center"，文本将居中显示
android:layout_width	设置TextView控件的宽度
android:visibility	设置TextView控件显示方式。 invisible： 隐藏 gone：消失 visible：显示
android:drawableXXX	根据位置设置文字上、下、左或者右方的图标

3.1.2 设置划线

//下划线 
textView.getPaint().setFlags(Paint. UNDERLINE_TEXT_FLAG );

//抗锯齿
textView.getPaint().setAntiAlias(true);

//中划线
textview.getPaint().setFlags(Paint. STRIKE_THRU_TEXT_FLAG); 

// 设置中划线并加清晰 
textview.setFlags(Paint. STRIKE_THRU_TEXT_FLAG|Paint.ANTI_ALIAS_FLAG);  

   

3.2 EditText

       用于接收用户输入的数据，继承自TextView，与TextView最大的不同就是用户可以在设备上对EditText控件进行操作，同时可以为EditText控件设置监听器，用来测试用户输入的内容是否合法。EditText除了具有TextView的一些属性外，还有自己的特有属性。

属性	解释
android:hint=“”	设置EditText没有输入内容时显示的提示文本内容。
android:lines	设置固定行数来决定EditText的高度
android:maxLines	设置最大行数
android:minLines	设置最小行数
android:password	设置文本以密码形式"*"显示
android:phoneNumber	设置文本以电话号码方式输入
android:scrollHorizontally	设置文本超出TextView的宽度情况下，是否出现横拉条。
android:capitalize	设置首字母大写
android:editable	设置是否可编辑
android:inputType	设置文本类型

 

     3.3 Button

       Button控件常用的点击方式有4种，分别是：在布局中指定onClick属性，使用匿名内部类，在当前Activity中实现OnClickListener接口，通过创建内部类形式。

     3.4 RadioButton

        RadioButton为圆形单选按钮，需要与RadioGroup配合使用，RadioGroup是个可以容乃多个RadioButton的容器，提供两个或多个互斥的选项集，仅有一个RadioButton可以被选中。使用android:orientation控制RadioButton排列方向。

           RadioButton有一个特有属性checked，该属性值如果被设置为true，按钮会默认选中，设置为false，则按钮未被选中。

控件的使用：

     3.5 ImageView

          ImageView是视图控件，继承自view，其功能是在屏幕显示图像。ImageView类可以从各种来源加载图像（如资源库或网络），并提供缩放、裁剪、着色（渲染）等功能。

          src为前景，background为背景。有setImageResource()属性，用于设置显示的图片。

    3.6 ImageButton

          带有按钮的图标。

    3.7 普通对话框

         在普通对话框（Dialog）中，一般只会显示提示信息，并通常具有“确定”和“取消”按钮。有如下几种常用方法：

          setTitle()  设置对话框标题

          setIcon()  设置对话框图标

          setPositiveButton()  设置对话框添加yes按钮

          setNegativeButton()  设置对话框添加no按钮

          setMessage()  设置对话框提示信息

          

      3.8 单选对话框

          单选对话框和RadioButton类似，只能选择一个选项，它是通过AlertDialog对象调用setSingleChoiceItems()方法创建的。      

     new AlertDialog.Builder(this)
        .setTitle("请选择性别")            //设置标题
        .setIcon(R.mipmap.ic_launcher)     //设置图标
        .setSingleChoiceItems(new String[]{"男","女"},0,new DialogInterface.OnClickListener(){
            public void onClick(DialogInterface dialog,int which){
            }
        })
        .setPositiveButton("确定",null)
        .show();

      3.9 多选对话框

           创建对选对话框与创建多选对话框类似，调用setMultiChoiceItems()方法就可实现。      

     new AlertDialog.Builder(this)
         .setTitle("请选择性别")            //设置标题
         .setIcon(R.mipmap.ic_launcher)     //设置图标
         .setMultiChoiceItems(new String[]{"旅游","美食","汽车","宠物"},new boolean[] {true,false,false,true},null)  //设置那些选择被选中，无则可以设置null
         .setPositiveButton("确定",null)
         .show();

     3.10 进度条对话框         

        ProgressDialog prodialog;
        prodialog = new ProgressDialog(this);
        prodialog.setTitle("进度条对话框");
        prodialog.setIcon(R.mipmap.ic_launcher);
        prodialog.setMessage("正在下载请等候...");
        //设置水平进度条
        //prodialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);
        //设置圆形进度条
        prodialog.setProgressStyle((ProgressDialog.STYLE_SPINNER));
        prodialog.show();

   3.11 消息对话框

      消息对话框（Toast）是Android系统提供的轻量级消息提醒机制，用于向用户提示即时消息，Toast对话框显示在应用程序界面的最上层，显示一段时间后自动消失，不会打断当前操作，也不获得焦点。由于Toast只起到提示作用，因此多用在触发事件的监听中。

Toast.makeText(this, "Hello,Toast", Toast.LENGTH_SHORT).show();

  3.12 创建自定义对话框

  3.13 CheckBox（多选框）

        CheckedBox为矩形小方框，android:checked="true"默认选中。其监听事件继承类为：OnCheckedChangeListener，重写其onCheckedChanged(CompoubdButton buttonView,boolean isChecked)方法

  控件的使用：     

监听事件：

class CheckedListener implements CompoundButton.OnCheckedChangeListener{
    public void onCheckedChanged(CompoundButton buttonView,boolean isChecked){
        //重写其方法
        CheckBox checkBox = (CheckBox)buttonView;
        switch (checkBox.getId()){
            case R.id.addressbook_btn_add:
                //实现内容
                break;
        }
    }
}

 3.14 ToggleButton

          类似于开关，on与off对应开关，点击不同的次数显示不同的文本内容。可与ImageView一起使用，添加图片。为其添加监听器的方法：OnClickListener()与OnItemSelectedListener()方法。

控件的使用：

   3.15 SeekBar（可拖动的进度条）

       添加监听器方法：setOnSeekBarChangrListener（）方法，

seekBar.setMax(100);	设置最大进度值
seekBar.setProgress(30);	设置当前进度值
seekBar.getProgress();	得到当前的进度值

控件的使用：

添加监听器方法的使用：

public class SeekBarActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.seekbar_layout);
        SeekBar seekBar = (SeekBar)findViewById(R.id.seekbar);
        seekBar.setMax(100);       //设置最大进度值
        seekBar.setProgress(30);   //设置当前进度值
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                //将在结束拖拽进度条时被触发
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                //将在开始拖拽进度条时被触发
            }
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                //将在进度条发送变化时被触发
            }
        });
    }
}

     3.16 ProgressBar

         样式分为：圆形样式与水平方向直线样式。默认圆形样式。

属性	描述
style	改变进度条的样式
max	进度条的最大值，可以在xml布局文件中设置和Activity中通过对象设置。
progress	进度条的当前进度
SecondaryProgress	进度条的次要进度，如缓冲区。

控件的使用：

 

4.布局操作

     android:layout_width="" 与 android:layout_height=""，里面可填wrap_content（包裹内容让当前控件根据控件内容大小自动伸缩），match_parant（填充父窗体由父窗体容器大小决定控件大小）

5 样式和主题

       样式是针对某个view，例如TextView或Button等控件，而主题是针对整个Activity界面或整个应用程序。

   5.1 样式

       样式（style）是包含一种或多种控件的属性集合，可以指定控件的高度、宽度、字体大小及颜色等。Android中的样式类似于网页中的css躺尸，可以让设计与内容分离。样式在XML资源文件汇总定义，并且可以被继承、复用等。

        创建一个样式，首先需要找到res\values\style目录下style.xml文件，打开可以看到根标签和定义样式的

layout的xml文件:

  5.2 主题

        主题（theme）是应用到整个Activity和Application的样式，而不是只应用到单个视图。当设置好主题后，Activity或整个程序中的视图都将使用主题中的属性。当主题和样式中的属性发生冲突时，样式的优先级要高于主题。

        主题和样式在代码结构上是一样的，不同的是在于引用方式上。主题要在AndroidManifest.xml文件中引用。

    style.xml:

      说明：标签中同样存在android:theme属性，此处是整个应用程序主题的样式，而标签中是改变当前界面的主题样式。

   androidManifest.xml:

    说明：在Activity代码中同样可以引用自定义主题，只需要在Activity类onCreate()方法内添加setTheme()方法即可。例如setTheme(R.style.grayTheme)。setTheme()方法位置不能创建再逻辑代码之后，要在Activity界面创建加载时执行，因为代码执行顺序是由上至下，位置错误会导致一些功能代码不会执行，通常情况下将此方法放在setContentView()方法之后即可。

6 国际化 

     想要让不同国家的用户看到不同的效果，就需要对这个应用进行国际化（internationalization）。

  strings.xml文件：

    安卓_i18n
    你好，世界!

  layout布局文件：