码迷,mamicode.com
首页 > 其他好文 > 详细

第二章 吸引你的眼球—UI编程(3)

时间:2014-12-29 20:06:24      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:android   经验分享   布局   imageview   ui   

2.1.4图片显示—图片视图(ImageView)

如果一个界面全是由文字组成的,那这个界面一定是枯燥而乏味的。因此,在合适的位置,放上一些合适的图片,不仅能大大增加界面的美观,还能使你的应用更加吸引人。在Android中,要实现在界面上显示图片有很多种方法,在这里,我们介绍一下最常用的图片视图组件(ImageView)。ImageView用来显示任意图像图片,我们可以自己来定义显示的尺寸和颜色等。我们还是举个例子来看看ImageView是怎么使用的。

首先,在布局文件中定义ImageView组件:

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

<RelativeLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <ImageView

        android:id="@+id/my_imageview"

        android:layout_centerInParent="true"

        android:layout_width="200dp"

        android:layout_height="200dp"

        android:src="@drawable/p06"/>

</RelativeLayout>

 

在这里,我们在布局文件中定义了一个ID为my_imageview的ImageView组件。让它在界面上显示了一张p06.jpeg的图片,这张图片我们放在res/drawable目录下。

如果我们不在布局文件中设置图片的话,我们也可以在代码中来实现:

ImageView image = (ImageView)findViewById(R.id.my_imageview);

mage.setImageResource(R.drawable.p06);

 

需要注意的是,我们也可以用android:background="@drawable/p06"来设置图片。但是二者的使用又有区别:background会根据ImageView的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸。当然,它们两个也可以同时使用。

下面,我们分别来看看src和background效果,如图2-9和2-10所示:

技术分享

图2-9 src效果

 

技术分享

图2-10 background效果

 

另外,ImageView中还有一些属性也是需要我们注意的:

android:adjustViewBounds 是否保持宽高比。需要与maxWidth、MaxHeight一起使用,单独使用没有效果;

android:cropToPadding 是否截取指定区域用空白代替。单独设置无效果,需要与scrollY一起使用 ;

android:maxHeight 定义View的最大高度,需要与AdjustViewBounds一起使用,单独使用没有效果。如果想设置图片固定大小,又想保持图片宽高比,需要如下设置:

1) 设置AdjustViewBounds为true;

2) 设置maxWidth、MaxHeight;

3) 设置设置layout_width和layout_height为wrap_content。

android:maxWidth 设置View的最大宽度。

android:scaleType 设置图片的填充方式。

android:src 设置View的图片或颜色

android:tint 将图片渲染成指定的颜色。

 

经验分享:

很多时候,我们设置图片往往要给图片设置透明度。src和background不同,设置图片透明度的方法也略有区别。

当我们是用src来设置图片的时候,我们在代码中直接就可以通过

myImageView.setAlpha(int alpha)来设置;

而如果是通过background来设置图片的话,我们就要先取得它的background然后再设置:myImageView.getBackground().setAlpha(int alpha)。

 

2.1.5多项选择—多选框(CheckBox)和单项选择—单选框(RadioBox)

1)多选框(CheckBox)

Android平台提供了CheckBox来实现多项选择。我们需要注意的是,既然是多项选择,那么为了确定用户是否选择了某一项,我们就需要对多选框的每一个选项进行事件监听。在这里,我们也用一个简单的例子来看看多选框是如何实现的。

首先,我们新建一个checkbox.xml的布局文件:

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

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

<TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="请选择你感兴趣的运动"

        android:textColor="@android:color/white"

        android:textSize="20sp"/>

<CheckBox

        android:id="@+id/my_checkbox1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="游泳"/>

    <CheckBox

        android:id="@+id/my_checkbox2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="跑步"/>

    <CheckBox

        android:id="@+id/my_checkbox3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="打球"/>

</LinearLayout>

 

在这个布局文件中我们定义了一个TextView组件、三个CheckBox组件,然后,我们将该布局文件作为Activity的content view,效果如图2-11所示:

技术分享

图2-11 CheckBox的使用

 

在代码中,我们可以分别对每一个CheckBox进行监听:

CheckBox checkBox1 = (CheckBox)findViewById(R.id.my_checkbox1);

CheckBox checkBox2 = (CheckBox)findViewById(R.id.my_checkbox2);

CheckBox checkBox3 = (CheckBox)findViewById(R.id.my_checkbox3);

checkBox1.setOnCheckedChangeListener(new OnCheckedChangeListener() {

             @Override

             public void onCheckedChanged(CompoundButton buttonView,

                     boolean isChecked) {

                 if(isChecked){

                     Log.d("test", "checkbox1 is isChecked");

                 }

             }

        });

checkBox2.setOnCheckedChangeListener(new OnCheckedChangeListener() {

             @Override

             public void onCheckedChanged(CompoundButton buttonView,

                     boolean isChecked) {

                 if(isChecked){

                     Log.d("test", "checkbox2 is isChecked");

                 }

             }

        });

checkBox3.setOnCheckedChangeListener(new OnCheckedChangeListener() {

             @Override

             public void onCheckedChanged(CompoundButton buttonView,

                     boolean isChecked) {

                 if(isChecked){

                     Log.d("test", "checkbox3 is isChecked");                          }

             }

        });

 

这样,我们对多选框的每一项都进行监听后,就可以针对每一个相应的操作进行处理了。

 

2)单选框(RadioGroup、RadioButton)

单选框和多选框不同,一次只能选择一个选项。Android平台提供了单选框的组件,可以通过RadioGroup、RadioButton组合起来实现单项选择的效果。

同样的,我们也以一个简单的例子来加以说明。

首先,新建一个radio.xml布局文件:

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

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="请选择您的性别"

        android:textColor="@android:color/white"

        android:textSize="20sp"/>

    <RadioGroup

        android:id="@+id/my_rediogroup"

        android:orientation="vertical"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content">

    <RadioButton

        android:id="@+id/radio_man"

        android:layout_width="wrap_content"

        android:text="男"

        android:layout_height="wrap_content"

        android:checked="true"/>

    <RadioButton

        android:id="@+id/radio_woman"

        android:layout_width="wrap_content"

        android:text="女"

        android:layout_height="wrap_content"/>

    </RadioGroup>

</LinearLayout>

 

在这个布局文件中我们定义了一个TextView组件、一个RadioGroup组里面有两个RadioButton组件,然后,我们将该布局文件作为Activity的content view,效果如图2-12所示:

技术分享

图2-12 RadioButton的使用

 

可以看到,在一组RadioGroup中只能有一个RadioButton被选中。

RadioButton除了可以和CheckBox一样进行监听之外,我们还能单独对RadioGroup进行监听:

RadioGroup myRadioGroup = (RadioGroup)findViewById(R.id. my_rediogroup);

myRadioGroup.setOnCheckedChangeListener(

new RadioGroup.OnCheckedChangeListener() {

            

             @Override

             public void onCheckedChanged(RadioGroup group, int checkedId) {

                 switch(checkedId){

                 case R.id.radio_man:

                 Log.d("test", "man  is isChecked");      

                Break;                                    

                case R.id.radio_woman:

                Log.d("test", "woman is isChecked");

                 break;

                 }

                 mHandler.sendMessage(mHandler.obtainMessage(REFLASH));

             }

        });

 

经验分享:

我们要设置多选框的大小,并不能单纯地通过设置CheckBox的android:layout_width和android:layout_height属性来设定(如果只是这样的设定,大家不妨试一试,只能显示多选框的一部分形状,而不是把整个多选框等比的缩放),而是需要为它设置一个样式,并在样式中为它设置图片,例如:

<style name="gl_task_checkbox"

parent="@android:style/Widget.CompoundButton.CheckBox">

        <item name="android:button">@drawable/图片名</item>

</style>

这样的话CheckBox才能按照我们设定的大小来显示。

第二章 吸引你的眼球—UI编程(3)

标签:android   经验分享   布局   imageview   ui   

原文地址:http://blog.csdn.net/arui319/article/details/42241761

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!