Android开发-UI开发

本文围绕Android UI开发展开,介绍了布局的创建方法,阐述了线性、相对、帧等多种布局类型及其属性,讲解了TextView、EditText等常用控件的使用,还涉及布局操作、样式和主题设置,以及应用的国际化处理,为Android UI开发提供了全面指导。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

 

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%处

   

<android.support.constraint.ConstraintLayout            
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="按钮"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />
</android.support.constraint.ConstraintLayout>

 

3.常用控件

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

控件描述
TextView文本框
EditText编辑框
Button

按钮

 

RadioButton(单选按钮)圆形单选按钮
RadioGroupRadioGroup是一个包含一个或多个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,则按钮未被选中。

控件的使用:

<RadioGroup
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="男"/>
    <RadioButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="女"/>
</RadioGroup>

     3.5 ImageView

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

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

<ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ff00ff"
        android:src="@drawable/cat"/>

    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)方法

  控件的使用:     

<CheckBox
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="爱好"/>

监听事件:

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()方法。

控件的使用:

<ToggleButton
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textOff="不开心"
    android:textOn="开心"/>

   3.15 SeekBar(可拖动的进度条)

       添加监听器方法:setOnSeekBarChangrListener()方法,

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

控件的使用:

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

添加监听器方法的使用:

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进度条的次要进度,如缓冲区。

控件的使用:

<!-- 超大号圆形 -->
<ProgressBar
    android:id="@+id/progressbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="?android:attr/progressBarStyleLargeInverse"/>
<!-- 水平方向进度条 -->
<ProgressBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="?android:attr/progressBarStyleHorizontal"
    android:max="100"
    android:progress="30"
    android:secondaryProgress="50"/>

 

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文件,打开可以看到<resource>根标签和定义样式的<style>标签,它包含多个<item>来声明样式名称和属性。

  style.xml文件:

<style name="textStyle_one">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">#999999</item>
    <item name="android:textSize">35sp</item>
</style>
<style name="textStyle_two" parent="@style/textStyle_one">
    <item name="android:textSize">25sp</item>
</style>

layout的xml文件:

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="TextView样式1"
    style="@style/textStyle_one"/>
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="TextView样式2"
    style="@style/textStyle_two"/>

  5.2 主题

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

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

    style.xml:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
   
    <!-- 主题 -->
    <!-- 需要用到parent属性去继承"Theme.AppCompat.Light.DarkActionBar"来保证兼容性 -->
    <style name="grayTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:background">#999999</item>
    </style>

</resources>

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

   androidManifest.xml:

<activity
    android:name=".MainActivity_toast"
    android:theme="@style/grayTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

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

6 国际化 

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

  strings.xml文件:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">安卓_i18n</string>
    <string name="hello_world">你好,世界!</string>
</resources>

  layout布局文件:

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello_world"
    android:textSize="25sp"/>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

luckyliuqs

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值