android课程——UI（上）

于 2016-03-13 11:47:00 发布
阅读量110 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 移动开发 ui python
原文链接：https://my.oschina.net/yabushan/blog/636526
本文详细阐述了Android UI的基本概念，包括用户界面、视图与视图组、事件监听接口及其应用实例，如ImageView的前景色与背景色切换、CheckBox的多选功能、RadioButton的单选功能、OptionMenu的菜单显示与配置、ContextMenu的上下文菜单操作等。通过具体的代码实现，展示了如何灵活运用Android UI组件和事件处理机制。

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

第三章、UI

1、UI理解

全称：user interface 意为用户界面

Ui有view和viewgroup组成

View类是所有视图包括（viewgroup）的根基类

View在屏幕上占据一片矩形区域，并会在上面进行内容绘制

Viewgroup包含一些view或viewgroup，用于控制子view的布局

2、UI事件

  1. 当用户通过手触摸ui时，系统会自动创建对应的event对象；

  2. Android提供了多种方式拦截处理不同类型的事件

  3. 视图本身就可以处理发生在该视图上的事件

    111344_TjLa_2482052.jpg

3、UI事件监听接口

View.OnClickListener:onClick();

View.OnLongClickListeneer:onLongClick();

View.OnTouchListener:onTouch()

View.OnCreateContextMenuListener:onCreateContextMenu();

View.OnFocusChangeListener:onFocusChange();

View.OnKeyListener:onkey();

给视图添加时间监听的方式：

View.setOn….Listener(listener);

 

四种添加监听的方法

New

This

成员变量

在按钮上添加Onclick方法

4、UI讲解


4-1、imageView

对于这个控件，这里以改变前景色和背景色为例：

a、首先在style.xml中初始化前景色和背景色

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >
    
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/ic_launcher"   //前景色
        android:background="@drawable/test"/>  //背景色

</RelativeLayout>

b、通过代码来是实现点击时改变前景色和背景色

public class ImageActivity extends Activity {

	private ImageView imageview;
	private boolean flag=true;//通过该标记来切换图片
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_image);
		imageview=(ImageView) findViewById(R.id.imageView1);
		imageview.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				if(flag==true){
				//设置背景色
				imageview.setBackgroundResource(android.R.drawable.alert_light_frame);
				//设置前景色
				imageview.setImageResource(android.R.drawable.ic_media_pause);
				flag=false;
				}else{
					//设置背景色
					imageview.setBackgroundResource(android.R.drawable.alert_dark_frame);
					//设置前景色
					imageview.setImageResource(android.R.drawable.ic_media_play);
					flag=true;
				}
			}
		});
	}
}

4-2checkBox 多选框

三个重要的属性：

//判断当前是否勾选

boolean isCehcked();

//设置CheckBox是否勾选

void setChecked（boolean checked）

//设置选中状态改变的监听

void setOnCheckedChangeListener(OnCheckedChangeListener listener)

以选择男女性别为例：

样式文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <CheckBox
        android:id="@+id/man"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="男" 
        android:checked="true"/>

    <CheckBox
        android:id="@+id/women"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="女" />


</LinearLayout>

代码：

public class CheckBoxActivity extends Activity {
	
	private CheckBox man;
	private CheckBox women;

	

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_check_box);
		man=(CheckBox) findViewById(R.id.man);
		women=(CheckBox) findViewById(R.id.women);
		//给性别为男的设置监听
		man.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
			@Override
			public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
				if(isChecked){
					Toast.makeText(CheckBoxActivity.this,"选中了男性别", 0).show();
				}else{
					Toast.makeText(CheckBoxActivity.this,"没选中男性别", 0).show();
				}
			}
		});
		
		
		
		//给性别为女的按钮设置监听
		women.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
			@Override
			public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
				if(isChecked){
					Toast.makeText(CheckBoxActivity.this,"选中了女性别", 0).show();
				}else{
					Toast.makeText(CheckBoxActivity.this,"没选中女性别", 0).show();
				}
			}
		});
		
	}
}

4-3、单选按钮组（radiogroup/radioButton）

同样以选择男女性别为例

样式文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

	<RadioGroup android:id="@+id/rg"
	    android:orientation="horizontal"
	    android:layout_width="wrap_content"
       	 android:layout_height="wrap_content" >
	    <RadioButton 
	        android:id="@+id/rd_man"
	         android:layout_width="wrap_content"
       	 android:layout_height="wrap_content"
       	 android:checked="true"
        	android:text="男"/>
	    	<RadioButton 
	        android:id="@+id/rd_women"
	         android:layout_width="wrap_content"
       	 android:layout_height="wrap_content"
        	android:text="女"/>
	</RadioGroup>

</LinearLayout>


代码：

public class CheckBoxActivity extends Activity {
	
	private RadioGroup radiogroup;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_check_box);
		
		/**
		 * 单选按钮组
		 */
		radiogroup=(RadioGroup) findViewById(R.id.rg);
		radiogroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				//找到选中的radioButton
				RadioButton bRadioButton=(RadioButton) findViewById(checkedId);
				//的大文本
				String sex=bRadioButton.getText().toString();
				//提示
				Toast.makeText(CheckBoxActivity.this,sex,0).show();
				
			}
		});
	}
}

4-4、OptionMenu

a、如何触发menu的显示？

点击menu键

b、如何向menu中添加menuItem？

重写onCreateOptionMenu()

    aa、menu.add()

    bb.加载menu文件的方式：

            MenuInflater menuInflater=getMenuInflater();

            menuInflater.inflate(R.menu.main_option,menu);

c、选择某个menuItem时如何响应？

    重写onOptionsItemSelected(MenuItem item);

    

分两种方式：

纯代码方式以及读取配置文件的方式

配置文件如下：

创建一个menu的xml文件：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@+id/add_option_menu" android:title="添加"/>
<item android:id="@+id/del_option_menu" android:title="删除"/>
</menu>


代码如下：

public class OptionMenuActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_option_menu);
	}
	
	
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		//纯编码的方式
		//menu.add(groupId, itemId, order, title)
		menu.add(0,2,0,"添加");
		menu.add(0, 3, 0, "删除");
		return super.onCreateOptionsMenu(menu);
	}
	
	/*@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		//菜单文件的方式
		
		
			//得到菜单加载器
			MenuInflater flaInflater=getMenuInflater();
			//加载菜单文件
			flaInflater.inflate(R.menu.option_menu, menu);
		 return super.onCreateOptionsMenu(menu);
	}*/
	/**
	 * 当菜单项被选选择后会触发下面这个方法
	 */
	@Override
	public boolean onOptionsItemSelected(MenuItem item) {
		
		switch (item.getItemId()) {
		case R.id.add_option_menu:
			Toast.makeText(OptionMenuActivity.this, "添加", 0).show();
			
			break;
		case R.id.del_option_menu:
			Toast.makeText(this, "删除", 0).show();
		default:
			break;
		}
		return false;
	}
}


4-5、ContextMenu

a、如何触发Menu的显示？

    长按某个视图 view.setOnCreateContextMenuListener(this)

b、如何向Menu中添加MenuItem？

    重写onCreateContextMenu(),menu.add()

c、选择某个MenuItem时如何响应？

    重写onContextItemSelected

长话短说，直接上代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <Button
        android:id="@+id/show_contextMenu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="96dp"
        android:layout_marginTop="64dp"
        android:text="显示contextMenu" />

</RelativeLayout>
public class ContextMenuActivity extends Activity implements OnCreateContextMenuListener{

	private Button showContextMenu;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_context_menu);
		
		showContextMenu=(Button) findViewById(R.id.show_contextMenu);
		//设置上下文菜单的监听
		showContextMenu.setOnCreateContextMenuListener(this);
	}
	@Override
	public void onCreateContextMenu(ContextMenu menu, View v,
			ContextMenuInfo menuInfo) {
		super.onCreateContextMenu(menu, v, menuInfo);
		//添加菜单项
		menu.add(0,1,0,"添加");
		menu.add(0,4,0,"删除");
	}
	
	@Override
	public boolean onContextItemSelected(MenuItem item) {
		switch (item.getItemId()) {
		case 1:
			Toast.makeText(this, "添加", 0).show();
			break;
		case 4:
			Toast.makeText(this, "删除", 0).show();
			

		default:
			break;
		}
		return super.onContextItemSelected(item);
	}
	
}


转载于:https://my.oschina.net/yabushan/blog/636526

D_SJ
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值