UI效果(4): Button的那点事_01

Android UI 实现技巧

最新推荐文章于 2025-01-05 22:09:01 发布

原创最新推荐文章于 2025-01-05 22:09:01 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#button #ui #android #layout #encoding #null

Android View/UI 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种在Android中实现两个按钮紧挨排列的方法，并展示了如何设置EditText为只读状态及TextView自动链接网页的技术细节。

再这篇博客中，您可以了解一下内容：

<1> 两个Button连在一起效果的实现方法

<2> EditText不可编辑实现，以及注意事项

<3> TextView自动连接web

再看代码之前，先看看效果吧！

运行之后，见下图：

点击save_settings，效果图如下：

再点击cancel_settings，效果图如下：

项目结构图：

效果图点到为止，看源码吧。

1. main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent" android:background="#ff9900">

	<LinearLayout android:layout_width="fill_parent"
		android:id="@+id/linearLayout1" android:layout_height="wrap_content"
		android:gravity="center_horizontal" android:layout_marginTop="5dip">
		<Button android:id="@+id/button_save" android:layout_width="wrap_content"
			android:layout_height="wrap_content" android:text="save settings"
			android:background="@drawable/btn" style="?android:attr/buttonStyleInset"></Button>
		<Button android:id="@+id/button_cancel" android:layout_width="wrap_content"
			android:layout_height="wrap_content" android:text="cancel settings"
			android:background="@drawable/btn" android:layout_marginLeft="-1px"
			style="?android:attr/buttonStyleInset"></Button>
	</LinearLayout>
	<!-- android:gravity="top"设置文字显示在顶部，而不是在中间显示文字 -->
	<EditText android:id="@+id/edit" android:layout_width="280dip"
		android:layout_height="180dip" android:layout_marginTop="10dip"
		android:layout_gravity="center_horizontal" android:gravity="top"
		android:hint="waiting for you click..."/>
	<TextView android:layout_width="wrap_content"
		android:layout_height="wrap_content" android:text="@string/myblog"
		android:autoLink="web" android:textSize="20sp" android:textStyle="italic"
		android:layout_marginLeft="20dip" />
</LinearLayout>

在该布局文件中，使用线性布局实现两个Button连在一起的效果，关键是 android:layout_marginLeft="-1px"。可以根据实际情况来决定这个值。

style="?android:attr/buttonStyleInset"是设置Button样式，更多样式设置可以参考sdk的api的android包下面的R.attr.

另外，设置Button有按下的效果，需要为其设置selector，也就是上面xml文件中android:background="@drawable/btn设置。其中btn是drawable下面的一个xml文件。

源码如下：

<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true"
           android:drawable="@drawable/show" /> <!-- pressed -->
     <item android:state_focused="true"
           android:drawable="@drawable/focus" /> <!-- focused -->
     <item android:drawable="@drawable/back" /> <!-- default -->
 </selector>

更多关于selector的信息，可以参阅sdk/resources/tutorials/下面有个Custom Button。

android:autoLink用来设置TextView的超链接。

2. Activity

package mark.zhang;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;

public class TestActivity extends Activity {
	private Button btn_save = null;
	private Button btn_cancel = null;
	private EditText edit = null;
	
	private EvenListener listener = null;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		init();
		findView();
		setEven();
	}
	
	private void init() {
		listener = new EvenListener();
	}
	
	private void findView() {
		btn_save = (Button) findViewById(R.id.button_save);
		btn_cancel = (Button) findViewById(R.id.button_cancel);
		edit = (EditText) findViewById(R.id.edit);
	}
	
	private void setEven() {
		btn_save.setOnClickListener(listener);
		btn_cancel.setOnClickListener(listener);
	}
	
	final class EvenListener implements OnClickListener {

		@Override
		public void onClick(View v) {
			switch(v.getId()) {
			case R.id.button_save:
				// 改变显示背景图片
				/*btn_save.setBackgroundResource(R.drawable.show);
				btn_cancel.setBackgroundResource(R.drawable.back);*/
				
				// 改变显示文字颜色
				btn_save.setTextColor(Color.RED);
				btn_cancel.setTextColor(Color.BLACK);
				
				// 改变显示字体样式
				/*btn_save.setTypeface(null, Typeface.BOLD);
				btn_cancel.setTypeface(null, Typeface.NORMAL);*/
				
				edit.append("you have selected the 'save_settings' Button!\n");
				edit.append("\n");
				break;
			case R.id.button_cancel:
				/*btn_save.setBackgroundResource(R.drawable.back);
				btn_cancel.setBackgroundResource(R.drawable.show);*/
				
				btn_save.setTextColor(Color.BLACK);
				btn_cancel.setTextColor(Color.RED);
				
				/*btn_cancel.setTypeface(null, Typeface.BOLD);
				btn_save.setTypeface(null, Typeface.NORMAL);*/
				
				edit.append("you have selected the 'cancel_settings' Button!\n");
				edit.append("\n");
				break;
			default:
				break;
			}
		}
	}
}

Java代码很简单，不做说明。

那么，我们来更改代码，使EditText不可以被别人编辑，因为这里不需要去编辑EditText，只是用来显示信息。修改main.xml文件的<EditText></EditText>如下：

<EditText android:id="@+id/edit" android:layout_width="280dip"
		android:layout_height="180dip" android:layout_marginTop="10dip"
		android:layout_gravity="center_horizontal" android:gravity="top"
		android:hint="waiting for you click..."
		android:editable="false"
		android:focusable="false" android:focusableInTouchMode="false"/>

ok，这样edittext就不可以编辑了。

另一种方式就是在代码中，设置其不可获得焦点：

edit.setFocusable(false);
edit.setFocusableInTouchMode(false);

但是注意一点：

// edit设置不可以编辑
edit.setFilters(new InputFilter[] { new InputFilter() {

	@Override
	public CharSequence filter(CharSequence source, int start, int end,
		Spanned dest, int dstart, int dend) {
		return source.length() < 1 ? dest.subSequence(dstart, dend)
				: "";
	}
} });

设置该代码之后，EditText不可以添加文字，对于本例子点击save_settings或者cancel_settings不会更新EditText的显示。但是如果在xml文件中不设置：