High imitation of wechat bottom navigation bar, simple and easy to understand, less code

I don’t have much work in the company these days, so I wrote about the navigation of gradual change at the bottom of wechat.textviewIs the use ofArgbEvaluatorAchieve color gradient effect, image gradient is customimageviewTo set the opacity for gradient

Advantages of this code compared with other implementations:

Take a look at the renderings first

Let’s take a lookArgbEvaluatorThe use ofArgbEvaluatorCommonly known as color calculator, for example chestnut

float percentage = (float)i/100; ArgbEvaluator arGB = new ArgbEvaluator(); int color = (int)argb.evaluate(percentage, Color.parseColor("#ffffff"),Color.parseColor("#000000")); findViewById(R.id.tv_simple).setBackgroundColor(color);Copy the code

Let’s take a look at custom controls. You can customize your imageView without having to set SRC or backgroud in your XML

In the setImages, two images will be passed in, one is normal, one is selected. So this is essentially drawing an image on the Image transformPage, and it sets the transparency based on the size of the offset, so it’s a gradient.

public class MyImageView extends ImageView { private Paint mPaint; private Bitmap mSelectedIcon; private Bitmap mNormalIcon; private Rect mSelectedRect; private Rect mNormalRect; private int mSelectedAlpha = 0; public MyImageView(Context context) { super(context); } public MyImageView(Context context, AttributeSet attrs) { super(context, attrs); } public MyImageView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public final void setImages(int normal, int selected) { this.mNormalIcon = createBitmap(normal); This. mSelectedIcon = createBitmap(selected); int width = (int)getResources().getDimension(R.dimen.tab_image_weith); int heigh = (int)getResources().getDimension(R.dimen.tab_image_heigh); this.mNormalRect = new Rect(0, 0, width, heigh); This. mSelectedRect = new Rect(0, 0, width, heigh); this.mSelectedRect = new Rect(0, 0, width, heigh); this.mPaint = new Paint(); / / get the brush} private Bitmap createBitmap (int resId) {return BitmapFactory. DecodeResource (getResources (), resId); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (this.mPaint == null) { return; } this.mPaint.setAlpha(255 - this.mSelectedAlpha); canvas.drawBitmap(this.mNormalIcon, null, this.mNormalRect, this.mPaint); // Start drawing on the artboard bitmap this.mpaint. SetAlpha (this.mselectedalpha) canvas.drawBitmap(this.mSelectedIcon, null, this.mSelectedRect, this.mPaint); } public final void changeSelectedAlpha(int alpha) {} public final void changeSelectedAlpha(int alpha) {} public final void changeSelectedAlpha(int alpha) Public final void transformPage(float offset) {this.mselecteDalpha = (int) (255 * (1-offset)); invalidate(); // This method call will redraw the onDraw method}}Copy the code

Then let’s look at XML. XML layout is pretty easy to read. Yes, it’s the one aboveViewPgaerThe following aLinearLayoutWrapped inside

<LinearLayout 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:layout_width="match_parent" android:layout_height="match_parent" tools:context="kitrobot.com.wechat_bottom_navigation.MainActivity" android:orientation="vertical"> <android.support.v4.view.ViewPager android:layout_weight="1" android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="0dp"></android.support.v4.view.ViewPager> <LinearLayout android:paddingTop="10dp" android:background="#ffffff" android:orientation="horizontal" android:id="@+id/rg" android:layout_width="match_parent" android:layout_height="60dp"> <LinearLayout android:id="@+id/ll_home" android:layout_weight="1" android:layout_width="0dp" android:layout_height="match_parent" android:orientation="vertical"> <kitrobot.com.wechat_bottom_navigation.view.MyImageView android:layout_gravity="center" android:id="@+id/iv1" Android :layout_width="30dp" Android :layout_height="30dp"/> <TextView Android :gravity="center" Android :text=" wechat" android:button="@null" android:id="@+id/rb1" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout> <LinearLayout android:id="@+id/ll_categroy" android:layout_weight="1" android:layout_width="0dp" android:layout_height="match_parent" android:orientation="vertical"> <kitrobot.com.wechat_bottom_navigation.view.MyImageView android:layout_gravity="center" android:id="@+id/iv2" Android :layout_width="30dp" Android :layout_height="30dp"/> <TextView Android :gravity="center" Android :text=" android:button="@null" android:id="@+id/rb2" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout> <LinearLayout android:id="@+id/ll_find" android:layout_weight="1" android:layout_width="0dp" android:layout_height="match_parent" android:orientation="vertical"> <kitrobot.com.wechat_bottom_navigation.view.MyImageView android:layout_gravity="center" android:id="@+id/iv3" Android :layout_width="30dp" Android :layout_height="30dp"/> <TextView Android :gravity="center" Android :text=" found" android:button="@null" android:id="@+id/rb3" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout> <LinearLayout android:id="@+id/ll_mine" android:layout_weight="1" android:layout_width="0dp" android:layout_height="match_parent" android:orientation="vertical"> <kitrobot.com.wechat_bottom_navigation.view.MyImageView android:layout_gravity="center" android:id="@+id/iv4" android:layout_width="@dimen/tab_image_weith" android:layout_height="@dimen/tab_image_heigh"/> <TextView Android :gravity="center" Android :button: "@null" Android :id="@+id/rb4" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout> </LinearLayout> </LinearLayout>Copy the code

Finally, if you look at the logic of the code, you’ll seesoSimple notes of what are all their own look absolutely OK

public class MainActivity extends AppCompatActivity implements View.OnClickListener { private ViewPager mViewPager; private MyImageView mIvHome; // TAB message imageView private TextView mTvHome; // TAB message imageView private MyImageView mIvCategory; // TAB directory imageView private TextView mTvCategory; private MyImageView mIvFind; // TAB found imageView private TextView mTvFind; private MyImageView mIvMine; // TAB my imageView private TextView mTvMine; private ArrayList<Fragment> mFragments; private ArgbEvaluator mColorEvaluator; private int mTextNormalColor; Private int mTextSelectedColor; // The selected font color private LinearLayout mLinearLayoutHome; private LinearLayout mLinearLayoutCategory; private LinearLayout mLinearLayoutFind; private LinearLayout mLinearLayoutMine; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initColor(); // Select the color initView() of the unselected textView; // initialize the controller initData(); // Initialize data (i.e., fragments) initSelectImage(); // Initialize the gradient image aboutViewpager(); // about viewpager setListener(); Private void initSelectImage() {mivhome.setimages (r.rawable.home_normal, R.drawable.home_selected); mIvCategory.setImages(R.drawable.category_normal, R.drawable.category_selected); mIvFind.setImages(R.drawable.find_normal, R.drawable.find_selected); mIvMine.setImages(R.drawable.mine_normal, R.drawable.mine_selected); } private void initColor() { mTextNormalColor = getResources().getColor(R.color.main_bottom_tab_textcolor_normal); mTextSelectedColor = getResources().getColor(R.color.main_bottom_tab_textcolor_selected); } private void setListener () {/ / the following TAB Settings. Click to monitor mLinearLayoutHome setOnClickListener (this); mLinearLayoutCategory.setOnClickListener(this); mLinearLayoutFind.setOnClickListener(this); mLinearLayoutMine.setOnClickListener(this); mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPs) { setTabTextColorAndImageView(position,positionOffset); } @override public void onPageSelected(int position) {} @override public void onPageSelected(int position) onPageScrollStateChanged(int state) { } }); } private void setTabTextColorAndImageView(int position, float positionOffset) { mColorEvaluator = new ArgbEvaluator(); / / according to the offset to get int evaluateCurrent = (int) mColorEvaluator. Evaluate (positionOffset mTextSelectedColor, mTextNormalColor); EvaluateThe =(int) evaluate(positionOffset, mTextNormalColor, mTextSelectedColor); // Switch (position) {case 0: mtvhome.settextColor (evaluateCurrent); // Set the message font color mtvcategory.settextColor (evaluateThe); // Set the address book's font color to mivhome.TransformPage (positionOffset); / / set the news picture mIvCategory. The transformPage (1 - positionOffset); // Set the address book to break; case 1: mTvCategory.setTextColor(evaluateCurrent); mTvFind.setTextColor(evaluateThe); mIvCategory.transformPage(positionOffset); mIvFind.transformPage(1-positionOffset); break; case 2: mTvFind.setTextColor(evaluateCurrent); mTvMine.setTextColor(evaluateThe); mIvFind.transformPage(positionOffset); mIvMine.transformPage(1-positionOffset); break; } } private void initData() { mFragments = new ArrayList<>(); mFragments.add(new HomeFragment()); mFragments.add(new CategoryFragment()); mFragments.add(new FindFragment()); mFragments.add(new MineFragment()); } private void aboutViewpager() { MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager(), mFragments); // Initialize adapter mviewPager. setAdapter(myAdapter); Private void initView() {mLinearLayoutHome = (LinearLayout) findViewById(R.id.l_HOME); mLinearLayoutCategory = (LinearLayout) findViewById(R.id.ll_categroy); mLinearLayoutFind = (LinearLayout) findViewById(R.id.ll_find); mLinearLayoutMine = (LinearLayout) findViewById(R.id.ll_mine); mViewPager = (ViewPager) findViewById(R.id.vp); mIvHome = (MyImageView) findViewById(R.id.iv1); // TAB imageView mTvHome = (TextView) findViewById(r.i.b1); // mIvCategory = (MyImageView) findViewById(r.i.iv2); Imageview mTvCategory = (TextView) findViewById(r.i.rb2); // mIvFind = (MyImageView) findViewById(r.i.iv3); // TAB finds imageView mTvFind = (TextView) findViewById(r.i.rb3); // mIvMine = (MyImageView) findViewById(R.i.iv4); // TAB I imageView mTvMine = (TextView) findViewById(r.i.r4); } @override public void onClick(View View) {switch (view.getid ()) {case r.i.l_home: mViewPager.setCurrentItem(0); break; case R.id.ll_categroy: mViewPager.setCurrentItem(1); break; case R.id.ll_find: mViewPager.setCurrentItem(2); break; case R.id.ll_mine: mViewPager.setCurrentItem(3); break; }}}Copy the code

Some students will ask: why not initialize TAB font color and the picture of the imageview, actually I also is only recently discovered, and when the interface to complete the viewpager will automatically load the first page and viewpager. OnPageChangeListener in OnPageScrolled is automatically executed once, other methods are not executed

Finally, present the source location