首页 > 代码库 > 第二章 吸引你的眼球—UI编程（3）

第二章 吸引你的眼球—UI编程（3）

2024-08-10 14:02:29   218人阅读

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=http://www.mamicode.com/"@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）


联系
我们