Implement top navigation effects (ViewPager + Fragment) and viewpagerfragment using the Netease client.

Implement top navigation effects (ViewPager + Fragment) and viewpagerfragment using the Netease client.

It took me two days to achieve this.

Indicator here is the rewritten LinearLayout used to get the style and position of the Blue Bar in the navigation bar (this part of the code was tested by someone else). The Code is as follows:

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 of the indicator; // top private int mLeft of the indicator; // left private int mWidth of the indicator; // width private int mHeight = 5; // height of the indicator, fixed with private int mColor; // the color of the indicator private int mChildCount; // The number of sub-items, used to calculate the width of the Indicator public Indicator (Context context, AttributeSet attrs) {super (context, attrs); setBackgroundColor (Color. TRANSPARENT); // The background must be set; otherwise, the onDraw will not execute. // obtain the custom attribute indicator. The color of TypedArray ta = context. obtainStyledAttributes (attrs, R. styleable. indicator, 0, 0); mColor = ta. getColor (0, 0X0000FF); ta. recycle (); // initialize paint mPaint = new Paint (); mPaint. setColor (Color. parseColor ("#2 EBADE"); mPaint. setAntiAlias (true) ;}@ Override protected void onFinishInflate () {super. onFinishInflate (); mChildCount = getChildCount (); // obtain the number of sub-items} @ Override protected void onMeasure (in T widthMeasureSpec, int heightMeasureSpec) {super. onMeasure (widthMeasureSpec, heightMeasureSpec); mTop = getMeasuredHeight (); // The measured height is the top position of the indicator int width = getMeasuredWidth (); // obtain the total width of the measurement. int height = mTop + mHeight; // redefine the measurement height. mWidth = width/mChildCount; // The indicator width is the total width/number of items setMeasuredDimension (width, height );} /*** indicator scroll ** @ param position current position * @ param offset 0 ~ 1 */public void scroll (int position, float offset) {mLeft = (int) (position + offset) * mWidth); invalidate ();} @ Override protected void onDraw (Canvas canvas) {// enclose a rectangular Rect rect = new Rect (mLeft, mTop, mLeft + mWidth, mTop + mHeight); canvas. drawRect (rect, mPaint); // draw this rectangle super. onDraw (canvas );}}

Then, the MainActivity on the home page overwrites A FragmentPagerAdapter to control Fragment switching.

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. getsuppfrfragmentmanager (); 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); // control the scroll bar position} @ 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 code:

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

Then the other Fragment will be built according to your own needs, and then added in MainActivity will be OK.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.