android 入门 View基本组件

View组件简介

Android中的View组件包含了几乎所有的图形显示组件,像之前所使用到的TextView和Button实际上都是View类的子类。



部分图形组件 


View组件常用属性及对应方法 


TextView

TextView组件的主要功能是用于显示文本,实际上这种控件主要就是提供了一个标签的显示操作,此类定义如下: 
java.lang.Object
       ↳android.view.View
            ↳android.widget.TextView


<TextView>组件的常用属性及对应方法



配置不使用样式表例子:

[html]  view plain  copy
 print ?
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="wrap_content"  
  4.     android:orientation="vertical" >  
  5.   
  6.     <TextView  
  7.         android:id="@+id/mytext1"  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:layout_marginLeft="20dip"  
  11.         android:layout_marginTop="20dip"  
  12.         android:text="牛儿吃草的博客"  
  13.         android:textColor="#000000"  
  14.         android:textSize="12pt" />  
  15.   
  16.     <TextView  
  17.         android:id="@+id/mytext2"  
  18.         android:layout_width="fill_parent"  
  19.         android:layout_height="wrap_content"  
  20.         android:layout_marginLeft="20dip"  
  21.         android:layout_marginTop="10dip"  
  22.         android:text="博客:http://blog.csdn.net/e421083458" />  
  23.   
  24.     <TextView  
  25.         android:id="@+id/mytext3"  
  26.         android:layout_width="fill_parent"  
  27.         android:layout_height="wrap_content"  
  28.         android:layout_marginLeft="20dip"  
  29.         android:maxLength="8"  
  30.         android:text="richard" />  
  31.   
  32.     <TextView  
  33.         android:id="@+id/mytext4"  
  34.         android:layout_width="200dip"  
  35.         android:layout_height="29dip"  
  36.         android:background="@drawable/img_100"  
  37.         android:gravity="center_horizontal|center_vertical"  
  38.         android:text="这是在背景上的文字信息"  
  39.         android:textColor="#000000"  
  40.         android:textStyle="bold" />  
  41.   
  42. </LinearLayout>  

使用样式表:

样式表文件:res/values/styles.xml

[html]  view plain  copy
 print ?
  1. <resources xmlns:android="http://schemas.android.com/apk/res/android">  
  2.   
  3.     <!--  
  4.         Base application theme, dependent on API level. This theme is replaced  
  5.         by AppBaseTheme from res/values-vXX/styles.xml on newer devices.  
  6.     -->  
  7.     <style name="AppBaseTheme" parent="android:Theme.Light">  
  8.         <!--  
  9.             Theme customizations available in newer API levels can go in  
  10.             res/values-vXX/styles.xml, while customizations related to  
  11.             backward-compatibility can go here.  
  12.         -->  
  13.     </style>  
  14.   
  15.     <!-- Application theme. -->  
  16.     <style name="AppTheme" parent="AppBaseTheme">  
  17.         <!-- All customizations that are NOT specific to a particular API-level can go here. -->  
  18.     </style>  
  19.     <style name="msg_style">  
  20.         <item name="android:textSize">45px</item><!-- 定义样式文件 -->  
  21.         <item name="android:textColor">#FFFF00</item>  
  22.         <item name="android:autoLink">all</item>    <!-- 显示文本中的链接 -->  
  23.         <item name="android:layout_width">fill_parent</item>  
  24.         <item name="android:layout_height">wrap_content</item>  
  25.     </style>  
  26. </resources>  

布局文件:

[html]  view plain  copy
 print ?
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="wrap_content"  
  4.     android:orientation="vertical" >  
  5.   
  6.     <TextView   
  7.         android:id="@+id/msg"  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="fill_parent"  
  10.         android:autoLink="all"  
  11.         android:textColor="#FFFF00"  
  12.         android:textSize="45px"  
  13.         android:text="博客:http://blog.csdn.net/e421083458"          
  14.         />  
  15.     <TextView  
  16.         android:id="@+id/msg"  
  17.         style="@style/msg_style"  
  18.         android:text="网址:http://hi.baidu.com/amenmen"  />  
  19.   
  20. </LinearLayout>  


按钮组件:Button

按钮在人机交互截面上使用的是最多的,当提示用户进行某些选择的时候,就可以通过按钮的操作来接收用户的选择。在Android使用“<Button>”组件可以定义出一个显示的按钮,并且可以在按钮上指定相应的显示文字,Button类的继承结构如下:
java.lang.Object
       ↳    android.view.View
            ↳    android.widget.TextView
                 ↳    android.widget.Button 

例子:

[html]  view plain  copy
 print ?
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:orientation="vertical" >  
  5.     <Button  
  6.         android:id="@+id/mybut1"  
  7.         android:layout_width="fill_parent"  
  8.         android:layout_height="wrap_content"  
  9.         android:textColor="#FFFF00"  
  10.         android:textSize="12px"  
  11.         android:text="日事日毕日高日清"  />  
  12.     <Button   
  13.         android:id="@+id/mybut2"  
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height="wrap_content"  
  16.         android:text="网址:www.baidu.com"  
  17.         android:layout_margin="30px"  
  18.         />  
  19.       
  20. </LinearLayout>  

效果:


编辑框:EditText

文本显示组件(TextView)的功能只是显示一些基础的文字信息,而如果用户要想定义可以输入的文本组件以达到很好的人机交互操作,则只能使用编辑框:EditText完成,此类的定义如下:
java.lang.Object
       ↳    android.view.View
            ↳    android.widget.TextView
                 ↳    android.widget.EditText 

例子:

[html]  view plain  copy
 print ?
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:orientation="vertical" >  
  5.     <Button   
  6.         android:id="@+id/mybut2"  
  7.         android:layout_width="fill_parent"  
  8.         android:layout_height="wrap_content"  
  9.         android:text="网址:www.baidu.com"  
  10.         android:layout_margin="30px"  
  11.         />  
  12.     <EditText   
  13.         android:id="@+id/myet1"  
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height='wrap_content'  
  16.         android:text="牛儿吃草"  
  17.         android:selectAllOnFocus="true"  
  18.         />  
  19.     <EditText   
  20.         android:id="@+id/myet2"  
  21.         android:layout_width="fill_parent"  
  22.         android:layout_height="wrap_content"  
  23.         android:text="网址:http://www.baidu.com/"  
  24.         />  
  25.     <EditText   
  26.         android:id="@+id/myet3"  
  27.         android:layout_width="fill_parent"  
  28.         android:layout_height="wrap_content"  
  29.         android:password="true"  
  30.         android:text="用户登录密码"  
  31.         />  
  32.     <EditText   
  33.         android:id="@+id/myet4"  
  34.         android:layout_width="fill_parent"  
  35.         android:layout_height="wrap_content"  
  36.         android:text="1234567890"  
  37.         android:numeric="integer"  
  38.         />     
  39. </LinearLayout>  


单选钮:RadioGroup

单选钮在开发中提供了一种多选一的操作模式,也是经常见到的一种组件,例如:在选择文件编码的时候只能从多种编码中选择一种,或者是选择性别的时候只能从“男”或“女”之中选择一个,而在Android中可以使用RadioGroup来定义单选钮组件,此类的定义如下:
java.lang.Object
       ↳    android.view.View
           ↳    android.view.ViewGroup
                 ↳    android.widget.LinearLayout
                      ↳    android.widget.RadioGroup 


RadioGroup类的常用操作方法 


RadioButton类

RadioGroup提供的只是一个单选钮的容器,只有在此容器之中配置多个按钮组件之后才可以使用,而要想设置单选钮的内容,则需要使用RadioButton类,此类定义如下:
java.lang.Object
       ↳    android.view.View
           ↳    android.widget.TextView
                 ↳    android.widget.Button
                      ↳    android.widget.CompoundButton
                           ↳    android.widget.RadioButton 


RadioGroup与RadioButton联合举例:

[html]  view plain  copy
 print ?
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:orientation="vertical" >  
  5.     <TextView   
  6.         android:id="@+id/encinfo"  
  7.         android:layout_width="fill_parent"  
  8.         android:layout_height="wrap_content"  
  9.         android:textSize="20px"  
  10.         android:layout_margin="10px"  
  11.         android:text="请选择要使用的文字编码"      
  12.         />  
  13.     <RadioGroup   
  14.         android:id="@+id/encoding"  
  15.         android:layout_width="fill_parent"  
  16.         android:layout_height="wrap_content"  
  17.         android:orientation="vertical"  
  18.         android:checkedButton="@+id/gbk"  
  19.         >  
  20.         <RadioButton   
  21.             android:id="@+id/utf"  
  22.             android:text="UTF编码"/>  
  23.         <RadioButton   
  24.             android:id="@+id/gbk"  
  25.             android:text="GBK编码"  
  26.             />  
  27.     </RadioGroup>  
  28. </LinearLayout>  


复选框:CheckBox

CheckBox的主要功能是完成复选框的操作,在用户输入信息的时候,可以一次性选择多个内容,例如:用户在选择个人兴趣爱好的时候一定会存在多个,则此时就直接使用CheckBox即可完成功能。
在Android中如果要想定义复选框,可以使用android.widget.CheckBox类,此类定义如下: 
java.lang.Object
       ↳    android.view.View
            ↳    android.widget.TextView
                 ↳    android.widget.Button
                      ↳    android.widget.CompoundButton
                           ↳    android.widget.CheckBox 



CheckBox类的常用方法 



定义复选框 —— main.xml 

[html]  view plain  copy
 print ?
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:orientation="vertical" >  
  5.       
  6.     <TextView   
  7.         android:id="@+id/info"  
  8.         android:text="您经常浏览的网站是:"  
  9.         android:textSize="20px"  
  10.         android:layout_width="fill_parent"  
  11.         android:layout_height="wrap_content"  
  12.         />  
  13.     <CheckBox   
  14.         android:id="@+id/url1"  
  15.         android:text="www.baidu.com"  
  16.         android:layout_width="fill_parent"  
  17.         android:layout_height="wrap_content"  
  18.         />  
  19.     <CheckBox   
  20.         android:id="@+id/url2"  
  21.         android:text="www.csdn.net"  
  22.         android:layout_width="fill_parent"  
  23.         android:layout_height="wrap_content"  
  24.         android:checked="true"  
  25.         />  
  26.     <CheckBox   
  27.         android:id="@+id/url3"  
  28.         android:text="www.google.com"  
  29.         android:layout_width="fill_parent"  
  30.         android:layout_height="wrap_content"  
  31.         />  
  32.       
  33. </LinearLayout>  

通过程序操作复选框组件

[java]  view plain  copy
 print ?
  1. package com.richard.radiogroup;  
  2.   
  3. import android.os.Bundle;  
  4. import android.app.Activity;  
  5. import android.view.Menu;  
  6. import android.widget.CheckBox;  
  7.   
  8. public class MainActivity extends Activity {  
  9.     private CheckBox box = null;  
  10.   
  11.     @Override  
  12.     protected void onCreate(Bundle savedInstanceState) {  
  13.         super.onCreate(savedInstanceState);  
  14.         setContentView(R.layout.main);  
  15.         this.box = (CheckBox)  super.findViewById(R.id.url3);  
  16.         box.setChecked(true);  
  17.         box.setText("www.iokokok.com");  
  18.     }  
  19.   
  20.     @Override  
  21.     public boolean onCreateOptionsMenu(Menu menu) {  
  22.         // Inflate the menu; this adds items to the action bar if it is present.  
  23.         getMenuInflater().inflate(R.menu.main, menu);  
  24.         return true;  
  25.     }  
  26.   
  27. }  


下拉列表框Spinner

下拉列表框也是一种常见的图形组件,它可以为用户提供列表的选则方式,与复选框或单选钮相比还可以节省手机的屏幕空间,在Android中可以使用android.widget.Spinner类实现,此类定义如下:
java.lang.Object
       ↳ android.view.View
            ↳ android.view.ViewGroup
                 ↳ android.widget.AdapterView<T extends android.widget.Adapter>
                      ↳ android.widget.AbsSpinner
                           ↳ android.widget.Spinner 

Spinner类的常用方法


配置列表项

在Android中,可以直接在main.xml文件中定义“<Spinner>”节点,但是在定义此元素的时候却不能直接设置其显示的列表项,关于下拉列表框中的列表项有以下两种方式进行配置:


方式一:直接通过资源文件配置;

创建资源文件:values/city_data.xml

[html]  view plain  copy
 print ?
  1. <resources>  
  2. <string-array name="city_labels">  
  3.     <item>北京</item>  
  4.     <item>上海</item>  
  5.     <item>南京</item>  
  6. </string-array>  
  7. </resources>  

创建布局文件:

[html]  view plain  copy
 print ?
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:orientation="vertical" >  
  5.       
  6.     <TextView   
  7.         android:id="@+id/info_city"  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="wrap_content"  
  10.         />  
  11.     <Spinner   
  12.         android:id="@+id/mycity"  
  13.         android:prompt="@string/city_prompt"  
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height="wrap_content"  
  16.         android:entries="@array/city_labels"  
  17.         />  
  18. </LinearLayout>  

方式二:通过android.widget.ArrayAdapter类读取资源文件或者是指定具体设置的数据;

首先创建资源文件:values/color_data.xml

[html]  view plain  copy
 print ?
  1. <resources>  
  2. <string-array name="color_labels">  
  3.     <item>红色</item>  
  4.     <item>绿色</item>  
  5.     <item>蓝色</item>  
  6. </string-array>  
  7. </resources>  
再创建布局文件:

[html]  view plain  copy
 print ?
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:orientation="vertical" >  
  5.       
  6.     <TextView   
  7.         android:id="@+id/info_city"  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="请选择佻喜欢的颜色"  
  11.         />  
  12.     <Spinner   
  13.         android:id="@+id/color_city"  
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height="wrap_content"  
  16.         />  
  17.     <TextView   
  18.         android:id="@+id/myedu"  
  19.         android:layout_width="fill_parent"  
  20.         android:layout_height="wrap_content"  
  21.         android:text="请选择您的学历"  
  22.         />  
  23.     <Spinner   
  24.         android:id="@+id/edu_data"  
  25.         android:layout_width="fill_parent"  
  26.         android:layout_height="wrap_content"  
  27.         />  
  28. </LinearLayout>  

编写Activity程序

[java]  view plain  copy
 print ?
  1. package com.richard.spinner;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.os.Bundle;  
  7. import android.app.Activity;  
  8. import android.view.Menu;  
  9. import android.widget.ArrayAdapter;  
  10. import android.widget.Spinner;  
  11.   
  12. public class MainActivity extends Activity {  
  13.     private Spinner spiColor = null;  
  14.     private ArrayAdapter<CharSequence> adapterColor = null;  
  15.     private Spinner spiEdu = null;  
  16.     private ArrayAdapter<CharSequence> adapterEdu = null;  
  17.     private List<CharSequence> dataEdu = null;  
  18.       
  19.     @Override  
  20.     protected void onCreate(Bundle savedInstanceState) {  
  21.         super.onCreate(savedInstanceState);  
  22.         setContentView(R.layout.activity_main);  
  23.         this.spiColor = (Spinner) super.findViewById(R.id.color_city);  
  24.         this.spiColor.setPrompt("请选择您喜欢的颜色");  
  25.         this.adapterColor = ArrayAdapter.createFromResource(this, R.array.color_labels, android.R.layout.select_dialog_item);     
  26.         this.adapterColor.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);   //设置列表显示风格  
  27.         this.spiColor.setAdapter(this.adapterColor);  
  28.           
  29.         this.dataEdu = new ArrayList<CharSequence>(); // 实例化List集合  
  30.         this.dataEdu.add("大学");  
  31.         this.dataEdu.add("研究生");  
  32.         this.dataEdu.add("高中");  
  33.         this.spiEdu = (Spinner) super.findViewById(R.id.edu_data);  
  34.         this.spiEdu.setPrompt("请选择您喜欢的学历");  
  35.         this.adapterEdu = new ArrayAdapter<CharSequence>(this, android.R.layout.simple_spinner_item, this.dataEdu);  
  36.         this.adapterEdu.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);  
  37.         this.spiEdu.setAdapter(this.adapterEdu);  
  38.           
  39.     }  
  40.   
  41.     @Override  
  42.     public boolean onCreateOptionsMenu(Menu menu) {  
  43.         // Inflate the menu; this adds items to the action bar if it is present.  
  44.         getMenuInflater().inflate(R.menu.main, menu);  
  45.         return true;  
  46.     }  
  47.   
  48. }  


ImageView组件

ImageView组件的主要功能是为图片展示提供一个容器,android.widget.ImageView类的定义如下: 
java.lang.Object
       ↳    android.view.View
            ↳    android.widget.ImageView 

ImageView定义的属性及操作方法 

编写main.xml文件,定义ImageView组件 

[html]  view plain  copy
 print ?
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:paddingBottom="@dimen/activity_vertical_margin"  
  6.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  7.     android:paddingRight="@dimen/activity_horizontal_margin"  
  8.     android:paddingTop="@dimen/activity_vertical_margin"  
  9.     tools:context=".MainActivity" >  
  10.   
  11.     <ImageView   
  12.         android:id="@+id/img"  
  13.         android:src="@drawable/ic_launcher"  
  14.         android:layout_width="fill_parent"  
  15.         android:layout_height="wrap_content"  
  16.         />  
  17. </RelativeLayout>  

这里讲一下src=@drawable/ic_launcher,这里的ic_launcher其实是res/drawable-hdpi/ic_launcher.png,大家只要知道在这里就行了。

图片按钮:ImageButton

与按钮组件(Button)类似,在Android中又提供了一个图片按钮,可以直接使用ImageButton定义,此类定义如下: 
java.lang.Object
       ↳    android.view.View
            ↳    android.widget.ImageView
                 ↳    android.widget.ImageButton 

在main.xml文件中定义ImageButton组件 

[html]  view plain  copy
 print ?
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:orientation="vertical" >  
  5.   
  6.     <ImageButton   
  7.         android:id="@+id/rig"  
  8.         android:src="@drawable/ic_launcher"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         />  
  12.       
  13.       
  14. </LinearLayout>  


时间选择器:TimePicker

在Android中使用TimePicker(时间选择器),可以进行时间的快速调整,此类定义如下: 
java.lang.Object
       ↳    android.view.View
            ↳    android.view.ViewGroup
                 ↳    android.widget.FrameLayout
                      ↳    android.widget.TimePicker 

TimePicker的常用方法




日期选择器:DatePicker

与时间选择器对应的还有一个日期选择器(DatePicker),可以完成年、月、日的设置,此类定义如下: 
java.lang.Object
       ↳    android.view.View
            ↳    android.view.ViewGroup
                 ↳    android.widget.FrameLayout
                      ↳    android.widget.DatePicker

DatePicker类的常用方法



TimePicker和DatePicker合并展示的例子:

[html]  view plain  copy
 print ?
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:orientation="vertical" >  
  5.   
  6.     <TimePicker   
  7.         android:id="@+id/tpl"  
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  />  
  10.     <TimePicker   
  11.         android:id="@+id/tp2"  
  12.         android:layout_width="wrap_content"  
  13.         android:layout_height="wrap_content"  />  
  14.     <DatePicker   
  15.         android:id="@+id/dp1"  
  16.         android:layout_width="wrap_content"  
  17.         android:layout_height="wrap_content"/>  
  18.     <DatePicker   
  19.         android:id="@+id/dp2"  
  20.         android:layout_width="wrap_content"  
  21.         android:layout_height="wrap_content"/>  
  22. </LinearLayout>  

编写Activity程序,将时间变为24小时制 ,设置一个日期 :

[java]  view plain  copy
 print ?
  1. package com.richard.timepicker;  
  2.   
  3. import android.os.Bundle;  
  4. import android.app.Activity;  
  5. import android.view.Menu;  
  6. import android.widget.DatePicker;  
  7. import android.widget.TimePicker;  
  8.   
  9. public class MainActivity extends Activity {  
  10.       
  11.     private TimePicker mytp  = null;  
  12.     private DatePicker mydp  = null;  
  13.       
  14.     @Override  
  15.     protected void onCreate(Bundle savedInstanceState) {  
  16.         super.onCreate(savedInstanceState);  
  17.         setContentView(R.layout.activity_main);  
  18.         this.mytp = (TimePicker) super.findViewById(R.id.tp2);  
  19.         this.mytp.setIs24HourView(true);  
  20.         this.mytp.setCurrentHour(18);  
  21.         this.mytp.setCurrentMinute(30);  
  22.           
  23.         this.mydp = (DatePicker) super.findViewById(R.id.dp2);  
  24.         this.mydp.updateDate(1998,7,27);  
  25.               
  26.     }  
  27.   
  28.     @Override  
  29.     public boolean onCreateOptionsMenu(Menu menu) {  
  30.         // Inflate the menu; this adds items to the action bar if it is present.  
  31.         getMenuInflater().inflate(R.menu.main, menu);  
  32.         return true;  
  33.     }  
  34.   
  35. }  

猜你喜欢

转载自blog.csdn.net/weixin_41615115/article/details/79220175
今日推荐