Android UI学习系列

学习步骤和重点

• UI布局
• 主要UI元素
• 主要按钮和事件
• 屏幕跳转
• 弹出框

一. Android UI布局

本段主要参考 此人博客，稍加整理。原文请见：原文

1.1 线性布局（LinearLayout）

此种布局一个重要参数为android:orientation="horizontal"（水平显示），共2中元素垂直显示为“vertical”。

参考代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
</LinearLayout>

1.2 相对布局（RelativeLayout）

此种布局非常的好用方便，你可以按照自己的需要，快速的定位你的UI元素到你想要的位置，重要参数

android:layout_below：“相对应按钮idA”，此句代码表示相对于按钮A的下方。其他上下左右可以自己实践。

参考代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ProgressBar
        android:id="@+id/progressBar1"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="60dp" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/progressBar1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="52dp"
        android:text="正在加载中..."
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

参考图片实例

1.3 列表视图（List View）

暂时忽略不讲，后面用到再总结。

二 主要UI元素

视图类android.view.View是widgets的基类，Android的UI元素大部分都包含在android.Widgets中。各个类的继承关系如下图

2.1 文本（TextView）

就是简单的文本显示,后台获取文本的内容代码：

TextView viewme=(TextView) findViewById(R.id.textView1);
viewme.setText(“test”);

2.2 按钮（Button）

按钮也是比较简单的，下节重点讲解事件

2.3 图片（ImageView）

ImageView的核心是图像的来源，方法有3种，代码如下：

img.setImageResource(resId)
img.setImageBitmap(bm)
img.setImageURI(uri)

2.4 进度条

主要参数，获取最大值getMax()，设置长度progressCire.setProgress(100);

2.5 下拉按钮（Spinner）

主要是设置内容来源：

Spinner spinnerDemo=(Spinner) findViewById(R.id.spinner1);
        
        ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item);
        adapter.add("红色");
        adapter.add("蓝色");
        spinnerDemo.setAdapter(adapter);

也可以使用values文件夹下新建一个数组内容文件，例如：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="colors">
        <item>红色</item>
        <item>橙色</item>
        <item>黄色</item>
        <item>绿色</item>
        <item>蓝色</item>
        <item>紫色</item>
    </string-array>
</resources>

使用时，直接用R.array.colors

2.6 文本切换器（TextSwitcher）

暂时忽略，后续补充。

三 按钮事件

场景设置：点击按钮，文本框中出现hello word！

事件代码实现：

//新增一个按钮事件
        Button button=(Button) findViewById(R.id.button1);

        //设置监听

        button.setOnClickListener(new Button.OnClickListener()

        {

           public void onClick(View v) {
               
              TextView viewme=(TextView) findViewById(R.id.textView1);
        viewme.setText(“hello word!”);
           }
         

        });

四 屏幕跳转

首先要准备2个页面Activity,这里有A和B2个页面（A是主页面），然后在AndroidManifest.xml中新增一个配置（A页面已经默认存在）。

<activity android:name=".B"></activity>

因为只能有一个主启动页面，所以B中不包含

<activity
            android:name=".A"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

A中事件代码：

//跳转
        Button buttonGo=(Button) findViewById(R.id.button2);
        buttonGo.setOnClickListener(new Button.OnClickListener()
        {

           public void onClick(View v) {
              Intent intent=new Intent();
              intent.setClass(ReaBoxActivity.this, ImgShowActivity.class);
              startActivity(intent);
              finish();
           }         
        });
    }

 

五 弹出框

对话框的类为android.app.Dialog,通过android.app.AlertDialog.Builder类来建立。

还有一种简单的弹出框实现，代码如下：

import android.widget.Toast;
Toast.makeText(this,“hello”, Toast.LENGTH_SHORT).show();