Android 基础UI编程4

最新推荐文章于 2024-12-09 16:34:18 发布

原创最新推荐文章于 2024-12-09 16:34:18 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#编程 #UI #Android #XML #OS

android 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个具体的Android UI设计案例，通过使用ImageView和ImageButton实现图片的堆叠效果，并展示了如何通过按钮点击事件改变背景图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android 基础UI编程
专业相框设计
ImageView 的堆叠应用
① 新建工程
② 准备三张png 图片
left.png right.png photo.png
③ 修改main.xml 布局，添加UI 元素

 
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
android:id="@+id/widget34"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
><!--创建第一个ImageView (第二层图片)-->
<ImageView
android:id="@+id/myImageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="0px"
android:layout_y="36px"
/>
<!--创建第二个ImageView (第一层图片)-->
<ImageView
android:id="@+id/myImageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="0px"
android:layout_y="36px"
/>
<!--创建第一个Button -->
<Button
android:id="@+id/myButton1"
android:layout_width="105px"
android:layout_height="66px"
android:text="pic1"
android:layout_x="9px"
android:layout_y="356px"
/>
<!--创建第二个Button -->
<Button
android:id="@+id/myButton2"
android:layout_width="105px"
android:layout_height="66px"
android:text="pic2"
android:layout_x="179px"
android:layout_y="356px"
/>
</AbsoluteLayout>

④ 修改mainActivity.java

package zyf.Ex_Ctrl_7;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
public class Ex_Ctrl_7 extends Activity {
/** Called when the activity is first created. */
/* 声明Button、ImageView 对象*/
private ImageView mImageView01;
private ImageView mImageView02;
private Button mButton01;
private Button mButton02;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
/* 取得Button、ImageView 对象*/
mImageView01 = (ImageView) findViewById(R.id.myImageView1);
mImageView02 = (ImageView) findViewById(R.id.myImageView2);
mButton01 = (Button) findViewById(R.id.myButton1);
mButton02 = (Button) findViewById(R.id.myButton2);
/* 设置ImageView 背景图*/
mImageView01.setImageDrawable(getResources().getDrawable(
R.drawable.right));
mImageView02.setImageDrawable(getResources().getDrawable(
R.drawable.photo));
/* 用OnClickListener 事件来启动*/
mButton01.setOnClickListener(new Button.OnClickListener() {
@Override
public void onClick(View v) {
/* 当启动后， ImageView 立刻换背景图*/
mImageView01.setImageDrawable(getResources().getDrawable(
R.drawable.right));
}
});
mButton02.setOnClickListener(new Button.OnClickListener() {
@Override
public void onClick(View v) {
mImageView01.setImageDrawable(getResources().getDrawable(
R.drawable.left));
}
});
}
}

ImageButton 的堆叠应用
① 新建项目
② 准备三张png 图片
left.png right.png photo.png
③ 修改main.xml 布局，添加UI 元素

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageButton
android:id="@+id/myImageButton_Back"
android:state_focused="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_x="0px"
android:layout_y="36px"
/>
<ImageButton
android:id="@+id/myImageButton_Photo"
android:state_focused="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_x="0px"
android:layout_y="36px"
/>
</AbsoluteLayout>

④ 修改mainActivity.java
设置成堆叠

package zyf.Ex_Ctrl_7_B;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
public class Ex_Ctrl_7_B extends Activity {
/** Called when the activity is first created. */
/*声明ImageButton*/
private ImageButton back_Imagebutton,photo_Imagebutton;
private boolean Tag=true;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
/*从XML中获取控件对象*/
back_Imagebutton=(ImageButton)findViewById(R.id.myImageButton_Back );
photo_Imagebutton=(ImageButton)findViewById(R.id.myImageButton_Photo );
//设置默认的背景图片
back_Imagebutton.setBackgroundResource(R.drawable.left);
photo_Imagebutton.setBackgroundResource(R.drawable.photo);
//给ImageButton设置事件监听器
photo_Imagebutton.setOnClickListener(new ImageButton.OnClickListener(){
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Tag=!Tag;//更改背景图片
if(Tag){
back_Imagebutton.setBackgroundResource(R.drawable.right);
}else{
back_Imagebutton.setBackgroundResource(R.drawable.left);
}
}
});
}
}