彷微信主界面页面滑动时指示颜色条平滑滑动

Demo下载：http://download.csdn.net/detail/wangwangheng/6947607

微信效果：

要实现的效果：

代码：

strings.xml

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<resources>
    <string name="app_name">平滑移动</string>
</resources>

styles.xml

 1 <resources xmlns:android="http://schemas.android.com/apk/res/android">
 2 
 3     <style name="radioButtonStyle">
 4         <item name="android:layout_width">wrap_content</item>
 5         <item name="android:layout_height">wrap_content</item>
 6         <item name="android:button">@null</item>
 7         <item name="android:textColor">@color/radiobutton_text_color</item>
 8         <item name="android:textSize">20sp</item>
 9         <item name="android:singleLine">true</item>
10         <item name="android:layout_weight">1.0</item>
11         <item name="android:gravity">center</item>
12         <item name="android:paddingLeft">0dip</item>
13     </style>
14 
15 </resources>

res/color/radiobutton_text_color.xml

1 <?xml version="1.0" encoding="utf-8"?>
2 <selector xmlns:android="http://schemas.android.com/apk/res/android">
3     <item android:state_checked="true" android:color="#FF336699"/>
4     <item android:state_checked="false" android:color="#FFFF0000"/>
5 </selector>

布局文件：acitivty_main.xml

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical"
 6     android:background="#FFFFFFFF">
 7     <RadioGroup 
 8         android:id="@+id/radioGroup"
 9         android:layout_width="match_parent"
10         android:layout_height="wrap_content"
11         android:orientation="horizontal"
12         android:gravity="center"
13         >
14         <RadioButton 
15             android:id="@+id/radioButton1"
16             style="@style/radioButtonStyle"
17             android:text="网易"
18             />
19         <RadioButton 
20             android:id="@+id/radioButton2"
21             style="@style/radioButtonStyle"
22             android:text="天涯"
23             />
24         <RadioButton 
25             android:id="@+id/radioButton3"
26             android:text="凤凰"
27             style="@style/radioButtonStyle"
28             />
29         <RadioButton 
30             android:id="@+id/radioButton4"
31             android:text="搜狐"
32             style="@style/radioButtonStyle"
33             />
34     </RadioGroup>
35     <LinearLayout
36         android:layout_width="match_parent"
37         android:layout_height="3dip"
38         android:orientation="horizontal">
39 
40         <TextView
41             android:id="@+id/textView"
42             android:layout_width="200dip"
43             android:layout_height="3dip"
44             android:background="#FF336699"
45             android:textColor="#FFFF0000" />
46     </LinearLayout>
47     <View android:layout_width="wrap_content" android:layout_height="1dip" android:background="#FF336699"/>
48 
49     <android.support.v4.view.ViewPager
50         android:id="@+id/viewPager"
51         android:layout_width="match_parent"
52         android:layout_height="match_parent" >
53     </android.support.v4.view.ViewPager>
54 
55 </LinearLayout>

MainActivity.java

  1 package com.example.serviceclient;
  2 
  3 import java.util.ArrayList;
  4 
  5 import android.app.Activity;
  6 import android.graphics.Color;
  7 import android.os.Bundle;
  8 import android.support.v4.view.PagerAdapter;
  9 import android.support.v4.view.ViewPager;
 10 import android.support.v4.view.ViewPager.OnPageChangeListener;
 11 import android.view.Gravity;
 12 import android.view.View;
 13 import android.view.ViewGroup;
 14 import android.view.ViewGroup.LayoutParams;
 15 import android.view.Window;
 16 import android.widget.LinearLayout;
 17 import android.widget.RadioButton;
 18 import android.widget.RadioGroup;
 19 import android.widget.RadioGroup.OnCheckedChangeListener;
 20 import android.widget.TextView;
 21 
 22 /**
 23  * 
 24  * @author wangheng
 25  * 
 26  */
 27 public class MainActivity extends Activity {
 28 
 29     // private TextView textView = null;
 30 
 31     private ViewPager mViewPager = null;
 32     private TextView mTextView = null;
 33     private ArrayList<TextView> mViewList = new ArrayList<TextView>();
 34     
 35     private RadioGroup radioGroup = null;
 36     private RadioButton radioButton1 = null;
 37     private RadioButton radioButton2 = null;
 38     private RadioButton radioButton3 = null;
 39     private RadioButton radioButton4 = null;
 40 
 41     @Override
 42     protected void onCreate(Bundle savedInstanceState) {
 43         super.onCreate(savedInstanceState);
 44         
 45         requestWindowFeature(Window.FEATURE_NO_TITLE);
 46         
 47         setContentView(R.layout.activity_main);
 48 
 49         mTextView = (TextView) findViewById(R.id.textView);
 50 
 51         mViewPager = (ViewPager) findViewById(R.id.viewPager);
 52         
 53         radioGroup = (RadioGroup) findViewById(R.id.radioGroup);
 54         radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
 55             
 56             @Override
 57             public void onCheckedChanged(RadioGroup group, int checkedId) {
 58                 int current = mViewPager.getCurrentItem();
 59                 switch (checkedId) {
 60                     case R.id.radioButton1:{
 61                         if(current != 0){
 62                             mViewPager.setCurrentItem(0);                            
 63                         }
 64                     }break;
 65                     case R.id.radioButton2:{
 66                         if(current != 1){
 67                             mViewPager.setCurrentItem(1);
 68                         }
 69                     }break;
 70                     case R.id.radioButton3:{
 71                         if(current != 2){
 72                             mViewPager.setCurrentItem(2);
 73                         }
 74                     }break;
 75                     case R.id.radioButton4:{
 76                         if(current != 3){
 77                             mViewPager.setCurrentItem(3);
 78                         }
 79                     }break;
 80                 }
 81             }
 82         });
 83         radioButton1 = (RadioButton) findViewById(R.id.radioButton1);
 84         radioButton2 = (RadioButton) findViewById(R.id.radioButton2);
 85         radioButton3 = (RadioButton) findViewById(R.id.radioButton3);
 86         radioButton4 = (RadioButton) findViewById(R.id.radioButton4);
 87         
 88 
 89         for (int i = 0; i < 4; i++) {
 90             TextView tv = new TextView(this);
 91             tv.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
 92                     LayoutParams.MATCH_PARENT));
 93             tv.setGravity(Gravity.CENTER);
 94             tv.setTextColor(Color.argb(0xFF, 0x33, 0x66, 0x99));
 95             tv.setTextSize(30);
 96             tv.setText("Page " + (i + 1));
 97 
 98             mViewList.add(tv);
 99         }
100         int width = getWindowManager().getDefaultDisplay().getWidth()
101                 / mViewList.size();
102 
103         mTextView.setLayoutParams(new LinearLayout.LayoutParams(width, dip2px(3)));
104 
105         mViewPager.setAdapter(new PagerAdapter() {
106 
107             @Override
108             public boolean isViewFromObject(View arg0, Object arg1) {
109                 return arg0 == arg1;
110             }
111 
112             @Override
113             public Object instantiateItem(ViewGroup container, int position) {
114 
115                 if (mViewList.get(position).getParent() != null) {
116                     container.removeView(mViewList.get(position));
117                 }
118                 container.addView(mViewList.get(position));
119 
120                 return mViewList.get(position);
121             }
122 
123             @Override
124             public void destroyItem(ViewGroup container, int position,
125                     Object object) {
126                 container.removeView(mViewList.get(position));
127             }
128 
129             @Override
130             public int getCount() {
131                 return mViewList.size();
132             }
133         });
134         mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
135             
136             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels){
137                 int x = (int)((position + positionOffset) * mTextView.getWidth());
138                 ((View)mTextView.getParent()).scrollTo(-x, mTextView.getScrollY());                
139             }
140 
141             public void onPageSelected(int position){
142                 if(position == 0){
143                     radioButton1.setChecked(true);
144                 }else if(position == 1){
145                     radioButton2.setChecked(true);
146                 }else if(position == 2){
147                     radioButton3.setChecked(true);
148                 }else if(position == 3){                    
149                     radioButton4.setChecked(true);
150                 }
151             }
152 
153             public void onPageScrollStateChanged(int state){
154                 
155             }
156         });
157         
158     }
159     int tmpState = 0;
160     // @Override
161     // public boolean onTouchEvent(MotionEvent event) {
162     // if(event.getAction() == MotionEvent.ACTION_MOVE){
163     // Log.i("wangheng", "x:" + event.getX() + ",y:" + textView.getScrollY());
164     // // textView.scrollTo((int)event.getX(), textView.getScrollY());
165     // ((View)textView.getParent()).scrollTo(-(int)event.getX(),
166     // textView.getScrollY());
167     // textView.scrollTo(-(int)event.getX(), textView.getScrollY());
168     // }
169     // return super.onTouchEvent(event);
170     // }
171 
172     public int dip2px(float dipValue) {
173         final float scale = getResources().getDisplayMetrics().density;
174         return (int) (dipValue * scale + 0.5f);
175     }
176 
177     public int px2dip(float pxValue) {
178         final float scale = getResources().getDisplayMetrics().density;
179         return (int) (pxValue / scale + 0.5f);
180     }
181 
182 }

注意点：

　　1、意滑块滑动的方式是通过上一级View来实现的、负值以及偏移量的计算方法

　　2、RadioButton的button不显示的方法，给button属性设置值为@null.以及【

在使用radiobutton过程中有时候不需要该button的圆点，只保留它的点击特性即可，这样我们可以在XML文件中给radiobutton加上android:button="@null"即可。

但是我们会发现修改过后的button文字和图标无法居中，原因是圆点虽然隐藏了，但是依然占用空间，所以为了居中显示radiobutton的图标及文字，再加一行代码：android:paddingLeft="0dp"这样就可以实现居中。

】

存在的问题：当Activity从其他状态恢复的时候，可能导致导航错误，需要解决！