Android uses TabLayout to achieve dynamic sliding similar To Netease tabs

Android uses TabLayout to achieve dynamic sliding similar To Netease tabs

Previously, we used HorizontalScrollView to achieve a dynamic sliding effect similar To Netease tabs. For details, see the Android tab Dynamic Sliding effect. This article

Here we use TabLayout to achieve this effect. TabLayout is a control in the Android Design Support Library.
At the 2015 I/O conference, Google introduced more detailed Material Design specifications. At the same time, it also brought us a brand new Android Design Support Library. In this support Library, google provides us with more standardized MD design style controls. Most importantly, the Android Design Support Library is more compatible and can be directly compatible with Android 2.2.

First, let's take a look at the effect:

Next we will start to implement <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4NCjxwPjxzdHJvbmc + supervisor + sLrPC9wPg0KPHByZSBjbGFzcz0 = "brush: java;"> dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:22.2.0' compile 'com.android.support:design:22.2.0' compile 'com.android.support:recyclerview-v7:22.2.0' compile 'com.android.support:cardview-v7:22.2.0'}

Com. android. support: design: 22.2.0 is the Android Design Support Library we need to introduce. Secondly, we also introduce Recyclerview and Cardview. If you do not know these two controls, you can refer to the following two articles:

Android5.x RecyclerView and Android5.x CardView

2. AppBarLayout, Toolbar, and TabLayout
First look at the layout of the main interface (activity_tab_layout.xml)

<code class=" hljs avrasm"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E--><linearlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".TabLayoutActivity" android:orientation="vertical">    <android.support.design.widget.appbarlayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">        <android.support.v7.widget.toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_scrollflags="scroll|enterAlways" app:popuptheme="@style/ThemeOverlay.AppCompat.Light">        <android.support.design.widget.tablayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabindicatorcolor="#ADBE107E" app:tabmode="scrollable">        </android.support.design.widget.tablayout></android.support.v7.widget.toolbar></android.support.design.widget.appbarlayout>    <android.support.v4.view.viewpager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"></android.support.v4.view.viewpager></linearlayout></code>

AppBarLayout and Toolbar are used here. AppBarLayout is a newly added control of Android Design Support Library inherited from LinearLayout. It is used to combine Toolbar and TabLayout as a whole. Toolbar we will not talk about it here. If you are not familiar with it, you can read this article about parsing Android5.x Toolbar and Palette application.
The most critical aspect of this layout file is android. support. design. widget. app: tabMode = "scrollable" in the TabLayout label, which sets the tab mode to "slidable". Now let's remove this sentence to see the effect:

Because there are too many tabs (13 tabs), but they cannot be slide, they overlap.

Reference in java (TabLayoutActivity. java)

package com.example.liuwangshu.mytablayout;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.view.ViewPager;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.Toolbar;import java.util.ArrayList;import java.util.List;public class TabLayoutActivity extends AppCompatActivity {    private DrawerLayout mDrawerLayout;    private ViewPager mViewPager;    private TabLayout mTabLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_tab_layout);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        mViewPager = (ViewPager) findViewById(R.id.viewpager);        initViewPager();    }

InitViewPager method (TabLayoutActivity. java)

Private void initViewPager () {mTabLayout = (TabLayout) findViewById (R. id. tabs); List
  
   
Titles = new ArrayList <> (); titles. add ("selected"); titles. add ("Sports"); titles. add ("Barcelona"); titles. add ("shopping"); titles. add ("star"); titles. add ("video"); titles. add ("healthy"); titles. add ("inspirational"); titles. add ("image"); titles. add ("local"); titles. add ("Anime"); titles. add ("funny"); titles. add ("selected"); for (int I = 0; I
   
    
Fragments = new ArrayList <> (); for (int I = 0; I
    
   
  

Here we have set 13 titles and created corresponding TabLayout and Fragment, set the ViewPager adapter and TabLayout adapter, and associate TabLayout and ViewPager.
ListFragment code (ListFragment. java)

package com.example.liuwangshu.mytablayout;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v7.widget.LinearLayoutManager;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class ListFragment extends Fragment { private RecyclerView mRecyclerView; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { mRecyclerView = (RecyclerView) inflater.inflate(R.layout.list_fragment, container, false); return mRecyclerView; } @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); mRecyclerView.setLayoutManager(new LinearLayoutManager(mRecyclerView.getContext())); mRecyclerView.setAdapter(new RecyclerViewAdapter(getActivity())); }}

Here we use RecyclerView instead of ListView to see RecyclerViewAdapter (RecyclerViewAdapter. java)

package com.example.liuwangshu.mytablayout;import android.animation.Animator;import android.animation.AnimatorListenerAdapter;import android.animation.ObjectAnimator;import android.annotation.TargetApi;import android.content.Context;import android.content.Intent;import android.os.Build;import android.support.v7.widget.RecyclerView;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class RecyclerViewAdapter extends RecyclerView.Adapter  { private Context mContext; public RecyclerViewAdapter(Context mContext) { this.mContext = mContext; } @Override public RecyclerViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item_card_main, parent, false); return new ViewHolder(view); } @Override public void onBindViewHolder(final RecyclerViewAdapter.ViewHolder holder, int position) { final View view = holder.mView; view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { } }); } @Override public int getItemCount() { return 10; } public static class ViewHolder extends RecyclerView.ViewHolder { public final View mView; public ViewHolder(View view) { super(view); mView = view; } }} 

FragmentAdapter (FragmentAdapter. java)

package com.example.liuwangshu.mytablayout;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentStatePagerAdapter;import java.util.List;public class FragmentAdapter extends FragmentStatePagerAdapter { private List  mFragments; private List  mTitles; public FragmentAdapter(FragmentManager fm, List  fragments, List  titles) { super(fm); mFragments = fragments; mTitles = titles; } @Override public Fragment getItem(int position) { return mFragments.get(position); } @Override public int getCount() { return mFragments.size(); } @Override public CharSequence getPageTitle(int position) { return mTitles.get(position); }}    

Basically all the code has been mentioned. Of course, TabLayout can be implemented with a slightly complicated effect, so the simple implementation of TabLayout with 3 or 4 tabs is even more difficult, modify the initViewPager method of TabLayoutActivity (TabLayoutActivity. java)

Private void initViewPager () {mTabLayout = (TabLayout) findViewById (R. id. tabs); List  Titles = new ArrayList <> (); titles. add ("selected"); titles. add ("Sports"); titles. add ("Barcelona"); titles. add ("shopping"); for (int I = 0; I  Fragments = new ArrayList <> (); for (int I = 0; I   

We only keep four tabs, and then remove the app: tabMode = "scrollable" in the activity_tab_layout.xml android. support. design. widget. TabLayout tag"
Run the code to see the effect


Now, let's talk about the other controls provided by the Android Design Support Library.