标签:android 经验分享 布局 imageview ui
如果一个界面全是由文字组成的,那这个界面一定是枯燥而乏味的。因此,在合适的位置,放上一些合适的图片,不仅能大大增加界面的美观,还能使你的应用更加吸引人。在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)。 |
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才能按照我们设定的大小来显示。 |
标签:android 经验分享 布局 imageview ui
原文地址:http://blog.csdn.net/arui319/article/details/42241761