RadioGroup+ViewPager+Fragment+滚动条

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

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

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

[html] view plain copy

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="fill_parent"  
3.     android:layout_height="fill_parent"  
4.     android:orientation="vertical" >  
5.   
6.     <RadioGroup  
7.         android:id="@+id/radioGroup1"  
8.         android:layout_width="fill_parent"  
9.         android:layout_height="wrap_content"  
10.         android:orientation="horizontal" >  
11.   
12.         <RadioButton  
13.             android:id="@+id/radio0"  
14.             android:layout_width="fill_parent"  
15.             android:layout_height="wrap_content"  
16.             android:layout_weight="1"  
17.             android:background  
18.             android:button="@null"   
19.             android:gravity="center_horizontal"  
20.             android:text="今天" />  
21.   
22.         <RadioButton  
23.             android:id="@+id/radio1"  
24.             android:layout_width="fill_parent"  
25.             android:layout_height="wrap_content"  
26.             android:layout_weight="1"  
27.             android:button="@null"  
28.             android:background="@android:color/transparent"  
29.             android:gravity="center"  
30.             android:text="昨天" />  
31.   
32.         <RadioButton  
33.             android:id="@+id/radio2"  
34.             android:layout_width="fill_parent"  
35.             android:layout_height="wrap_content"  
36.             android:layout_weight="1"  
37.              android:background="@android:color/transparent"  
38.             android:button="@null"  
39.             android:gravity="center"  
40.             android:text="前天" />  
41.     </RadioGroup>  
42.   
43. </LinearLayout>  

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

[html] view plain copy

1.   

Activity代码有注释。

[java] view plain copy

1. package com.example.radiobuttontest;  
2.   
3. import android.annotation.SuppressLint;  
4. import android.graphics.Rect;  
5. import android.graphics.drawable.Drawable;  
6. import android.os.Bundle;  
7. import android.support.v7.app.ActionBarActivity;  
8. import android.view.ViewTreeObserver.OnPreDrawListener;  
9. import android.widget.CompoundButton;  
10. import android.widget.RadioButton;  
11. import android.widget.RadioGroup;  
12. import android.widget.RadioGroup.OnCheckedChangeListener;  
13.   
14. public class MainActivity extends ActionBarActivity {  
15.   
16.     private RadioGroup group;  
17.     private RadioButton rb1,rb2,rb3;  
18.     private Drawable bottomDrawableNormal;  
19.     private Drawable bottomDrawableChecked;  
20.       
21.     @Override  
22.     protected void onCreate(Bundle savedInstanceState) {  
23.         super.onCreate(savedInstanceState);  
24.         setContentView(R.layout.activity_main);  
25.         group = (RadioGroup) this.findViewById(R.id.radioGroup1);  
26.         rb1 = (RadioButton) this.findViewById(R.id.radio0);  
27.         rb2 = (RadioButton) this.findViewById(R.id.radio1);  
28.         rb3 = (RadioButton) this.findViewById(R.id.radio2);  
29.         //处理点击事件  
30.         group.setOnCheckedChangeListener(new OnCheckedChangeListener() {  
31.               
32.             @Override  
33.             public void onCheckedChanged(RadioGroup group, int checkedId) {  
34.                   
35.             }  
36.         });  
37.         rb1.setOnCheckedChangeListener(rbCheckedChangeListener);  
38.         rb2.setOnCheckedChangeListener(rbCheckedChangeListener);  
39.         rb3.setOnCheckedChangeListener(rbCheckedChangeListener);  
40.         rb1.setChecked(true);  
41.           
42.         bottomDrawableNormal = getResources().getDrawable(R.drawable.radiobutton_normal);  
43.         bottomDrawableChecked = getResources().getDrawable(R.drawable.radiobutton_checked);  
44.   
45.         //Activity中可以在onWindowFocusChanged 时获取控件的真正尺寸。   
46.         //Fragment中就要再ViewTreeObserver中监听OnPreDrawListener 通过getMeasuredWidth() 获取真正尺寸  
47.           
48.         //这个种实现方式Activity和Fragment中都可以，但是Activity中有回调  
49.         //so.这个方法推荐在Fragment中使用  
50.         rb1.getViewTreeObserver().addOnPreDrawListener(new OnPreDrawListener() {  
51.               
52.             @Override  
53.             public boolean onPreDraw() {  
54.                   
55.                 //如果draw的Bounds = rb1.getMeasuredWidth() 就代表已经设置过了。  
56.                 if(!(bottomDrawableChecked.getBounds().right == rb1.getMeasuredWidth())){  
57.                     Rect rect = new Rect(0, 0,rb1.getMeasuredWidth(), 10);  
58.                     //设置图片边框  
59.                     bottomDrawableNormal.setBounds(rect);  
60.                     bottomDrawableChecked.setBounds(rect);  
61.                     //设置图片  
62.                     rb1.setCompoundDrawables(null, null, null, bottomDrawableChecked);//第一个是选中状态  
63.                     rb2.setCompoundDrawables(null, null, null, bottomDrawableNormal);  
64.                     rb3.setCompoundDrawables(null, null, null, bottomDrawableNormal);  
65.                     //设置图片与文字的间距  
66.                     rb1.setCompoundDrawablePadding(10);  
67.                     rb2.setCompoundDrawablePadding(10);  
68.                     rb3.setCompoundDrawablePadding(10);  
69.   
70.                 }  
71.                   
72.                 return true;  
73.             }  
74.         });  
75.     }  
76. //  Activity中的实现方式  
77. //  @Override  
78. //  public void onWindowFocusChanged(boolean hasFocus) {  
79. //      super.onWindowFocusChanged(hasFocus);  
80. //        
81. //      if(hasFocus){  
82. //          //上左，下右 两个点能确定一个矩形。  
83. //          Rect rect = new Rect(0, 0,rb1.getWidth(), 10);  
84. //          //设置图片边框  
85. //          bottomDrawableNormal.setBounds(rect);  
86. //          bottomDrawableChecked.setBounds(rect);  
87. //          //设置图片  
88. //          rb1.setCompoundDrawables(null, null, null, bottomDrawableChecked);//第一个是选中状态  
89. //          rb2.setCompoundDrawables(null, null, null, bottomDrawableNormal);  
90. //          rb3.setCompoundDrawables(null, null, null, bottomDrawableNormal);  
91. //          //设置图片与文字的间距  
92. //          rb1.setCompoundDrawablePadding(10);  
93. //          rb2.setCompoundDrawablePadding(10);  
94. //          rb3.setCompoundDrawablePadding(10);  
95. //      }  
96. //  }  
97.       
98.     //处理radioButton状态改变时样式变化  
99.     private CompoundButton.OnCheckedChangeListener  rbCheckedChangeListener = new CompoundButton.OnCheckedChangeListener() {  
100.           
101.         @Override  
102.         public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {  
103.             if(isChecked){  
104.                 buttonView.setCompoundDrawables(null, null, null, bottomDrawableChecked);  
105.             }else{  
106.                 buttonView.setCompoundDrawables(null, null, null, bottomDrawableNormal);  
107.             }  
108.               
109.         }  
110.     };  
111.       
112.       
113.   
114. }  

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

[java] view plain copy

1.   

[java] view plain copy

1. rb1.getViewTreeObserver().addOnWindowFocusChangeListener(new OnWindowFocusChangeListener() {  
2.               
3.             @Override  
4.             public void onWindowFocusChanged(boolean hasFocus) {  
5.               
6.                 //上左，下右 两个点能确定一个矩形。  
7.                 Rect rect = new Rect(0, 0,rb1.getWidth(), 10);  
8.                 //设置图片边框  
9.                 bottomDrawableNormal.setBounds(rect);  
10.                 bottomDrawableChecked.setBounds(rect);  
11.                 //设置图片  
12.                 rb1.setCompoundDrawables(null, null, null, bottomDrawableChecked);//第一个是选中状态  
13.                 rb2.setCompoundDrawables(null, null, null, bottomDrawableNormal);  
14.                 rb3.setCompoundDrawables(null, null, null, bottomDrawableNormal);  
15.                 //设置图片与文字的间距  
16.                 rb1.setCompoundDrawablePadding(10);  
17.                 rb2.setCompoundDrawablePadding(10);  
18.                 rb3.setCompoundDrawablePadding(10);  
19.                           
20.             }  
21.         });