之前都是学习Activity,对于布局都没有做过学习,这里就简单学习下吧。下面看下Android Studio下有哪些控件:

这里分为Widgets,Text Fields,Containers,Date & Time和Expert。

其中Widgets微件主要是一些简单地单一的功能,像TextView用来显示一些文字信息,Button用来触发按钮,RadioButton,CheckBox,Switch都是选择用的,ImageButton是可以添加图片,ImageView用来显示图片,ProgressBar是进度条,SeekBar是可拖动的进度条,Rating Bar是点星的功能,Spinner是下拉列表,WebView是用来显示web页面的。这里一般都是静态的显示为主,用户只有点击拖动,很少输入。

Text Fields主要是一些动态的和用户交互的内容,也即EditText,一般都需要输入。像Plain Text,Person Name,Password,E-mail,Phone,Postal Address, Multiline Text,Time,Date,Number等都是需要输入的信息。

Containers是容器的意思,这里基本上都是一个一个常用的view的容器。

Date & Time主要是一些时间和日期的控件。

Expert大概是专家级用的吧,不太明白,以后再看看。

这里先简单学习下TextView,Button,EditView,ImageView,ProcessBar,AlertDialog,ProcessDialog等。

首先是前面两个在前段时间已经学习过了的,TextView和Button。先学习下TextView,先看下系统为我们创建的代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context="com.example.jared.uiwidgettest.MainActivity"> <TextView
android:text="Hello World!"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textView" /> </RelativeLayout>

这里主要看下TextView这个控件的代码,这里基本上都是xml来实现的。<TextView …… />,在这里面填写需要实现的布局和内容等。其中android:text是要显示的问题,android:layout是布局,android:id是在代码实现时需要获取控制的唯一标识符。

显示效果如下:

    可以看出内容是左对齐的,默认都是这样的,那么我们来修改下居中试试,修改代码如下:

    Android Studio用来左边写xml,右边实时显示效果非常棒,这样,左边的xml什么效果,右边很直观的就看到了。这里添加了android:gravity属性,其实这个属性的意思就是引力,选择center,就可以让显示的文字居中了,当然我们还可以选择top,bottom,left,right,效果这里就演示了。有没有觉得这样显示的话,字体都是同样的大小,同样的颜色,当然这里可以再次修改其中的字体的大小和颜色的不同。修改代码如下所示:

    这里通过android:textSize来改变字体,大小为25sp(网上说最好用dp,sp不同设备可能会有不同的显示效果),关于sp,dp和px,这里也说说吧,
    px就是pixels,就是像素的意思,不同的设备显示效果相同,一般HVGA代表320*480像素。
    sp是scaled pixels,放大像素的意思,主要用于字体显示。
    dp是device independent pixels,设备独立像素,不同设备有不同的显示效果,这个和设备硬件有关,一般为了支持WVGA,HVGA和QVGA使用这个,不依赖像素。
    字体简单讲解了,然后是通过android:textColor来改变颜色,一般颜色都是用rgb表示的,而每个颜色都有0-255组成,也即习惯性表示为(255,255,255),16进制表示的话就是ffffff了,这里红色,所以第一个8位为ff,其余为0,就是#ff0000了,如果是绿色,那么就是#00ff00了,如果是蓝色就是#0000ff。
    这里的字体和颜色都是通过数字表示的,那么如果我们有很多很多的xml,很多很多的字体和颜色,那么万一要修改的话,不是需要到处都修改吗?其实这里可以用到values目录下的color.xml和style.xml了。这里不多讲,以后会详细说明的。关于TextView就差不多讲到了这里,接着看Button,添加代码如下:

    Button和TextView其实差不多,主要Button还有一个监听事件,这个监听事件相信在前面几篇文章中介绍的很多了,不过如果有很多button的话,不是代码量会很多?管理很不方便?这里就还有一个方法,添加另一个button,如下:

    添加MainActivity代码如下:
package com.example.jared.uiwidgettest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast; public class MainActivity extends AppCompatActivity { private Button button1;
private Button button2; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); button1 = (Button)findViewById(R.id.button1);
button1.setOnClickListener(new MyOnClickListener());
button2 = (Button)findViewById(R.id.button2);
button2.setOnClickListener(new MyOnClickListener());
} class MyOnClickListener implements View.OnClickListener {
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.button1:
Toast.makeText(MainActivity.this, "Button1 is clicked !",
Toast.LENGTH_SHORT).show();
break;
case R.id.button2:
Toast.makeText(MainActivity.this, "Button2 is clicked !",
Toast.LENGTH_SHORT).show();
default:break;
}
}
}
}

这里实现了内部类MyOnClickListener继承实现了OnClickListener类,然后根据不同的id处理不同逻辑。这样在onCreat方法里的代码就不会一大串了,逻辑更加清晰。好了,Button就讲这么多了。

     下面开始学习Editext,顾名思义,就是可编辑的text了,像注册啊,发邮件啊都是需要这个控件的,那就简单来写一个吧,添加如下代码:
    <EditText
android:id="@+id/editText"
android:layout_below="@id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

运行查看效果如下:


    如图已经可以输入文字了,还有就是一般像我们注册一个账号的时候,总是会有显示帮助,当我们真的输入的时候就自动隐藏了,android里面有自带的功能,如下图所示:

    可以看出隐形的问题,然后运行后输入文字后就不显示了。
    下面看看android:maxLines属性,可以看出这个主要是控制行数,如果不加控制的话,行数会随着文字的个数不断往下拉,因为我们的layout_height设置的事wrap_content,包含住所有的文字,看一下效果图:

    万一我们EditText下面还有控件,整个UI不是很乱了吗,添加android:maxLines如下:
<EditText
android:id="@+id/editText"
android:layout_below="@id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Input something for test"
android:maxLines="3"/>

这里设置了3行,运行如下所示:


    如上图所示,这里只有三行,当多于三行文字,那么就可以通过滚动来查看文字,这样的界面显得更加地整洁。
    既然这些是输入的内容,那么怎么在代码中获取其中的数据呢?下面通过Button来获取数据显示,添加代码如下:
package com.example.jared.uiwidgettest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast; public class MainActivity extends AppCompatActivity { private Button button1;
private Button button2;
private EditText editText; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); editText = (EditText)findViewById(R.id.editText);
button1 = (Button)findViewById(R.id.button1);
button2 = (Button)findViewById(R.id.button2); button1.setOnClickListener(new MyOnClickListener());
button2.setOnClickListener(new MyOnClickListener());
} class MyOnClickListener implements View.OnClickListener {
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.button1:
String editdata = editText.getText().toString();
Toast.makeText(MainActivity.this, "Edit content: " + editdata,
Toast.LENGTH_SHORT).show();
break;
case R.id.button2:
Toast.makeText(MainActivity.this, "Button2 is clicked !",
Toast.LENGTH_SHORT).show();
default:break;
}
}
}
}

    运行后输入文字,并且按button1按钮,效果如下所示:

    EditText先学到这里,下面继续学习ImageView,是否发现基本的控件都类似的,很多接口Android Studio也会有自动补全,写起代码来确实比linux舒服多了。
    ImageView其实就是把一张图片展示出来,这里先准备两张图片,并且放到drawable下面。添加代码:

    注意,这里的图片名称不可以是数字开头的,一开始我用1.png,然后就报错了,所以这里还是英文字母开头靠谱,还是不能偷懒。这里有两张图片,那我们来试试通过按钮显示不同的图片。修改代码如下:
package com.example.jared.uiwidgettest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast; public class MainActivity extends AppCompatActivity { private Button button1;
private Button button2;
private EditText editText;
private ImageView imageView; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); editText = (EditText)findViewById(R.id.editText);
button1 = (Button)findViewById(R.id.button1);
button2 = (Button)findViewById(R.id.button2);
imageView = (ImageView)findViewById(R.id.image) ; button1.setOnClickListener(new MyOnClickListener());
button2.setOnClickListener(new MyOnClickListener());
} class MyOnClickListener implements View.OnClickListener {
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.button1:
String editdata = editText.getText().toString();
Toast.makeText(MainActivity.this, "Edit content: " + editdata,
Toast.LENGTH_SHORT).show();
break;
case R.id.button2:
Toast.makeText(MainActivity.this, "Button2 is clicked !",
Toast.LENGTH_SHORT).show();
imageView.setImageResource(R.drawable.monalisa);
default:break;
}
}
}
}


运行后按button2,显示如下:

    

    我们继续学习ProgressBar,编写代码如下:
    <ProgressBar
android:id="@+id/processbar"
android:layout_below="@id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

运行结果如下所示:


    这里原本图片显示太大了,就改为图标了,中间的processbar是不是很像平时刷新网页的时候的效果?那么怎么让这个效果消失呢?因为一旦获取网络数据可是不能再显示这个的了。这里还没有学过网络,那就直接通过button吧,修改代码如下:
package com.example.jared.uiwidgettest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.Toast; public class MainActivity extends AppCompatActivity { private Button button1;
private Button button2;
private EditText editText;
private ImageView imageView;
private ProgressBar progressBar; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); editText = (EditText)findViewById(R.id.editText);
button1 = (Button)findViewById(R.id.button1);
button2 = (Button)findViewById(R.id.button2);
imageView = (ImageView)findViewById(R.id.image);
progressBar = (ProgressBar)findViewById(R.id.progressbar); button1.setOnClickListener(new MyOnClickListener());
button2.setOnClickListener(new MyOnClickListener());
} class MyOnClickListener implements View.OnClickListener {
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.button1:
//String editdata = editText.getText().toString();
//Toast.makeText(MainActivity.this, "Edit content: " + editdata,
// Toast.LENGTH_SHORT).show();
if(progressBar.getVisibility() == View.GONE) {
progressBar.setVisibility(View.VISIBLE);
} else {
progressBar.setVisibility(View.GONE);
} break;
case R.id.button2:
Toast.makeText(MainActivity.this, "Button2 is clicked !",
Toast.LENGTH_SHORT).show();
imageView.setImageResource(R.drawable.monalisa);
default:break;
}
}
}
}

这里用到了visible属性,一般是visible,invisible和gone,意思也很好理解,visible指的是显示,invisible就是不显示了,那么gone就是消失了,也不占用屏幕空间了。所以上述代码通过getVisibility和setVisibility来实现功能。

    那么如果把这个进度条变成直条形呢?修改xml文件:
    <ProgressBar
android:id="@+id/progressbar"
android:layout_below="@id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleHorizontal"
android:max="100"/>

    添加了android:attr属性, 接着我们用button2按钮没按一次,进度增加10,修改代码如下:
package com.example.jared.uiwidgettest;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ProgressBar; public class MainActivity extends AppCompatActivity { private Button button1;
private Button button2;
private EditText editText;
private ImageView imageView;
private ProgressBar progressBar; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); editText = (EditText)findViewById(R.id.editText);
button1 = (Button)findViewById(R.id.button1);
button2 = (Button)findViewById(R.id.button2);
imageView = (ImageView)findViewById(R.id.image);
progressBar = (ProgressBar)findViewById(R.id.progressbar); button1.setOnClickListener(new MyOnClickListener());
button2.setOnClickListener(new MyOnClickListener());
} class MyOnClickListener implements View.OnClickListener {
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.button1:
//String editdata = editText.getText().toString();
//Toast.makeText(MainActivity.this, "Edit content: " + editdata,
// Toast.LENGTH_SHORT).show();
if(progressBar.getVisibility() == View.GONE) {
progressBar.setVisibility(View.VISIBLE);
} else {
progressBar.setVisibility(View.GONE);
} break;
case R.id.button2:
//Toast.makeText(MainActivity.this, "Button2 is clicked !",
// Toast.LENGTH_SHORT).show();
//imageView.setImageResource(R.drawable.monalisa);
int progress = progressBar.getProgress();
progress += 10;
progressBar.setProgress(progress);
break;
default:break;
}
}
}
}

运行后按多次button2,效果如下:


    
    基本的控件也学习了下,其他的控件其实也都是差不多的,下面再学习下两个dialog,方便以后使用。
    首先是AlertDialog,这个其实是一个警告的框,用来提醒用户一些信息,或者是输入的数据要传递或者保存时的所需。实现下代码如下:
package com.example.jared.uiwidgettest;

import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.Toast; public class MainActivity extends AppCompatActivity { private Button button1;
private Button button2;
private EditText editText;
private ImageView imageView;
private ProgressBar progressBar; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); editText = (EditText)findViewById(R.id.editText);
button1 = (Button)findViewById(R.id.button1);
button2 = (Button)findViewById(R.id.button2);
imageView = (ImageView)findViewById(R.id.image);
progressBar = (ProgressBar)findViewById(R.id.progressbar); button1.setOnClickListener(new MyOnClickListener());
button2.setOnClickListener(new MyOnClickListener());
} class MyOnClickListener implements View.OnClickListener {
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.button1:
AlertDialogShow();
break;
case R.id.button2:
Toast.makeText(MainActivity.this, "Button2 is clicked !",
Toast.LENGTH_SHORT).show();
break;
default:break;
}
}
} public void AlertDialogShow() {
AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
dialog.setTitle("This is Dialog");
dialog.setMessage("Something you should care");
dialog.setCancelable(false);
dialog.setPositiveButton("OK", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) { }
});
dialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) { }
});
dialog.show();
}
}

这里实现了一个AlertDialogShow方法,在button被按下的时候,调用,运行结果如下:

           
    当然,你也可以修改为中文的确认和取消,如上图所示,所以在国际版的时候,我们就要注意这些字符都是需要在values目录下定义好的,到时候引用资源的形式来调用,要不然,不可能中文版和英文版还得写两套吧。
    最后来学习下ProgressDialog吧,其实这个和AlerDialog方法类似,还是看下代码吧:
package com.example.jared.uiwidgettest;

import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ProgressBar; public class MainActivity extends AppCompatActivity { private Button button1;
private Button button2;
private EditText editText;
private ImageView imageView;
private ProgressBar progressBar; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); editText = (EditText)findViewById(R.id.editText);
button1 = (Button)findViewById(R.id.button1);
button2 = (Button)findViewById(R.id.button2);
imageView = (ImageView)findViewById(R.id.image);
progressBar = (ProgressBar)findViewById(R.id.progressbar); button1.setOnClickListener(new MyOnClickListener());
button2.setOnClickListener(new MyOnClickListener());
} class MyOnClickListener implements View.OnClickListener {
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.button1:
AlertDialogShow();
break;
case R.id.button2:
ProgressDialogShow();
break;
default:break;
}
}
} public void AlertDialogShow() {
AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
dialog.setTitle("This is Dialog");
dialog.setMessage("Something you should care");
dialog.setCancelable(false);
dialog.setPositiveButton("确认", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) { }
});
dialog.setNegativeButton("取消", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialogInterface, int i) { }
});
dialog.show();
} public void ProgressDialogShow() {
ProgressDialog progressDialog = new ProgressDialog(MainActivity.this);
progressDialog.setTitle("This is Progress dialog");
progressDialog.setMessage("Loading...");
progressDialog.setCancelable(true);
progressDialog.show();
}
}

这里实现了一个ProgressDialogShow方法,在按钮button2按下时出发,运行效果如下所示:

    基本上就体验到这里了,明天就可以回家了,今天花了半天时间,学习了android的ui的常用控件,基本上也做了大概的了解,一般地ui也可以搞起来了。


附:参考《第一行代码》

Android开发学习之路--UI之初体验的更多相关文章

  1. Android开发学习之路--Activity之初体验

    环境也搭建好了,android系统也基本了解了,那么接下来就可以开始学习android开发了,相信这么学下去肯定可以把android开发学习好的,再加上时而再温故下linux下的知识,看看androi ...

  2. Android开发学习之路--React-Native之初体验

      近段时间业余在学node.js,租了个阿里云准备搭建后端,想用node.js,偶尔得知react-native可以在不同平台跑,js在iOS和android上都可以运行ok,今天就简单学习下rea ...

  3. Android开发学习之路--Service之初体验

    android最后一个组件便是service了,终于学习到最后一个组件了,从年前的开发环境的搭建,到现在学到最后一个组件花了三周的时间,期间记录的点点滴滴,照着书本学习编写的代码都受益匪浅,这里要感谢 ...

  4. Android开发学习之路--RxAndroid之初体验

    学了一段时间android,看了部分的项目代码,然后想想老是学基础也够枯燥乏味的,那么就来学习学习新东西吧,相信很多学java的都听说过RxJava,那么android下也有RxAndroid. Rx ...

  5. Android开发学习之路--传感器之初体验

    说到传感器,还是有很多的,有加速度啊,光照啊,磁传感器等等.当然android手机之所以称为智能手机,少不了这几款传感器的功劳了.下面就学习下了,这里主要学习光照,加速度和磁. 新建工程emSenso ...

  6. Android开发学习之路--Camera之初体验

    顾名思义Camera就是拍照和录像的功能,像微信里面,我们想拍照传一下照片,就可以通过camera来拍照,然后存储照片,发送给好友.那么微信的app里面是不会直接通过camera api来实现的,因为 ...

  7. Android开发学习之路--Notification之初体验

    一般当我们收到短信啊,微信啊,或者有些app的提醒,我们都会在通知栏收到一天简单的消息,然后点击消息进入到app里面,其实android中有专门的Notification的类可以完成这个工作,这里就实 ...

  8. Android开发学习之路--UI之简单聊天界面

    学了很多的ui的知识,这里就来实现个聊天的界面,首先来实现个layout的xml,代码如下: <?xml version="1.0" encoding="utf-8 ...

  9. Android开发学习之路--UI之自定义布局和控件

    新的一年已经开始了,今天已经是初二了,两天没有学习了,还是要来继续学习下.一般手机的title都是actionbar,就像iphone一样可以后退,可以编辑.这里自定义布局就来实现下这个功能,首先准备 ...

随机推荐

  1. [BZOJ]1050 旅行comf(HAOI2006)

    图论一直是小C的弱项,相比其它题型,图论的花样通常会更多一点,套路也更难捉摸. Description 给你一个无向图,N(N<=500)个顶点, M(M<=5000)条边,每条边有一个权 ...

  2. [bzoj1558][JSOI2009]等差数列

    题目:给定n个数,m个操作,每次给一段区间加一个等差数列或者询问一段区间至少要用多少个等差数列来表示.$n,m\leqslant 10^{5}$ 题解:老套路,维护差分数组,修改操作变成了两个单点加和 ...

  3. bzoj4514

    4514: [Sdoi2016]数字配对 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 1870  Solved: 712[Submit][Statu ...

  4. MySQL的常用操作命令详解

    系统管理">系统管理 mysql服务">启动MySQL服务 通过windows服务管理器启动MySQL服务 ? 1 开始-->运行-->输入services ...

  5. 安装yum源和gcc编译器遇到的问题

    这两天我试着在VMware虚拟机里安装gcc,遇到了不少问题 1.   安装yum源 我搭建的是光盘yum源(有两种方法搭建yum源,另外一种是网络yum源,但至今没弄懂我的网络yum源为什么不成功) ...

  6. Python中的数据类型

    计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等各种各样的数据,不同的数据,需要定义不同的数 ...

  7. JAVA 中转义符的理解

    生物信息中有时候会遇到JAVA写的程序,今天阅读源码的时候发现对于正则中的转义符不好理解,后来查资料后终于弄明白了,这里详细说明一下: 字符串的表示有三种方法:1.直接单字符,例如"A&qu ...

  8. CRM客户关系管理系统(六)

    第六章.排序和搜索功能开发  6.1.排序功能开发 (1)kingadmin_tags.py @register.simple_tag def get_sorted_column(column,sor ...

  9. Codeforces Round #396(Div. 2) A. Mahmoud and Longest Uncommon Subsequence

    [题意概述] 找两个字符串的最长不公共子串. [题目分析] 两个字符串的最长不公共子串就应该是其中一个字符串本身,那么判断两个字符串是否相等,如果相等,那么肯定没有公共子串,输出"-1&qu ...

  10. MySQL 排序

    MySQL 排序 我们知道从MySQL表中使用SQL SELECT 语句来读取数据. 如果我们需要对读取的数据进行排序,我们就可以使用MySQL的 ORDER BY 子句来设定你想按哪个字段哪中方式来 ...