Android UI, TextView, Button, ToggleButton, RadioGroup

1. TextView, Button

关键点： res/drawable/button_bg.xml 设置backgroup时可以使用一个drawable的xml来表述效果

mainActivity.java

package com.example.uitest;

import org.xml.sax.XMLReader;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.text.Editable;
import android.text.Html;
import android.text.Html.ImageGetter;
import android.text.Html.TagHandler;
import android.text.Spannable;
import android.text.SpannableStringBuilder;
import android.text.method.LinkMovementMethod;
import android.text.style.ClickableSpan;
import android.text.style.ImageSpan;
import android.util.Log;
import android.view.Menu;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
showView();
}

private void showView(){
TextView tv1 =  (TextView) findViewById(R.id.tv1);

//在textview用<img>标签是 考虑到某些原因不能立马获得图片，所以要用ImageGetter
ImageGetter imageGetter = new Html.ImageGetter() {
@Override
public Drawable getDrawable(String source) {
if(source!=null){
Log.i("myLog source: ", source); //ic_launcher.png
BitmapDrawable retDrawable = (BitmapDrawable) getResources().getDrawable(R.drawable.ic_launcher);
retDrawable.setBounds(0, 0, retDrawable.getIntrinsicWidth(), retDrawable.getIntrinsicHeight());
return retDrawable;
}else
return null;
}
};

//如果html中含有自定义标签，在这里解析
TagHandler tagHandler = new Html.TagHandler() {
@Override
public void handleTag(boolean opening, String tag, Editable output,
XMLReader xmlReader) {
// TODO Auto-generated method stub
}
};

//方式一， 直接用于html插入图片
//tv1.setText(Html.fromHtml("<h2>今晚打酱油_</h2> <b>用户名</b><img src='ic_launcher.png'/><font color='green'>评价</font> ", imageGetter, tagHandler));

//方式二， 使用span 类 插入， 以图片为例， 还有其他效果的span
ClickableSpan clickableSpan = new ClickableSpan() {
@Override
public void onClick(View widget) {
//点击几个字符的事件触发， 例如开启一个activity
Toast.makeText(MainActivity.this, "点击了", Toast.LENGTH_SHORT).show();
Log.i("myLog", "clickableSpan");
}
};

SpannableStringBuilder spannableStringBuilder = new SpannableStringBuilder("hello world");
ImageSpan imageSpan = new ImageSpan(MainActivity.this, R.drawable.ic_launcher);
//插入图片
spannableStringBuilder.setSpan(imageSpan, 5, 6, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
tv1.setMovementMethod(LinkMovementMethod.getInstance());
//加入点击事件
spannableStringBuilder.setSpan(clickableSpan, 0, 5, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
tv1.setText(spannableStringBuilder);
}

}

activity_main.xml 布局文件

<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity" >

<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:autoLink="all"
android:drawableLeft="@drawable/ic_launcher"
android:focusable="true"
android:focusableInTouchMode="true"
/>

<Button
android:id="@+id/bt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_bg"
android:text="点击我"
/>

</LinearLayout>

res/drawable/button_bg.xml 按键背景图片切换的 drawable

<?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/button1"/>
<item android:state_pressed="false" android:drawable="@drawable/button2"/>
</selector>

2. ToggleButton, RadioGroup

关键点： 这些组件都可以通过设置android:button backgroup drawableLeft等做到自定义效果

MyActivity2.java

package com.example.uitest;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;
import android.widget.ToggleButton;

public class MyActivity2 extends Activity {

private final String TAG = "myLog";

private ToggleButton togBt;
private RadioGroup radioGp;

@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_2);
showTogBt();
showRadioBt();
}

private void showRadioBt() {
radioGp =  (RadioGroup) findViewById(R.id.rg1);
radioGp.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.radioButton1:
Toast.makeText(MyActivity2.this, "radioButton1", Toast.LENGTH_SHORT).show();
break;
case R.id.radioButton2:
Toast.makeText(MyActivity2.this, "radioButton2", Toast.LENGTH_SHORT).show();
break;
case R.id.radioButton3:
Toast.makeText(MyActivity2.this, "radioButton3", Toast.LENGTH_SHORT).show();
break;
default:
Toast.makeText(MyActivity2.this, "defaults", Toast.LENGTH_SHORT).show();
break;
}
}
});
}

private void showTogBt(){
togBt = (ToggleButton) findViewById(R.id.toggleButton1);
togBt.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if(isChecked){
Log.i(TAG, "bt checked");
togBt.setBackgroundResource(R.drawable.bt_bg1);
}else{
Log.i(TAG, "bt unchecked");
togBt.setBackgroundResource(R.drawable.bt_bg2);
}
}
});
}

}

layout_2.xml 布局xml文件

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

<ToggleButton
android:id="@+id/toggleButton1"
android:layout_width="150dp"
android:layout_height="90dp"
android:text="关"
android:textOn="开"
android:textOff="关"
android:background="@drawable/bt_bg2"
android:alpha="0.5"
/>

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

<RadioGroup android:id="@+id/rg1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:orientation="vertical" >

<RadioButton
android:id="@+id/radioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton1"
android:button="@null"
android:drawableLeft="@android:drawable/btn_star"
android:background="@drawable/btimg" />
<RadioButton
android:id="@+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton2" />
<RadioButton
android:id="@+id/radioButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton3" />
</RadioGroup>
</LinearLayout>

togbtbg.xml ； drawable 效果

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true" android:drawable="@drawable/bt_bg2"></item>
<item android:state_checked="false" android:drawable="@drawable/bt_bg1"></item>

</selector>

----------------- 转 -------------------- RadioGroup音乐按钮工具条

/article/10449980.html

xml文件：

<RadioGroup android:id="@+id/MusicList_RadioGroup"
android:orientation="horizontal" android:layout_alignParentBottom="true"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:padding="2.0dip"
android:background="@drawable/radiogroup_bg"
>

<RadioButton android:id="@+id/MusicList_RadioGroup_next"
android:drawableLeft="@drawable/radiogroup_next"
android:text="@string/Text_radiogroup_next"
android:textSize="15.0dip"
android:layout_weight="1.0" android:button="@null"
android:layout_width="wrap_content" android:layout_height="wrap_content"
/>
<RadioButton android:id="@+id/MusicList_RadioGroup_playAndpuse"
android:drawableLeft="@drawable/radiogroup_play"
android:text="@string/Text_radiogroup_play"
android:textSize="15.0dip"
android:layout_weight="1.0" android:button="@null"
android:layout_width="wrap_content" android:layout_height="wrap_content"
/>
<RadioButton android:id="@+id/MusicList_RadioGroup_previous"
android:drawableLeft="@drawable/radiogroup_previous"
android:text="@string/Text_radiogroup_previous"
android:textSize="15.0dip"
android:layout_weight="1.0" android:button="@null"
android:layout_width="wrap_content" android:layout_height="wrap_content"
/>
</RadioGroup>

绑定监听事件：

//绑定监听器
MusicListTable_RadioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener(){
public void onCheckedChanged(RadioGroup arg0, int rid) {
switch(rid)
{
case R.id.MusicList_RadioGroup_next://下一首
break;
case R.id.MusicList_RadioGroup_previous://上一首
break;
case R.id.MusicList_RadioGroup_playAndpuse://播放或暂停
if(isPlaying)
{
Drawable dr= res.getDrawable(R.drawable.radiogroup_play);
//setBounds如果不设置的话setCompoundDrawables就会没有图片显示出来，所以一定要设置一次
dr.setBounds(0, 0, dr.getMinimumWidth(), dr.getMinimumHeight());
palyAndpuse.setCompoundDrawables(dr, null,null, null);//为RadioButton设置图片，左右上下对应xml的android:drawableLeft="@drawable/XXX"
isPlaying=false;
}
else
{
Drawable dr= res.getDrawable(R.drawable.radiogroup_puse);
dr.setBounds(0, 0, dr.getMinimumWidth(), dr.getMinimumHeight());
palyAndpuse.setCompoundDrawables(dr, null,null, null);
isPlaying=true;
}
arg0.clearCheck();//清除选择，如果不清除的话不能重复选择同一个Radiobutton
break;
}

}});
}

效果：