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

   

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

 

 

Android UI开发专题 Android UI开发专题(一) 之界面设计 近期很多网友对Android用户界面的设计表示很感兴趣,对于Android UI开发自绘控件和游戏制作而言掌握好绘图基础是必不可少的。本次专题分10节来讲述,有关OpenGL ES相关的可能将放到以后再透露。本次主要涉及以下四个包的相关内容:  android.content.res 资源类   android.graphics 底层图形类   android.view 显示类   android.widget 控件类   一、android.content.res.Resources   对于Android平台的资源类android.content.res.Resources可能很多网友比较陌生,一起来看看SDK上是怎么介绍的吧,Contains classes for accessing application resources, such as raw asset files, colors, drawables, media or other other files in the package, plus important device configuration details (orientation, input types, etc.) that affect how the application may behave.平时用到的二进制源文件raw、颜色colors、图形drawables和多媒体文件media的相关资源均通过该类来管理。   int getColor(int id) 对应res/values/colors.xml   Drawable getDrawable(int id) 对应res/drawable/   XmlResourceParser getLayout(int id) 对应res/layout/   String getString(int id) 和CharSequence getText(int id) 对应res/values/strings.xml   InputStream openRawResource(int id) 对应res/raw/   void parseBundleExtra (String tagName, AttributeSet attrs, Bundle outBundle) 对应res/xml/   String[] getStringArray(int id) res/values/arrays.xml   float getDimension(int id) res/values/dimens.xml
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

luckyliuqs

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

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

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

打赏作者

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

抵扣说明:

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

余额充值