现在的位置: 首页 > 综合 > 正文

Android RadioButton 实现选项卡效果 (笔记)

2018年01月29日 ⁄ 综合 ⁄ 共 5254字 ⁄ 字号 评论关闭

 要养成记笔记的好习惯。。。

效果图,  随便做了两个图片,样子有点。。。

Xml  就是拖了个RadioGroup 方向水平,子控件平分宽度。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background
            android:button="@null" 
            android:gravity="center_horizontal"
            android:text="今天" />

        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:background="@android:color/transparent"
            android:gravity="center"
            android:text="昨天" />

        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
             android:background="@android:color/transparent"
            android:button="@null"
            android:gravity="center"
            android:text="前天" />
    </RadioGroup>

</LinearLayout>

给每个radiobutton 设置了背景 , 当不设置背景在2.3上运行时是这个样子的,设置了背景就好了。知道为什么的请告知下小弟



Activity代码有注释。

package com.example.radiobuttontest;

import android.annotation.SuppressLint;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.ViewTreeObserver.OnPreDrawListener;
import android.widget.CompoundButton;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;

public class MainActivity extends ActionBarActivity {

	private RadioGroup group;
	private RadioButton rb1,rb2,rb3;
	private Drawable bottomDrawableNormal;
	private Drawable bottomDrawableChecked;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		group = (RadioGroup) this.findViewById(R.id.radioGroup1);
		rb1 = (RadioButton) this.findViewById(R.id.radio0);
		rb2 = (RadioButton) this.findViewById(R.id.radio1);
		rb3 = (RadioButton) this.findViewById(R.id.radio2);
		//处理点击事件
		group.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId) {
				
			}
		});
		rb1.setOnCheckedChangeListener(rbCheckedChangeListener);
		rb2.setOnCheckedChangeListener(rbCheckedChangeListener);
		rb3.setOnCheckedChangeListener(rbCheckedChangeListener);
		rb1.setChecked(true);
		
		bottomDrawableNormal = getResources().getDrawable(R.drawable.radiobutton_normal);
		bottomDrawableChecked = getResources().getDrawable(R.drawable.radiobutton_checked);

		//Activity中可以在onWindowFocusChanged 时获取控件的真正尺寸。 
		//Fragment中就要再ViewTreeObserver中监听OnPreDrawListener 通过getMeasuredWidth() 获取真正尺寸
		
		//这个种实现方式Activity和Fragment中都可以,但是Activity中有回调
		//so.这个方法推荐在Fragment中使用
		rb1.getViewTreeObserver().addOnPreDrawListener(new OnPreDrawListener() {
			
			@Override
			public boolean onPreDraw() {
				
				//如果draw的Bounds = rb1.getMeasuredWidth() 就代表已经设置过了。
				if(!(bottomDrawableChecked.getBounds().right == rb1.getMeasuredWidth())){
					Rect rect = new Rect(0, 0,rb1.getMeasuredWidth(), 10);
					//设置图片边框
					bottomDrawableNormal.setBounds(rect);
					bottomDrawableChecked.setBounds(rect);
					//设置图片
					rb1.setCompoundDrawables(null, null, null, bottomDrawableChecked);//第一个是选中状态
					rb2.setCompoundDrawables(null, null, null, bottomDrawableNormal);
					rb3.setCompoundDrawables(null, null, null, bottomDrawableNormal);
					//设置图片与文字的间距
					rb1.setCompoundDrawablePadding(10);
					rb2.setCompoundDrawablePadding(10);
					rb3.setCompoundDrawablePadding(10);

				}
				
				return true;
			}
		});
	}
//  Activity中的实现方式
//	@Override
//	public void onWindowFocusChanged(boolean hasFocus) {
//		super.onWindowFocusChanged(hasFocus);
//		
//		if(hasFocus){
//			//上左,下右 两个点能确定一个矩形。
//			Rect rect = new Rect(0, 0,rb1.getWidth(), 10);
//			//设置图片边框
//			bottomDrawableNormal.setBounds(rect);
//			bottomDrawableChecked.setBounds(rect);
//			//设置图片
//			rb1.setCompoundDrawables(null, null, null, bottomDrawableChecked);//第一个是选中状态
//			rb2.setCompoundDrawables(null, null, null, bottomDrawableNormal);
//			rb3.setCompoundDrawables(null, null, null, bottomDrawableNormal);
//			//设置图片与文字的间距
//			rb1.setCompoundDrawablePadding(10);
//			rb2.setCompoundDrawablePadding(10);
//			rb3.setCompoundDrawablePadding(10);
//		}
//	}
	
	//处理radioButton状态改变时样式变化
	private CompoundButton.OnCheckedChangeListener  rbCheckedChangeListener = new CompoundButton.OnCheckedChangeListener() {
		
		@Override
		public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
			if(isChecked){
				buttonView.setCompoundDrawables(null, null, null, bottomDrawableChecked);
			}else{
				buttonView.setCompoundDrawables(null, null, null, bottomDrawableNormal);
			}
			
		}
	};
	
	

}

android 4.3 以后可以在Fragment中
这样处理 ,ViewTreeObserver
addOnWindowFocusChangeListener 是在API
Level
18才有的, 低版本运行下面的代码会crash。上么的写法通用, 我是先这样写了之后做适配出了问题 , 不过也写出来当笔记咯


rb1.getViewTreeObserver().addOnWindowFocusChangeListener(new OnWindowFocusChangeListener() {
			
			@Override
			public void onWindowFocusChanged(boolean hasFocus) {
			
				//上左,下右 两个点能确定一个矩形。
				Rect rect = new Rect(0, 0,rb1.getWidth(), 10);
				//设置图片边框
				bottomDrawableNormal.setBounds(rect);
				bottomDrawableChecked.setBounds(rect);
				//设置图片
				rb1.setCompoundDrawables(null, null, null, bottomDrawableChecked);//第一个是选中状态
				rb2.setCompoundDrawables(null, null, null, bottomDrawableNormal);
				rb3.setCompoundDrawables(null, null, null, bottomDrawableNormal);
				//设置图片与文字的间距
				rb1.setCompoundDrawablePadding(10);
				rb2.setCompoundDrawablePadding(10);
				rb3.setCompoundDrawablePadding(10);
						
			}
		});

抱歉!评论已关闭.