当前位置:我的异常网» Android » Android0203_根本组件

Android0203_根本组件

www.myexceptions.net 网友分享于：2013-02-21 浏览：12次

Android0203_基本组件

0，基本组件

1，TextView和EditText

2，Button、ImageButton

3，RadioButton、CheckButton

4，ToggleButton

5，AnalogClock、DigitalClock

6，ImageView

基本组件

1，TextView和EditText

实例：不同字体、不同颜色的文本、URL

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="测试文字1"
        android:textSize="20pt" />
    
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="测试文字2测试文字2测试文字2测试文字2测试文字2测试文字2测试文字2"
        android:singleLine="true"
        android:ellipsize="start" />
    
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="jseven1989@163.com测试文字3" 
        android:singleLine="true"
        android:autoLink="email"/>
    
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="测试文字4" 
        android:shadowColor="#0000FF"
        android:shadowDx="15"
        android:shadowDy="20"
        android:shadowRadius="45"
        android:textColor="#FF0000"
        android:textSize="25pt"
        />
    
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="测试文字5" 
        android:password="true"/>
    
    <TextView 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher"
        android:text="带边框(背景)的文本"
        />
    
    <TextView 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/ic_launcher"
        android:text="带图片的文本"
        />
</LinearLayout>

以上常用属性：

①android:text=“20pt”——文本大小

②android:ellipsize="middle"——超出TextView的长度时如何处理文本内容（start/end/marquee）

android:singleLine="true"——设为true，超出不换行

③android:autoLink="email"——符合指点格式的玩呢吧转换为可单击的超链接（web/phon/map/all）

④android:shadowColor="#FF0000"——阴影的颜色

android:shadowDx="20.0"——阴影在水平方向的偏移

android:shadowDy="20.0"——阴影在垂直方向的偏移

android:shadowRadius="45.0"——阴影的角度

android:textColor="#0000FF"——文本颜色

⑤android:password="true"——密码框（以点代理字符）

⑥android:background="@drawable/bg"——背景图片

⑦android:drawableLeft="@drawable/icon"——文本的左边指定图片

实例：用户友好的输入界面

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1"
    android:orientation="vertical" >
    
    <TableRow >
        <TextView 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:text="用户名"/>
        <EditText 
            android:id="@+id/name"
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content"
            android:hint="请输入用户名"
            android:selectAllOnFocus="true"
            />
    </TableRow>
 
    <TableRow >
        <TextView 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:text="密码"
            />
        <EditText 
            android:id="@+id/password"
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content"
            android:password="true"/>
    </TableRow>
    
    <TableRow >
        <TextView 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:text="电话号码"/>
        <EditText 
            android:id="@+id/phone"
            android:layout_width="fill_parent" 
            android:layout_height="wrap_content"
            android:hint="请输入6位的短号"
            android:phoneNumber="true"
            android:selectAllOnFocus="true"
            />
    </TableRow>
    
    <Button 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:text="登录"/>
    <Button 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:text="注册"/>

</TableLayout>

解析：

①android:hint="请输入用户名"——没输入前显示这段文字

android:selectAllOnFocus="true"——获得焦点时选中已输入内容

②android:phoneNumber="true"——系统自动显示数字输入框

2，Button和ImageButton

实例：

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="普通按钮" 
        android:background="@drawable/ic_launcher"
        />
    
    <Button 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="带文字的图片按钮"
        android:background="@drawable/button_selector"
        />
    
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:background="#FF0000"
        />
    
    <ImageButton 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#DD0000"
        android:src="@drawable/button_selector"
        />

</LinearLayout>

解析：

Button——android:text 文字

android:background添加背景颜色或图片

Button——android:src 指点图片资源

android:background添加背景颜色或图片

3，RadioButton和CheckBox

实例：

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="性别" />
    
    <RadioGroup 
        android:id="@+id/rp"
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        >
        <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="男"
            />
        <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="女"
            />
    </RadioGroup>
    
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="喜欢的颜色" />
    
    <LinearLayout 
        android:orientation="horizontal"
        android:layout_gravity="center_horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
        
        <CheckBox 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="红色"
            />
        <CheckBox 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="蓝色"
            />
        <CheckBox 
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="绿色"
            />
    </LinearLayout>

</LinearLayout>

解析：

RadioButton——需要和RadioGroup使用，只能选择一个

CheckBox——可以选中多个

4，ToggleButton

实例：

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

    <ToggleButton 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:textOn="开"
        android:textOff="关"
        />

</LinearLayout>

解析：

①android:textOn="开"

android:textOff="关"

②android:checked（setChecked(boolean)）设置按钮是否被选中

5，AnalogClock和DigitalClock

实例：

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

	<AnalogClock 
	    android:layout_height="wrap_content"
	    android:layout_width="wrap_content"/>
    
	<DigitalClock 
	    android:layout_height="wrap_content"
	    android:layout_width="wrap_content"
	    android:textSize="40pt"
	    android:textColor="#FF00FF"
	    />
	
</LinearLayout>

解析：

AnalogClock——显示模拟时钟

DigitalClock——显示数字时钟，继承TextView，可以设置textsize和textcolor

ps：还有一个Chronometer计时器组件，暂不研究

6，ImageView

继承View，不仅显示图片，还可以是任何Drawable的对象

android:adjustViewBounds	setAdjustViewBounds(boolean)	设置组件是否调整自己的边界来保存所显示的图片的长宽比
maxHeight	setMaxHeight(int)	组件的最大高度
maxWeith	setMaxWidth(int)	组件的最大宽度
src	setImageResource(int)	组件显示的Drawable的ID
scaleType	setScaleType(……)	设置所显示的图片如何缩放或移动以适应ImageView的大小

android:scaleType属性可指定如下属性值

matrix——使用matrix方式缩放

fitXY——纵横向进行独立缩放，使得图片完全适应ImageView，纵横比很可能会改变

fitStart——保持纵横比缩放，知道图片能完全显示在ImageView

(图片较长边长，与Imageview相应的边长相等)，缩放完成后放在ImageView的左上角

fitCenter——中间

fitEnd——右下角

center——放在中间，不缩放

centerCrop——保持纵横比缩放，图片能完全覆盖ImageView

centerInside——保持纵横比缩放，ImageView能完全显示图片

实例：

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="提高" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="降低" />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="下一张" />
    </LinearLayout>


    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="480px"
        android:background="#770000"
        android:src="@drawable/sj_1"
        android:scaleType="fitCenter"
        />
    
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="240px"
        android:layout_height="240px"
        android:layout_marginTop="10px"
		android:background="#770077"
        />

</LinearLayout>

程序代码：

public class ImageViewActivity extends Activity {
	int[] images = new int[] {
		R.drawable.sj_1,
		R.drawable.sj_2,
		R.drawable.sj_3,
		R.drawable.sj_4
	};

	private int alpha = 255;
	
	int currentImage = 0;
	
	@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        final Button button1 = (Button) findViewById(R.id.button1);
        final Button button2 = (Button) findViewById(R.id.button2);
        final Button button3 = (Button) findViewById(R.id.button3);
        final ImageView imageView1 = (ImageView) findViewById(R.id.imageView1);
        final ImageView imageView2 = (ImageView) findViewById(R.id.imageView2);
        
        // 点击按钮选择下一张图片
        imageView1.setImageResource(images[currentImage]);
        button3.setOnClickListener(new OnClickListener() {
			
			public void onClick(View v) {
				if(currentImage > 2) {
					currentImage = -1;
				}
				imageView1.setImageResource(images[++currentImage]);
			}
		});
        
        // 创建监听器，可以使改变图片的透明度
        OnClickListener listener = new OnClickListener() {
			
			public void onClick(View v) {
				if(v == button1) {
					alpha += 20;
				}
				if(v == button2) {
					alpha -=20;
				}
				if(alpha >= 255) {
					alpha = 255;
				}
				if(alpha <= 0) {
					alpha = 0;
				}
				imageView1.setAlpha(alpha);
			}
		};
        button1.setOnClickListener(listener);
        button2.setOnClickListener(listener);
        
        // 设置图片的监听器
        imageView1.setOnTouchListener(new OnTouchListener() {
			
			public boolean onTouch(View v, MotionEvent event) {
				// 获取第一个图片显示框的位图
				BitmapDrawable bitmapDrawable = (BitmapDrawable) imageView1.getDrawable();
				Bitmap bitmap = bitmapDrawable.getBitmap();
				
				// bitmap图片实际大小与第一个ImageView的缩放比例
				double scale = bitmap.getWidth() / 480.0;
				System.out.println(scale+"————————");
				
				// 获取需要显示的图片的开始点
				int x  = (int) (event.getX() * scale);
				int y  = (int) (event.getY() * scale);
				System.out.println("屏幕点=(" + event.getX() + ", " + event.getY() + ")");
				System.out.println("图片开始点=(" + x + ", " + y + ")");
				
				if(x + 120 >= bitmap.getWidth()) {
					x = bitmap.getWidth() - 120;
				}
				if(y + 120 >= bitmap.getHeight()) {
					y = bitmap.getHeight() - 120;
				}
				if(x - 120 < 0) {
					x = 120;
				}
				if(y - 120 < 0) {
					y = 120;
				}
				
				System.out.println("修改后的图片开始点=(" + x + ", " + y + ")");
				
				imageView2.setImageBitmap(Bitmap.createBitmap(bitmap, x - 120, y - 120, 240, 240));
				imageView2.setAlpha(alpha);
				return false;
			}
		});
        		
    } 
}

解析：

①android:scaleType="fitCenter"——表明图片会保持比例缩放

②OnTouchListener可以监听屏幕触摸事件

③imageView.setAlpha()改变图片透明度