Android 模仿网易新闻简单标题栏 《零基础学安卓》

特别鸣谢：http://www.jb51.net/article/32964.htm

先上效果图：

1.先准备一个主布局文件：slider_bar_layout.xml 代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.kmlxue.wangyi.MainActivity"
    tools:showIn="@layout/activity_main">

    <LinearLayout
        android:id="@+id/layoutBar"
        android:layout_width="match_parent"
        android:layout_height="45dp"
        android:orientation="horizontal">
        <RelativeLayout
            android:id="@+id/layout1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="1">
            <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="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="1">
            <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="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="1">
            <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="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="1">
            <TextView
                android:id="@+id/tab4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="百科"/>
        </RelativeLayout>
        <RelativeLayout
            android:id="@+id/layout5"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="1">
            <TextView
                android:id="@+id/tab5"
                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="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/layoutBar"
        android:orientation="horizontal"
        android:background="#ffff99"
        >

    </LinearLayout>
</RelativeLayout>

2.再准备5个切换的布局文件，分别命名为layout1.xml、layout2.xml、layout3.xml、layout4.xml、layout5.xml。我就简单贴一个出来：layout1.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:id="@+id/layout1">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#0000ff"
        android:text="page1"
        android:textSize="20sp"
        android:gravity="center"/>

</RelativeLayout>

3.创建核心Activity；SliderBarActivity.java

package com.kmlxue.wangyi;

import android.net.Uri;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.TranslateAnimation;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.google.android.gms.appindexing.Action;
import com.google.android.gms.appindexing.AppIndex;
import com.google.android.gms.common.api.GoogleApiClient;

//首先实现点击事件的监听接口

public class SliderBarActivity extends AppCompatActivity implements View.OnClickListener {

    private static  final String TAG = "SliderBarActivity";

    private RelativeLayout layout; //用于接收整个布局
    private RelativeLayout relativeLayout1; //用于接收标题1布局
    private RelativeLayout relativeLayout2; //用于接收标题2布局
    private RelativeLayout relativeLayout3; //用于接收标题3布局
    private RelativeLayout relativeLayout4; //用于接收标题4布局
    private RelativeLayout relativeLayout5; //用于接收标题5布局
    private TextView tab1; //标题的TextView
    private TextView tab2; //标题的TextView
    private TextView tab3; //标题的TextView
    private TextView tab4; //标题的TextView
    private TextView tab5; //标题的TextView
    private TextView frist; //用于初始加载时的效果
    private int current = 1; //用于初始加载时判定
    private LinearLayout page; //标题下面整块的布局
    private boolean isAdd = false; //用于判定是否第一次点击
    private int select_width; //切换时的宽
    private int select_height; //切换时的高
    private int fristLeft; 
    private int startLeft;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.slider_bar_layout);

        init();//初始方法
    }
    
    public void init() {
        //初始化布局文件及标题栏
        layout = (RelativeLayout) findViewById(R.id.root);
        relativeLayout1 = (RelativeLayout) findViewById(R.id.layout1);
        relativeLayout1.setOnClickListener(this);
        relativeLayout2 = (RelativeLayout) findViewById(R.id.layout2);
        relativeLayout2.setOnClickListener(this);
        relativeLayout3 = (RelativeLayout) findViewById(R.id.layout3);
        relativeLayout3.setOnClickListener(this);
        relativeLayout4 = (RelativeLayout) findViewById(R.id.layout4);
        relativeLayout4.setOnClickListener(this);
        relativeLayout5 = (RelativeLayout) findViewById(R.id.layout5);
        relativeLayout5.setOnClickListener(this);

        page = (LinearLayout) findViewById(R.id.page);
        tab1 = (TextView) findViewById(R.id.tab1);
        tab2 = (TextView) findViewById(R.id.tab2);
        tab3 = (TextView) findViewById(R.id.tab3);
        tab4 = (TextView) findViewById(R.id.tab4);
        tab5 = (TextView) findViewById(R.id.tab5);

        RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        rl.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE);

        frist = new TextView(this);
        frist.setTag("frist");
        frist.setGravity(Gravity.CENTER);
        frist.setText(tab1.getText());
        frist.setBackgroundResource(R.mipmap.ic_launcher);

        View view1 = LayoutInflater.from(getApplicationContext()).inflate(R.layout.layout1, null);
        page.addView(view1);
        switch (current) {
            case 1:
                relativeLayout1.addView(frist, rl);
                current = R.id.layout1;
                break;
            case 2:
                relativeLayout2.addView(frist, rl);
                current = R.id.layout2;
                break;
            case 3:
                relativeLayout3.addView(frist, rl);
                current = R.id.layout3;
                break;
            case 4:
                relativeLayout4.addView(frist, rl);
                current = R.id.layout4;
                break;
            case 5:
                relativeLayout5.addView(frist, rl);
                current = R.id.layout5;
                break;
            default:
                break;

        }

    }

    private void replace() {
        switch (current) {
            case R.id.layout1:
                changeTop(relativeLayout1);
                break;
            case R.id.layout2:
                changeTop(relativeLayout2);
                break;
            case R.id.layout3:
                changeTop(relativeLayout3);
                break;
            case R.id.layout4:
                changeTop(relativeLayout4);
                break;
            case R.id.layout5:
                changeTop(relativeLayout5);
                break;

            default:
                break;
        }
    }

    private void changeTop(RelativeLayout relativeLayout) {
        TextView old = (TextView) relativeLayout.findViewWithTag("frist");
        select_width = old.getWidth();
        select_height = old.getHeight();

        RelativeLayout.LayoutParams rl = new RelativeLayout.LayoutParams(select_width, select_width);
        rl.leftMargin = old.getLeft() + ((RelativeLayout) old.getParent()).getLeft();
        rl.topMargin = old.getTop() + ((RelativeLayout) old.getParent()).getTop();
        fristLeft = old.getLeft() + ((RelativeLayout) old.getParent()).getLeft();
        TextView tv = new TextView(this);
        tv.setTag("move");
        tv.setBackgroundResource(R.mipmap.ic_launcher);
        layout.addView(tv, rl);
        relativeLayout.removeView(old);
    }

    @Override
    public void onClick(View v) {
        //第一次点击事件
        if (!isAdd) {
            replace();
            isAdd = true;
        }

        TextView top_select = (TextView) layout.findViewWithTag("move");
        top_select.setGravity(Gravity.CENTER);
        int tabLeft;
        int endLeft = 0;
        boolean run = false;
        switch (v.getId()) {
            case R.id.layout1:
                if (current != R.id.layout1) {
                    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.layout1, null);
                    page.addView(view1);

                }
                break;
            case R.id.layout2:
                if (current != R.id.layout2) {
                    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.layout2, null);
                    page.addView(view2);


                }
                break;
            case R.id.layout3:
                if (current != R.id.layout3) {
                    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.layout3, null);
                    page.addView(view3);


                }
                break;
            case R.id.layout4:
                if (current != R.id.layout4) {
                    page.removeAllViews();
                    tabLeft = ((RelativeLayout) tab4.getParent()).getLeft() + tab4.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.layout4, null);
                    page.addView(view4);

                }
                break;
            case R.id.layout5:
                if (current != R.id.layout5) {
                    page.removeAllViews();
                    tabLeft = ((RelativeLayout) tab5.getParent()).getLeft() + tab5.getLeft() + tab5.getWidth() / 2;
                    endLeft = tabLeft - select_width / 2;
                    current = R.id.tab5;
                    top_select.setText(tab5.getText());
                    run = true;
                    View view5 = LayoutInflater.from(getApplicationContext()).inflate(R.layout.layout5, null);
                    page.addView(view5);


                }
                break;
            default:
                break;

        }
        //滑动效果
        if (run) {
            TranslateAnimation animation;
            animation = new TranslateAnimation(startLeft,endLeft-fristLeft,0,0);
            startLeft = endLeft - fristLeft;
            animation.setDuration(100);
            animation.setFillAfter(true);
            top_select.bringToFront();
            top_select.startAnimation(animation);
        }
    }

}

好了。记得在AndroidManifest.xml注册这个新建的Activity哦。

拿去学，其实没什么好玩的，都没实现滑动页面切换。