仿網易用戶端實現頂部導航效果（ViewPager+Fragment），viewpagerfragment

仿網易用戶端實現頂部導航效果（ViewPager+Fragment），viewpagerfragment

為了實現這個效果我竟然用了兩天的時間，我真是呵呵了，廢話不多說直接開始整理。

這裡的Indicator是重寫的LinearLayout用來弄導覽列那個藍條的樣式以及位置的（這部分代碼是在別人那考過來的），代碼如下：

package vikicc.titletab;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.util.AttributeSet;import android.widget.LinearLayout;/** * Created by LiuWeiJie on 2015/7/20 0020. * Email:1031066280@qq.com */public class Indicator extends LinearLayout {    private Paint mPaint; // 畫指示符的paint    private int mTop; // 指示符的top    private int mLeft; // 指示符的left    private int mWidth; // 指示符的width    private int mHeight = 5; // 指示符的高度，固定了    private int mColor; // 指示符的顏色    private int mChildCount; // 子item的個數，用於計算指示符的寬度    public Indicator(Context context, AttributeSet attrs) {        super(context, attrs);        setBackgroundColor(Color.TRANSPARENT);  // 必須設定背景，否則onDraw不執行        // 擷取自訂屬性 指示符的顏色        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.Indicator, 0, 0);        mColor = ta.getColor(0, 0X0000FF);        ta.recycle();        // 初始化paint        mPaint = new Paint();        mPaint.setColor(Color.parseColor("#2EBADE"));        mPaint.setAntiAlias(true);    }    @Override    protected void onFinishInflate() {        super.onFinishInflate();        mChildCount = getChildCount();  // 擷取子item的個數    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        mTop = getMeasuredHeight(); // 測量的高度即指示符的頂部位置        int width = getMeasuredWidth(); // 擷取測量的總寬度        int height = mTop + mHeight; // 重新定義一下測量的高度        mWidth = width / mChildCount; // 指示符的寬度為總寬度/item的個數        setMeasuredDimension(width, height);    }    /**     * 指示符滾動     *     * @param position 現在的位置     * @param offset   位移量 0 ~ 1     */    public void scroll(int position, float offset) {        mLeft = (int) ((position + offset) * mWidth);        invalidate();    }    @Override    protected void onDraw(Canvas canvas) {        // 圈出一個矩形        Rect rect = new Rect(mLeft, mTop, mLeft + mWidth, mTop + mHeight);        canvas.drawRect(rect, mPaint); // 繪製該矩形        super.onDraw(canvas);    }}

然後再就是首頁面MainActivity這裡面重寫了一個FragmentPagerAdapter 用來控制Fragment切換的問題。

MainActivity：

package vikicc.titletab;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.util.Log;import android.view.View;import android.widget.TextView;import java.util.ArrayList;import java.util.List;public class MainActivity extends FragmentActivity implements View.OnClickListener {    private Indicator mIndicator;    private TextView mTabOne;    private TextView mTabTwo;    private ViewPager mContainer;    List<Fragment> fragmentList = new ArrayList<Fragment>();    private ArrayList<TextView> mViews = new ArrayList<TextView>();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mIndicator = (Indicator) findViewById(R.id.indicator);        mContainer = (ViewPager) findViewById(R.id.container);        mTabOne = (TextView) findViewById(R.id.tab_one);        mTabTwo = (TextView) findViewById(R.id.tab_two);        mTabOne.setOnClickListener(this);        mTabTwo.setOnClickListener(this);        fragmentList.add(new FirstFragment());        fragmentList.add(new SecondFragment());        mContainer.setAdapter(new MyViewAdapter(this.getSupportFragmentManager()));        mContainer.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageSelected(int position) {            }            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {                mIndicator.scroll(position, positionOffset);//控制捲軸位置            }            @Override            public void onPageScrollStateChanged(int position) {            }        });    }    public class MyViewAdapter extends FragmentPagerAdapter {        public MyViewAdapter(FragmentManager fm) {            super(fm);        }        @Override        public Fragment getItem(int i) {            return fragmentList.get(i);        }        @Override        public int getCount() {            return fragmentList.size();        }    }    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.tab_one:                mContainer.setCurrentItem(0);                break;            case R.id.tab_two:                mContainer.setCurrentItem(1);                break;        }    }}

activity_main.xml的代碼：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:indicator="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context=".MainActivity">    <vikicc.titletab.Indicator        android:id="@+id/indicator"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:paddingBottom="10dip"        android:paddingTop="10dip"        android:weightSum="2"        indicator:color="#FFFF0000">        <LinearLayout            android:id="@+id/short_message_ll_one"            android:layout_width="0dip"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center_vertical|center_horizontal">            <TextView                android:id="@+id/tab_one"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:gravity="center_horizontal"                android:text="TAB1" />        </LinearLayout>        <LinearLayout            android:id="@+id/short_message_ll_two"            android:layout_width="0dip"            android:layout_height="wrap_content"            android:layout_weight="1"            android:gravity="center_vertical|center_horizontal">            <TextView                android:id="@+id/tab_two"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:gravity="center_horizontal"                android:text="TAB2" />        </LinearLayout>    </vikicc.titletab.Indicator>    <android.support.v4.view.ViewPager        android:id="@+id/container"        android:layout_width="match_parent"        android:layout_height="match_parent">    </android.support.v4.view.ViewPager></LinearLayout>

然後其他的Fragment就按照你自己需要的建一下然後在MainActivity裡面添加一下就ok了。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。