高仿网易新闻顶部滑动条效果

   

         这个是网易新闻的主界面，我们知道底部可以用tabhost实现，这个很容易，我们在其他软件中也会经常用到。

         至于顶部的滑动条，个人感觉还是比较漂亮的所以今天也模仿了下，网易顶部滑动条的效果，由于初次模仿这种效果，可能有些地方还不够完美，不过基本已经实现，希望大家能够喜欢。

         废话不多说，下面上代码：

      首先是布局layout下的main.xml

   

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:background="#ffffff"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:id="@+id/layoutBar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/big_button_up"
        android:orientation="horizontal" >

        <RelativeLayout
            android:id="@+id/layout1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="1.0" >

            <TextView
                android:id="@+id/tab1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="新闻" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/layout2"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="1.0" >

            <TextView
                android:id="@+id/tab2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="体育" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/layout3"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="1.0" >

            <TextView
                android:id="@+id/tab3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="娱乐" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/layout4"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="1.0" >

            <TextView
                android:id="@+id/tab4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="更多" />
        </RelativeLayout>
    </LinearLayout>
<LinearLayout
     android:id="@+id/page"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:layout_alignParentLeft="true"
     android:layout_below="@+id/layoutBar"
     android:background="#ffffff"
     android:orientation="vertical"
    >

</LinearLayout>
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/root" android:background="#ffffff" android:layout_width="fill_parent" android:layout_height="fill_parent" > <LinearLayout android:id="@+id/layoutBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/big_button_up" android:orientation="horizontal" > <RelativeLayout android:id="@+id/layout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_weight="1.0" > <TextView android:id="@+id/tab1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="新闻" /> </RelativeLayout> <RelativeLayout android:id="@+id/layout2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_weight="1.0" > <TextView android:id="@+id/tab2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="体育" /> </RelativeLayout> <RelativeLayout android:id="@+id/layout3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_weight="1.0" > <TextView android:id="@+id/tab3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="娱乐" /> </RelativeLayout> <RelativeLayout android:id="@+id/layout4" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_weight="1.0" > <TextView android:id="@+id/tab4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="更多" /> </RelativeLayout> </LinearLayout> <LinearLayout android:id="@+id/page" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentLeft="true" android:layout_below="@+id/layoutBar" android:background="#ffffff" android:orientation="vertical" > </LinearLayout> </RelativeLayout>
    下面是核心类，

package cn.com.karl.slider;
import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.TranslateAnimation;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class SliderBarActivity extends Activity {
    /** Called when the activity is first created. */
     private RelativeLayout layout;

    private RelativeLayout layout1;
    private RelativeLayout layout2;
    private RelativeLayout layout3;
    private RelativeLayout layout4;
    private TextView tab1;
    private TextView tab2;
    private TextView tab3;
    private TextView tab4;
    private TextView first;
    private int current = 1;

    private LinearLayout page;

    private boolean isAdd = false;
    private int select_width;
    private int select_height;
    private int firstLeft;
    private int startLeft;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        init();
    }

    private void init(){
        layout = (RelativeLayout) findViewById(R.id.root);

        layout1 = (RelativeLayout) findViewById(R.id.layout1);
        layout2 = (RelativeLayout) findViewById(R.id.layout2);
        layout3 = (RelativeLayout) findViewById(R.id.layout3);
        layout4 = (RelativeLayout) findViewById(R.id.layout4);

        page=(LinearLayout) this.findViewById(R.id.page);

        tab1 = (TextView) findViewById(R.id.tab1);
        tab1.setOnClickListener(onClickListener);
        tab2 = (TextView) findViewById(R.id.tab2);
        tab2.setOnClickListener(onClickListener);
        tab3 = (TextView) findViewById(R.id.tab3);
        tab3.setOnClickListener(onClickListener);
        tab4 = (TextView) findViewById(R.id.tab4);
        tab4.setOnClickListener(onClickListener);



        RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rl.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);
        first = new TextView(this);
        first.setTag("first");
        first.setGravity(Gravity.CENTER);
        first.setBackgroundResource(R.drawable.slidebar);
        first.setText(tab1.getText());
        View view1=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page1, null);
        page.addView(view1);

        switch (current) {
        case 1:
            layout1.addView(first, rl);
            current = R.id.tab1;
            break;
        case 2:
            layout2.addView(first, rl);
            current = R.id.tab2;
            break;
        case 3:
            layout3.addView(first, rl);
            current = R.id.tab3;
            break;
        case 4:
            layout4.addView(first, rl);
            current = R.id.tab4;
            break;
        default:
            break;
        }

    }


    private void replace() {
        switch (current) {
        case R.id.tab1:
            changeTop(layout1);
            break;
        case R.id.tab2:
            changeTop(layout2);
            break;
        case R.id.tab3:
            changeTop(layout3);
            break;
        case R.id.tab4:
            changeTop(layout4);
            break;
        default:
            break;
        }
    }
    private void changeTop(RelativeLayout relativeLayout){
        TextView old = (TextView) relativeLayout.findViewWithTag("first");;
        select_width = old.getWidth();
        select_height = old.getHeight();

        RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(select_width, select_height);
        rl.leftMargin = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft();
        rl.topMargin = old.getTop() + ((RelativeLayout)old.getParent()).getTop();

        firstLeft = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft();

        TextView tv = new TextView(this);
        tv.setTag("move");
        tv.setBackgroundResource(R.drawable.slidebar);

        layout.addView(tv , rl);
        relativeLayout.removeView(old);
    }

    private OnClickListener onClickListener = new OnClickListener(){
        public void onClick(View v) {
            if(!isAdd){
                replace();
                isAdd = true;
            }

            TextView top_select = (TextView) layout.findViewWithTag("move");
            top_select.setGravity(Gravity.CENTER);
            top_select.setText(tab1.getText());
            int tabLeft;
            int endLeft = 0;

            boolean run = false;

            switch (v.getId()) {
            case R.id.tab1:
                if (current != R.id.tab1) {
                    page.removeAllViews();
                    tabLeft = ((RelativeLayout) tab1.getParent()).getLeft() + tab1.getLeft() + tab1.getWidth() / 2;
                    endLeft = tabLeft - select_width / 2;
                    current = R.id.tab1;
                    top_select.setText(tab1.getText());
                    run = true;
                    View view1=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page1, null);
                    page.addView(view1);
                }
                break;
            case R.id.tab2:
                if (current != R.id.tab2) {
                    page.removeAllViews();
                    tabLeft = ((RelativeLayout) tab2.getParent()).getLeft() + tab2.getLeft() + tab2.getWidth() / 2;
                    endLeft = tabLeft - select_width / 2;
                    current = R.id.tab2;
                    top_select.setText(tab2.getText());
                    run = true;
                    View view2=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page2, null);
                    page.addView(view2);
                }
                break;
            case R.id.tab3:
                if (current != R.id.tab3) {
                    page.removeAllViews();
                    tabLeft = ((RelativeLayout) tab3.getParent()).getLeft() + tab3.getLeft() + tab3.getWidth() / 2;
                    endLeft = tabLeft - select_width/2;
                    current = R.id.tab3;
                    top_select.setText(tab3.getText());
                    run = true;
                    View view3=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page3, null);
                    page.addView(view3);
                }
                break;
            case R.id.tab4:
                if (current != R.id.tab4) {
                    page.removeAllViews();
                    tabLeft = ((RelativeLayout) tab4.getParent()).getLeft() + tab3.getLeft() + tab4.getWidth() / 2;
                    endLeft = tabLeft - select_width/2;
                    current = R.id.tab4;
                    top_select.setText(tab4.getText());
                    run = true;
                    View view4=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page4, null);
                    page.addView(view4);
                }
                break;
            default:
                break;
            }

            if(run){
                TranslateAnimation animation = new TranslateAnimation(startLeft, endLeft - firstLeft, 0, 0);
                startLeft = endLeft - firstLeft;
                animation.setDuration(100);
                animation.setFillAfter(true);
                top_select.bringToFront();
                top_select.startAnimation(animation);

            }

        }

    };
}

package cn.com.karl.slider; import android.app.Activity; import android.os.Bundle; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup.LayoutParams; import android.view.animation.TranslateAnimation; import android.widget.LinearLayout; import android.widget.RelativeLayout; import android.widget.TextView; public class SliderBarActivity extends Activity { /** Called when the activity is first created. */ private RelativeLayout layout; private RelativeLayout layout1; private RelativeLayout layout2; private RelativeLayout layout3; private RelativeLayout layout4; private TextView tab1; private TextView tab2; private TextView tab3; private TextView tab4; private TextView first; private int current = 1; private LinearLayout page; private boolean isAdd = false; private int select_width; private int select_height; private int firstLeft; private int startLeft; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); init(); } private void init(){ layout = (RelativeLayout) findViewById(R.id.root); layout1 = (RelativeLayout) findViewById(R.id.layout1); layout2 = (RelativeLayout) findViewById(R.id.layout2); layout3 = (RelativeLayout) findViewById(R.id.layout3); layout4 = (RelativeLayout) findViewById(R.id.layout4); page=(LinearLayout) this.findViewById(R.id.page); tab1 = (TextView) findViewById(R.id.tab1); tab1.setOnClickListener(onClickListener); tab2 = (TextView) findViewById(R.id.tab2); tab2.setOnClickListener(onClickListener); tab3 = (TextView) findViewById(R.id.tab3); tab3.setOnClickListener(onClickListener); tab4 = (TextView) findViewById(R.id.tab4); tab4.setOnClickListener(onClickListener); RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); rl.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE); first = new TextView(this); first.setTag("first"); first.setGravity(Gravity.CENTER); first.setBackgroundResource(R.drawable.slidebar); first.setText(tab1.getText()); View view1=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page1, null); page.addView(view1); switch (current) { case 1: layout1.addView(first, rl); current = R.id.tab1; break; case 2: layout2.addView(first, rl); current = R.id.tab2; break; case 3: layout3.addView(first, rl); current = R.id.tab3; break; case 4: layout4.addView(first, rl); current = R.id.tab4; break; default: break; } } private void replace() { switch (current) { case R.id.tab1: changeTop(layout1); break; case R.id.tab2: changeTop(layout2); break; case R.id.tab3: changeTop(layout3); break; case R.id.tab4: changeTop(layout4); break; default: break; } } private void changeTop(RelativeLayout relativeLayout){ TextView old = (TextView) relativeLayout.findViewWithTag("first");; select_width = old.getWidth(); select_height = old.getHeight(); RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(select_width, select_height); rl.leftMargin = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft(); rl.topMargin = old.getTop() + ((RelativeLayout)old.getParent()).getTop(); firstLeft = old.getLeft() + ((RelativeLayout)old.getParent()).getLeft(); TextView tv = new TextView(this); tv.setTag("move"); tv.setBackgroundResource(R.drawable.slidebar); layout.addView(tv , rl); relativeLayout.removeView(old); } private OnClickListener onClickListener = new OnClickListener(){ public void onClick(View v) { if(!isAdd){ replace(); isAdd = true; } TextView top_select = (TextView) layout.findViewWithTag("move"); top_select.setGravity(Gravity.CENTER); top_select.setText(tab1.getText()); int tabLeft; int endLeft = 0; boolean run = false; switch (v.getId()) { case R.id.tab1: if (current != R.id.tab1) { page.removeAllViews(); tabLeft = ((RelativeLayout) tab1.getParent()).getLeft() + tab1.getLeft() + tab1.getWidth() / 2; endLeft = tabLeft - select_width / 2; current = R.id.tab1; top_select.setText(tab1.getText()); run = true; View view1=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page1, null); page.addView(view1); } break; case R.id.tab2: if (current != R.id.tab2) { page.removeAllViews(); tabLeft = ((RelativeLayout) tab2.getParent()).getLeft() + tab2.getLeft() + tab2.getWidth() / 2; endLeft = tabLeft - select_width / 2; current = R.id.tab2; top_select.setText(tab2.getText()); run = true; View view2=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page2, null); page.addView(view2); } break; case R.id.tab3: if (current != R.id.tab3) { page.removeAllViews(); tabLeft = ((RelativeLayout) tab3.getParent()).getLeft() + tab3.getLeft() + tab3.getWidth() / 2; endLeft = tabLeft - select_width/2; current = R.id.tab3; top_select.setText(tab3.getText()); run = true; View view3=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page3, null); page.addView(view3); } break; case R.id.tab4: if (current != R.id.tab4) { page.removeAllViews(); tabLeft = ((RelativeLayout) tab4.getParent()).getLeft() + tab3.getLeft() + tab4.getWidth() / 2; endLeft = tabLeft - select_width/2; current = R.id.tab4; top_select.setText(tab4.getText()); run = true; View view4=LayoutInflater.from(getApplicationContext()).inflate(R.layout.page4, null); page.addView(view4); } break; default: break; } if(run){ TranslateAnimation animation = new TranslateAnimation(startLeft, endLeft - firstLeft, 0, 0); startLeft = endLeft - firstLeft; animation.setDuration(100); animation.setFillAfter(true); top_select.bringToFront(); top_select.startAnimation(animation); } } }; }

     由于时间比较紧，我没有做注释，有时间再做注释啊。

     看一下效果是不是一样啊！

   

   效果还请大家自行体验并改进，由于时间仓促，代码并未做注释，希望大家能够原谅，下面我附上源码下载地址：点击打开链接