andoird笔记（第二章--android应用界面编程）

2.1视图组件与容器组件
 android应用的绝大部分UI组件都放在android.widget包及其子包，android.view包及其子包中。android应用的所有UI组件都继承了View类。

 view类还有一个非常重要的子类：ViewGroup，单ViewGroup通常作为其他组件的容器使用。android的所有组件都是建立在View和ViewGroup基础之上的。 ViewGroup作为容器来装其他组件。

基本上所有组件都提供了两种方式来控制组件的行为
1.在XML布局文件中通过XML属性进行控制
2在java程序代码中通过调用方法来进行控制

ViewGroup是一个抽象类，在实际使用中使用ViewGroup的子类来作为容器，例如各种布局管理器

ViewGroup容器控制其子组件分布依赖于ViewGroup.LayoutParams,ViewGroup.MarginLayoutParams两个内部类

ViewGroup.LayoutParams支持的XML属性
android：layout_height
android:layout_width
属性值fill_parent 等于match_parent
 wrap_parent：指定子组件的大小恰好能包裹它的内容即可

ViewGroup.MarginLayoutParams用于控制子组件周围的页边距
android:layout_marginBottom
android:layout_marginLeft
android:layout_marginRight
android:marginTop

2.1.2使用XMl布局文件控制UI界面
 android推荐使用XML布局文件来控制视图
 在res/layout目录下定义任意XML布局文件之后，在java中通过如下方法显示该视图
 setContentView（R.layout.<资源文件名字>）；

在java中访问指定的UI组件
 findViewById(R.id.<android.id属性值>);

2.1.3在代码中控制UI界面
 //创建一个线性布局管理器
 LinearLayout layout = new LinearLayout（this）；
 //设置该Activity显示layout
 super.setContentView(layout);
 layout.setOrientation(LinearLayout.VERTICAL);
 //创建一个TextView
 final TextView show = new TextView(this);
 //创建一个按钮
 Button bn = new Button(this);
 bn.setText(R.string.OK);
 bn.setLayoutParams(new ViewGroup.Layout_Params(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGROUP.LayoutParams.WRAP_CONTENT));
 //向layout容器添加TextView
 layout.addView(show);
 layout.addView(bn);
 bn.setOnClickListener(new OnClickListener(){
  public void onClick(View v){
   show.setText("Hello,Android,"+new java.util.Date(););
  }

 });

2.1.4使用XML布局文件和java代码混合控制UI界面

实例：简单图片浏览器
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/root"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
>
</LinearLayout>

public class MixView extends Activity{
 //定义一个访问图片的数组
 int[] images = new int[]{
  R.drawable.java,
   ....
   ...

  };

 int currentImg = 0;
 public void onCreate(Bundle savedInstanceState){
  super.onCreate(savedInstanceState);  
  setContentView(R.layout.main);
  LinearLayout main = (LinearLayout)findViewById(R.id.root);
  final ImageView image = new ImageView(this);
  main.addView(image);
  image.setImageResource(images[0]);
  image.setOnClickListener(new OnClickListener(){
   public void onClick(View v){
    if(currentImg >= 4){
     currentImg = -1;
    }
    image.setImageResource(images[++currentImg]);
   }
  

  });
 }
}

2.1.5开发自定义View
 可以通过继承View来派生自定义组件
  定义一个继承View基类的子类，然后重写View类的一个或多个方法

实例：跟随手指的小球
 public class DrawView extends View{
  public float currentX = 40；
  public float currentY = 50；
  public DrawView（Context context）{
   super（context）；
  }
  
  public void onDraw（Canvas canvas）{
   super.onDraw(canvas);
   Paint p = new Paint();
   p.setColor(Color.RED);
   canvas.drawCircle(currentX,xurrentY,15,p);
  }
 }

 Activity类
 public class CustomView extends Activity{
  public void onCreate（Bundle savedInstanceState){   super.onCreate(savedInstanceState);
   setContentView(R.layout.main);
   LinearLayout root = (LinearLayout)findViewById(R.id.root);
   //创建DrawView
   final DrawView draw = new DrawView（this）；
   draw.setMinimumWidth(300);
   draw.setMinimumHeight(500); 
   draw.setOnTouchListener(new OnTouchListener(){
    public boolean onTouch(View arg0,MotionEvent event){
   draw.currentX = event.getX();
   draw.currentY = event.getY();
   draw.invalidate();
   return true;

    }

   });
   root.addView(draw);
  }

 }

 

 

 

 

2.2布局管理器
 andoird布局管理器本身就是一个UI组件，所有布局管理器都是ViewGroup的子类

。

 View(ViewGroup(AbsoluteLayout,FrameLayout,LinearLayout

(TableLayout),RelativeLayout))

2.2.1线性布局
 线性布局由LinearLayout类来代表。
 常用属性
 android：gravity   布局管理器的对其方式。  属性中多个属性值之间可用竖线

隔开，单竖线前后千万不能有空格。

 android:orientation 布局管理器内组件的排列方式
 
程序：
 <linearLayout

xmlns:android="http://schmas.asndroid.com/apk/res/android"
  android:orientation ="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:gravity="bottom|center_horizontal"
 />

 //底部，水平居中

 2.2.2表格布局
  表格布局由Tablelayout表示
  不需要声明行，列。而是添加TableRow，其他组件来控制表格的行数和 

 列数。
  
 TableRow为表格行
 如果直接向TableLayout中添加组件，那么这个组件将直接占用一行
 
 表格管理器中，可以为单元格设置三种行为方式：
 Shrinkable，如果某列被设置为Shrinkable，那么该列的所有单元格的宽度都可

以被收缩，以保证该表格能适应父容器的宽度。

 Stretchable：如果某个列被设置为Stretchable，那么该列的所有单元格可以被

拉伸，以保证组件能完全填满表格空余空间。

 Collapsed：如果某个列被设为Collapsed，那么该列的所有单元格都会被隐藏。

 TableLayout常用的XML属性及相关方法
 android:collapseColumns设置需要被隐藏的列的列序号，多个列序号之间用逗号

隔开。
 android:shrinkColumns设置允许被收缩的列的列序号，多个列序号之间用逗号隔

开。
 android:stretchColumns设置允许被拉伸的列的列序号，多个列序号之间用逗号

隔开。

 例子：第二列允许收缩，第三列允许拉伸
 <Tablelayout android:id="@+id/TableLayout01"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:shrinkColumns="1"
  android:stretchColumns="2"
 />
 
 android推荐将文本内容放到XML文件中管理。

 

 

2.2.3帧布局
  帧布局由FrameLayout所代表，Framelayout直接继承了ViewGroup组件。

 帧布局容器为每个组件创建一个区域（称为一帧），所有每个子组件占据一帧，

这些帧根据gravity属性执行自动对齐。组件一个个叠加在一起。

 FrameLayout常用XML属性
 android:foreground,设置该帧布局容器的前景图像
 android:foregroundGravity定义绘制前景图像的gravity属性

程序例子：
 <FrameLayout xmlns.....
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
 >
 <TextView
  android:id="@+id/View01"  
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:width="210px"
  android:height="50px"
  android:background="@ff0000"
 />
 -- 七个TextView，先定义的TextView位于底层后定义的TextView位于上层
  高度不变，宽度以三十递减  
 </FrameLayout>

 
 public class FrameLayoutTest extends Activity{
  private int currentColor = 0;
  //定义一个颜色数组
  final int[] colors = new int[]{
   R.color.color7,
   .....
   ..
  
  };
 
  final int[] names = new int[]{
   R.id.View01,
   ....
   ..
  };

  TextView[] views = new TextView[7];
  public void onCreate(Bundle savedInstanceState){
   super.onCreate(savedInstanceState); 
   setContentView(R.layout.main);
   for(int i = 0; i<7;i++){
    views[i] = (TextView)findViewById(names[i]); 

  
   }
   
   final handler handler = new Handler(){
    public void handlerMessage(Message msg){
     if(msg.what == 0x1122){
      for(int i = 0; i<7 -

currentColor;i++){
       views

[i].setbackgroundResource(colors[i+currentColor]);
    
      }
     for(int i = 7 - currentColor,j=0;i<7;i

++,j++){
    views[i].setBackgroundResource(colors[j]);
 
     }
     

     }
     super.handleMessage(msg);
    }

   };
  
  //定义一个线程周期性地改变currentColor变量值
   new Timer().schedule(new TimerTask(){
    public void run(){
     currentColor++;
     if(currentColor>=6){
      currentColor = 0;
     }
     Message m = new Message();
     m.what = 0x1122;
     handler.sendMessge(m);
    }
   },0,100);
  }
 }
 
 android的View和UI组件不是线程安全的，所以android不允许开发者启动线程访

问用户界面的UI组件。所以程序中额外定义一个Handler来处理TextView背景色的更新。

 2.2.4相对布局
  相对布局由RelativeLayout代表，相对布局容器内子组件的位置总是相

对兄弟组件，父容器来决定的，因此这种布局方式被称为相对布局
 
实例：梅花布局效果
 <RelativeLayout xmlns
  andoird:orientation = "vertical"  
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
 >

<!--定义该组件位于父容器中间-->
 <TextView
  android:id="@+id/view01"  
  android:layout_width="wrap_content"
  andorid:layout_height="wrap_content"
  android:background="@drawable/leaf"
  android:layout_centerInParent = "true" 
 />
 

 <!--定义该组件位于view01组件的上方
 <TextView
  android:id="@+id/view02"  
  andorid:layout_width="wrap_content"
  andoird:layout_height="wrap_content"
  android:layout_above="@id/view01"
  android:layout_alignLeft="@+id/view01"
 />
 
 <!-- 定义该组件位于view01的下方-->
 <TextView
  android:layout_below="@id/view01"
  android:layout_alignLeft = "@id/view01"
 />

 <!--定义该组件位于view01组件的左边-->
 <TextView
  android:layout_toLeftOf="@id/view01"
  android:layout_alignTop = "@id/view01"    
 />
 
 <!--定义该组件位于view01组件的右边-->
 <TextView
  android:layout_toRightOf="@id/view01"
  android:layout_alignTop="@id/view01"
 />

 2.2.5绝对布局
  绝对布局由Absolutelayout代表，android不提供任何布局控制，由开发

人员自己通过X坐标，Y坐标来控制组件的位置。
  layout_x:指定该子组件的X坐标
  layout_y:指定该子组件的Y坐标

 <TextView
  android:layout_x="20dip"
  android:layout_y="20dip"
 />

 px(像素)：每个px对应屏幕的一个点
 dip或dp（device independent pixels，设备独立像素）一种基于屏幕密度的抽象单位。
 sp（scaled pixels，比例像素）主要处理字体的大小，可以根据用户字体大小首选项进行缩放
 in（英寸）：标准长度单位
 mm（毫米）：标准长度单位
 pt（磅）。标准长度单位。1/72英寸