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

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

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="radioButtonStyle">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:button">@null</item>
        <item name="android:textColor">@color/radiobutton_text_color</item>
        <item name="android:textSize">20sp</item>
        <item name="android:singleLine">true</item>
        <item name="android:layout_weight">1.0</item>
        <item name="android:gravity">center</item>
        <item name="android:paddingLeft">0dip</item>
    </style>

</resources>

res/color/radiobutton_text_color.xml

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

布局文件：acitivty_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"
    android:background="#FFFFFFFF">
    <RadioGroup 
        android:id="@+id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        >
        <RadioButton 
            android:id="@+id/radioButton1"
            style="@style/radioButtonStyle"
            android:text="网易"
            />
        <RadioButton 
            android:id="@+id/radioButton2"
            style="@style/radioButtonStyle"
            android:text="天涯"
            />
        <RadioButton 
            android:id="@+id/radioButton3"
            android:text="凤凰"
            style="@style/radioButtonStyle"
            />
        <RadioButton 
            android:id="@+id/radioButton4"
            android:text="搜狐"
            style="@style/radioButtonStyle"
            />
    </RadioGroup>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="3dip"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView"
            android:layout_width="200dip"
            android:layout_height="3dip"
            android:background="#FF336699"
            android:textColor="#FFFF0000" />
    </LinearLayout>
    <View android:layout_width="wrap_content" android:layout_height="1dip" android:background="#FF336699"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

MainActivity.java

package com.example.serviceclient;

import java.util.ArrayList;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.TextView;

/**
 * 
 * @author wangheng
 * 
 */
public class MainActivity extends Activity {

    // private TextView textView = null;

    private ViewPager mViewPager = null;
    private TextView mTextView = null;
    private ArrayList<TextView> mViewList = new ArrayList<TextView>();
    
    private RadioGroup radioGroup = null;
    private RadioButton radioButton1 = null;
    private RadioButton radioButton2 = null;
    private RadioButton radioButton3 = null;
    private RadioButton radioButton4 = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        
        setContentView(R.layout.activity_main);

        mTextView = (TextView) findViewById(R.id.textView);

        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        
        radioGroup = (RadioGroup) findViewById(R.id.radioGroup);
        radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
            
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                int current = mViewPager.getCurrentItem();
                switch (checkedId) {
                    case R.id.radioButton1:{
                        if(current != 0){
                            mViewPager.setCurrentItem(0);                            
                        }
                    }break;
                    case R.id.radioButton2:{
                        if(current != 1){
                            mViewPager.setCurrentItem(1);
                        }
                    }break;
                    case R.id.radioButton3:{
                        if(current != 2){
                            mViewPager.setCurrentItem(2);
                        }
                    }break;
                    case R.id.radioButton4:{
                        if(current != 3){
                            mViewPager.setCurrentItem(3);
                        }
                    }break;
                }
            }
        });
        radioButton1 = (RadioButton) findViewById(R.id.radioButton1);
        radioButton2 = (RadioButton) findViewById(R.id.radioButton2);
        radioButton3 = (RadioButton) findViewById(R.id.radioButton3);
        radioButton4 = (RadioButton) findViewById(R.id.radioButton4);
        

        for (int i = 0; i < 4; i++) {
            TextView tv = new TextView(this);
            tv.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
                    LayoutParams.MATCH_PARENT));
            tv.setGravity(Gravity.CENTER);
            tv.setTextColor(Color.argb(0xFF, 0x33, 0x66, 0x99));
            tv.setTextSize(30);
            tv.setText("Page " + (i + 1));

            mViewList.add(tv);
        }
        int width = getWindowManager().getDefaultDisplay().getWidth()
                / mViewList.size();

        mTextView.setLayoutParams(new LinearLayout.LayoutParams(width, dip2px(3)));

        mViewPager.setAdapter(new PagerAdapter() {

            @Override
            public boolean isViewFromObject(View arg0, Object arg1) {
                return arg0 == arg1;
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {

                if (mViewList.get(position).getParent() != null) {
                    container.removeView(mViewList.get(position));
                }
                container.addView(mViewList.get(position));

                return mViewList.get(position);
            }

            @Override
            public void destroyItem(ViewGroup container, int position,
                    Object object) {
                container.removeView(mViewList.get(position));
            }

            @Override
            public int getCount() {
                return mViewList.size();
            }
        });
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
            
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels){
                int x = (int)((position + positionOffset) * mTextView.getWidth());
                ((View)mTextView.getParent()).scrollTo(-x, mTextView.getScrollY());                
            }

            public void onPageSelected(int position){
                if(position == 0){
                    radioButton1.setChecked(true);
                }else if(position == 1){
                    radioButton2.setChecked(true);
                }else if(position == 2){
                    radioButton3.setChecked(true);
                }else if(position == 3){                    
                    radioButton4.setChecked(true);
                }
            }

            public void onPageScrollStateChanged(int state){
                
            }
        });
        
    }
    int tmpState = 0;
    // @Override
    // public boolean onTouchEvent(MotionEvent event) {
    // if(event.getAction() == MotionEvent.ACTION_MOVE){
    // Log.i("wangheng", "x:" + event.getX() + ",y:" + textView.getScrollY());
    // // textView.scrollTo((int)event.getX(), textView.getScrollY());
    // ((View)textView.getParent()).scrollTo(-(int)event.getX(),
    // textView.getScrollY());
    // textView.scrollTo(-(int)event.getX(), textView.getScrollY());
    // }
    // return super.onTouchEvent(event);
    // }

    public int dip2px(float dipValue) {
        final float scale = getResources().getDisplayMetrics().density;
        return (int) (dipValue * scale + 0.5f);
    }

    public int px2dip(float pxValue) {
        final float scale = getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }

}

注意点：

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

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

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

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

】

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