Android 实现顶部导航

先把页面布置好，主要是用到viewpager
top1.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="50dp"
    android:background="@drawable/top1_bg" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="12dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            
            android:src="@drawable/actionbar_icon" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="12dp"
            android:textColor="#d3d3d3"
            android:textSize="18sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginRight="12dp"
        android:layout_centerVertical="true"
        android:orientation="horizontal" >
         <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/actionbar_search_icon" />
          <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/actionbar_add_icon" />
           <ImageView
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/actionbar_more_icon" />
    </LinearLayout>

</RelativeLayout>

top2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:background="#eee"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="37dp"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:id="@+id/ly_1"
            android:orientation="horizontal"
            android:gravity="center" >

            <TextView
                android:id="@+id/chat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="聊天"
                android:textColor="#008000" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:id="@+id/ly_2" >

            <TextView
                android:id="@+id/find"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="发现"
                android:textColor="#000000" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center" 
            android:id="@+id/ly_3">

            <TextView
                android:id="@+id/contact"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="通讯录"
                android:textColor="#000000" />
        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:id="@+id/id_iv_tabline"
        android:layout_width="100dp"
        android:layout_height="3dp"
        android:background="@drawable/tabline" />

</LinearLayout>

activity_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" >

    <include layout="@layout/top1" />

    <include
        android:layout_height="wrap_content"
        layout="@layout/top2" />

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

</LinearLayout>

MainActivity.java

package com.example.wx_main;

import java.util.ArrayList;
import java.util.List;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.Display;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.jauker.widget.BadgeView;

public class MainActivity extends FragmentActivity implements OnClickListener{

    private ViewPager mp;
    private List<Fragment> mDatas;
    private TextView t1;
    private TextView t2;
    private TextView t3;
    private BadgeView bv;
    private LinearLayout ly_1;
    private LinearLayout ly_2;
    private LinearLayout ly_3;
    
    private ImageView mTabline;
    private int mScreen1_3;

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

        initTabLine();
        mp = (ViewPager) findViewById(R.id.id_viewpager);
        ly_1 = (LinearLayout) findViewById(R.id.ly_1);
        ly_2 = (LinearLayout) findViewById(R.id.ly_2);
        ly_3 = (LinearLayout) findViewById(R.id.ly_3);
        t1 = (TextView) findViewById(R.id.chat);
        t2 = (TextView) findViewById(R.id.find);
        t3 = (TextView) findViewById(R.id.contact);
        initView();
        ly_1.setOnClickListener(this);
        ly_2.setOnClickListener(this);
        ly_3.setOnClickListener(this);
        
    }
    private void initTabLine()
    {
        mTabline = (ImageView) findViewById(R.id.id_iv_tabline);
        Display display = getWindow().getWindowManager().getDefaultDisplay();
        DisplayMetrics outMetrics = new DisplayMetrics();
        display.getMetrics(outMetrics);
        mScreen1_3 = outMetrics.widthPixels / 3;
        LayoutParams lp = mTabline.getLayoutParams();
        lp.width = mScreen1_3;
        mTabline.setLayoutParams(lp);
    }

    public void initView(){
        
        
        mDatas = new ArrayList<Fragment>();
        First f = new First();
        Second s = new Second();
        Third t = new Third();
        
        mDatas.add(f);
        mDatas.add(s);
        mDatas.add(t);
        
        MyAdapter mAdapter = new MyAdapter(getSupportFragmentManager(), mDatas);
        mp.setAdapter(mAdapter);
        
    
        mp.setOnPageChangeListener(new OnPageChangeListener() {
            
            @Override
            public void onPageSelected(int position) {
                resetTextView();
                switch (position) {
                case 0:
                    //第三方包 badgeView
                    if(bv!=null){
                        ly_1.removeView(bv);
                    }
                    bv = new BadgeView(MainActivity.this);
                    bv.setBadgeCount(99);
                    ly_1.addView(bv);                   
                    t1.setTextColor(Color.parseColor("#008000"));               
                    break;
                case 1:
                    t2.setTextColor(Color.parseColor("#008000"));                               
                    break;
                case 2:
                    t3.setTextColor(Color.parseColor("#008000"));           
                    break;
                default:
                    break;
                }
                
            }
            
            private void resetTextView() {
                t1.setTextColor(Color.BLACK);
                t2.setTextColor(Color.BLACK);
                t3.setTextColor(Color.BLACK);
            }

                @Override
                public void onPageScrolled(int position, float positionOffset,
                        int positionOffsetPx)
                {
                    Log.e("TAG", position + " , " + positionOffset + " , "
                            + positionOffsetPx);

                    LinearLayout.LayoutParams lp = (android.widget.LinearLayout.LayoutParams) mTabline
                            .getLayoutParams();

//                  if (mCurrentPageIndex == 0 && position == 0)// 0->1
//                  {
//                      lp.leftMargin = (int) (positionOffset * mScreen1_3 + mCurrentPageIndex
//                              * mScreen1_3);
//                  } else if (mCurrentPageIndex == 1 && position == 0)// 1->0
//                  {
//                      lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + (positionOffset - 1)
//                              * mScreen1_3);
//                  } else if (mCurrentPageIndex == 1 && position == 1) // 1->2
//                  {
//                      lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + positionOffset
//                              * mScreen1_3);
//                  } else if (mCurrentPageIndex == 2 && position == 1) // 2->1
//                  {
//                      lp.leftMargin = (int) (mCurrentPageIndex * mScreen1_3 + ( positionOffset-1)
//                              * mScreen1_3);
//                  }
                    lp.leftMargin = (int) ((position+positionOffset)*mScreen1_3);
                    mTabline.setLayoutParams(lp);

                }
                
            
            
            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub
                
            }
        });
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.ly_1:
            mp.setCurrentItem(0);
            break;
        case R.id.ly_2:
            mp.setCurrentItem(1);
            break;
        case R.id.ly_3:
            mp.setCurrentItem(2);
            break;

        default:
            break;
        }
        
    }
    
  

}

MyAdapter.java

package com.example.wx_main;

import java.util.List;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyAdapter extends FragmentPagerAdapter{



    private List<Fragment>fragList;
    private List<String>titleList;
    
    public MyAdapter(FragmentManager fm,List<Fragment> fragList) {
        super(fm);
        // TODO Auto-generated constructor stub
        this.fragList=fragList;
    }

    @Override
    public Fragment getItem(int arg0) {
        // TODO Auto-generated method stub
        return fragList.get(arg0);
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return fragList.size();
    }
    
    @Override
    public CharSequence getPageTitle(int position) {
        // TODO Auto-generated method stub
        return titleList.get(position);
    }
    

}

First/Second/Third.java

package com.example.wx_main;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class First extends Fragment{

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.tab01, container,false);
        }
    
}

tab01/tab02/tab03.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
   >
    
    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:textStyle="bold"
        android:textSize="20sp"
        android:text="This is the third fragment"
        />

</LinearLayout>

演示效果：


viewpager.gif
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,743评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,296评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,285评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,485评论 1赞 283
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,581评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,821评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,960评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,719评论 0赞 266
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,186评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,516评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,650评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,329评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,936评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,757评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,991评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,370评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,527评论 2赞 349

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,777评论 25赞 707
  • 基于《第一行代码》Activity学习
    1.当默认创建一个新项目时，开发工具会帮我们创建一个MainActivity.java，以下是用AndroidSt...
    AndrewCheung阅读 768评论 0赞 1
  • 今天
    1 杨绛先生去世 “我烤着生命之火取暖，火萎了，我也准备走了。”对她的了解止于《我们仨》，知道她是钱钟书口中“最贤...
    山茶花开阅读 188评论 0赞 0
  • 4.采摘数量
    4.采摘数量—武夷菜茶，移植后三年开采，水仙乌龙则须五年已如上述，开采开起至十一、二年其采量系与茶龄成正比例。十二...
    武夷天心正岩茶制作技艺传习中心阅读 587评论 0赞 0
  • 吟锦时
    一纸沉梦，你梦经年 我曾经在月亮河里见过你 在依然似去的清风 在暗香浮动的江树丛 我曾想过 给你一段长过年月久过山...
    Dodo子木阅读 201评论 0赞 0