AndroidAPP頂部導航欄Tab點擊跟左右滑動實現切換界面

AndroidAPP頂部導航欄Tab點擊和左右滑動實現切換界面

 

APP市場中大多數資訊App都有導航菜單，導航菜單是一組標簽的集合，在新聞APP中，每個標簽標示一個類別，對應下面ViewPager控件的一個分頁面。

隨著版本迭代的更新，帶來了許多控件，案例主要用到了TabLayout，ViewPage，RecyclerView，CardView等新控件。

效果如圖：

 

以前的實現方法是 ：ViewPagerIndicator + Fragment + ViewPager 相結合來實現

請看博客： ViewPagerIndicator實現新聞App導航欄。

今天主要講的是另一種實現方式：TabLayout+ Fragment + ViewPager

 

添加程序所需要的依賴：

 

 compile 'com.android.support:design:23.2.1'
 compile 'com.android.support:recyclerview-v7:23.1.1'
 compile 'com.android.support:cardview-v7:23.2.1'

主布局

 

 

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#E0E0E0"
        app:tabIndicatorColor="@color/ind_red"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/material_orange"
        app:tabTextColor="@android:color/black"
        app:tabIndicatorHeight="5dp"
        app:tabTextAppearance="@style/TabStyle"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/tab_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

 

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#E0E0E0"
        app:tabIndicatorColor="@color/ind_red"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/material_orange"
        app:tabTextColor="@android:color/black"
        app:tabIndicatorHeight="5dp"
        app:tabTextAppearance="@style/TabStyle"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/tab_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/white" />

</LinearLayout>

 

 

Tablayout控件包含很多屬性 例如 tabIndicatorColor：菜單下方移動的橫線的顏色 屬性很多就不一 一介紹了，代碼中有注釋。

Activity.Java

public class TabLessActivity extends AppCompatActivity {

    private TabLayout tabLayout = null;

    private ViewPager viewPager;

    private Fragment[] mFragmentArrays = new Fragment[5];

    private String[] mTabTitles = new String[5];

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.tab_layout);
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        viewPager = (ViewPager) findViewById(R.id.tab_viewpager);
        initView();
    }

    private void initView() {
        mTabTitles[0] = "推薦";
        mTabTitles[1] = "熱點";
        mTabTitles[2] = "科技";
        mTabTitles[3] = "體育";
        mTabTitles[4] = "健康";
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        //設置tablayout距離上下左右的距離
        //tab_title.setPadding(20,20,20,20);
        mFragmentArrays[0] = TabFragment.newInstance();
        mFragmentArrays[1] = TabFragment.newInstance();
        mFragmentArrays[2] = TabFragment.newInstance();
        mFragmentArrays[3] = TabFragment.newInstance();
        mFragmentArrays[4] = TabFragment.newInstance();
        PagerAdapter pagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(pagerAdapter);
        //將ViewPager和TabLayout綁定
        tabLayout.setupWithViewPager(viewPager);
    }
}

Fragment.java

 

public class TabFragment extends Fragment {

    public static Fragment newInstance() {
        TabFragment fragment = new TabFragment();
        return fragment;
    }
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.fragment_tab, container, false);
        RecyclerView recyclerView = (RecyclerView) rootView.findViewById(R.id.recycler);
        LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setAdapter(new RecyclerAdapter());
        return rootView;
    }
}

 

技術在更新，我們在進步,TabLayout實現tab導航效果比以前那些方法來的更加簡單方便。

 

 

源碼點擊下載