Android入门进阶教程(5)-android 常用组件

来源:互联网 发布:androidstudio优化 编辑:程序博客网 时间:2024/04/27 17:03

1android编码规范

Android官方并没有给出相应编码规范。以下都是我从源码 、示例中总结的所谓规范。若公司有相应规范以公司为准。

 

首先从布局文件说起,布局文件名称的定义必须为小写字母,否者无法生成R类,尽量不要用缩写。以表达清楚该文件用途为本,通常情况下用下划线连接各语义单词,例如dialog_title_icons.xml 或者list_menu_item_checkbox.xml

控件ID的定义,ID的定义一律为小写,例如:一用户名 TextView  可以定义为:@+id/username_view 。以“名词_控件名称”这种形式定义。

 

其次是图片的定义格式,图片的定义也是为解释清楚用途为准,参照这种定义格式“btn_background_ok.png

       string类的name定义,这里可以按照JAVA中变量的定义方式定义。首字母小写,驼峰命名法。例        如:   <string name="userName_view">用户名:</string>

 

最后类名与变量的定义 ,定义与用户交互的类,××Activity.java 。自定义变量一律以小写m开头 例如: EditText mUserName=(EditText)findViewById(R.id.username_edit);

 

2,常用布局

Android提供了一组视图类来充当视图的容器,这些容器类称为布局或者布局管理器,每一个都实现一种具体的策略来管理其子控件的大小和位置。最常用的布局有以下这几种:

LinearLayout,RleativeLayout,TableLayout,FrameLayout 等。有两种方式可以声明布局,一种是编码的方式,另外一中通过XML配置的方式。Android默认是通过xml的方式构建应用程序的。这种方式最大的优点是代码与视图分离,这意味着你可以修改或调整,而无需修改源代码并重新编译。例如 你可以创建不同的屏幕方向,支持不同分辨率的设备。也更直观更容易调试。

    (1LinearLayout :线性布局 

        最常用的一种布局方式,所有子控件的对齐方式,取决于如何定义 orientation的属性:vertical                     垂直方向 ,如果按照这种方向所有的子控件将按照垂直的方式分布在布局上,每行只允许有             一 个子元素,horizontal水平方向 ,这时子控件将会以水平的方向分布在布局中。以下线性布           局的简单例子。先上图:


 

 

 

Xml代码  收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!--线性布局,最外面包裹一个水平线性布局-->  
  3. <!--orientation表示线性布局的方向,horizontal:水平方向  vertical:垂直方向 -->  
  4. <!-- @代表R类,如果是自定义的ID 则用@+id/××× 表示,如果是引用R类的资源则@string/×××-->  
  5. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  6.     android:orientation="horizontal"  
  7.     android:background="@drawable/bg"  
  8.     android:layout_width="fill_parent"  
  9.     android:layout_height="fill_parent"  
  10.     >  
  11.     <LinearLayout  
  12.         android:layout_width="wrap_content"  
  13.         android:layout_height="wrap_content"  
  14.         android:orientation="vertical"  
  15.     >  
  16.         <TextView    
  17.             android:layout_width="fill_parent"   
  18.             android:layout_height="wrap_content"   
  19.             android:text="@string/linear"  
  20.             />  
  21.          <Button  
  22.             android:id="@+id/button"  
  23.             android:layout_width="183dp"   
  24.             android:layout_height="wrap_content"   
  25.             android:text="@string/button"  
  26.             />  
  27.          <ImageButton   
  28.             android:id="@+id/imagebutton"  
  29.             android:layout_width="180dp"  
  30.             android:layout_height="48dp"  
  31.             android:src="@drawable/imagebutton"  
  32.             />  
  33.               
  34.      </LinearLayout>  
  35.      <!-- android:layout_gravity与android:gravity区别,拿一个button作为例子  
  36.           前者的意思,是这个按钮的位置,如果设置为right则表示这个按钮整体位置靠右;  
  37.           后者的意思,这个按钮上显示内容的位置。  
  38.       -->  
  39.      <LinearLayout  
  40.         android:gravity="right"  
  41.         android:layout_width="fill_parent"  
  42.         android:layout_height="wrap_content"  
  43.         android:orientation="horizontal"  
  44.         >  
  45.         <ImageView  
  46.             android:id="@+id/imageview"  
  47.             android:layout_marginTop="5dp"  
  48.             android:src="@drawable/imageview"  
  49.             android:layout_width="131dp"  
  50.             android:layout_height="131dp"  
  51.         />  
  52.      </LinearLayout>  
  53.       
  54. </LinearLayout>  

 package net.csdn.blog.androidtoast;

 

Java代码  收藏代码
  1. import android.app.Activity;  
  2. import android.os.Bundle;  
  3. import android.view.View;  
  4. import android.view.View.OnClickListener;  
  5. import android.widget.Toast;  
  6.   
  7. public class MainActivity extends Activity implements OnClickListener {  
  8.     /** Called when the activity is first created. */  
  9.     @Override  
  10.     public void onCreate(Bundle savedInstanceState) {  
  11.         super.onCreate(savedInstanceState);  
  12.         setContentView(R.layout.linearlayout);  
  13.         //实例化以下控件,并设置监听事件,传入实现了OnClickListener接口的对象  
  14.         findViewById(R.id.button).setOnClickListener(this);  
  15.         findViewById(R.id.imagebutton).setOnClickListener(this);  
  16.         findViewById(R.id.imageview).setOnClickListener(this);  
  17.           
  18.     }  
  19.   
  20.     /** 
  21.      * 点击事件判断所点击是哪个控件并toast提示。 
  22.      */  
  23.     @Override  
  24.     public void onClick(View v) {  
  25.         int id=v.getId();//得到所点对象ID  
  26.         if(id==R.id.button){  
  27.             Toast.makeText(getApplicationContext(), R.string.promptButton, 1).show();  
  28.         }else if(id==R.id.imagebutton){  
  29.             Toast.makeText(getApplicationContext(), R.string.promptImageButton, 1).show();  
  30.         }else if(id==R.id.imageview){  
  31.             Toast.makeText(getApplicationContext(), R.string.promptImageView, 1).show();  
  32.         }  
  33.     }  
  34. }  

 (2)RleativeLayout :相对布局

 如果你的程序中出现了多个LinearLayout嵌套,就应该考虑使用相对布局了。相对局部顾名思义一个控件的位置相对于其他控件或者容器的位置。使用很简单 直接上示例:



 


Xml代码  收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!-- 相对布局  一个控件相对于另一个控件或者容器的位置。 -->  
  3. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:orientation="vertical"  
  5.     android:background="@drawable/bg"  
  6.     android:layout_width="fill_parent"  
  7.     android:layout_height="fill_parent"  
  8.     >  
  9.     <TextView    
  10.         android:id="@+id/describe_view"   
  11.         android:layout_width="fill_parent"   
  12.         android:layout_height="wrap_content"   
  13.         android:text="@string/hello"  
  14.         android:textColor="#556055"  
  15.         />  
  16.      <!-- 这个TextView相对于上一个TextView 在 它的下方所以设置属性为layout_below-->  
  17.      <TextView  
  18.         android:id="@+id/username_view"  
  19.         android:layout_width="wrap_content"  
  20.         android:layout_height="wrap_content"  
  21.         android:layout_marginTop="12dp"  
  22.         android:text="@string/username"  
  23.         android:textColor="#556055"  
  24.         android:layout_below="@id/describe_view"  
  25.      />  
  26.      <EditText  
  27.         android:id="@+id/username_edit"  
  28.         android:layout_width="90dp"  
  29.         android:layout_height="40dp"  
  30.         android:layout_marginTop="4dp"  
  31.         android:layout_toRightOf="@id/username_view"  
  32.         android:layout_below="@id/describe_view"  
  33.      />  
  34.      <TextView  
  35.         android:id="@+id/sex_view"  
  36.         android:layout_width="wrap_content"  
  37.         android:layout_height="wrap_content"  
  38.         android:layout_marginTop="12dp"  
  39.         android:text="@string/sex"  
  40.         android:textColor="#556055"  
  41.         android:layout_below="@id/describe_view"  
  42.         android:layout_toRightOf="@id/username_edit"  
  43.      />  
  44.      <RadioGroup  
  45.         android:id="@+id/sex_radiogroup"  
  46.         android:orientation="horizontal"  
  47.         android:layout_width="wrap_content"  
  48.         android:layout_height="wrap_content"  
  49.         android:layout_toRightOf="@id/sex_view"  
  50.         android:layout_below="@id/describe_view"  
  51.         >  
  52.         <!--第一个RadioButton -->  
  53.         <RadioButton  
  54.           android:id="@+id/male_radiobutton"  
  55.           android:layout_width="wrap_content"  
  56.           android:layout_height="wrap_content"  
  57.           android:text="男"  
  58.         />  
  59.         <!--第二个RadioButton -->  
  60.         <RadioButton  
  61.           android:id="@+id/woman_radiobutton"  
  62.           android:layout_width="wrap_content"  
  63.           android:layout_height="wrap_content"  
  64.           android:text="女"  
  65.         />  
  66.      </RadioGroup>  
  67.      <TextView  
  68.         android:id="@+id/age_view"  
  69.         android:layout_width="wrap_content"  
  70.         android:layout_height="wrap_content"  
  71.         android:paddingTop="25dp"  
  72.         android:text="@string/age"  
  73.         android:textColor="#556055"  
  74.         android:layout_below="@id/username_view"  
  75.      />  
  76.           
  77.      <EditText  
  78.         android:id="@+id/brithday_edit"  
  79.         android:layout_width="90dp"  
  80.         android:layout_height="40dp"  
  81.         android:layout_marginTop="4dp"  
  82.         android:hint="@string/selectdate"  
  83.         android:textSize="13sp"  
  84.         android:gravity="center"  
  85.         android:editable="false"  
  86.         android:layout_toRightOf="@id/age_view"  
  87.         android:layout_below="@id/username_edit"  
  88.      />  
  89.       <TextView  
  90.         android:id="@+id/education_view"  
  91.         android:layout_width="wrap_content"  
  92.         android:layout_height="wrap_content"  
  93.         android:paddingTop="25dp"  
  94.         android:text="@string/education"  
  95.         android:textColor="#556055"  
  96.         android:layout_below="@id/sex_view"  
  97.         android:layout_toRightOf="@id/brithday_edit"  
  98.      />  
  99.      <!-- 下拉列表控件 -->  
  100.      <Spinner  
  101.         android:id="@+id/edu_spinner"  
  102.         android:layout_width="108dp"  
  103.         android:layout_height="38dp"  
  104.         android:layout_below="@id/sex_radiogroup"  
  105.         android:layout_toRightOf="@id/education_view"  
  106.      />  
  107.      <TextView  
  108.         android:id="@+id/interest_view"  
  109.         android:layout_width="wrap_content"  
  110.         android:layout_height="wrap_content"  
  111.         android:paddingTop="25dp"  
  112.         android:text="@string/interest"  
  113.         android:textColor="#556055"  
  114.         android:layout_below="@id/age_view"  
  115.      />  
  116.      <!-- 复选框控件 -->  
  117.      <CheckBox  
  118.         android:id="@+id/car_check"  
  119.         android:layout_width="wrap_content"  
  120.         android:layout_height="wrap_content"  
  121.         android:text="@string/car"  
  122.         android:textColor="#566156"  
  123.         android:layout_toRightOf="@id/interest_view"  
  124.         android:layout_below="@id/brithday_edit"  
  125.      />  
  126.      <CheckBox  
  127.         android:id="@+id/sing_check"  
  128.         android:layout_width="wrap_content"  
  129.         android:layout_height="wrap_content"  
  130.         android:layout_marginLeft="11dp"  
  131.         android:text="@string/sing"  
  132.         android:textColor="#566156"  
  133.         android:layout_toRightOf="@id/car_check"  
  134.         android:layout_below="@id/brithday_edit"  
  135.      />  
  136.      <CheckBox  
  137.         android:id="@+id/movie_check"  
  138.         android:layout_width="wrap_content"  
  139.         android:layout_height="wrap_content"  
  140.         android:layout_marginLeft="11dp"  
  141.         android:text="@string/movie"  
  142.         android:textColor="#566156"  
  143.         android:layout_toRightOf="@id/sing_check"  
  144.         android:layout_below="@id/brithday_edit"  
  145.      />  
  146.      <Button  
  147.         android:id="@+id/submit_button"  
  148.         android:layout_width="100dp"  
  149.         android:layout_height="40dp"  
  150.         android:text="@string/submit"  
  151.         android:gravity="center"  
  152.         android:layout_below="@id/movie_check"  
  153.         android:layout_marginLeft="210dp"  
  154.         android:layout_marginTop="15dp"  
  155.      />  
  156. </RelativeLayout>  
 

 

 (3)TableLayout:表格布局

 TableLayout布局是LinearLayout的扩展,以行和列的形式组织其子控件。与HTML中得Table相似。每一个TableRow元素代表一行。TableRow中包含几个控件代表几列。尽管使用TableRow来填充TableLayout是最常见的模式,但是该布局中可以放置任何子控件。需要指出的是TableLayout的子控件不能指定android:layout_width="wrap_content",它们被强制设定为fill_parent。但是可以设置高度。还有两个不太好理解的属性的说一下,androidstretchColums 此属性指要被拉伸的列。取值可以单个列的索引也可以是一组列的索引值。例如:如果一行有三列。stretchColums="1" 这表示拉伸第二列填充剩余空间。android:layout_column="1" 这个属性指定子控件放置在哪一列上。例如

<TextView   android:layout_column="1"   android:text="Open..."   android:padding="3dip" /> 指该控放置在第二列。上图:


 

 

Xml代码  收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!--     
  3. android:stretchColumns="1"是设置 TableLayout所有行的第二列为拉伸列。     
  4. 也就是说如果每行都有三列的话,剩余的空间由第二列补齐     
  5. -->    
  6. <!-- 最外层包裹一个滚动条 -->   
  7. <ScrollView   
  8.     xmlns:android="http://schemas.android.com/apk/res/android"  
  9.     android:layout_width="fill_parent"  
  10.     android:layout_height="wrap_content">  
  11.     <TableLayout   
  12.         android:layout_width="fill_parent"  
  13.         android:layout_height="fill_parent"  
  14.         android:stretchColumns="1">  
  15.         <TableRow>  
  16.             <View  
  17.                 android:layout_height="80dp"  
  18.                 android:layout_width="250dp"  
  19.                 android:background="#D6D6D6"  
  20.             />  
  21.             <TextView   
  22.                 android:layout_height="80dp"  
  23.                 android:text="#D6D6D6"  
  24.                 android:gravity="center"/>  
  25.         </TableRow>  
  26.         <!-- 此处的View控件充当着一个分割条的作用 -->  
  27.         <View  
  28.             android:layout_height="2dip"  
  29.             android:background="#C4C4C4" />  
  30.         <TableRow>  
  31.             <View  
  32.                 android:layout_height="80dp"  
  33.                 android:layout_width="250dp"  
  34.                 android:background="#292929"  
  35.             />  
  36.             <TextView   
  37.                 android:layout_height="80dp"  
  38.                 android:text="#292929"  
  39.                 android:gravity="center"/>  
  40.         </TableRow>  
  41.         <View  
  42.             android:layout_height="2dip"  
  43.             android:background="#C4C4C4" />  
  44.         <TableRow>  
  45.             <View  
  46.                 android:layout_height="80dp"  
  47.                 android:layout_width="250dp"  
  48.                 android:background="#8A500E"  
  49.             />  
  50.             <TextView   
  51.                 android:layout_height="80dp"  
  52.                 android:text="#8A500E"  
  53.                 android:gravity="center"/>  
  54.         </TableRow>  
  55.         <View  
  56.             android:layout_height="2dip"  
  57.             android:background="#C4C4C4" />  
  58.         <TableRow>  
  59.             <View  
  60.                 android:layout_height="80dp"  
  61.                 android:layout_width="250dp"  
  62.                 android:background="#D67C15"  
  63.             />  
  64.             <TextView   
  65.                 android:layout_height="80dp"  
  66.                 android:text="#D67C15"  
  67.                 android:gravity="center"/>  
  68.         </TableRow>  
  69.         <View  
  70.             android:layout_height="2dip"  
  71.             android:background="#C4C4C4" />  
  72.         <TableRow>  
  73.             <View  
  74.                   
  75.                 android:layout_height="80dp"  
  76.                 android:layout_width="250dp"      
  77.                 android:background="#8A270E"  
  78.             />  
  79.             <TextView   
  80.                 android:layout_height="80dp"  
  81.                 android:text="#8A270E"  
  82.                 android:gravity="center"/>  
  83.         </TableRow>  
  84.         <View  
  85.             android:layout_height="2dip"  
  86.             android:background="#C4C4C4" />  
  87.         <TableRow>  
  88.             <View  
  89.                 android:layout_height="80dp"  
  90.                 android:layout_width="250dp"  
  91.                 android:background="#D63C16"  
  92.             />  
  93.             <TextView   
  94.                 android:layout_height="80dp"  
  95.                 android:text="#D63C16"  
  96.                 android:gravity="center"/>  
  97.         </TableRow>  
  98.     </TableLayout>  
  99. </ScrollView>  
 

 

 

(4)FrameLayout:帧布局

 最简单的一个布局对象。它被定制为你屏幕上的一个空白备用区域,之后你可以在其中填充一个单一对象 — 比如,一张你要发布的图片。所有的子元素将会固定在屏幕的左上角;你不能为FrameLayout中的一个子元素指定一个位置。但是你可以通过子控件自身控制其位置。后一个子元素将会直接在前一个子元素之上进行覆盖填充,把它们部份或全部挡住(除非后一个子元素是透明的)。此布局通常用于游戏或者处理一些画廊程序。如图:

 

 

 

 <?xml version="1.0" encoding="utf-8"?>

Xml代码  收藏代码
  1. <!-- 帧布局,所以子控件均显示在屏幕的左上角,层叠式排列。此布局无法控制子控件的大小与位置,  
  2.       但是子控件自身可以控制其位置大小 -->  
  3. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:orientation="vertical"  
  5.     android:layout_width="fill_parent"  
  6.     android:layout_height="fill_parent"  
  7.     android:background="@drawable/bg"  
  8.     >  
  9.     <!-- 图片显示控件 并且在容器的右侧显示 -->  
  10.     <ImageView   
  11.         android:id="@+id/one_imageview"  
  12.         android:src="@drawable/one"  
  13.         android:layout_width="wrap_content"  
  14.         android:layout_height="wrap_content"  
  15.         android:layout_gravity="right"  
  16.         />  
  17.     <!-- 第二张图片显示在左侧底部 -->  
  18.     <ImageView   
  19.         android:id="@+id/two_imageview"  
  20.         android:src="@drawable/two"  
  21.         android:layout_width="wrap_content"  
  22.         android:layout_height="fill_parent"  
  23.         android:scaleType="fitEnd"  
  24.         />  
  25. </FrameLayout>  

 package net.csdn.blog.androidtoast;

Java代码  收藏代码
  1. import android.app.Activity;  
  2. import android.os.Bundle;  
  3. import android.view.View;  
  4. import android.widget.ImageView;  
  5.   
  6. public class MainActivity extends Activity {  
  7.       
  8.     ImageView mOneImageView;  
  9.     ImageView mTwoImageView;  
  10.     /** Called when the activity is first created. */  
  11.     @Override  
  12.     public void onCreate(Bundle savedInstanceState) {  
  13.         super.onCreate(savedInstanceState);  
  14.         setContentView(R.layout.main);  
  15.           
  16.          mOneImageView=(ImageView) findViewById(R.id.one_imageview);  
  17.          mTwoImageView=(ImageView) findViewById(R.id.two_imageview);  
  18.           
  19.          //添加点击监听事件  
  20.         mOneImageView.setOnClickListener(new ImageView.OnClickListener(){  
  21.   
  22.             @Override  
  23.             public void onClick(View v) {  
  24.                 //点击one时隐藏自身 显示two  
  25.                 mTwoImageView.setVisibility(View.VISIBLE);  
  26.                 v.setVisibility(View.GONE);  
  27.             }  
  28.               
  29.         });  
  30.           
  31.         mTwoImageView.setOnClickListener(new ImageView.OnClickListener(){  
  32.   
  33.             @Override  
  34.             public void onClick(View v) {  
  35.                   
  36.                 mOneImageView.setVisibility(View.VISIBLE);  
  37.                 v.setVisibility(View.GONE);  
  38.             }  
  39.               
  40.         });  
  41.     }  
  42. }  
 

 

原创粉丝点击